Introduce competition for top bar items to achieve OCP-compliance

Co-authored-by: Janne Savolainen <janne.savolainen@live.fi>

Signed-off-by: Iku-turso <mikko.aspiala@gmail.com>

src/renderer/components/layout/top-bar/top-bar-items/top-bar-item-injection-token.ts

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import type React from "react";
+import { getInjectionToken } from "@ogre-tools/injectable";
+import type { IComputedValue } from "mobx";
+
+export interface TopBarItem {
+  id: string;
+  isShown: IComputedValue<boolean>;
+  orderNumber: number;
+  Component: React.ComponentType;
+}
+
+const topBarItemInjectionToken = getInjectionToken<TopBarItem>({
+  id: "top-bar-item-injection-token",
+});
+
+export default topBarItemInjectionToken;

src/renderer/components/layout/top-bar/top-bar-items/top-bar-items2.injectable.ts

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { pipeline } from "@ogre-tools/fp";
+import { getInjectable } from "@ogre-tools/injectable";
+import { computedInjectManyInjectable } from "@ogre-tools/injectable-extension-for-mobx";
+import { filter, sortBy } from "lodash/fp";
+import { computed } from "mobx";
+import topBarItemInjectionToken from "./top-bar-item-injection-token";
+
+const topBarItemsInjectable = getInjectable({
+  id: "top-bar-items-2",
+
+  instantiate: (di) => {
+    const computedInjectMany = di.inject(computedInjectManyInjectable);
+
+    const items = computedInjectMany(topBarItemInjectionToken);
+
+    return computed(() =>
+      pipeline(
+        items.get(),
+        filter((item) => item.isShown.get()),
+        sortBy(item => item.orderNumber),
+      ),
+    );
+  },
+});
+
+export default topBarItemsInjectable;

src/renderer/components/layout/top-bar/top-bar.tsx

@@ -25,6 +25,8 @@ import closeWindowInjectable from "./close-window.injectable";
 import maximizeWindowInjectable from "./maximize-window.injectable";
 import toggleMaximizeWindowInjectable from "./toggle-maximize-window.injectable";
 import watchHistoryStateInjectable from "../../../remote-helpers/watch-history-state.injectable";
+import topBarItems2Injectable from "./top-bar-items/top-bar-items2.injectable";
+import type { TopBarItem } from "./top-bar-items/top-bar-item-injection-token";
 import welcomeRouteInjectable from "../../../../common/front-end-routing/routes/welcome/welcome-route.injectable";
 import navigateToWelcomeInjectable from "../../../../common/front-end-routing/routes/welcome/navigate-to-welcome.injectable";
 
@@ -32,6 +34,7 @@ interface Dependencies {
   navigateToWelcomePage: () => void;
   welcomeRouteIsActive: IComputedValue<boolean>;
   items: IComputedValue<TopBarRegistration[]>;
+  items2: IComputedValue<TopBarItem[]>;
   isWindows: boolean;
   isLinux: boolean;
   prevEnabled: IComputedValue<Boolean>;
@@ -47,6 +50,9 @@ interface Dependencies {
 
 const NonInjectedTopBar = observer(({
   items,
+  items2,
+  navigateToCatalog,
+  catalogRouteIsActive,
   navigateToWelcomePage,
   welcomeRouteIsActive,
   isWindows,
@@ -79,9 +85,14 @@ const NonInjectedTopBar = observer(({
     <div
       className={styles.topBar}
       onDoubleClick={windowSizeToggle}
-      ref={elem}
+      ref={elem}>
-    >
       <div className={styles.items}>
+        {items2.get().map((item) => {
+          const Component = item.Component;
+
+          return <Component key={item.id} />;
+        })}
+
         {(isWindows || isLinux) && (
           <div className={styles.winMenu}>
             <div onClick={openAppContextMenu} data-testid="window-menu">
@@ -183,6 +194,7 @@ export const TopBar = withInjectables<Dependencies>(NonInjectedTopBar, {
   getProps: (di) => ({
     navigateToWelcomePage: di.inject(navigateToWelcomeInjectable),
     items: di.inject(topBarItemsInjectable),
+    items2: di.inject(topBarItems2Injectable),
     isLinux: di.inject(isLinuxInjectable),
     isWindows: di.inject(isWindowsInjectable),
     prevEnabled: di.inject(topBarPrevEnabledInjectable),