diff --git a/src/behaviours/preferences/__snapshots__/extension-adding-preference-tabs.test.tsx.snap b/src/behaviours/preferences/__snapshots__/extension-adding-preference-tabs.test.tsx.snap new file mode 100644 index 0000000000..e5713ce61b --- /dev/null +++ b/src/behaviours/preferences/__snapshots__/extension-adding-preference-tabs.test.tsx.snap @@ -0,0 +1,665 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`preferences: extension adding preference tabs given in preferences, when extension with preference tabs is enabled renders 1`] = ` + +
+
+
+
+ + + home + + + + + arrow_back + + + + + arrow_forward + + +
+
+
+
+
+
+ +
+
+
+

+ Application +

+
+
+ Theme + +
+
+ + +
+
+
+ Select... +
+
+ +
+
+
+ + +
+
+
+
+
+
+
+ Extension Install Registry + +
+
+ + +
+
+
+ Select... +
+
+ +
+
+
+ + +
+
+
+

+ This setting is to change the registry URL for installing extensions by name. + If you are unable to access the default registry (https://registry.npmjs.org) you can change it in your + + .npmrc + + file or in the input below. +

+
+ +
+
+
+
+
+
+ Start-up + +
+ +
+
+
+
+ Update Channel + +
+
+ + +
+
+
+ Stable +
+
+ +
+
+
+ + +
+
+
+
+
+
+
+ Locale Timezone + +
+
+ + +
+
+
+ Select... +
+
+ +
+
+
+ + +
+
+
+
+
+
+
+
+
+
+ + + close + + +
+ +
+
+
+
+
+
+
+
+
+ + + arrow_left + + +
+
+ 0 +
+
+ + + arrow_right + + +
+
+
+
+
+
+
+
+
+ +`; diff --git a/src/behaviours/preferences/extension-adding-preference-tabs.test.tsx b/src/behaviours/preferences/extension-adding-preference-tabs.test.tsx new file mode 100644 index 0000000000..b811a5a848 --- /dev/null +++ b/src/behaviours/preferences/extension-adding-preference-tabs.test.tsx @@ -0,0 +1,95 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ +import type { RenderResult } from "@testing-library/react"; +import type { IObservableValue } from "mobx"; +import { runInAction, computed, observable } from "mobx"; +import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder"; +import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder"; +import { getExtensionFakeFor } from "../../renderer/components/test-utils/get-extension-fake"; + +describe("preferences: extension adding preference tabs", () => { + let builder: ApplicationBuilder; + + beforeEach(() => { + builder = getApplicationBuilder(); + }); + + describe("given in preferences, when extension with preference tabs is enabled", () => { + let rendered: RenderResult; + let someObservable: IObservableValue; + + beforeEach(async () => { + rendered = await builder.render(); + + builder.preferences.navigate(); + + const getExtensionFake = getExtensionFakeFor(builder); + + someObservable = observable.box(false); + + const testExtension = getExtensionFake({ + id: "some-extension-id", + name: "some-extension", + + rendererOptions: { + appPreferenceTabs: [ + { + title: "Some title", + id: "some-preference-tab-id", + orderNumber: 2, + }, + { + title: "Some other title", + id: "some-other-preference-tab-id", + orderNumber: 1, + }, + { + title: "Some title for item with controlled visibility", + id: "some-preference-tab-id-with-controlled-visibility", + orderNumber: 3, + visible: computed(() => someObservable.get()), + }, + ], + }, + }); + + builder.extensions.enable(testExtension); + + }); + + it("renders", () => { + expect(rendered.baseElement).toMatchSnapshot(); + }); + + it("shows tabs in order", () => { + const actual = rendered.queryAllByTestId(/tab-link-for-extension-some-extension-nav-item-(.*)/).map(x => x.dataset.testid); + + expect(actual).toEqual([ + "tab-link-for-extension-some-extension-nav-item-some-other-preference-tab-id", + "tab-link-for-extension-some-extension-nav-item-some-preference-tab-id", + ]); + }); + + it("does not show hidden tab", () => { + const actual = rendered.queryByTestId( + "tab-link-for-extension-some-extension-nav-item-some-preference-tab-id-with-controlled-visibility", + ); + + expect(actual).not.toBeInTheDocument(); + }); + + it("when item becomes visible, shows the tab", () => { + runInAction(() => { + someObservable.set(true); + }); + + const actual = rendered.queryByTestId( + "tab-link-for-extension-some-extension-nav-item-some-preference-tab-id-with-controlled-visibility", + ); + + expect(actual).toBeInTheDocument(); + }); + }); +}); diff --git a/src/renderer/components/+preferences/app-preference-tab/app-preference-tab-registration.ts b/src/renderer/components/+preferences/app-preference-tab/app-preference-tab-registration.ts index 2fed65d79e..d987e18b96 100644 --- a/src/renderer/components/+preferences/app-preference-tab/app-preference-tab-registration.ts +++ b/src/renderer/components/+preferences/app-preference-tab/app-preference-tab-registration.ts @@ -3,9 +3,12 @@ * Licensed under MIT License. See LICENSE in root directory for more information. */ +import type { IComputedValue } from "mobx"; + export interface AppPreferenceTabRegistration { title: string; id: string; orderNumber?: number; + visible?: IComputedValue; } diff --git a/src/renderer/components/+preferences/preferences-navigation/extension-tab-preferences-navigation-item.injectable.ts b/src/renderer/components/+preferences/preferences-navigation/extension-tab-preferences-navigation-item.injectable.ts index 8cd0c4895b..3fb2062ecf 100644 --- a/src/renderer/components/+preferences/preferences-navigation/extension-tab-preferences-navigation-item.injectable.ts +++ b/src/renderer/components/+preferences/preferences-navigation/extension-tab-preferences-navigation-item.injectable.ts @@ -46,7 +46,15 @@ const extensionSpecificTabNavigationItemRegistratorInjectable = getInjectable({ parent: "general", orderNumber: tab.orderNumber || 100, navigate: () => navigateToExtensionPreferences(extension.sanitizedExtensionId, tab.id), - isVisible: computed(() => true), + + isVisible: computed(() => { + if (!tab.visible) { + return true; + } + + return tab.visible.get(); + }), + isActive, }), });