Add <BottomBar /> support rendering if item is a function (#1606)

* Support rendering if item is a function

Signed-off-by: Hung-Han (Henry) Chen <1474479+chenhunghan@users.noreply.github.com>

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

@@ -0,0 +1,52 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import "@testing-library/jest-dom/extend-expect";
+
+import { BottomBar } from "./bottom-bar";
+jest.mock("../../../extensions/registries");
+import { statusBarRegistry } from "../../../extensions/registries";
+
+describe("<BottomBar />", () => {
+
+  it("renders w/o errors", () => {
+    const { container } = render(<BottomBar />);
+
+    expect(container).toBeInstanceOf(HTMLElement);
+  });
+
+  // some defensive testing
+  it("renders w/o errors when .getItems() returns edge cases", async () => {
+    statusBarRegistry.getItems = jest.fn().mockImplementationOnce(() => undefined);
+    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(() => { return {};});
+    expect(() => render(<BottomBar />)).not.toThrow();
+  });
+
+  it("renders items [{item: React.ReactNode}] (4.0.0-rc.1)", async () => {
+    const testId = "testId";
+    const text = "heee";
+
+    statusBarRegistry.getItems = jest.fn().mockImplementationOnce(() => [
+      { item: <span data-testid={testId} >{text}</span> }
+    ]);
+    const { getByTestId } = render(<BottomBar />);
+
+    expect(await getByTestId(testId)).toHaveTextContent(text);
+  });
+
+  it("renders items [{item: () => React.ReactNode}] (4.0.0-rc.1+)", async () => {
+    const testId = "testId";
+    const text = "heee";
+
+    statusBarRegistry.getItems = jest.fn().mockImplementationOnce(() => [
+      { item: () => <span data-testid={testId} >{text}</span> }
+    ]);
+    const { getByTestId } = render(<BottomBar />);
+
+    expect(await getByTestId(testId)).toHaveTextContent(text);
+  });
+});

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

@@ -11,6 +11,8 @@ import { statusBarRegistry } from "../../../extensions/registries";
 export class BottomBar extends React.Component {
   render() {
     const { currentWorkspace } = workspaceStore;
+    // in case .getItems() returns undefined
+    const items = statusBarRegistry.getItems() ?? [];
 
     return (
       <div className="BottomBar flex gaps">
@@ -22,10 +24,17 @@ export class BottomBar extends React.Component {
           htmlFor="current-workspace"
         />
         <div className="extensions box grow flex gaps justify-flex-end">
-          {statusBarRegistry.getItems().map(({ item }, index) => {
+          {Array.isArray(items) && items.map(({ item }, index) => {
             if (!item) return;
 
-            return <div className="flex align-center gaps item" key={index}>{item}</div>;
+            return (
+              <div
+                className="flex align-center gaps item"
+                key={index}
+              >
+                {typeof item === "function" ? item() : item}
+              </div>
+            );
           })}
         </div>
       </div>