Fix StatusBar extension API

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/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/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;
+}