Show hotbar from registry with position option

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/extensions/registries/status-bar-registry.ts

@@ -26,6 +26,7 @@ import { BaseRegistry } from "./base-registry";
 
 interface StatusBarComponents {
   Item?: React.ComponentType;
+  position?: "left" | "right";
 }
 
 interface StatusBarRegistrationV2 {

src/renderer/bootstrap.tsx

@@ -104,13 +104,13 @@ export async function bootstrap(comp: () => Promise<AppComponent>, di: Dependenc
   logger.info(`${logPrefix} initializing WelcomeMenuRegistry`);
   initializers.initWelcomeMenuRegistry();
 
-  logger.info(`${logPrefix} initializing WorkloadsOverviewDetailRegist`);
+  logger.info(`${logPrefix} initializing WorkloadsOverviewDetailRegistry`);
   initializers.initWorkloadsOverviewDetailRegistry();
 
   logger.info(`${logPrefix} initializing CatalogEntityDetailRegistry`);
   initializers.initCatalogEntityDetailRegistry();
 
-  logger.info(`${logPrefix} initializing CatalogCategoryRegistryEntrie`);
+  logger.info(`${logPrefix} initializing CatalogCategoryRegistryEntries`);
   initializers.initCatalogCategoryRegistryEntries();
 
   logger.info(`${logPrefix} initializing Catalog`);
@@ -119,6 +119,9 @@ export async function bootstrap(comp: () => Promise<AppComponent>, di: Dependenc
   logger.info(`${logPrefix} initializing IpcRendererListeners`);
   initializers.initIpcRendererListeners();
 
+  logger.info(`${logPrefix} initializing StatusBarRegistry`);
+  initializers.initStatusBarRegistry();
+
   ExtensionLoader.createInstance().init();
   ExtensionDiscovery.createInstance().init();
 

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

@@ -19,7 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
- .BottomBar {
+.BottomBar {
   @apply flex px-2 text-white;
 
   grid-area: bottom-bar;
@@ -38,6 +38,8 @@
   }
 }
 
-.extensions {
-  @apply flex flex-1 justify-end;
-}
+.onLeft + .onRight {
+  @apply ml-auto;
+}
+
+.onRight {}

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

@@ -29,6 +29,7 @@ import { HotbarStore } from "../../../common/hotbar-store";
 import { AppPaths } from "../../../common/app-paths";
 import { CommandOverlay } from "../command-palette";
 import { HotbarSwitchCommand } from "../hotbar/hotbar-switch-command";
+import { ActiveHotbarName } from "./active-hotbar-name";
 
 jest.mock("../command-palette", () => ({
   CommandOverlay: {
@@ -121,12 +122,18 @@ describe("<BottomBar />", () => {
   });
 
   it("show default hotbar name", () => {
+    StatusBarRegistry.getInstance().getItems = jest.fn().mockImplementationOnce(() => [
+      { item: () => <ActiveHotbarName/> },
+    ]);
     const { getByTestId } = render(<BottomBar />);
 
     expect(getByTestId("current-hotbar-name")).toHaveTextContent("default");
   });
 
   it("show active hotbar name", () => {
+    StatusBarRegistry.getInstance().getItems = jest.fn().mockImplementationOnce(() => [
+      { item: () => <ActiveHotbarName/> },
+    ]);
     const { getByTestId } = render(<BottomBar />);
 
     HotbarStore.getInstance().add({
@@ -138,6 +145,9 @@ describe("<BottomBar />", () => {
   });
 
   it("opens command palette on click", () => {
+    StatusBarRegistry.getInstance().getItems = jest.fn().mockImplementationOnce(() => [
+      { item: () => <ActiveHotbarName/> },
+    ]);
     const { getByTestId } = render(<BottomBar />);
     const activeHotbar = getByTestId("current-hotbar-name");
 
@@ -145,4 +155,38 @@ describe("<BottomBar />", () => {
 
     expect(CommandOverlay.open).toHaveBeenCalledWith(<HotbarSwitchCommand />);
   });
+
+  it("sort positioned items properly", () => {
+    StatusBarRegistry.getInstance().getItems = jest.fn().mockImplementationOnce(() => [
+      {
+        components: {
+          Item: () => <div data-testid="sortedElem">right</div>,
+        },
+      },
+      {
+        components: {
+          Item: () => <div data-testid="sortedElem">right</div>,
+          position: "right",
+        },
+      },
+      {
+        components: {
+          Item: () => <div data-testid="sortedElem">left</div>,
+          position: "left",
+        },
+      },
+      {
+        components: {
+          Item: () => <div data-testid="sortedElem">left</div>,
+          position: "left",
+        },
+      },
+    ]);
+
+    const { getAllByTestId } = render(<BottomBar />);
+    const elems = getAllByTestId("sortedElem");
+    const positions = elems.map(elem => elem.textContent);
+
+    expect(positions).toEqual(["left", "left", "right", "right"]);
+  });
 });

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

@@ -24,7 +24,7 @@ import styles from "./bottom-bar.module.css";
 import React from "react";
 import { observer } from "mobx-react";
 import { StatusBarRegistration, StatusBarRegistry } from "../../../extensions/registries";
-import { ActiveHotbarName } from "./active-hotbar-name";
+import { cssNames } from "../../utils";
 
 @observer
 export class BottomBar extends React.Component {
@@ -45,29 +45,36 @@ export class BottomBar extends React.Component {
       return null;
     }
 
+    items.sort(function sortLeftPositionFirst(a, b) {
+      return a.components?.position?.localeCompare(b.components?.position);
+    });
+
     return (
-      <div className={styles.extensions}>
+      <>
         {items.map((registration, index) => {
           if (!registration?.item && !registration?.components?.Item) {
             return null;
           }
 
           return (
-            <div className={styles.item} key={index}>
+            <div
+              className={cssNames(styles.item, {
+                [styles.onLeft]: registration.components?.position == "left",
+                [styles.onRight]: registration.components?.position != "left",
+              })}
+              key={index}
+            >
               {this.renderRegisteredItem(registration)}
             </div>
           );
         })}
-      </div>
+      </>
     );
   }
 
   render() {
     return (
       <div className={styles.BottomBar}>
-        <div className={styles.item}>
-          <ActiveHotbarName/>
-        </div>
         {this.renderRegisteredItems()}
       </div>
     );

src/renderer/initializers/index.ts

@@ -30,3 +30,4 @@ export * from "./registries";
 export * from "./welcome-menu-registry";
 export * from "./workloads-overview-detail-registry";
 export * from "./catalog-category-registry";
+export * from "./status-bar-registry";

src/renderer/initializers/status-bar-registry.tsx

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import React from "react";
+import { StatusBarRegistry } from "../../extensions/registries";
+import { ActiveHotbarName } from "../components/cluster-manager/active-hotbar-name";
+
+export function initStatusBarRegistry() {
+  StatusBarRegistry.getInstance().add([
+    {
+      components: {
+        Item: () => <ActiveHotbarName/>,
+        position: "left",
+      },
+    },
+  ]);
+}