Fix StatusBar extension API (#4838)

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

src/extensions/common-api/registrations.ts

@@ -2,7 +2,7 @@
  * Copyright (c) OpenLens Authors. All rights reserved.
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
-export type { StatusBarRegistration } from "../../renderer/components/cluster-manager/status-bar-registration";
+export type { StatusBarRegistration } from "../../renderer/components/status-bar/status-bar-registration";
 export type { KubeObjectMenuRegistration, KubeObjectMenuComponents } from "../../renderer/components/kube-object-menu/dependencies/kube-object-menu-items/kube-object-menu-registration";
 export type { AppPreferenceRegistration, AppPreferenceComponents } from "../../renderer/components/+preferences/app-preferences/app-preference-registration";
 export type { KubeObjectDetailRegistration, KubeObjectDetailComponents } from "../registries/kube-object-detail-registry";

src/extensions/lens-renderer-extension.ts

@@ -18,7 +18,7 @@ import type { CommandRegistration } from "../renderer/components/command-palette
 import type { AppPreferenceRegistration } from "../renderer/components/+preferences/app-preferences/app-preference-registration";
 import type { AdditionalCategoryColumnRegistration } from "../renderer/components/+catalog/custom-category-columns";
 import type { CustomCategoryViewRegistration } from "../renderer/components/+catalog/custom-views";
-import type { StatusBarRegistration } from "../renderer/components/cluster-manager/status-bar-registration";
+import type { StatusBarRegistration } from "../renderer/components/status-bar/status-bar-registration";
 import type { KubeObjectMenuRegistration } from "../renderer/components/kube-object-menu/dependencies/kube-object-menu-items/kube-object-menu-registration";
 
 export class LensRendererExtension extends LensExtension {

src/renderer/components/cluster-manager/bottom-bar-items.injectable.ts

@@ -1,28 +0,0 @@
-/**
- * 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";
-import type { StatusBarRegistration } from "./status-bar-registration";
-
-const bottomBarItemsInjectable = getInjectable({
-  instantiate: (di) => {
-    const extensions = di.inject(rendererExtensionsInjectable);
-
-    return computed(() =>
-      extensions
-        .get()
-        .flatMap((extension) => extension.statusBarItems)
-        .sort(leftItemsBeforeRight),
-    );
-  },
-
-  lifecycle: lifecycleEnum.singleton,
-});
-
-export default bottomBarItemsInjectable;
-
-const leftItemsBeforeRight = (firstItem: StatusBarRegistration, secondItem: StatusBarRegistration) =>
-  firstItem.components?.position?.localeCompare(secondItem.components?.position);

src/renderer/components/cluster-manager/bottom-bar.module.scss

@@ -1,29 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-.BottomBar {
-  @apply flex px-2 text-white;
-
-  grid-area: bottom-bar;
-  background-color: var(--blue);
-  height: var(--bottom-bar-height);
-  font-size: var(--font-size-small);
-}
-
-.item {
-  @apply flex items-center mr-2 h-full px-2 last:mr-0;
-
-  &:hover {
-    @apply cursor-pointer;
-
-    background-color: #ffffff33;
-  }
-}
-
-.onLeft + .onRight {
-  @apply ml-auto;
-}
-
-.onRight {}

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

@@ -1,74 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-import styles from "./bottom-bar.module.scss";
-
-import React from "react";
-import { observer } from "mobx-react";
-import { cssNames } from "../../utils";
-import { withInjectables } from "@ogre-tools/injectable-react";
-import bottomBarItemsInjectable from "./bottom-bar-items.injectable";
-import type { IComputedValue } from "mobx";
-import type { StatusBarRegistration } from "./status-bar-registration";
-
-interface Dependencies {
-  items: IComputedValue<StatusBarRegistration[]>
-}
-
-@observer
-class NonInjectedBottomBar extends React.Component<Dependencies> {
-  renderRegisteredItem(registration: StatusBarRegistration) {
-    const { item } = registration;
-
-    if (item) {
-      return typeof item === "function" ? item() : item;
-    }
-
-    return <registration.components.Item />;
-  }
-
-  renderRegisteredItems() {
-    return (
-      <>
-        {this.props.items.get().map((registration, index) => {
-          if (!registration?.item && !registration?.components?.Item) {
-            return null;
-          }
-
-          return (
-            <div
-              className={cssNames(styles.item, {
-                [styles.onLeft]: registration.components?.position == "left",
-                [styles.onRight]: registration.components?.position != "left",
-              })}
-              key={index}
-            >
-              {this.renderRegisteredItem(registration)}
-            </div>
-          );
-        })}
-      </>
-    );
-  }
-
-  render() {
-    return (
-      <div className={styles.BottomBar}>
-        {this.renderRegisteredItems()}
-      </div>
-    );
-  }
-}
-
-export const BottomBar = withInjectables<Dependencies>(
-  NonInjectedBottomBar,
-
-  {
-    getProps: (di, props) => ({
-      items: di.inject(bottomBarItemsInjectable),
-      ...props,
-    }),
-  },
-);

src/renderer/components/cluster-manager/cluster-manager.scss

@@ -4,14 +4,13 @@
  */
 
 .ClusterManager {
-  --bottom-bar-height: 21px;
   --hotbar-width: 75px;
 
   display: grid;
   grid-template-areas:
     "topbar topbar"
     "menu main"
-    "bottom-bar bottom-bar";
+    "status-bar status-bar";
   grid-template-rows: auto 1fr min-content;
   grid-template-columns: min-content 1fr;
 
@@ -26,10 +25,6 @@
     grid-area: menu;
   }
 
-  .BottomBar {
-    grid-area: bottom-bar;
-  }
-
   #lens-views {
     position: absolute;
     left: 0;

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

@@ -8,7 +8,7 @@ import "./cluster-manager.scss";
 import React from "react";
 import { Redirect, Route, Switch } from "react-router";
 import { disposeOnUnmount, observer } from "mobx-react";
-import { BottomBar } from "./bottom-bar";
+import { StatusBar } from "../status-bar/status-bar";
 import { Catalog } from "../+catalog";
 import { Preferences } from "../+preferences";
 import { AddCluster } from "../+add-cluster";
@@ -71,7 +71,7 @@ class NonInjectedClusterManager extends React.Component<Dependencies> {
           </Switch>
         </main>
         <HotbarMenu />
-        <BottomBar />
+        <StatusBar />
         <DeleteClusterDialog />
       </div>
     );

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

@@ -1,24 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-interface StatusBarComponents {
-  Item?: React.ComponentType;
-  /**
-   * The side of the bottom bar to place this component.
-   *
-   * @default "right"
-   */
-  position?: "left" | "right";
-}
-
-interface StatusBarRegistrationV2 {
-  components?: StatusBarComponents; // has to be optional for backwards compatability
-}
-
-export interface StatusBarRegistration extends StatusBarRegistrationV2 {
-  /**
-   * @deprecated use components.Item instead
-   */
-  item?: React.ReactNode;
-}

src/renderer/components/layout/main-layout.module.scss

@@ -25,7 +25,7 @@
 .contents {
   grid-area: contents;
   overflow: auto;
-  height: calc(100vh - var(--bottom-bar-height) - var(--main-layout-header));
+  height: calc(100vh - var(--status-bar-height) - var(--main-layout-header));
 }
 
 .footer {

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

@@ -5,21 +5,18 @@
 
 import React from "react";
 import "@testing-library/jest-dom/extend-expect";
-import { BottomBar } from "./bottom-bar";
+import { StatusBar } from "./status-bar";
 import { getDiForUnitTesting } from "../../getDiForUnitTesting";
 import type { DiRender } from "../test-utils/renderFor";
 import { renderFor } from "../test-utils/renderFor";
-import directoryForUserDataInjectable  from "../../../common/app-paths/directory-for-user-data/directory-for-user-data.injectable";
+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 { computed, IObservableArray, observable, runInAction } from "mobx";
+import directoryForUserDataInjectable from "../../../common/app-paths/directory-for-user-data/directory-for-user-data.injectable";
 import rendererExtensionsInjectable from "../../../extensions/renderer-extensions.injectable";
 
-jest.mock("electron", () => ({
-  app: {
-    getPath: () => "/foo",
-  },
-}));
-
 class SomeTestExtension extends LensRendererExtension {
   constructor(statusBarItems: IObservableArray<any>) {
     super({
@@ -36,36 +33,28 @@ class SomeTestExtension extends LensRendererExtension {
   }
 }
 
-describe("<BottomBar />", () => {
+describe("<StatusBar />", () => {
   let render: DiRender;
+  let di: ConfigurableDependencyInjectionContainer;
   let statusBarItems: IObservableArray<any>;
 
   beforeEach(async () => {
-
     statusBarItems = observable.array([]);
-
-    const someTestExtension = new SomeTestExtension(statusBarItems);
-
-    const di = getDiForUnitTesting({ doGeneralOverrides: true });
+    di = getDiForUnitTesting({ doGeneralOverrides: true });
+    render = renderFor(di);
 
     di.override(directoryForUserDataInjectable, () => "some-directory-for-user-data");
-
-    di.override(rendererExtensionsInjectable, () => {
-      return computed(() => [someTestExtension]);
-    });
-
-    render = renderFor(di);
+    di.override(rendererExtensionsInjectable, () => computed(() => [new SomeTestExtension(statusBarItems)]));
 
     await di.runSetups();
   });
 
   it("renders w/o errors", () => {
-    const { container } = render(<BottomBar />);
+    const { container } = render(<StatusBar />);
 
     expect(container).toBeInstanceOf(HTMLElement);
   });
 
-
   it.each([
     undefined,
     "hello",
@@ -74,25 +63,21 @@ describe("<BottomBar />", () => {
     [],
     [{}],
     {},
-  ])("renders w/o errors when .getItems() returns not type compliant (%p)", val => {
-    runInAction(() => {
-      statusBarItems.replace([val]);
-    });
+  ])("renders w/o errors when registrations are not type compliant (%p)", val => {
+    statusBarItems.replace([val]);
 
-    expect(() => render(<BottomBar />)).not.toThrow();
+    expect(() => render(<StatusBar />)).not.toThrow();
   });
 
   it("renders items [{item: React.ReactNode}] (4.0.0-rc.1)", () => {
     const testId = "testId";
     const text = "heee";
 
-    runInAction(() => {
-      statusBarItems.replace([
-        { item: <span data-testid={testId} >{text}</span> },
-      ]);
-    });
+    di.override(statusBarItemsInjectable, () => computed(() => [
+      { item: <span data-testid={testId} >{text}</span> },
+    ] as StatusBarRegistration[]));
 
-    const { getByTestId } = render(<BottomBar />);
+    const { getByTestId } = render(<StatusBar />);
 
     expect(getByTestId(testId)).toHaveTextContent(text);
   });
@@ -101,51 +86,47 @@ describe("<BottomBar />", () => {
     const testId = "testId";
     const text = "heee";
 
-    runInAction(() => {
-      statusBarItems.replace([
-        { item: () => <span data-testid={testId} >{text}</span> },
-      ]);
-    });
+    statusBarItems.replace([{
+      item: () => <span data-testid={testId} >{text}</span>,
+    }]);
 
-    const { getByTestId } = render(<BottomBar />);
+    const { getByTestId } = render(<StatusBar />);
 
     expect(getByTestId(testId)).toHaveTextContent(text);
   });
 
 
   it("sort positioned items properly", () => {
-    runInAction(() => {
-      statusBarItems.replace([
-        {
-          components: {
-            Item: () => <div data-testid="sortedElem">right</div>,
-          },
+    statusBarItems.replace([
+      {
+        components: {
+          Item: () => <div data-testid="sortedElem">right1</div>,
         },
-        {
-          components: {
-            Item: () => <div data-testid="sortedElem">right</div>,
-            position: "right",
-          },
+      },
+      {
+        components: {
+          Item: () => <div data-testid="sortedElem">right2</div>,
+          position: "right",
         },
-        {
-          components: {
-            Item: () => <div data-testid="sortedElem">left</div>,
-            position: "left",
-          },
+      },
+      {
+        components: {
+          Item: () => <div data-testid="sortedElem">left1</div>,
+          position: "left",
         },
-        {
-          components: {
-            Item: () => <div data-testid="sortedElem">left</div>,
-            position: "left",
-          },
+      },
+      {
+        components: {
+          Item: () => <div data-testid="sortedElem">left2</div>,
+          position: "left",
         },
-      ]);
-    });
+      },
+    ]);
 
-    const { getAllByTestId } = render(<BottomBar />);
+    const { getAllByTestId } = render(<StatusBar />);
     const elems = getAllByTestId("sortedElem");
     const positions = elems.map(elem => elem.textContent);
 
-    expect(positions).toEqual(["left", "left", "right", "right"]);
+    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,
+  }),
+});