diff --git a/src/renderer/components/+preferences/preferences-navigation/extensions-preferences-navigation-item.injectable.ts b/src/renderer/components/+preferences/preferences-navigation/extensions-preferences-navigation-item.injectable.ts index a60a127186..68c02343f7 100644 --- a/src/renderer/components/+preferences/preferences-navigation/extensions-preferences-navigation-item.injectable.ts +++ b/src/renderer/components/+preferences/preferences-navigation/extensions-preferences-navigation-item.injectable.ts @@ -3,10 +3,14 @@ * Licensed under MIT License. See LICENSE in root directory for more information. */ import { getInjectable } from "@ogre-tools/injectable"; +import { matches } from "lodash/fp"; import { computed } from "mobx"; +import extensionPreferencesRouteInjectable from "../../../../common/front-end-routing/routes/preferences/extension/extension-preferences-route.injectable"; import navigateToExtensionPreferencesInjectable from "../../../../common/front-end-routing/routes/preferences/extension/navigate-to-extension-preferences.injectable"; import { extensionRegistratorInjectionToken } from "../../../../extensions/extension-loader/extension-registrator-injection-token"; import type { LensRendererExtension } from "../../../../extensions/lens-renderer-extension"; +import currentPathParametersInjectable from "../../../routes/current-path-parameters.injectable"; +import routeIsActiveInjectable from "../../../routes/route-is-active.injectable"; import { preferenceNavigationItemInjectionToken } from "./preference-navigation-items.injectable"; const extensionPreferencesNavigationItemRegistratorInjectable = getInjectable({ @@ -18,6 +22,12 @@ const extensionPreferencesNavigationItemRegistratorInjectable = getInjectable({ navigateToExtensionPreferencesInjectable, ); const isVisible = extension.appPreferences.length > 0; + const extensionRoute = di.inject(extensionPreferencesRouteInjectable); + const extensionPreferencesRouteIsActive = di.inject(routeIsActiveInjectable, extensionRoute); + const pathParameters = di.inject(currentPathParametersInjectable); + const extensionPreferencesPathParameters = { extensionId: extension.sanitizedExtensionId }; + const isActive = extensionPreferencesRouteIsActive.get() && + matches(extensionPreferencesPathParameters, pathParameters.get()); const extensionInjectable = getInjectable({ id: `extension-preferences-navigation-item-${extension.sanitizedExtensionId}`, @@ -25,7 +35,7 @@ const extensionPreferencesNavigationItemRegistratorInjectable = getInjectable({ id: `extension-${extension.sanitizedExtensionId}`, label: `${extension.name}`, navigate: () => navigateToExtensionPreferences(extension.sanitizedExtensionId), - isActive: computed(() => false), + isActive: computed(() => isActive), isVisible: computed(() => isVisible), orderNumber: 20, }),