Render specific extension tab in sidebar navigation

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

src/behaviours/preferences/__snapshots__/navigation-to-extension-specific-preferences.test.tsx.snap

@@ -1,5 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`preferences - navigation to extension specific preferences given in preferences, when rendered given extension with registered tab shows extension tab in general area 1`] = `
+<div
+  class="Tab flex gaps align-center"
+  data-testid="tab-link-for-extension-specific-tab-navigation-item-license-extension-tab"
+  role="tab"
+  tabindex="0"
+>
+  <div
+    class="label"
+  >
+    License tab
+  </div>
+</div>
+`;
+
 exports[`preferences - navigation to extension specific preferences given in preferences, when rendered given multiple extensions with specific preferences, when navigating to extension specific preferences page renders 1`] = `
 <div>
   <div
@@ -44,30 +59,6 @@ exports[`preferences - navigation to extension specific preferences given in pre
               Proxy
             </div>
           </div>
-          <div
-            class="Tab flex gaps align-center active"
-            data-testid="tab-link-for-extension-some-test-extension-id"
-            role="tab"
-            tabindex="0"
-          >
-            <div
-              class="label"
-            >
-              some-test-extension-id
-            </div>
-          </div>
-          <div
-            class="Tab flex gaps align-center"
-            data-testid="tab-link-for-extension-some-other-test-extension-id"
-            role="tab"
-            tabindex="0"
-          >
-            <div
-              class="label"
-            >
-              some-other-test-extension-id
-            </div>
-          </div>
           <div
             class="Tab flex gaps align-center"
             data-testid="tab-link-for-kubernetes"
