diff --git a/src/behaviours/preferences/__snapshots__/navigation-to-extension-specific-preferences.test.tsx.snap b/src/behaviours/preferences/__snapshots__/navigation-to-extension-specific-preferences.test.tsx.snap index 8dd45bbb38..79787b5d8d 100644 --- a/src/behaviours/preferences/__snapshots__/navigation-to-extension-specific-preferences.test.tsx.snap +++ b/src/behaviours/preferences/__snapshots__/navigation-to-extension-specific-preferences.test.tsx.snap @@ -2155,6 +2155,165 @@ exports[`preferences - navigation to extension specific preferences given in pre `; +exports[`preferences - navigation to extension specific preferences given in preferences, when rendered when extension with specific preferences is enabled when navigating to extension preferences using navigation when extension is disabled renders 1`] = ` + +
+
+
+
+
+
+ +
+
+
+

+ + preferences +

+
+ No extension found +
+
+
+
+
+
+
+ + + close + + +
+ +
+
+
+
+
+
+
+ +`; + exports[`preferences - navigation to extension specific preferences when navigating to extension specific tab renders 1`] = `
{ let applicationBuilder: ApplicationBuilder; @@ -98,9 +99,14 @@ describe("preferences - navigation to extension specific preferences", () => { }); describe("when extension with specific preferences is enabled", () => { + let testExtension: TestExtension; + beforeEach(() => { const getRendererExtensionFake = getRendererExtensionFakeFor(applicationBuilder); - const testExtension = getRendererExtensionFake(extensionStubWithExtensionSpecificPreferenceItems); + + testExtension = getRendererExtensionFake( + extensionStubWithExtensionSpecificPreferenceItems, + ); applicationBuilder.extensions.renderer.enable(testExtension); }); @@ -159,6 +165,26 @@ describe("preferences - navigation to extension specific preferences", () => { expect(actual).toHaveClass("active"); }); + + describe("when extension is disabled", () => { + beforeEach(() => { + applicationBuilder.extensions.renderer.disable(testExtension); + }); + + it("renders", () => { + expect(rendered.baseElement).toMatchSnapshot(); + }); + + it("shows the error message about extension not being present", () => { + expect(rendered.getByTestId("error-for-extension-not-being-present")).toBeInTheDocument(); + }); + + it("when extension is enabled again, does not show the error message anymore", () => { + applicationBuilder.extensions.renderer.enable(testExtension); + + expect(rendered.queryByTestId("error-for-extension-not-being-present")).not.toBeInTheDocument(); + }); + }); }); }); @@ -292,10 +318,10 @@ describe("preferences - navigation to extension specific preferences", () => { describe("when navigating to extension specific tab", () => { let rendered: RenderResult; let di: DiContainer; - + beforeEach(async () => { di = getDiForUnitTesting({ doGeneralOverrides: true }); - + const getRendererExtensionFake = getRendererExtensionFakeFor(applicationBuilder); const extension = getRendererExtensionFake(extensionStubWithWithSameRegisteredTab); const otherExtension = getRendererExtensionFake(extensionUsingSomeoneElseTab); @@ -306,10 +332,10 @@ describe("preferences - navigation to extension specific preferences", () => { extensionId: "duplicated-tab-page-id", tabId: "metrics-extension-tab", }}; - + applicationBuilder.preferences.navigateTo(extensionRoute, params); }); - + await applicationBuilder.extensions.renderer.enable(extension, otherExtension); rendered = await applicationBuilder.render(); }); @@ -330,10 +356,10 @@ describe("preferences - navigation to extension specific preferences", () => { describe("when navigating to someone else extension specific tab", () => { let rendered: RenderResult; let di: DiContainer; - + beforeEach(async () => { di = getDiForUnitTesting({ doGeneralOverrides: true }); - + const getRendererExtensionFake = getRendererExtensionFakeFor(applicationBuilder); const extension = getRendererExtensionFake(extensionStubWithWithSameRegisteredTab); const extensionUsingOtherTab = getRendererExtensionFake(extensionUsingSomeoneElseTab); @@ -344,10 +370,10 @@ describe("preferences - navigation to extension specific preferences", () => { extensionId: "extension-using-someone-else-tab-id", tabId: "metrics-extension-tab", }}; - + applicationBuilder.preferences.navigateTo(extensionRoute, params); }); - + await applicationBuilder.extensions.renderer.enable(extension, extensionUsingOtherTab); rendered = await applicationBuilder.render(); }); diff --git a/src/renderer/components/+preferences/extensions.tsx b/src/renderer/components/+preferences/extensions.tsx index f219d5124b..94b56a2716 100644 --- a/src/renderer/components/+preferences/extensions.tsx +++ b/src/renderer/components/+preferences/extensions.tsx @@ -4,6 +4,7 @@ */ import { withInjectables } from "@ogre-tools/injectable-react"; +import type { IComputedValue } from "mobx"; import { observer } from "mobx-react"; import React from "react"; import type { RegisteredAppPreference } from "./app-preferences/app-preference-registration"; @@ -12,44 +13,50 @@ import { ExtensionSettings } from "./extension-settings"; import { Preferences } from "./preferences"; interface Dependencies { - preferenceItems: RegisteredAppPreference[]; - extensionName?: string; + model: IComputedValue<{ + preferenceItems: RegisteredAppPreference[]; + extensionName?: string; + }>; } -const NonInjectedExtensions = ({ preferenceItems, extensionName }: Dependencies) => ( - -
-

- {extensionName} - {" "} - preferences -

- {!extensionName && ( -
No extension found
- )} - {preferenceItems.map((preferenceItem, index) => ( - - ))} -
- -); +const NonInjectedExtensions = ({ model }: Dependencies) => { + const { extensionName, preferenceItems } = model.get(); + + return ( + +
+

+ {extensionName} + {" "} + preferences +

+ {!extensionName && ( +
+ No extension found +
+ )} + {preferenceItems.map((preferenceItem, index) => ( + + ))} +
+ + ); +}; export const Extensions = withInjectables( observer(NonInjectedExtensions), { - getProps: (di) => { - const { preferenceItems, extensionName } = di.inject(extensionPreferencesModelInjectable).get(); - - return { - preferenceItems, - extensionName, - }; - }, + getProps: (di) => ({ + model: di.inject(extensionPreferencesModelInjectable), + }), }, ); diff --git a/src/renderer/components/+preferences/preferences-navigation/extensions-nav-group.tsx b/src/renderer/components/+preferences/preferences-navigation/extensions-nav-group.tsx index c617b4bb1a..fd0c4158f6 100644 --- a/src/renderer/components/+preferences/preferences-navigation/extensions-nav-group.tsx +++ b/src/renderer/components/+preferences/preferences-navigation/extensions-nav-group.tsx @@ -9,12 +9,13 @@ import type { PreferenceNavigationItem } from "./preference-navigation-items.inj import { Icon } from "../../icon"; import { PreferencesNavigationTab } from "./preference-navigation-tab"; import preferenceNavigationItemsForGroupInjectable from "./preference-navigation-items-for-group.injectable"; +import { observer } from "mobx-react"; interface Dependencies { navigationItems: IComputedValue; } -function NonInjectedExtensionsNavGroup(props: Dependencies) { +const NonInjectedExtensionsNavGroup = observer((props: Dependencies) => { if (!props.navigationItems.get().length) { return null; } @@ -42,7 +43,7 @@ function NonInjectedExtensionsNavGroup(props: Dependencies) {
); -} +}); export const ExtensionsNavGroup = withInjectables( NonInjectedExtensionsNavGroup, diff --git a/src/renderer/components/+preferences/preferences-navigation/general-nav-group.tsx b/src/renderer/components/+preferences/preferences-navigation/general-nav-group.tsx index 71775a0e4a..0dc3b4693e 100644 --- a/src/renderer/components/+preferences/preferences-navigation/general-nav-group.tsx +++ b/src/renderer/components/+preferences/preferences-navigation/general-nav-group.tsx @@ -8,12 +8,13 @@ import type { IComputedValue } from "mobx"; import type { PreferenceNavigationItem } from "./preference-navigation-items.injectable"; import { PreferencesNavigationTab } from "./preference-navigation-tab"; import preferenceNavigationItemsForGroupInjectable from "./preference-navigation-items-for-group.injectable"; +import { observer } from "mobx-react"; interface Dependencies { navigationItems: IComputedValue; } -function NonInjectedGeneralNavGroup(props: Dependencies) { +const NonInjectedGeneralNavGroup = observer((props: Dependencies) => { if (!props.navigationItems.get().length) { return null; } @@ -31,7 +32,7 @@ function NonInjectedGeneralNavGroup(props: Dependencies) { ))} ); -} +}); export const GeneralNavGroup = withInjectables( NonInjectedGeneralNavGroup, diff --git a/src/renderer/components/+preferences/preferences-navigation/preference-navigation-items.injectable.ts b/src/renderer/components/+preferences/preferences-navigation/preference-navigation-items.injectable.ts index 9709f4bf51..8340ff003e 100644 --- a/src/renderer/components/+preferences/preferences-navigation/preference-navigation-items.injectable.ts +++ b/src/renderer/components/+preferences/preferences-navigation/preference-navigation-items.injectable.ts @@ -4,6 +4,7 @@ */ import { pipeline } from "@ogre-tools/fp"; import { getInjectable, getInjectionToken } from "@ogre-tools/injectable"; +import { computedInjectManyInjectable } from "@ogre-tools/injectable-extension-for-mobx"; import { filter, orderBy } from "lodash/fp"; import type { IComputedValue } from "mobx"; import { computed } from "mobx"; @@ -26,14 +27,18 @@ export interface PreferenceNavigationItem { const preferenceNavigationItemsInjectable = getInjectable({ id: "preference-navigation-items", - instantiate: (di) => - computed((): PreferenceNavigationItem[] => + instantiate: (di) => { + const computedInjectMany = di.inject(computedInjectManyInjectable); + const navigationItems = computedInjectMany(preferenceNavigationItemInjectionToken); + + return computed((): PreferenceNavigationItem[] => pipeline( - di.injectMany(preferenceNavigationItemInjectionToken), + navigationItems.get(), filter((item) => !!item.isVisible.get()), (items) => orderBy([(item) => item.orderNumber], ["asc"], items), ), - ), + ); + }, }); export default preferenceNavigationItemsInjectable;