Convert StatusBarRegistration to use components field (#1598)

* Convert StatusBarRegistration to use components field

- More similar to all other *Registration types for extensions

- Simpler fix for using the components.Icon type, now accepts functions
  that return component instance like all other *Registration types

- Kept old fix for backwards compatability

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix docs

Signed-off-by: Sebastian Malton <sebastian@malton.name>

docs/extensions/capabilities/common-capabilities.md

@@ -216,12 +216,14 @@ import { Component, LensRendererExtension, Navigation } from "@k8slens/extension
 export default class ExampleExtension extends LensRendererExtension {
   statusBarItems = [
     {
-      item: (
+      components: {
+        Item: (
           <div className="flex align-center gaps hover-highlight" onClick={() => this.navigate("/example-page")} >
             <Component.Icon material="favorite" />
           </div>
         )
       }
+    }
   ]
 }
 

docs/extensions/guides/generator.md

@@ -42,7 +42,7 @@ Next, you'll try changing the way the new menu item appears in the UI. You'll ch
 
 Open `my-first-lens-ext/renderer.tsx` and change the value of `title` from `"Hello World"` to `"Hello Lens"`:
 
-```tsx
+```typescript
 clusterPageMenus = [
     {
         target: { pageId: "hello" },

docs/extensions/guides/renderer-extension.md

@@ -216,12 +216,20 @@ export default class ExampleExtension extends LensRendererExtension {
 }
 ```
 
-The above defines two cluster pages and three cluster page menu objects. The three cluster page menu objects include one parent menu item and two sub menu items. Parent items require an `id` value, whereas sub items require a `parentId` value. The value of the sub item `parentId` will match the value of the corresponding parent item `id`. Parent items don't require a `target` value. Assign values to the remaining properties as explained above. 
+The above defines two cluster pages and three cluster page menu objects.
+The cluster page definitions are straightforward.
+The three cluster page menu objects include one parent menu item and two sub menu items.
+The first cluster page menu object defines the parent of a foldout submenu.
+Setting the `id` field in a cluster page menu definition implies that it is defining a foldout submenu.
+Also note that the `target` field is not specified (it is ignored if the `id` field is specified).
+This cluster page menu object specifies the `title` and `components` fields, which are used in displaying the menu item in the cluster dashboard sidebar.
+Initially the submenu is hidden.
+Activating this menu item toggles on and off the appearance of the submenu below it.
+The remaining two cluster page menu objects define the contents of the submenu.
+A cluster page menu object is defined to be a submenu item by setting the `parentId` field to the id of the parent of a foldout submenu, `"example"` in this case.
 
 This is what the example will look like, including how the menu item will appear in the secondary left nav:
 
-![clusterPageMenus](images/clusterpagemenus.png)
-
 ### `globalPages`
 
 Global pages are independent of the cluster dashboard and can fill the entire Lens UI. Their primary use is to display information and provide functionality across clusters, including customized data and functionality unique to your extension.
@@ -397,13 +405,19 @@ The properties of the `clusterFeatures` array objects are defined as follows:
 
 The four methods listed above are defined as follows:
 
-* The `install()` method installs Kubernetes resources using the `applyResources()` method, or by directly accessing the [Kubernetes API](../api/README.md). This method is typically called when a user indicates that they want to install the feature (i.e., by clicking **Install** for the feature in the cluster settings page).
+* The `install()` method installs Kubernetes resources using the `applyResources()` method, or by directly accessing the [Kubernetes API](../api/README.md).
+This method is typically called when a user indicates that they want to install the feature (i.e., by clicking **Install** for the feature in the cluster settings page).
 
-* The `upgrade()` method upgrades the Kubernetes resources already installed, if they are relevant to the feature. This method is typically called when a user indicates that they want to upgrade the feature (i.e., by clicking **Upgrade** for the feature in the cluster settings page).
+* The `upgrade()` method upgrades the Kubernetes resources already installed, if they are relevant to the feature.
+This method is typically called when a user indicates that they want to upgrade the feature (i.e., by clicking **Upgrade** for the feature in the cluster settings page).
 
-* The `uninstall()` method uninstalls Kubernetes resources using the [Kubernetes API](../api/README.md). This method is typically called when a user indicates that they want to uninstall the feature (i.e., by clicking **Uninstall** for the feature in the cluster settings page).
+* The `uninstall()` method uninstalls Kubernetes resources using the [Kubernetes API](../api/README.md).
+This method is typically called when a user indicates that they want to uninstall the feature (i.e., by clicking **Uninstall** for the feature in the cluster settings page).
 
-* The `updateStatus()` method provides the current status information in the `status` field of the `ClusterFeature.Feature` parent class. Lens periodically calls this method to determine details about the feature's current status. Consider using the following properties with `updateStatus()`:
+* The `updateStatus()` method provides the current status information in the `status` field of the `ClusterFeature.Feature` parent class.
+Lens periodically calls this method to determine details about the feature's current status.
+The implementation of this method should uninstall Kubernetes resources using the Kubernetes api (`K8sApi`)
+Consider using the following properties with `updateStatus()`:
 
     * `status.currentVersion` and `status.latestVersion` may be displayed by Lens in the feature's description.
 
@@ -597,7 +611,8 @@ export default class HelpExtension extends LensRendererExtension {
 
   statusBarItems = [
     {
-      item: (
+      components: {
+        Item: (
           <div
             className="flex align-center gaps"
             onClick={() => this.navigate("help")}
@@ -605,7 +620,8 @@ export default class HelpExtension extends LensRendererExtension {
             <HelpIcon />
             My Status Bar Item
           </div>
-      ),
+        )
+      },
     },
   ];
 }
@@ -613,7 +629,7 @@ export default class HelpExtension extends LensRendererExtension {
 
 The properties of the `statusBarItems` array objects are defined as follows:
 
-* `item` specifies the `React.Component` that will be shown on the status bar. By default, items are added starting from the right side of the status bar. Due to limited space in the status bar, `item` will typically specify only an icon or a short string of text. The example above reuses the `HelpIcon` from the [`globalPageMenus` guide](#globalpagemenus). 
+* `Item` specifies the `React.Component` that will be shown on the status bar. By default, items are added starting from the right side of the status bar. Due to limited space in the status bar, `Item` will typically specify only an icon or a short string of text. The example above reuses the `HelpIcon` from the [`globalPageMenus` guide](#globalpagemenus).
 * `onClick` determines what the `statusBarItem` does when it is clicked. In the example, `onClick` is set to a function that calls the `LensRendererExtension` `navigate()` method. `navigate` takes the `id` of the associated global page as a parameter. Thus, clicking the status bar item activates the associated global pages.
 
 ### `kubeObjectMenuItems`
@@ -757,9 +773,20 @@ export class NamespaceDetailsItem extends React.Component<Component.KubeObjectDe
 }
 ```
 
-Since `NamespaceDetailsItem` extends `React.Component<Component.KubeObjectDetailsProps<K8sApi.Namespace>>`, it can access the current namespace object (type `K8sApi.Namespace`) through `this.props.object`. You can query this object for many details about the current namespace. In the example above, `componentDidMount()` gets the namespace's name using the `K8sApi.Namespace` `getName()` method. Use the namespace's name to limit the list of pods only to those in the relevant namespace. To get this list of pods, this example uses the Kubernetes pods API `K8sApi.podsApi.list()` method. The `K8sApi.podsApi` is automatically configured for the active cluster.
+Since `NamespaceDetailsItem` extends `React.Component<Component.KubeObjectDetailsProps<K8sApi.Namespace>>`, it can access the current namespace object (type `K8sApi.Namespace`) through `this.props.object`.
+You can query this object for many details about the current namespace.
+In the example above, `componentDidMount()` gets the namespace's name using the `K8sApi.Namespace` `getName()` method.
+Use the namespace's name to limit the list of pods only to those in the relevant namespace.
+To get this list of pods, this example uses the Kubernetes pods API `K8sApi.podsApi.list()` method.
+The `K8sApi.podsApi` is automatically configured for the active cluster.
 
-Note that `K8sApi.podsApi.list()` is an asynchronous method. Getting the pods list should occur prior to rendering the `NamespaceDetailsItem`. It is a common technique in React development to await async calls in `componentDidMount()`. However, `componentDidMount()` is called right after the first call to `render()`. In order to effect a subsequent `render()` call, React must be made aware of a state change. Like in the [`appPreferences` guide](#apppreferences), [`mobx`](https://mobx.js.org/README.html) and [`mobx-react`](https://github.com/mobxjs/mobx-react#mobx-react) are used to ensure `NamespaceDetailsItem` renders when the pods list updates. This is done simply by marking the `pods` field as an `observable` and the `NamespaceDetailsItem` class itself as an `observer`.
+Note that `K8sApi.podsApi.list()` is an asynchronous method.
+Getting the pods list should occur prior to rendering the `NamespaceDetailsItem`.
+It is a common technique in React development to await async calls in `componentDidMount()`.
+However, `componentDidMount()` is called right after the first call to `render()`.
+In order to effect a subsequent `render()` call, React must be made aware of a state change.
+Like in the [`appPreferences` guide](#apppreferences), [`mobx`](https://mobx.js.org/README.html) and [`mobx-react`](https://github.com/mobxjs/mobx-react#mobx-react) are used to ensure `NamespaceDetailsItem` renders when the pods list updates.
+This is done simply by marking the `pods` field as an `observable` and the `NamespaceDetailsItem` class itself as an `observer`.
 
 Finally, the `NamespaceDetailsItem` renders using the `render()` method.
 Details are placed in drawers, and using `Component.DrawerTitle` provides a separator from details above this one.

docs/extensions/testing-and-publishing/testing.md

@@ -10,7 +10,7 @@ For example, I have a component `GlobalPageMenuIcon` and want to test if `props.
 
 My component `GlobalPageMenuIcon`
 
-```tsx
+```typescript
 import React from "react"
 import { Component: { Icon } } from "@k8slens/extensions";
 

src/extensions/registries/status-bar-registry.ts

@@ -3,7 +3,18 @@
 import React from "react";
 import { BaseRegistry } from "./base-registry";
 
-export interface StatusBarRegistration {
+interface StatusBarComponents {
+  Item?: React.ComponentType;
+}
+
+interface StatusBarRegistrationV2 {
+  components: StatusBarComponents;
+}
+
+export interface StatusBarRegistration extends StatusBarRegistrationV2 {
+  /**
+   * @deprecated use components.Item instead
+   */
   item?: React.ReactNode;
 }
 

src/renderer/components/cluster-manager/bottom-bar.test.tsx

@@ -14,14 +14,19 @@ describe("<BottomBar />", () => {
     expect(container).toBeInstanceOf(HTMLElement);
   });
 
-  // some defensive testing
-  it("renders w/o errors when .getItems() returns edge cases", async () => {
+  it("renders w/o errors when .getItems() returns unexpected (not type complient) data", async () => {
     statusBarRegistry.getItems = jest.fn().mockImplementationOnce(() => undefined);
     expect(() => render(<BottomBar />)).not.toThrow();
+    statusBarRegistry.getItems = jest.fn().mockImplementationOnce(() => "hello");
+    expect(() => render(<BottomBar />)).not.toThrow();
+    statusBarRegistry.getItems = jest.fn().mockImplementationOnce(() => 6);
+    expect(() => render(<BottomBar />)).not.toThrow();
     statusBarRegistry.getItems = jest.fn().mockImplementationOnce(() => null);
     expect(() => render(<BottomBar />)).not.toThrow();
     statusBarRegistry.getItems = jest.fn().mockImplementationOnce(() => []);
     expect(() => render(<BottomBar />)).not.toThrow();
+    statusBarRegistry.getItems = jest.fn().mockImplementationOnce(() => [{}]);
+    expect(() => render(<BottomBar />)).not.toThrow();
     statusBarRegistry.getItems = jest.fn().mockImplementationOnce(() => { return {};});
     expect(() => render(<BottomBar />)).not.toThrow();
   });

src/renderer/components/cluster-manager/bottom-bar.tsx

@@ -4,16 +4,48 @@ import React from "react";
 import { observer } from "mobx-react";
 import { Icon } from "../icon";
 import { workspaceStore } from "../../../common/workspace-store";
-import { statusBarRegistry } from "../../../extensions/registries";
+import { StatusBarRegistration, statusBarRegistry } from "../../../extensions/registries";
 import { CommandOverlay } from "../command-palette/command-container";
 import { ChooseWorkspace } from "../+workspaces";
 
 @observer
 export class BottomBar extends React.Component {
+  renderRegisteredItem(registration: StatusBarRegistration) {
+    const { item } = registration;
+
+    if (item) {
+      return typeof item === "function" ? item() : item;
+    }
+
+    return <registration.components.Item />;
+  }
+
+  renderRegisteredItems() {
+    const items = statusBarRegistry.getItems();
+
+    if (!Array.isArray(items)) {
+      return;
+    }
+
+    return (
+      <div className="extensions box grow flex gaps justify-flex-end">
+        {items.map((registration, index) => {
+          if (!registration?.item && !registration?.components?.Item) {
+            return;
+          }
+
+          return (
+            <div className="flex align-center gaps item" key={index}>
+              {this.renderRegisteredItem(registration)}
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+
   render() {
     const { currentWorkspace } = workspaceStore;
-    // in case .getItems() returns undefined
-    const items = statusBarRegistry.getItems() ?? [];
 
     return (
       <div className="BottomBar flex gaps">
@@ -21,20 +53,7 @@ export class BottomBar extends React.Component {
           <Icon smallest material="layers"/>
           <span className="workspace-name" data-test-id="current-workspace-name">{currentWorkspace.name}</span>
         </div>
-        <div className="extensions box grow flex gaps justify-flex-end">
-          {Array.isArray(items) && items.map(({ item }, index) => {
-            if (!item) return;
-
-            return (
-              <div
-                className="flex align-center gaps item"
-                key={index}
-              >
-                {typeof item === "function" ? item() : item}
-              </div>
-            );
-          })}
-        </div>
+        {this.renderRegisteredItems()}
       </div>
     );
   }