@@ -104,6 +95,52 @@ exports[`preferences - navigation to extension specific preferences given in pre
               Terminal
             </div>
           </div>
+          <div
+            data-testid="extension-settings"
+          >
+            <hr />
+            <div
+              class="header flex items-center"
+            >
+              <i
+                class="Icon mr-3 material focusable smallest"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="extension"
+                >
+                  extension
+                </span>
+              </i>
+               Extensions
+            </div>
+            <div>
+              <div
+                class="Tab flex gaps align-center active"
+                data-testid="tab-link-for-extension-some-test-extension-id"
+                role="tab"
+                tabindex="0"
+              >
+                <div
+                  class="label"
+                >
+                  some-test-extension-id
+                </div>
+              </div>
+              <div
+                class="Tab flex gaps align-center"
+                data-testid="tab-link-for-extension-some-other-test-extension-id"
+                role="tab"
+                tabindex="0"
+              >
+                <div
+                  class="label"
+                >
+                  some-other-test-extension-id
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </nav>
@@ -118,7 +155,8 @@ exports[`preferences - navigation to extension specific preferences given in pre
           id="extensions"
         >
           <h2>
-            Extensions
+            some-test-extension-id
+             preferences
           </h2>
           <section
             class="small"
@@ -763,18 +801,6 @@ exports[`preferences - navigation to extension specific preferences given in pre
               Proxy
             </div>
           </div>
-          <div
-            class="Tab flex gaps align-center"
-            data-testid="tab-link-for-extension-some-test-extension-id"
-            role="tab"
-            tabindex="0"
-          >
-            <div
-              class="label"
-            >
-              some-test-extension-id
-            </div>
-          </div>
           <div
             class="Tab flex gaps align-center"
             data-testid="tab-link-for-kubernetes"
@@ -811,6 +837,40 @@ exports[`preferences - navigation to extension specific preferences given in pre
               Terminal
             </div>
           </div>
+          <div
+            data-testid="extension-settings"
+          >
+            <hr />
+            <div
+              class="header flex items-center"
+            >
+              <i
+                class="Icon mr-3 material focusable smallest"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="extension"
+                >
+                  extension
+                </span>
+              </i>
+               Extensions
+            </div>
+            <div>
+              <div
+                class="Tab flex gaps align-center"
+                data-testid="tab-link-for-extension-some-test-extension-id"
+                role="tab"
+                tabindex="0"
+              >
+                <div
+                  class="label"
+                >
+                  some-test-extension-id
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </nav>
@@ -843,7 +903,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
             >
               <span
                 class="css-1f43avz-a11yText-A11yText"
-                id="react-select-14-live-region"
+                id="react-select-34-live-region"
               />
               <span
                 aria-atomic="false"
@@ -859,7 +919,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
                 >
                   <div
                     class="Select__placeholder css-14el2xx-placeholder"
-                    id="react-select-14-placeholder"
+                    id="react-select-34-placeholder"
                   >
                     Select...
                   </div>
@@ -869,7 +929,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
                   >
                     <input
                       aria-autocomplete="list"
-                      aria-describedby="react-select-14-placeholder"
+                      aria-describedby="react-select-34-placeholder"
                       aria-expanded="false"
                       aria-haspopup="true"
                       autocapitalize="none"
@@ -928,7 +988,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
             >
               <span
                 class="css-1f43avz-a11yText-A11yText"
-                id="react-select-15-live-region"
+                id="react-select-35-live-region"
               />
               <span
                 aria-atomic="false"
@@ -944,7 +1004,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
                 >
                   <div
                     class="Select__placeholder css-14el2xx-placeholder"
-                    id="react-select-15-placeholder"
+                    id="react-select-35-placeholder"
                   >
                     Select...
                   </div>
@@ -954,7 +1014,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
                   >
                     <input
                       aria-autocomplete="list"
-                      aria-describedby="react-select-15-placeholder"
+                      aria-describedby="react-select-35-placeholder"
                       aria-expanded="false"
                       aria-haspopup="true"
                       autocapitalize="none"
@@ -1068,7 +1128,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
             >
               <span
                 class="css-1f43avz-a11yText-A11yText"
-                id="react-select-16-live-region"
+                id="react-select-36-live-region"
               />
               <span
                 aria-atomic="false"
@@ -1084,7 +1144,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
                 >
                   <div
                     class="Select__placeholder css-14el2xx-placeholder"
-                    id="react-select-16-placeholder"
+                    id="react-select-36-placeholder"
                   >
                     Select...
                   </div>
@@ -1094,7 +1154,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
                   >
                     <input
                       aria-autocomplete="list"
-                      aria-describedby="react-select-16-placeholder"
+                      aria-describedby="react-select-36-placeholder"
                       aria-expanded="false"
                       aria-haspopup="true"
                       autocapitalize="none"
@@ -1153,7 +1213,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
             >
               <span
                 class="css-1f43avz-a11yText-A11yText"
-                id="react-select-17-live-region"
+                id="react-select-37-live-region"
               />
               <span
                 aria-atomic="false"
@@ -1169,7 +1229,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
                 >
                   <div
                     class="Select__placeholder css-14el2xx-placeholder"
-                    id="react-select-17-placeholder"
+                    id="react-select-37-placeholder"
                   >
                     Select...
                   </div>
@@ -1179,7 +1239,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
                   >
                     <input
                       aria-autocomplete="list"
-                      aria-describedby="react-select-17-placeholder"
+                      aria-describedby="react-select-37-placeholder"
                       aria-expanded="false"
                       aria-haspopup="true"
                       autocapitalize="none"
@@ -1308,18 +1368,6 @@ exports[`preferences - navigation to extension specific preferences given in pre
               Proxy
             </div>
           </div>
-          <div
-            class="Tab flex gaps align-center active"
-            data-testid="tab-link-for-extension-some-test-extension-id"
-            role="tab"
-            tabindex="0"
-          >
-            <div
-              class="label"
-            >
-              some-test-extension-id
-            </div>
-          </div>
           <div
             class="Tab flex gaps align-center"
             data-testid="tab-link-for-kubernetes"
@@ -1356,6 +1404,40 @@ exports[`preferences - navigation to extension specific preferences given in pre
               Terminal
             </div>
           </div>
+          <div
+            data-testid="extension-settings"
+          >
+            <hr />
+            <div
+              class="header flex items-center"
+            >
+              <i
+                class="Icon mr-3 material focusable smallest"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="extension"
+                >
+                  extension
+                </span>
+              </i>
+               Extensions
+            </div>
+            <div>
+              <div
+                class="Tab flex gaps align-center active"
+                data-testid="tab-link-for-extension-some-test-extension-id"
+                role="tab"
+                tabindex="0"
+              >
+                <div
+                  class="label"
+                >
+                  some-test-extension-id
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </nav>
@@ -1370,7 +1452,8 @@ exports[`preferences - navigation to extension specific preferences given in pre
           id="extensions"
         >
           <h2>
-            Extensions
+            some-test-extension-id
+             preferences
           </h2>
           <section
             class="small"

src/behaviours/preferences/navigation-to-extension-specific-preferences.test.tsx

@@ -165,6 +165,26 @@ describe("preferences - navigation to extension specific preferences", () => {
         });
       });
     });
+
+    describe("given extension with registered tab", () => {
+      beforeEach(async () => {
+        const extension = getRendererExtensionFake(extensionStubWithWithRegisteredTab);
+
+        await applicationBuilder.addExtensions(extension);
+      });
+
+      it("shows extension tab in general area", () => {
+        const actual = rendered.getByTestId("tab-link-for-extension-specific-tab-navigation-item-license-extension-tab");
+
+        expect(actual).toMatchSnapshot();
+      });
+
+      it("does not show custom settings block", () => {
+        const actual = rendered.queryByTestId("extension-settings");
+
+        expect(actual).not.toBeInTheDocument();
+      });
+    });
   });
 });
 
@@ -231,3 +251,46 @@ const extensionStubWithShowInPreferencesTab: Partial<LensRendererExtension> = {
     },
   ],
 };
+
+const extensionStubWithWithRegisteredTab: Partial<LensRendererExtension> = {
+  id: "registered-tab-page-id",
+
+  appPreferences: [
+    {
+      title: "License item",
+      id: "license-preference-item-id",
+      showInPreferencesTab: "license-extension-tab",
+
+      components: {
+        Hint: () => <div data-testid="license-preference-item-hint" />,
+        Input: () => <div data-testid="license-preference-item-input" />,
+      },
+    },
+    {
+      title: "Menu item",
+      id: "menu-preference-item-id",
+      showInPreferencesTab: "menu-extension-tab",
+
+      components: {
+        Hint: () => <div data-testid="menu-preference-item-hint" />,
+        Input: () => <div data-testid="menu-preference-item-input" />,
+      },
+    },
+    {
+      title: "Survey item",
+      id: "survey-preference-item-id",
+      showInPreferencesTab: "survey-extension-tab",
+
+      components: {
+        Hint: () => <div data-testid="survey-preference-item-hint" />,
+        Input: () => <div data-testid="survey-preference-item-input" />,
+      },
+    },
+  ],
+
+  appPreferenceTabs: [{
+    title: "License tab",
+    id: "license-extension-tab",
+    orderNumber: 100,
+  }],
+};

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

@@ -0,0 +1,59 @@
+/**
+ * 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 { computed } from "mobx";
+import { map } from "lodash/fp";
+
+import navigateToRouteInjectable from "../../../../main/navigate-to-route/navigate-to-route.injectable";
+import routeIsActiveInjectable from "../../../routes/route-is-active.injectable";
+import { preferenceNavigationItemInjectionToken } from "./preference-navigation-items.injectable";
+
+import type { LensRendererExtension } from "../../../../extensions/lens-renderer-extension";
+import { extensionRegistratorInjectionToken } from "../../../../extensions/extension-loader/extension-registrator-injection-token";
+import { pipeline } from "@ogre-tools/fp";
+
+const extensionSpecificTabNavigationItemRegistratorInjectable = getInjectable({
+  id: "extension-specific-tab-preferences-navigation-items",
+
+  instantiate: (di) => {
+    return (extension: LensRendererExtension) => {
+      const navigateToRoute = di.inject(navigateToRouteInjectable);
+
+      const injectables = pipeline(
+        extension.appPreferenceTabs,
+
+        map((tab) => {
+          const id = `extension-specific-tab-navigation-item-${tab.id}`;
+          const route = {
+            path: `/preferences/${tab.id}`,
+            clusterFrame: false,
+            isEnabled: computed(() => true),
+          };
+          const routeIsActive = di.inject(routeIsActiveInjectable, route);
+
+          return getInjectable({
+            id,
+            injectionToken: preferenceNavigationItemInjectionToken,
+            instantiate: () => ({
+              id,
+              label: tab.title,
+              orderNumber: tab.orderNumber,
+              navigate: () => navigateToRoute(route, {}),
+              isVisible: computed(() => true),
+              isActive: computed(() => routeIsActive.get()),
+            }),
+          });
+        }),
+      );
+
+      injectables.forEach(di.register);
+
+      return;
+    };
+  },
+  injectionToken: extensionRegistratorInjectionToken,
+});
+
+export default extensionSpecificTabNavigationItemRegistratorInjectable;