Refactor <PreferencesNavigation>

- Moving logic out of react component
- Remove 'fromExtension' prop from navigaion items

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

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

@@ -10,10 +10,11 @@ import { getDiForUnitTesting } from "../../../../getDiForUnitTesting";
 import { type DiRender, renderFor } from "../../../test-utils/renderFor";
 import { PreferencesNavigation } from "../preferences-navigation";
 import type { PreferenceNavigationItem } from "../preference-navigation-items.injectable";
-import preferenceNavigationItemsInjectable from "../preference-navigation-items.injectable";
 import { computed } from "mobx";
 import { noop } from "../../../../utils";
 import type { IComputedValue } from "mobx/dist/internal";
+import generalPreferenceNavigationItemsInjectable from "../general-preference-navigation-items.injectable";
+import extensionsPreferenceNavigationItemsInjectable from "../extension-preference-navigation-items.injectable";
 
 describe("<PreferencesNavigation />", () => {
   let di: DiContainer;
@@ -40,6 +41,7 @@ describe("<PreferencesNavigation />", () => {
           isVisible: computed(() => true),
           navigate: () => noop,
           orderNumber: 0,
+          parent: "",
         },
         {
           id: "proxy",
@@ -48,10 +50,11 @@ describe("<PreferencesNavigation />", () => {
           isVisible: computed(() => true),
           navigate: () => noop,
           orderNumber: 1,
+          parent: "",
         },
       ]);
 
-      di.override(preferenceNavigationItemsInjectable, () => generalNavItems);
+      di.override(generalPreferenceNavigationItemsInjectable, () => generalNavItems);
     });
 
     it("renders them", () => {
@@ -91,7 +94,9 @@ describe("<PreferencesNavigation />", () => {
           navigate: () => noop,
           orderNumber: 1,
         },
-        // Extension navigation items
+      ]);
+
+      const extensionNavItems: IComputedValue<PreferenceNavigationItem[]> = computed(() => [
         {
           id: "extension-preferences-navigation-item-lensapp-node-menu",
           label: "lensapp-node-menu",
@@ -99,7 +104,7 @@ describe("<PreferencesNavigation />", () => {
           isVisible: computed(() => true),
           navigate: () => noop,
           orderNumber: 0,
-          fromExtension: true,
+          parent: "extensions",
         },
         {
           id: "extension-preferences-navigation-item-lensapp-pod-menu",
@@ -108,7 +113,7 @@ describe("<PreferencesNavigation />", () => {
           isVisible: computed(() => true),
           navigate: () => noop,
           orderNumber: 0,
-          fromExtension: true,
+          parent: "extensions",
         },
         {
           id: "extension-preferences-navigation-item-metrics-plugin",
@@ -117,11 +122,12 @@ describe("<PreferencesNavigation />", () => {
           isVisible: computed(() => false),
           navigate: () => noop,
           orderNumber: 0,
-          fromExtension: true,
+          parent: "extensions",
         },
       ]);
 
-      di.override(preferenceNavigationItemsInjectable, () => generalNavItems);
+      di.override(generalPreferenceNavigationItemsInjectable, () => generalNavItems);
+      di.override(extensionsPreferenceNavigationItemsInjectable, () => extensionNavItems);
     });
 
     it("renders general navigation items", () => {

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

@@ -0,0 +1,26 @@
+/**
+ * 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 { PreferenceNavigationItem, 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/extensions-nav-group.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import { withInjectables } from "@ogre-tools/injectable-react";
+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";
+
+interface Dependencies {
+  navigationItems: IComputedValue<PreferenceNavigationItem[]>
+}
+
+function NonInjectedExtensionsNavGroup(props: Dependencies) {
+  if (!props.navigationItems.get().length) {
+    return null;
+  }
+
+  return (
+    <div data-testid="extension-settings">
+      <hr/>
+      <div className="header flex items-center">
+        <Icon
+          material="extension"
+          smallest
+          className="mr-3"
+        />
+        {" "}
+        Extensions
+      </div>
+      <div>
+        {props.navigationItems.get().map(item => (
+          <PreferencesNavigationTab
+            key={item.id}
+            item={item}
+            data-testid={`tab-link-for-${item.id}`}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export const ExtensionsNavGroup = withInjectables<Dependencies>(
+  NonInjectedExtensionsNavGroup, 
+
+  {
+    getProps: (di) => ({
+      navigationItems: di.inject(extensionsPreferenceNavigationItemsInjectable)
+    })
+  }
+)

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

@@ -43,7 +43,7 @@ const extensionPreferencesNavigationItemRegistratorInjectable = getInjectable({
           isActive,
           isVisible,
           orderNumber: 20,
-          fromExtension: true,
+          parent: "extensions",
         }),
       });
 

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

@@ -0,0 +1,40 @@
+import React from "react";
+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";
+
+interface Dependencies {
+  navigationItems: IComputedValue<PreferenceNavigationItem[]>;
+}
+
+function NonInjectedGeneralNavGroup(props: Dependencies) {
+  if (!props.navigationItems.get().length) {
+    return null;
+  }
+
+  return (
+    <React.Fragment>
+      <div className="header">Preferences</div>
+
+      {props.navigationItems.get().map(item => (
+        <PreferencesNavigationTab
+          key={item.id}
+          item={item}
+          data-testid={`tab-link-for-${item.id}`}
+        />
+      ))}
+    </React.Fragment>
+  )
+}
+
+export const GeneralNavGroup = withInjectables<Dependencies>(
+  NonInjectedGeneralNavGroup, 
+
+  {
+    getProps: (di) => ({
+      navigationItems: di.inject(generalPreferenceNavigationItemsInjectable),
+    })
+  }
+)

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

@@ -0,0 +1,26 @@
+/**
+ * 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 { PreferenceNavigationItem, 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/preference-navigation-items.injectable.ts

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

src/renderer/components/+preferences/preferences-navigation/preference-navigation-tab.tsx

@@ -0,0 +1,17 @@
+import { observer } from "mobx-react";
+import React from "react";
+import { Tab } from "../../tabs";
+import type { PreferenceNavigationItem } from "./preference-navigation-items.injectable";
+
+interface PreferenceNavigationTabProps extends React.DOMAttributes<HTMLElement> {
+  item: PreferenceNavigationItem;
+}
+
+export const PreferencesNavigationTab = observer(({ item }: PreferenceNavigationTabProps) => (
+  <Tab
+    value={item}
+    label={item.label}
+    data-testid={`tab-link-for-${item.id}`}
+    active={item.isActive.get()}
+  />
+));

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

@@ -2,89 +2,23 @@
  * Copyright (c) OpenLens Authors. All rights reserved.
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
-import { Tab, Tabs } from "../../tabs";
-
-import { withInjectables } from "@ogre-tools/injectable-react";
-import type { IComputedValue } from "mobx";
 import React from "react";
+import { Tabs } from "../../tabs";
+import { ExtensionsNavGroup } from "./extensions-nav-group";
+import { GeneralNavGroup } from "./general-nav-group";
 import type {
-  PreferenceNavigationItem,
+  PreferenceNavigationItem
 } from "./preference-navigation-items.injectable";
-import preferenceNavigationItemsInjectable from "./preference-navigation-items.injectable";
-
-import { observer } from "mobx-react";
-import { Icon } from "../../icon";
-
-interface Dependencies {
-  navigationItems: IComputedValue<PreferenceNavigationItem[]>;
-}
-
-const NonInjectedPreferencesNavigation = ({
-  navigationItems,
-}: Dependencies) => {
-  const generalNavItems = navigationItems.get().filter(item => !item.fromExtension);
-  const extensionNavItems = navigationItems.get().filter(item => item.fromExtension);
-
-  function renderTab(item: PreferenceNavigationItem) {
-    return (
-      <PreferencesNavigationTab
-        key={item.id}
-        item={item}
-        data-testid={`tab-link-for-${item.id}`}
-      />
-    );
-  }
 
+export const PreferencesNavigation = () => {
   return (
     <Tabs
       className="flex column"
       scrollable={false}
       onChange={(item: PreferenceNavigationItem) => item.navigate()}
     >
-      <div className="header">Preferences</div>
+      <GeneralNavGroup/>
-
+      <ExtensionsNavGroup/>
-      {generalNavItems.map(renderTab)}
-
-      {extensionNavItems.length > 0 && (
-        <div data-testid="extension-settings">
-          <hr/>
-          <div className="header flex items-center">
-            <Icon
-              material="extension"
-              smallest
-              className="mr-3"
-            />
-            {" "}
-            Extensions
-          </div>
-          <div>
-            {extensionNavItems.map(renderTab)}
-          </div>
-        </div>
-      )}
     </Tabs>
   );
 };
-
-interface PreferenceNavigationTabProps extends React.DOMAttributes<HTMLElement> {
-  item: PreferenceNavigationItem;
-}
-
-const PreferencesNavigationTab = observer(({ item }: PreferenceNavigationTabProps) => (
-  <Tab
-    value={item}
-    label={item.label}
-    data-testid={`tab-link-for-${item.id}`}
-    active={item.isActive.get()}
-  />
-));
-
-export const PreferencesNavigation = withInjectables<Dependencies>(
-  NonInjectedPreferencesNavigation,
-
-  {
-    getProps: (di) => ({
-      navigationItems: di.inject(preferenceNavigationItemsInjectable),
-    }),
-  },
-);