Remove duplication from getting preference navigation items for different groups

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

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>

src/behaviours/preferences/closing-preferences.test.tsx

@@ -250,6 +250,7 @@ const testNavigationItemInjectable = getInjectable({
     return {
       id: "some-test-preference-navigation-item-id",
       label: "Some preference navigation item",
+      parent: "general",
       isActive: routeIsActive,
       isVisible: testRoute.isEnabled,
       navigate: navigateToPreferenceTab(testRoute),

src/renderer/components/+preferences/preferences-navigation/__tests__/preferences-navigation.test.tsx

@@ -6,13 +6,11 @@
 import "@testing-library/jest-dom/extend-expect";
 import type { RenderResult } from "@testing-library/react";
 import { computed } from "mobx";
-import type { IComputedValue } from "mobx/dist/internal";
 import { noop } from "../../../../utils";
 import type { ApplicationBuilder } from "../../../test-utils/get-application-builder";
 import { getApplicationBuilder } from "../../../test-utils/get-application-builder";
-import extensionsPreferenceNavigationItemsInjectable from "../extension-preference-navigation-items.injectable";
-import generalPreferenceNavigationItemsInjectable from "../general-preference-navigation-items.injectable";
 import type { PreferenceNavigationItem } from "../preference-navigation-items.injectable";
+import preferenceNavigationItemsInjectable from "../preference-navigation-items.injectable";
 
 describe.only("preferences - navigation block with links", () => {
   let applicationBuilder: ApplicationBuilder;
@@ -26,31 +24,9 @@ describe.only("preferences - navigation block with links", () => {
 
     describe("when general navigation items passed", () => {
       beforeEach(async () => {
-        const generalNavItems: IComputedValue<PreferenceNavigationItem[]> = computed(() => [
-          {
-            id: "general",
-            label: "General",
-            isActive: computed(() => false),
-            isVisible: computed(() => true),
-            navigate: () => noop,
-            orderNumber: 0,
-            parent: "",
-          },
-          {
-            id: "proxy",
-            label: "Proxy",
-            isActive: computed(() => false),
-            isVisible: computed(() => true),
-            navigate: () => noop,
-            orderNumber: 1,
-            parent: "",
-          },
-        ]);
-
         applicationBuilder.beforeApplicationStart(({ rendererDi }) => {
-          rendererDi.override(
+          rendererDi.override(preferenceNavigationItemsInjectable, () =>
-            generalPreferenceNavigationItemsInjectable,
+            computed(() => generalNavItems),
-            () => generalNavItems,
           );
         });
 
@@ -68,13 +44,62 @@ describe.only("preferences - navigation block with links", () => {
       });
 
       it("does not show custom settings block", () => {
-        expect(renderer.queryByTestId("extension-settings")).not.toBeInTheDocument();
+        expect(
+          renderer.queryByTestId("extension-settings"),
+        ).not.toBeInTheDocument();
       });
     });
 
     describe("when general + extension navigation items passed", () => {
       beforeEach(async () => {
-        const generalNavItems: IComputedValue<PreferenceNavigationItem[]> = computed(() => [
+        applicationBuilder.beforeApplicationStart(({ rendererDi }) => {
+          rendererDi.override(preferenceNavigationItemsInjectable, () =>
+            computed(() => [...generalNavItems, ...extensionNavItems]),
+          );
+        });
+
+        applicationBuilder.beforeRender(() => {
+          applicationBuilder.preferences.navigate();
+        });
+
+        renderer = await applicationBuilder.render();
+      });
+
+      const generalLinks = ["General", "Proxy"];
+
+      it.each(generalLinks)(
+        "renders general link with text content %s",
+        (link) => {
+          expect(renderer.container).toHaveTextContent(link);
+        },
+      );
+
+      it("shows custom settings block", () => {
+        expect(
+          renderer.queryByTestId("extension-settings"),
+        ).toBeInTheDocument();
+      });
+
+      const extensionLinks = ["lensapp-node-menu", "lensapp-pod-menu"];
+
+      it.each(extensionLinks)("shows extension navigation item %s", (link) => {
+        expect(
+          renderer.getByTestId(
+            `tab-link-for-extension-preferences-navigation-item-${link}`,
+          ),
+        ).toBeInTheDocument();
+      });
+
+      it("renders extension navigation items inside custom settings block", () => {
+        const settingsBlock = renderer.getByTestId("extension-settings");
+
+        expect(settingsBlock).toHaveTextContent("lensapp-node-menu");
+      });
+    });
+  });
+});
+
+const generalNavItems: PreferenceNavigationItem[] = [
   {
     id: "general",
     label: "General",
@@ -82,7 +107,7 @@ describe.only("preferences - navigation block with links", () => {
     isVisible: computed(() => true),
     navigate: () => noop,
     orderNumber: 0,
-            parent: "",
+    parent: "general",
   },
   {
     id: "proxy",
@@ -91,11 +116,11 @@ describe.only("preferences - navigation block with links", () => {
     isVisible: computed(() => true),
     navigate: () => noop,
     orderNumber: 1,
-            parent: "",
+    parent: "general",
   },
-        ]);
+];
 
-        const extensionNavItems: IComputedValue<PreferenceNavigationItem[]> = computed(() => [
+const extensionNavItems = [
   {
     id: "extension-preferences-navigation-item-lensapp-node-menu",
     label: "lensapp-node-menu",
@@ -123,48 +148,5 @@ describe.only("preferences - navigation block with links", () => {
     orderNumber: 0,
     parent: "extensions",
   },
-        ]);
+];
 
-        applicationBuilder.beforeApplicationStart(({ rendererDi }) => {
-          rendererDi.override(
-            generalPreferenceNavigationItemsInjectable,
-            () => generalNavItems,
-          );
-  
-          rendererDi.override(
-            extensionsPreferenceNavigationItemsInjectable,
-            () => extensionNavItems,
-          );
-        });
-  
-        applicationBuilder.beforeRender(() => {
-          applicationBuilder.preferences.navigate();
-        });
-  
-        renderer = await applicationBuilder.render();
-      });
-
-      const generalLinks = ["General", "Proxy"];
-  
-      it.each(generalLinks)("renders general link with text content %s", (link) => {
-        expect(renderer.container).toHaveTextContent(link);
-      });
-  
-      it("shows custom settings block", () => {
-        expect(renderer.queryByTestId("extension-settings")).toBeInTheDocument();
-      });
-
-      const extensionLinks = ["lensapp-node-menu", "lensapp-pod-menu"];
-
-      it.each(extensionLinks)("shows extension navigation item %s", (link) => {
-        expect(renderer.getByTestId(`tab-link-for-extension-preferences-navigation-item-${link}`)).toBeInTheDocument();
-      });
-  
-      it("renders extension navigation items inside custom settings block", () => {
-        const settingsBlock = renderer.getByTestId("extension-settings");
-  
-        expect(settingsBlock).toHaveTextContent("lensapp-node-menu");
-      });
-    });
-  });
-});

src/renderer/components/+preferences/preferences-navigation/application-preferences-navigation-item.injectable.ts

@@ -24,6 +24,7 @@ const applicationPreferencesNavigationItemInjectable = getInjectable({
     return {
       id: "application",
       label: "App",
+      parent: "general",
       navigate: navigateToPreferenceTab(route),
       isActive: routeIsActive,
       isVisible: computed(() => true),

src/renderer/components/+preferences/preferences-navigation/editor-preferences-navigation-item.injectable.ts

@@ -24,6 +24,7 @@ const editorPreferencesNavigationItemInjectable = getInjectable({
     return {
       id: "editor",
       label: "Editor",
+      parent: "general",
       navigate: navigateToPreferenceTab(route),
       isActive: routeIsActive,
       isVisible: computed(() => true),

src/renderer/components/+preferences/preferences-navigation/extension-preference-navigation-items.injectable.ts

@@ -1,27 +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 { filter, orderBy } from "lodash/fp";
-import { computed } from "mobx";
-import type { PreferenceNavigationItem } from "./preference-navigation-items.injectable";
-import { preferenceNavigationItemInjectionToken } from "./preference-navigation-items.injectable";
-
-const extensionsPreferenceNavigationItemsInjectable = getInjectable({
-  id: "extension-preference-navigation-items",
-
-  instantiate: (di) =>
-    computed((): PreferenceNavigationItem[] =>
-      pipeline(
-        di.injectMany(preferenceNavigationItemInjectionToken),
-        filter((item) => !!item.isVisible.get()),
-        filter((item) => item.parent == "extensions"),
-        (items) => orderBy([(item) => item.orderNumber], ["asc"], items),
-      ),
-    ),
-});
-
-export default extensionsPreferenceNavigationItemsInjectable;
- 

src/renderer/components/+preferences/preferences-navigation/extension-tab-preferences-navigation-item.injectable.ts

@@ -43,6 +43,7 @@ const extensionSpecificTabNavigationItemRegistratorInjectable = getInjectable({
             instantiate: () => ({
               id,
               label: tab.title,
+              parent: "general",
               orderNumber: tab.orderNumber || 100,
               navigate: () => navigateToExtensionPreferences(extension.sanitizedExtensionId, tab.id),
               isVisible: computed(() => true),

src/renderer/components/+preferences/preferences-navigation/extensions-nav-group.tsx

@@ -8,7 +8,7 @@ import type { IComputedValue } from "mobx";
 import type { PreferenceNavigationItem } from "./preference-navigation-items.injectable";
 import { Icon } from "../../icon";
 import { PreferencesNavigationTab } from "./preference-navigation-tab";
-import extensionsPreferenceNavigationItemsInjectable from "./extension-preference-navigation-items.injectable";
+import preferenceNavigationItemsForGroupInjectable from "./preference-navigation-items-for-group.injectable";
 
 interface Dependencies {
   navigationItems: IComputedValue<PreferenceNavigationItem[]>;
@@ -49,7 +49,7 @@ export const ExtensionsNavGroup = withInjectables<Dependencies>(
 
   {
     getProps: (di) => ({
-      navigationItems: di.inject(extensionsPreferenceNavigationItemsInjectable),
+      navigationItems: di.inject(preferenceNavigationItemsForGroupInjectable, "extensions"),
     }),
   },
 );

src/renderer/components/+preferences/preferences-navigation/general-nav-group.tsx

@@ -7,7 +7,7 @@ import { withInjectables } from "@ogre-tools/injectable-react";
 import type { IComputedValue } from "mobx";
 import type { PreferenceNavigationItem } from "./preference-navigation-items.injectable";
 import { PreferencesNavigationTab } from "./preference-navigation-tab";
-import generalPreferenceNavigationItemsInjectable from "./general-preference-navigation-items.injectable";
+import preferenceNavigationItemsForGroupInjectable from "./preference-navigation-items-for-group.injectable";
 
 interface Dependencies {
   navigationItems: IComputedValue<PreferenceNavigationItem[]>;
@@ -38,7 +38,7 @@ export const GeneralNavGroup = withInjectables<Dependencies>(
 
   {
     getProps: (di) => ({
-      navigationItems: di.inject(generalPreferenceNavigationItemsInjectable),
+      navigationItems: di.inject(preferenceNavigationItemsForGroupInjectable, "general"),
     }),
   },
 );

src/renderer/components/+preferences/preferences-navigation/general-preference-navigation-items.injectable.ts

@@ -1,27 +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 { filter, orderBy } from "lodash/fp";
-import { computed } from "mobx";
-import type { PreferenceNavigationItem } from "./preference-navigation-items.injectable";
-import { preferenceNavigationItemInjectionToken } from "./preference-navigation-items.injectable";
-
-const generalPreferenceNavigationItemsInjectable = getInjectable({
-  id: "general-preference-navigation-items",
-
-  instantiate: (di) =>
-    computed((): PreferenceNavigationItem[] =>
-      pipeline(
-        di.injectMany(preferenceNavigationItemInjectionToken),
-        filter((item) => !!item.isVisible.get()),
-        filter((item) => !item.parent),
-        (items) => orderBy([(item) => item.orderNumber], ["asc"], items),
-      ),
-    ),
-});
-
-export default generalPreferenceNavigationItemsInjectable;
- 

src/renderer/components/+preferences/preferences-navigation/kubernetes-preferences-navigation-item.injectable.ts

@@ -27,6 +27,7 @@ const kubernetesPreferencesNavigationItemInjectable = getInjectable({
     return {
       id: "kubernetes",
       label: "Kubernetes",
+      parent: "general",
       navigate: navigateToPreferenceTab(route),
       isActive: routeIsActive,
       isVisible: computed(() => true),

src/renderer/components/+preferences/preferences-navigation/preference-navigation-items-for-group.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 {
+  getInjectable,
+  lifecycleEnum,
+} from "@ogre-tools/injectable";
+import { computed } from "mobx";
+import type { PreferenceNavigationItem } from "./preference-navigation-items.injectable";
+import preferenceNavigationItemsInjectable from "./preference-navigation-items.injectable";
+
+const preferenceNavigationItemsForGroupInjectable = getInjectable({
+  id: "preference-navigation-items-for-group",
+
+  instantiate: (di, group: string) => {
+    const preferenceNavigationItems = di.inject(preferenceNavigationItemsInjectable);
+
+    return computed((): PreferenceNavigationItem[] =>
+      preferenceNavigationItems.get().filter((item) => item.parent == group),
+    );
+  },
+
+  lifecycle: lifecycleEnum.keyedSingleton({
+    getInstanceKey: (di, group: string) => group,
+  }),
+});
+
+export default preferenceNavigationItemsForGroupInjectable;
+

src/renderer/components/+preferences/preferences-navigation/preference-navigation-items.injectable.ts

@@ -20,7 +20,7 @@ export interface PreferenceNavigationItem {
   isVisible: IComputedValue<boolean>;
   navigate: () => void;
   orderNumber: number;
-  parent?: string;
+  parent: string;
 }
 
 const preferenceNavigationItemsInjectable = getInjectable({

src/renderer/components/+preferences/preferences-navigation/proxy-preferences-navigation-item.injectable.ts

@@ -24,6 +24,7 @@ const proxyPreferencesNavigationItemInjectable = getInjectable({
     return {
       id: "proxy",
       label: "Proxy",
+      parent: "general",
       navigate: navigateToPreferenceTab(route),
       isActive: routeIsActive,
       isVisible: computed(() => true),

src/renderer/components/+preferences/preferences-navigation/telemetry-preferences-navigation-item.injectable.ts

@@ -32,6 +32,7 @@ const terminalPreferencesNavigationItemInjectable = getInjectable({
     return {
       id: "telemetry",
       label: "Telemetry",
+      parent: "general",
       navigate: navigateToPreferenceTab(route),
       isActive: routeIsActive,
 

src/renderer/components/+preferences/preferences-navigation/terminal-preferences-navigation-item.injectable.ts

@@ -24,6 +24,7 @@ const terminalPreferencesNavigationItemInjectable = getInjectable({
     return {
       id: "terminal",
       label: "Terminal",
+      parent: "general",
       navigate: navigateToPreferenceTab(route),
       isActive: routeIsActive,
       isVisible: computed(() => true),