Replace implementation for old top-bar items for losing competition

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

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

src/features/top-bar/extension-api/__snapshots__/extendability-using-extension-api.test.tsx.snap

@@ -248,16 +248,15 @@ exports[`extendability-using-extension-api given an extension with top-bar items
               arrow_forward
             </span>
           </i>
-        </div>
-        <div
-          class="items"
-        >
           <div
             data-testid="some-top-bar-item"
           >
             Some-content
           </div>
         </div>
+        <div
+          class="items"
+        />
       </div>
       <main>
         <div

src/features/top-bar/extension-api/renderer/legacy-extension-api-registrator-for-top-bar-items.injectable.ts

@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { reject } from "lodash/fp";
+import { extensionRegistratorInjectionToken } from "../../../../extensions/extension-loader/extension-registrator-injection-token";
+import type { LensRendererExtension } from "../../../../extensions/lens-renderer-extension";
+import { pipeline } from "@ogre-tools/fp";
+import topBarItemInjectionToken from "../../../../renderer/components/layout/top-bar/top-bar-items/top-bar-item-injection-token";
+import { computed } from "mobx";
+
+const legacyExtensionApiRegistratorForTopBarItemsInjectable = getInjectable({
+  id: "legacy-extension-api-registrator-for-top-bar-items",
+
+  instantiate: () => (ext) => {
+    const extension = ext as LensRendererExtension;
+
+    return pipeline(
+      extension.topBarItems,
+
+      reject((registration) => !registration?.components?.Item),
+
+      (validTopBarRegistrations) =>
+        validTopBarRegistrations.map((registration, index) => {
+          const id = `extension-top-bar-item-for-${extension.sanitizedExtensionId}-${index}`;
+
+          return getInjectable({
+            id,
+
+            injectionToken: topBarItemInjectionToken,
+
+            instantiate: () => ({
+              id,
+              isShown: computed(() => true),
+              // Note: legacy extension-API does not specify order of top-bar items, and therefore an arbitrary number is used. This makes items originating from extension appear in volatile order between each other.
+              orderNumber: 100,
+              Component: registration.components.Item,
+            }),
+          });
+        }),
+    );
+  },
+
+  injectionToken: extensionRegistratorInjectionToken,
+});
+
+export default legacyExtensionApiRegistratorForTopBarItemsInjectable;

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

@@ -2,18 +2,27 @@
  * 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 rendererExtensionsInjectable from "../../../../../extensions/renderer-extensions.injectable";
+import topBarItemInjectionToken from "./top-bar-item-injection-token";
 
 const topBarItemsInjectable = getInjectable({
   id: "top-bar-items",
 
   instantiate: (di) => {
-    const extensions = di.inject(rendererExtensionsInjectable);
+    const computedInjectMany = di.inject(computedInjectManyInjectable);
+
+    const items = computedInjectMany(topBarItemInjectionToken);
 
     return computed(() =>
-      extensions.get().flatMap((extension) => extension.topBarItems),
+      pipeline(
+        items.get(),
+        filter((item) => item.isShown.get()),
+        sortBy(item => item.orderNumber),
+      ),
     );
   },
 });

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

@@ -1,30 +0,0 @@
-/**
- * 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.test.tsx

@@ -11,7 +11,6 @@ import { getDiForUnitTesting } from "../../../getDiForUnitTesting";
 import type { DiContainer } from "@ogre-tools/injectable";
 import type { DiRender } from "../../test-utils/renderFor";
 import { renderFor } from "../../test-utils/renderFor";
-import topBarItemsInjectable from "./top-bar-items/top-bar-items.injectable";
 import { computed, observable } from "mobx";
 import rendererExtensionsInjectable from "../../../../extensions/renderer-extensions.injectable";
 import closeWindowInjectable from "./close-window.injectable";
@@ -21,8 +20,7 @@ import openAppContextMenuInjectable from "./top-bar-items/context-menu/open-app-
 import toggleMaximizeWindowInjectable from "./toggle-maximize-window.injectable";
 import topBarStateInjectable from "./state.injectable";
 import platformInjectable from "../../../../common/vars/platform.injectable";
-import goForwardInjectable
+import goForwardInjectable from "./top-bar-items/navigation-to-forward/go-forward/go-forward.injectable";
-  from "./top-bar-items/navigation-to-forward/go-forward/go-forward.injectable";
 
 describe("<TopBar/>", () => {
   let di: DiContainer;
@@ -55,6 +53,7 @@ describe("<TopBar/>", () => {
         nextEnabled: true,
       }));
     });
+
     it("renders w/o errors", () => {
       const { container } = render(<TopBar/>);
 
@@ -96,23 +95,6 @@ describe("<TopBar/>", () => {
       expect(goForward).toBeCalled();
     });
 
-    it("renders items", async () => {
-      const testId = "testId";
-      const text = "an item";
-
-      di.override(topBarItemsInjectable, () => computed(() => [
-        {
-          components: {
-            Item: () => <span data-testid={testId}>{text}</span>,
-          },
-        },
-      ]));
-
-      const { findByTestId } = render(<TopBar/>);
-
-      expect(await findByTestId(testId)).toHaveTextContent(text);
-    });
-
     describe("on macos", () => {
       beforeEach(() => {
         di.override(platformInjectable, () => "darwin");

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

@@ -8,23 +8,20 @@ import React, { useEffect, useRef } from "react";
 import { observer } from "mobx-react";
 import type { IComputedValue } from "mobx";
 import { cssNames } from "../../../utils";
-import topBarItemsInjectable from "./top-bar-items/top-bar-items.injectable";
 import { withInjectables } from "@ogre-tools/injectable-react";
-import type { TopBarRegistration } from "./top-bar-registration";
 import isLinuxInjectable from "../../../../common/vars/is-linux.injectable";
 import isWindowsInjectable from "../../../../common/vars/is-windows.injectable";
 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 topBarItemsInjectable from "./top-bar-items/top-bar-items.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";
 
 interface Dependencies {
-  items: IComputedValue<TopBarRegistration[]>;
+  items: IComputedValue<TopBarItem[]>;
-  items2: IComputedValue<TopBarItem[]>;
   isWindows: boolean;
   isLinux: boolean;
   minimizeWindow: () => void;
@@ -36,7 +33,6 @@ interface Dependencies {
 const NonInjectedTopBar = observer(
   ({
     items,
-    items2,
     isWindows,
     isLinux,
     closeWindow,
@@ -61,7 +57,7 @@ const NonInjectedTopBar = observer(
         ref={elem}
       >
         <div className={styles.items}>
-          {items2.get().map((item) => {
+          {items.get().map((item) => {
             const Component = item.Component;
 
             return <Component key={item.id} />;
@@ -69,8 +65,6 @@ const NonInjectedTopBar = observer(
         </div>
 
         <div className={styles.items}>
-          {renderRegisteredItems(items.get())}
-
           {(isWindows || isLinux) && (
             <div
               className={cssNames(styles.windowButtons, {
@@ -129,19 +123,9 @@ const NonInjectedTopBar = observer(
   },
 );
 
-const renderRegisteredItems = (items: TopBarRegistration[]) =>
-  items.map((registration, index) => {
-    if (!registration?.components?.Item) {
-      return null;
-    }
-
-    return <registration.components.Item key={index} />;
-  });
-
 export const TopBar = withInjectables<Dependencies>(NonInjectedTopBar, {
   getProps: (di) => ({
     items: di.inject(topBarItemsInjectable),
-    items2: di.inject(topBarItems2Injectable),
     isLinux: di.inject(isLinuxInjectable),
     isWindows: di.inject(isWindowsInjectable),
     closeWindow: di.inject(closeWindowInjectable),