Fix StatusBar extension API (#4838)

Co-authored-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/status-bar/registered-status-bar-items.injectable.tsx

@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import React from "react";
+import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
+import { computed, IComputedValue } from "mobx";
+import type { StatusBarItemProps, StatusBarRegistration } from "./status-bar-registration";
+import statusBarItemsInjectable from "./status-bar-items.injectable";
+
+export interface RegisteredStatusBarItems {
+  right: React.ComponentType<StatusBarItemProps>[];
+  left: React.ComponentType<StatusBarItemProps>[];
+}
+
+interface Dependencies {
+  registrations: IComputedValue<StatusBarRegistration[]>;
+}
+
+function getRegisteredStatusBarItems({ registrations }: Dependencies): IComputedValue<RegisteredStatusBarItems> {
+  return computed(() => {
+    const res: RegisteredStatusBarItems = {
+      left: [],
+      right: [],
+    };
+
+    for (const registration of registrations.get()) {
+      if (!registration || typeof registration !== "object") {
+        continue;
+      }
+
+      if (registration.item) {
+        const { item } = registration;
+
+        // default for old API is "right"
+        res.right.push(
+          () => (
+            <>
+              {
+                typeof item === "function"
+                  ? item()
+                  : item
+              }
+            </>
+          ),
+        );
+      } else if (registration.components) {
+        const { position = "right", Item } = registration.components;
+
+        if (position !== "left" && position !== "right") {
+          throw new TypeError("StatusBarRegistration.components.position must be either 'right' or 'left'");
+        }
+
+        res[position].push(Item);
+      }
+    }
+
+    // This is done so that the first ones registered are closest to the corner
+    res.right.reverse();
+
+    return res;
+  });
+}
+
+const registeredStatusBarItemsInjectable = getInjectable({
+  instantiate: (di) => getRegisteredStatusBarItems({
+    registrations: di.inject(statusBarItemsInjectable),
+  }),
+
+  lifecycle: lifecycleEnum.singleton,
+});
+
+export default registeredStatusBarItemsInjectable;

src/renderer/components/status-bar/status-bar-items.injectable.ts

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
+import { computed } from "mobx";
+import rendererExtensionsInjectable from "../../../extensions/renderer-extensions.injectable";
+
+const statusBarItemsInjectable = getInjectable({
+  instantiate: (di) => {
+    const extensions = di.inject(rendererExtensionsInjectable);
+
+    return computed(() => (
+      extensions.get()
+        .flatMap(ext => ext.statusBarItems)
+    ));
+  },
+  lifecycle: lifecycleEnum.singleton,
+});
+
+export default statusBarItemsInjectable;

src/renderer/components/status-bar/status-bar-registration.ts

@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+/**
+ * The props for StatusBar item component
+ */
+export interface StatusBarItemProps {}
+
+/**
+ * The type defining the registration of a status bar item
+ */
+export interface StatusBarComponents {
+  /**
+   * The component for this registrations
+   */
+  Item: React.ComponentType<StatusBarItemProps>;
+
+  /**
+   * The side of the bottom bar to place this component.
+   *
+   * @default "right"
+   */
+  position?: "left" | "right";
+}
+
+/**
+ * The type for registering status bar items from the LensRendererExtension
+ */
+export interface StatusBarRegistration {
+  /**
+   * @deprecated use {@link StatusBarRegistration.components} instead
+   */
+  item?: React.ReactNode | (() => React.ReactNode);
+
+  /**
+   * The newer API, allows for registering a component instead of a ReactNode
+   */
+  components?: StatusBarComponents;
+}

src/renderer/components/status-bar/status-bar.module.scss

@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+.StatusBar {
+  --status-bar-height: 21px;
+  color: white;
+
+  grid-area: status-bar;
+  background-color: var(--blue);
+  height: var(--status-bar-height);
+  font-size: var(--font-size-small);
+
+  display: inline-grid;
+  grid-template-columns: 1fr 1fr;
+}
+
+.leftSide {
+  display: flex;
+  align-items: center;
+}
+
+.rightSide {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.item {
+  height: 100%;
+  padding: 0 4px;
+  display: flex;
+  align-items: center;
+
+  &:hover {
+    cursor: pointer;
+    background-color: #ffffff33;
+  }
+}

src/renderer/components/status-bar/status-bar.test.tsx

@@ -0,0 +1,132 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import React from "react";
+import "@testing-library/jest-dom/extend-expect";
+import { StatusBar } from "./status-bar";
+import { getDiForUnitTesting } from "../../getDiForUnitTesting";
+import type { DiRender } from "../test-utils/renderFor";
+import { renderFor } from "../test-utils/renderFor";
+import { computed, IObservableArray, observable } from "mobx";
+import type { ConfigurableDependencyInjectionContainer } from "@ogre-tools/injectable";
+import statusBarItemsInjectable from "./status-bar-items.injectable";
+import type { StatusBarRegistration } from "./status-bar-registration";
+import { LensRendererExtension } from "../../../extensions/lens-renderer-extension";
+import directoryForUserDataInjectable from "../../../common/app-paths/directory-for-user-data/directory-for-user-data.injectable";
+import rendererExtensionsInjectable from "../../../extensions/renderer-extensions.injectable";
+
+class SomeTestExtension extends LensRendererExtension {
+  constructor(statusBarItems: IObservableArray<any>) {
+    super({
+      id: "some-id",
+      absolutePath: "irrelevant",
+      isBundled: false,
+      isCompatible: false,
+      isEnabled: false,
+      manifest: { name: "some-id", version: "some-version" },
+      manifestPath: "irrelevant",
+    });
+
+    this.statusBarItems = statusBarItems;
+  }
+}
+
+describe("<StatusBar />", () => {
+  let render: DiRender;
+  let di: ConfigurableDependencyInjectionContainer;
+  let statusBarItems: IObservableArray<any>;
+
+  beforeEach(async () => {
+    statusBarItems = observable.array([]);
+    di = getDiForUnitTesting({ doGeneralOverrides: true });
+    render = renderFor(di);
+
+    di.override(directoryForUserDataInjectable, () => "some-directory-for-user-data");
+    di.override(rendererExtensionsInjectable, () => computed(() => [new SomeTestExtension(statusBarItems)]));
+
+    await di.runSetups();
+  });
+
+  it("renders w/o errors", () => {
+    const { container } = render(<StatusBar />);
+
+    expect(container).toBeInstanceOf(HTMLElement);
+  });
+
+  it.each([
+    undefined,
+    "hello",
+    6,
+    null,
+    [],
+    [{}],
+    {},
+  ])("renders w/o errors when registrations are not type compliant (%p)", val => {
+    statusBarItems.replace([val]);
+
+    expect(() => render(<StatusBar />)).not.toThrow();
+  });
+
+  it("renders items [{item: React.ReactNode}] (4.0.0-rc.1)", () => {
+    const testId = "testId";
+    const text = "heee";
+
+    di.override(statusBarItemsInjectable, () => computed(() => [
+      { item: <span data-testid={testId} >{text}</span> },
+    ] as StatusBarRegistration[]));
+
+    const { getByTestId } = render(<StatusBar />);
+
+    expect(getByTestId(testId)).toHaveTextContent(text);
+  });
+
+  it("renders items [{item: () => React.ReactNode}] (4.0.0-rc.1+)", () => {
+    const testId = "testId";
+    const text = "heee";
+
+    statusBarItems.replace([{
+      item: () => <span data-testid={testId} >{text}</span>,
+    }]);
+
+    const { getByTestId } = render(<StatusBar />);
+
+    expect(getByTestId(testId)).toHaveTextContent(text);
+  });
+
+
+  it("sort positioned items properly", () => {
+    statusBarItems.replace([
+      {
+        components: {
+          Item: () => <div data-testid="sortedElem">right1</div>,
+        },
+      },
+      {
+        components: {
+          Item: () => <div data-testid="sortedElem">right2</div>,
+          position: "right",
+        },
+      },
+      {
+        components: {
+          Item: () => <div data-testid="sortedElem">left1</div>,
+          position: "left",
+        },
+      },
+      {
+        components: {
+          Item: () => <div data-testid="sortedElem">left2</div>,
+          position: "left",
+        },
+      },
+    ]);
+
+    const { getAllByTestId } = render(<StatusBar />);
+    const elems = getAllByTestId("sortedElem");
+    const positions = elems.map(elem => elem.textContent);
+
+    expect(positions).toEqual(["left1", "left2", "right2", "right1"]);
+  });
+});

src/renderer/components/status-bar/status-bar.tsx

@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import styles from "./status-bar.module.scss";
+
+import React from "react";
+import { observer } from "mobx-react";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import registeredStatusBarItemsInjectable, { RegisteredStatusBarItems } from "./registered-status-bar-items.injectable";
+import type { IComputedValue } from "mobx";
+
+export interface StatusBarProps {}
+
+interface Dependencies {
+  items: IComputedValue<RegisteredStatusBarItems>
+}
+
+const NonInjectedStatusBar = observer(({ items }: Dependencies & StatusBarProps) => {
+  const { left, right } = items.get();
+
+  return (
+    <div className={styles.StatusBar}>
+      <div className={styles.leftSide}>
+        {left.map((Item, index) => (
+          <div className={styles.item} key={index}>
+            <Item />
+          </div>
+        ))}
+      </div>
+      <div className={styles.rightSide}>
+        {right.map((Item, index) => (
+          <div className={styles.item} key={index}>
+            <Item />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+
+});
+
+export const StatusBar = withInjectables<Dependencies, StatusBarProps>(NonInjectedStatusBar, {
+  getProps: (di, props) => ({
+    items: di.inject(registeredStatusBarItemsInjectable),
+    ...props,
+  }),
+});