Show specific preferences if tabId passed

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

src/renderer/components/+preferences/__tests__/extensions.test.tsx

@@ -36,7 +36,7 @@ describe("<Extensions/>", () => {
   it("renders proper page title", () => {
     const { getByText } = render(<Extensions />);
 
-    expect(getByText("some-test-extension-id settings")).toBeInTheDocument();
+    expect(getByText("some-test-extension-id preferences")).toBeInTheDocument();
   });
 
   it("renders relevant preference items", () => {
@@ -50,6 +50,24 @@ describe("<Extensions/>", () => {
 
     expect(queryByTestId(`extension-preference-item-for-some-unrelated-preference-item-id`)).not.toBeInTheDocument();
   });
+
+  describe("when tabId param is passed and extension has same showInPreferencesTab param", () => {
+    beforeEach(() => {
+      di.override(currentPathParametersInjectable, () => computed(() => ({ extensionId: "some-test-extension-id", tabId: "license-extension-tab" })));
+    });
+
+    it("does render related preferences for specific tab", () => {
+      const { getByTestId } = render(<Extensions />);
+
+      expect(getByTestId(`extension-preference-item-for-preference-for-tab-item-id`)).toBeInTheDocument();
+    });
+
+    it("does not render irrelevant preference items", () => {
+      const { queryByTestId } = render(<Extensions />);
+
+      expect(queryByTestId(`extension-preference-item-for-some-unrelated-preference-item-id`)).not.toBeInTheDocument();
+    });
+  });
 });
 
 const extensionWithSpecificPreferenceItems: Partial<LensRendererExtension> = {
@@ -85,5 +103,22 @@ const extensionWithSpecificPreferenceItems: Partial<LensRendererExtension> = {
         Input: () => <div />,
       },
     },
+
+    {
+      title: "preference for specific tab",
+      id: "preference-for-tab-item-id",
+      showInPreferencesTab: "license-extension-tab",
+
+      components: {
+        Hint: () => <div />,
+        Input: () => <div />,
+      },
+    },
   ],
+
+  appPreferenceTabs: [{
+    title: "License tab",
+    id: "license-extension-tab",
+    orderNumber: 100,
+  }],
 };

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

@@ -22,21 +22,25 @@ export const extensionPreferenceItemInjectionToken = getInjectionToken<Extension
 const extensionsPreferenceItemsInjectable = getInjectable({
   id: "extension-preference-items",
 
-  instantiate: (di, extensionId: string): IComputedValue<RegisteredAppPreference[]> => {
+  instantiate: (di, pathParams: IComputedValue<Record<string, string>>): IComputedValue<RegisteredAppPreference[]> => {
     const extensions = di.inject(rendererExtensionsInjectable);
+    const { extensionId, tabId } = pathParams.get();
     const extension = extensions.get().find((extension) => extension.sanitizedExtensionId === extensionId);
+    const preferences = extension.appPreferences.map(preference => ({
+      id: preference.id,
+      ...preference,
+    }));
 
     return computed(() => {
       if (!extension) {
         return [];
       }
 
-      return extension.appPreferences
-        .filter(preference => !preference.showInPreferencesTab)
-        .map(preference => ({
-          id: preference.id,
-          ...preference,
-        }));
+      if (tabId) {
+        return preferences.filter(preference => preference.showInPreferencesTab == tabId);
+      }
+
+      return preferences.filter(preference => !preference.showInPreferencesTab);
     });
   },
   lifecycle: lifecycleEnum.transient,

src/renderer/components/+preferences/extensions.tsx

@@ -46,7 +46,7 @@ export const Extensions = withInjectables<Dependencies>(
       const extension = extensions.get().find((extension) => extension.sanitizedExtensionId === extensionId);
 
       return {
-        preferenceItems: di.inject(extensionsPreferenceItemsInjectable, extensionId),
+        preferenceItems: di.inject(extensionsPreferenceItemsInjectable, pathParameters),
         extensionName: extension?.manifest.name,
       };
     },