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>

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>
     );
   }