Show Custom Settings block for nav items

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

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

@@ -14,7 +14,6 @@ import preferenceNavigationItemsInjectable from "../preference-navigation-items.
 import { computed } from "mobx";
 import { noop } from "../../../../utils";
 import type { IComputedValue } from "mobx/dist/internal";
-import { screen } from "@testing-library/dom";
 
 describe("<PreferencesNavigation />", () => {
   let di: DiContainer;
@@ -50,14 +49,6 @@ describe("<PreferencesNavigation />", () => {
           navigate: () => noop,
           orderNumber: 1,
         },
-        {
-          id: "kube",
-          label: "Kube",
-          isActive: computed(() => false),
-          isVisible: computed(() => false),
-          navigate: () => noop,
-          orderNumber: 2,
-        },
       ]);
 
       di.override(preferenceNavigationItemsInjectable, () => generalNavItems);
@@ -79,16 +70,6 @@ describe("<PreferencesNavigation />", () => {
 
       expect(container).not.toHaveTextContent("Custom Settings");
     });
-
-    it("does not render hidden navigation items", () => {
-      const { container } = render(
-        <PreferencesNavigation/>,
-      );
-
-      screen.debug();
-
-      expect(container).not.toHaveTextContent("Kube");
-    });
   });
 
   describe("when general + extension navigation items passed", () => {
@@ -169,14 +150,13 @@ describe("<PreferencesNavigation />", () => {
       expect(container).toHaveTextContent("lensapp-pod-menu");
     });
 
-    it("does not render hidden extension navigation items", () => {
+    it("renders extension navigation items inside custom settings block", () => {
-      const { container } = render(
+      const { getByTestId } = render(
         <PreferencesNavigation/>,
       );
+      const settingsBlock = getByTestId("extension-settings");
 
-      screen.debug();
+      expect(settingsBlock).toHaveTextContent("lensapp-node-menu");
-
-      expect(container).not.toHaveTextContent("metrics-plugin");
     });
   });
 });

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

@@ -13,6 +13,7 @@ import type {
 import preferenceNavigationItemsInjectable from "./preference-navigation-items.injectable";
 
 import { observer } from "mobx-react";
+import { Icon } from "../../icon";
 
 interface Dependencies {
   navigationItems: IComputedValue<PreferenceNavigationItem[]>;
@@ -20,7 +21,21 @@ interface Dependencies {
 
 const NonInjectedPreferencesNavigation = ({
   navigationItems,
-}: Dependencies) => (
+}: 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}`}
+      />
+    );
+  }
+
+  return (
     <Tabs
       className="flex column"
       scrollable={false}
@@ -28,15 +43,22 @@ const NonInjectedPreferencesNavigation = ({
     >
       <div className="header">Preferences</div>
 
-    {navigationItems.get().map((item) => (
+      {generalNavItems.map(renderTab)}
-      <PreferencesNavigationTab
+
-        key={item.id}
+      {extensionNavItems.length > 0 && (
-        item={item}
+        <div data-testid="extension-settings">
-        data-testid={`tab-link-for-${item.id}`}
+          <hr/>
-      />
+          <div className="header flex items-center">
-    ))}
+            <Icon material="extension" smallest className="mr-3"/> Custom Settings
+          </div>
+          <div>
+            {extensionNavItems.map(renderTab)}
+          </div>
+        </div>
+      )}
     </Tabs>
-);
+  );
+};
 
 interface PreferenceNavigationTabProps extends React.DOMAttributes<HTMLElement> {
   item: PreferenceNavigationItem;