From e8b27ee6a571f41c88ca6aa08c422c16aefbdb6f Mon Sep 17 00:00:00 2001
From: Janne Savolainen <janne.savolainen@live.fi>
Date: Thu, 13 Oct 2022 15:13:17 +0300
Subject: [PATCH] Switch to using competition for application preferences

Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com>

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>
---
 .../navigate-to-app-preferences.injectable.ts |  20 --
 .../navigate-to-preferences.injectable.ts     |   4 +-
 .../closing-preferences.test.tsx.snap         | 290 +-----------------
 .../preferences/closing-preferences.test.tsx  |  99 ++++--
 ...e-to-application-preferences.injectable.ts |  20 ++
 .../preferences-catalog-entity.injectable.ts  |  10 +-
 .../preferences-route.injectable.ts           |   2 +-
 ...ent-preference-tab-composite.injectable.ts |   2 +-
 .../preferences-route-component.injectable.ts |   2 +-
 ...-preferences-navigation-item.injectable.ts |  16 +-
 .../navigate-to-preference-tab.injectable.ts  |  25 ++
 .../preference-tab-is-active.injectable.ts    |  30 ++
 12 files changed, 170 insertions(+), 350 deletions(-)
 delete mode 100644 src/common/front-end-routing/routes/preferences/app/navigate-to-app-preferences.injectable.ts
 create mode 100644 src/features/preferences/common/navigate-to-application-preferences.injectable.ts
 rename src/{common/catalog-entities/general-catalog-entities/implementations => features/preferences/common}/preferences-catalog-entity.injectable.ts (67%)
 rename src/features/preferences/{renderer => common}/preferences-route.injectable.ts (93%)
 create mode 100644 src/renderer/components/+preferences/preferences-navigation/navigate-to-preference-tab/navigate-to-preference-tab.injectable.ts
 create mode 100644 src/renderer/components/+preferences/preferences-navigation/navigate-to-preference-tab/preference-tab-is-active.injectable.ts

diff --git a/src/common/front-end-routing/routes/preferences/app/navigate-to-app-preferences.injectable.ts b/src/common/front-end-routing/routes/preferences/app/navigate-to-app-preferences.injectable.ts
deleted file mode 100644
index 4f83d47dec..0000000000
--- a/src/common/front-end-routing/routes/preferences/app/navigate-to-app-preferences.injectable.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * 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 appPreferencesRouteInjectable from "./app-preferences-route.injectable";
-import { navigateToRouteInjectionToken } from "../../../navigate-to-route-injection-token";
-
-const navigateToAppPreferencesInjectable = getInjectable({
-  id: "navigate-to-app-preferences",
-
-  instantiate: (di) => {
-    const navigateToRoute = di.inject(navigateToRouteInjectionToken);
-    const route = di.inject(appPreferencesRouteInjectable);
-
-    return () => navigateToRoute(route);
-  },
-});
-
-export default navigateToAppPreferencesInjectable;
diff --git a/src/common/front-end-routing/routes/preferences/navigate-to-preferences.injectable.ts b/src/common/front-end-routing/routes/preferences/navigate-to-preferences.injectable.ts
index 545751d7c3..249fe52458 100644
--- a/src/common/front-end-routing/routes/preferences/navigate-to-preferences.injectable.ts
+++ b/src/common/front-end-routing/routes/preferences/navigate-to-preferences.injectable.ts
@@ -3,12 +3,12 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getInjectable } from "@ogre-tools/injectable";
-import navigateToAppPreferencesInjectable from "./app/navigate-to-app-preferences.injectable";
+import navigateToApplicationPreferencesInjectable from "../../../../features/preferences/common/navigate-to-application-preferences.injectable";
 
 const navigateToPreferencesInjectable = getInjectable({
   id: "navigate-to-preferences",
 
-  instantiate: (di) => di.inject(navigateToAppPreferencesInjectable),
+  instantiate: (di) => di.inject(navigateToApplicationPreferencesInjectable),
 });
 
 export default navigateToPreferencesInjectable;
diff --git a/src/features/preferences/__snapshots__/closing-preferences.test.tsx.snap b/src/features/preferences/__snapshots__/closing-preferences.test.tsx.snap
index 14108e700e..65c18e1f5a 100644
--- a/src/features/preferences/__snapshots__/closing-preferences.test.tsx.snap
+++ b/src/features/preferences/__snapshots__/closing-preferences.test.tsx.snap
@@ -743,6 +743,7 @@ exports[`preferences - closing-preferences given accessing preferences directly
       />
       <div
         class="SettingLayout showNavigation Preferences"
+        data-testid="some-test-id-for-test-tab"
       >
         <nav
           class="sidebarRegion"
@@ -839,9 +840,7 @@ exports[`preferences - closing-preferences given accessing preferences directly
         >
           <div
             class="content"
-          >
-            Some test page
-          </div>
+          />
           <div
             class="toolsRegion"
           >
@@ -1014,7 +1013,9 @@ exports[`preferences - closing-preferences given accessing preferences directly
       <div
         id="lens-views"
       />
-      <div>
+      <div
+        data-testid="some-front-page"
+      >
         Some front page
       </div>
     </main>
@@ -1153,7 +1154,9 @@ exports[`preferences - closing-preferences given accessing preferences directly
       <div
         id="lens-views"
       />
-      <div>
+      <div
+        data-testid="some-front-page"
+      >
         Some front page
       </div>
     </main>
@@ -1963,6 +1966,7 @@ exports[`preferences - closing-preferences given already in a page and then navi
       />
       <div
         class="SettingLayout showNavigation Preferences"
+        data-testid="some-test-id-for-test-tab"
       >
         <nav
           class="sidebarRegion"
@@ -2059,9 +2063,7 @@ exports[`preferences - closing-preferences given already in a page and then navi
         >
           <div
             class="content"
-          >
-            Some test page
-          </div>
+          />
           <div
             class="toolsRegion"
           >
@@ -2235,141 +2237,9 @@ exports[`preferences - closing-preferences given already in a page and then navi
         id="lens-views"
       />
       <div
-        class="SettingLayout showNavigation Preferences"
+        data-testid="some-page"
       >
-        <nav
-          class="sidebarRegion"
-        >
-          <div
-            class="sidebar"
-          >
-            <div
-              class="Tabs flex column"
-            >
-              <div
-                class="header"
-              >
-                Preferences
-              </div>
-              <div
-                class="Tab flex gaps align-center"
-                data-testid="tab-link-for-application"
-                role="tab"
-                tabindex="0"
-              >
-                <div
-                  class="label"
-                >
-                  App
-                </div>
-              </div>
-              <div
-                class="Tab flex gaps align-center"
-                data-testid="tab-link-for-proxy"
-                role="tab"
-                tabindex="0"
-              >
-                <div
-                  class="label"
-                >
-                  Proxy
-                </div>
-              </div>
-              <div
-                class="Tab flex gaps align-center"
-                data-testid="tab-link-for-kubernetes"
-                role="tab"
-                tabindex="0"
-              >
-                <div
-                  class="label"
-                >
-                  Kubernetes
-                </div>
-              </div>
-              <div
-                class="Tab flex gaps align-center"
-                data-testid="tab-link-for-editor"
-                role="tab"
-                tabindex="0"
-              >
-                <div
-                  class="label"
-                >
-                  Editor
-                </div>
-              </div>
-              <div
-                class="Tab flex gaps align-center"
-                data-testid="tab-link-for-terminal"
-                role="tab"
-                tabindex="0"
-              >
-                <div
-                  class="label"
-                >
-                  Terminal
-                </div>
-              </div>
-              <div
-                class="Tab flex gaps align-center active"
-                data-testid="tab-link-for-some-test-preference-navigation-item-id"
-                role="tab"
-                tabindex="0"
-              >
-                <div
-                  class="label"
-                >
-                  Some preference navigation item
-                </div>
-              </div>
-            </div>
-          </div>
-        </nav>
-        <div
-          class="contentRegion"
-          id="ScrollSpyRoot"
-        >
-          <div
-            class="content"
-          >
-            Some test page
-          </div>
-          <div
-            class="toolsRegion"
-          >
-            <div
-              class="fixed top-[60px]"
-            >
-              <div
-                data-testid="close-preferences"
-              >
-                <div
-                  aria-label="Close"
-                  class="closeButton"
-                  role="button"
-                >
-                  <i
-                    class="Icon icon material focusable"
-                  >
-                    <span
-                      class="icon"
-                      data-icon-name="close"
-                    >
-                      close
-                    </span>
-                  </i>
-                </div>
-                <div
-                  aria-hidden="true"
-                  class="esc"
-                >
-                  ESC
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
+        Some content
       </div>
     </main>
     <div
@@ -2508,141 +2378,9 @@ exports[`preferences - closing-preferences given already in a page and then navi
         id="lens-views"
       />
       <div
-        class="SettingLayout showNavigation Preferences"
+        data-testid="some-page"
       >
-        <nav
-          class="sidebarRegion"
-        >
-          <div
-            class="sidebar"
-          >
-            <div
-              class="Tabs flex column"
-            >
-              <div
-                class="header"
-              >
-                Preferences
-              </div>
-              <div
-                class="Tab flex gaps align-center"
-                data-testid="tab-link-for-application"
-                role="tab"
-                tabindex="0"
-              >
-                <div
-                  class="label"
-                >
-                  App
-                </div>
-              </div>
-              <div
-                class="Tab flex gaps align-center"
-                data-testid="tab-link-for-proxy"
-                role="tab"
-                tabindex="0"
-              >
-                <div
-                  class="label"
-                >
-                  Proxy
-                </div>
-              </div>
-              <div
-                class="Tab flex gaps align-center"
-                data-testid="tab-link-for-kubernetes"
-                role="tab"
-                tabindex="0"
-              >
-                <div
-                  class="label"
-                >
-                  Kubernetes
-                </div>
-              </div>
-              <div
-                class="Tab flex gaps align-center"
-                data-testid="tab-link-for-editor"
-                role="tab"
-                tabindex="0"
-              >
-                <div
-                  class="label"
-                >
-                  Editor
-                </div>
-              </div>
-              <div
-                class="Tab flex gaps align-center"
-                data-testid="tab-link-for-terminal"
-                role="tab"
-                tabindex="0"
-              >
-                <div
-                  class="label"
-                >
-                  Terminal
-                </div>
-              </div>
-              <div
-                class="Tab flex gaps align-center active"
-                data-testid="tab-link-for-some-test-preference-navigation-item-id"
-                role="tab"
-                tabindex="0"
-              >
-                <div
-                  class="label"
-                >
-                  Some preference navigation item
-                </div>
-              </div>
-            </div>
-          </div>
-        </nav>
-        <div
-          class="contentRegion"
-          id="ScrollSpyRoot"
-        >
-          <div
-            class="content"
-          >
-            Some test page
-          </div>
-          <div
-            class="toolsRegion"
-          >
-            <div
-              class="fixed top-[60px]"
-            >
-              <div
-                data-testid="close-preferences"
-              >
-                <div
-                  aria-label="Close"
-                  class="closeButton"
-                  role="button"
-                >
-                  <i
-                    class="Icon icon material focusable"
-                  >
-                    <span
-                      class="icon"
-                      data-icon-name="close"
-                    >
-                      close
-                    </span>
-                  </i>
-                </div>
-                <div
-                  aria-hidden="true"
-                  class="esc"
-                >
-                  ESC
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
+        Some content
       </div>
     </main>
     <div
diff --git a/src/features/preferences/closing-preferences.test.tsx b/src/features/preferences/closing-preferences.test.tsx
index 5363e6e76f..e46853a6e1 100644
--- a/src/features/preferences/closing-preferences.test.tsx
+++ b/src/features/preferences/closing-preferences.test.tsx
@@ -11,17 +11,17 @@ import currentPathInjectable from "../../renderer/routes/current-path.injectable
 import { frontEndRouteInjectionToken } from "../../common/front-end-routing/front-end-route-injection-token";
 import { computed, runInAction } from "mobx";
 import { preferenceNavigationItemInjectionToken } from "../../renderer/components/+preferences/preferences-navigation/preference-navigation-items.injectable";
-import routeIsActiveInjectable from "../../renderer/routes/route-is-active.injectable";
-import { Preferences } from "../../renderer/components/+preferences";
 import React from "react";
 import { routeSpecificComponentInjectionToken } from "../../renderer/routes/route-specific-component-injection-token";
 import observableHistoryInjectable from "../../renderer/navigation/observable-history.injectable";
 import { searchParamsOptions } from "../../renderer/navigation";
 import { createMemoryHistory } from "history";
 import { createObservableHistory } from "mobx-observable-history";
-import navigateToPreferenceTabInjectable from "../../renderer/components/+preferences/preferences-navigation/navigate-to-preference-tab.injectable";
 import navigateToFrontPageInjectable from "../../common/front-end-routing/navigate-to-front-page.injectable";
 import { navigateToRouteInjectionToken } from "../../common/front-end-routing/navigate-to-route-injection-token";
+import navigateToPreferenceTabInjectable from "../../renderer/components/+preferences/preferences-navigation/navigate-to-preference-tab/navigate-to-preference-tab.injectable";
+import preferenceTabIsActiveInjectable from "../../renderer/components/+preferences/preferences-navigation/navigate-to-preference-tab/preference-tab-is-active.injectable";
+import { preferenceItemInjectionToken } from "./renderer/preference-items/preference-item-injection-token";
 
 describe("preferences - closing-preferences", () => {
   let builder: ApplicationBuilder;
@@ -31,8 +31,9 @@ describe("preferences - closing-preferences", () => {
 
     builder.beforeWindowStart((windowDi) => {
       runInAction(() => {
-        windowDi.register(testPreferencesRouteInjectable);
-        windowDi.register(testPreferencesRouteComponentInjectable);
+        windowDi.register(testPreferenceTabInjectable);
+        windowDi.register(testRouteInjectable);
+        windowDi.register(testRouteComponentInjectable);
         windowDi.register(testFrontPageRouteInjectable);
         windowDi.register(testFrontPageRouteComponentInjectable);
         windowDi.register(testNavigationItemInjectable);
@@ -57,7 +58,7 @@ describe("preferences - closing-preferences", () => {
       builder.beforeWindowStart((windowDi) => {
         windowDi.override(observableHistoryInjectable, () => {
           const historyFake = createMemoryHistory({
-            initialEntries: ["/some-test-path"],
+            initialEntries: ["/some-page"],
             initialIndex: 0,
           });
 
@@ -89,7 +90,11 @@ describe("preferences - closing-preferences", () => {
       it("navigates back to the original page", () => {
         const currentPath = windowDi.inject(currentPathInjectable).get();
 
-        expect(currentPath).toBe("/some-test-path");
+        expect(currentPath).toBe("/some-page");
+      });
+
+      it("shows the original page", () => {
+        expect(rendered.getByTestId("some-page")).toBeInTheDocument();
       });
     });
 
@@ -116,7 +121,11 @@ describe("preferences - closing-preferences", () => {
         it("navigates back to the original page", () => {
           const currentPath = windowDi.inject(currentPathInjectable).get();
 
-          expect(currentPath).toBe("/some-test-path");
+          expect(currentPath).toBe("/some-page");
+        });
+
+        it("shows the original page", () => {
+          expect(rendered.getByTestId("some-page")).toBeInTheDocument();
         });
       });
     });
@@ -130,7 +139,7 @@ describe("preferences - closing-preferences", () => {
       builder.beforeWindowStart((windowDi) => {
         windowDi.override(observableHistoryInjectable, () => {
           const historyFake = createMemoryHistory({
-            initialEntries: ["/preferences/app"],
+            initialEntries: ["/preferences2/app"],
             initialIndex: 0,
           });
 
@@ -163,6 +172,10 @@ describe("preferences - closing-preferences", () => {
 
         expect(currentPath).toBe("/some-front-page");
       });
+
+      it("shows front page", () => {
+        expect(rendered.getByTestId("some-front-page")).toBeInTheDocument();
+      });
     });
 
     describe("when navigating to a tab in preferences", () => {
@@ -190,36 +203,34 @@ describe("preferences - closing-preferences", () => {
 
           expect(currentPath).toBe("/some-front-page");
         });
+
+        it("shows front page", () => {
+          expect(rendered.getByTestId("some-front-page")).toBeInTheDocument();
+        });
       });
     });
   });
 });
 
-const testPreferencesRouteInjectable = getInjectable({
-  id: "test-preferences-route",
+const testPreferenceTabInjectable = getInjectable({
+  id: "test-preference-tab",
 
   instantiate: () => ({
-    path: "/some-test-path",
-    clusterFrame: false,
-    isEnabled: computed(() => true),
+    kind: "tab" as const,
+    id: "test-tab",
+    pathId: "test-tab",
+    parentId: "preference-tabs" as const,
+    testId: "some-test-id-for-test-tab",
+    label: "Test",
+    orderNumber: 90,
   }),
 
-  injectionToken: frontEndRouteInjectionToken,
+  injectionToken: preferenceItemInjectionToken,
 });
 
-const testPreferencesRouteComponentInjectable = getInjectable({
-  id: "test-route-component",
-
-  instantiate: (di) => ({
-    route: di.inject(testPreferencesRouteInjectable),
-    Component: () => <Preferences>Some test page</Preferences>,
-  }),
-
-  injectionToken: routeSpecificComponentInjectionToken,
-});
 
 const testFrontPageRouteInjectable = getInjectable({
-  id: "test-front-page-route",
+  id: "some-front-page",
 
   instantiate: () => ({
     path: "/some-front-page",
@@ -231,11 +242,34 @@ const testFrontPageRouteInjectable = getInjectable({
 });
 
 const testFrontPageRouteComponentInjectable = getInjectable({
-  id: "test-front-page-route-component",
+  id: "some-front-page-component",
 
   instantiate: (di) => ({
     route: di.inject(testFrontPageRouteInjectable),
-    Component: () => <div>Some front page</div>,
+    Component: () => <div data-testid="some-front-page">Some front page</div>,
+  }),
+
+  injectionToken: routeSpecificComponentInjectionToken,
+});
+
+const testRouteInjectable = getInjectable({
+  id: "some-page",
+
+  instantiate: () => ({
+    path: "/some-page",
+    clusterFrame: false,
+    isEnabled: computed(() => true),
+  }),
+
+  injectionToken: frontEndRouteInjectionToken,
+});
+
+const testRouteComponentInjectable = getInjectable({
+  id: "some-page-component",
+
+  instantiate: (di) => ({
+    route: di.inject(testRouteInjectable),
+    Component: () => <div data-testid="some-page">Some content</div>,
   }),
 
   injectionToken: routeSpecificComponentInjectionToken,
@@ -245,17 +279,16 @@ const testNavigationItemInjectable = getInjectable({
   id: "some-test-preference-navigation-item-id",
 
   instantiate: (di) => {
-    const testRoute = di.inject(testPreferencesRouteInjectable);
     const navigateToPreferenceTab = di.inject(navigateToPreferenceTabInjectable);
-    const routeIsActive = di.inject(routeIsActiveInjectable, testRoute);
+    const preferenceTabIsActive = di.inject(preferenceTabIsActiveInjectable, "test-tab");
 
     return {
       id: "some-test-preference-navigation-item-id",
       label: "Some preference navigation item",
       parent: "general",
-      isActive: routeIsActive,
-      isVisible: testRoute.isEnabled,
-      navigate: navigateToPreferenceTab(testRoute),
+      isActive: preferenceTabIsActive,
+      isVisible: computed(() => true),
+      navigate: () => navigateToPreferenceTab("test-tab"),
       orderNumber: 100,
     };
   },
diff --git a/src/features/preferences/common/navigate-to-application-preferences.injectable.ts b/src/features/preferences/common/navigate-to-application-preferences.injectable.ts
new file mode 100644
index 0000000000..15f8d563a4
--- /dev/null
+++ b/src/features/preferences/common/navigate-to-application-preferences.injectable.ts
@@ -0,0 +1,20 @@
+/**
+ * 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 preferencesRouteInjectable from "./preferences-route.injectable";
+import { navigateToRouteInjectionToken } from "../../../common/front-end-routing/navigate-to-route-injection-token";
+
+const navigateToApplicationPreferencesInjectable = getInjectable({
+  id: "navigate-to-application-preferences",
+
+  instantiate: (di) => {
+    const navigateToRoute = di.inject(navigateToRouteInjectionToken);
+    const route = di.inject(preferencesRouteInjectable);
+
+    return () => navigateToRoute(route, { parameters: { preferenceTabId: "app" }});
+  },
+});
+
+export default navigateToApplicationPreferencesInjectable;
diff --git a/src/common/catalog-entities/general-catalog-entities/implementations/preferences-catalog-entity.injectable.ts b/src/features/preferences/common/preferences-catalog-entity.injectable.ts
similarity index 67%
rename from src/common/catalog-entities/general-catalog-entities/implementations/preferences-catalog-entity.injectable.ts
rename to src/features/preferences/common/preferences-catalog-entity.injectable.ts
index 80d4458b6d..e4f3a65a93 100644
--- a/src/common/catalog-entities/general-catalog-entities/implementations/preferences-catalog-entity.injectable.ts
+++ b/src/features/preferences/common/preferences-catalog-entity.injectable.ts
@@ -3,16 +3,16 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getInjectable } from "@ogre-tools/injectable";
-import { generalCatalogEntityInjectionToken } from "../general-catalog-entity-injection-token";
-import { GeneralEntity } from "../../index";
-import { buildURL } from "../../../utils/buildUrl";
-import appPreferencesRouteInjectable from "../../../front-end-routing/routes/preferences/app/app-preferences-route.injectable";
+import { generalCatalogEntityInjectionToken } from "../../../common/catalog-entities/general-catalog-entities/general-catalog-entity-injection-token";
+import { GeneralEntity } from "../../../common/catalog-entities";
+import { buildURL } from "../../../common/utils/buildUrl";
+import preferencesRouteInjectable from "./preferences-route.injectable";
 
 const preferencesCatalogEntityInjectable = getInjectable({
   id: "general-catalog-entity-for-preferences",
 
   instantiate: (di) => {
-    const route = di.inject(appPreferencesRouteInjectable);
+    const route = di.inject(preferencesRouteInjectable);
     const url = buildURL(route.path);
 
     return new GeneralEntity({
diff --git a/src/features/preferences/renderer/preferences-route.injectable.ts b/src/features/preferences/common/preferences-route.injectable.ts
similarity index 93%
rename from src/features/preferences/renderer/preferences-route.injectable.ts
rename to src/features/preferences/common/preferences-route.injectable.ts
index bb54c8e7aa..ce883d5788 100644
--- a/src/features/preferences/renderer/preferences-route.injectable.ts
+++ b/src/features/preferences/common/preferences-route.injectable.ts
@@ -10,7 +10,7 @@ const preferencesRouteInjectable = getInjectable({
   id: "preferences-route",
 
   instantiate: () => ({
-    path: "/preferences2/:preferenceTabId",
+    path: "/preferences2/:preferenceTabId?",
     clusterFrame: false,
     isEnabled: computed(() => true),
   }),
diff --git a/src/features/preferences/renderer/preference-items/current-preference-tab-composite.injectable.ts b/src/features/preferences/renderer/preference-items/current-preference-tab-composite.injectable.ts
index d2d13c9822..cb2e8b95f9 100644
--- a/src/features/preferences/renderer/preference-items/current-preference-tab-composite.injectable.ts
+++ b/src/features/preferences/renderer/preference-items/current-preference-tab-composite.injectable.ts
@@ -10,7 +10,7 @@ import { preferenceItemInjectionToken } from "./preference-item-injection-token"
 import type { Composite } from "../../../application-menu/main/menu-items/get-composite/get-composite";
 import getComposite from "../../../application-menu/main/menu-items/get-composite/get-composite";
 import routePathParametersInjectable from "../../../../renderer/routes/route-path-parameters.injectable";
-import preferencesRouteInjectable from "../preferences-route.injectable";
+import preferencesRouteInjectable from "../../common/preferences-route.injectable";
 import { filter, find } from "lodash/fp";
 import { pipeline } from "@ogre-tools/fp";
 
diff --git a/src/features/preferences/renderer/preferences-route-component.injectable.ts b/src/features/preferences/renderer/preferences-route-component.injectable.ts
index 17c7e44a2e..5e90d51acc 100644
--- a/src/features/preferences/renderer/preferences-route-component.injectable.ts
+++ b/src/features/preferences/renderer/preferences-route-component.injectable.ts
@@ -5,7 +5,7 @@
 import { getInjectable } from "@ogre-tools/injectable";
 import { routeSpecificComponentInjectionToken } from "../../../renderer/routes/route-specific-component-injection-token";
 import { Preferences } from "./preferences";
-import preferencesRouteInjectable from "./preferences-route.injectable";
+import preferencesRouteInjectable from "../common/preferences-route.injectable";
 
 const preferencesRouteComponentInjectable = getInjectable({
   id: "preferences-route-component",
diff --git a/src/renderer/components/+preferences/preferences-navigation/application-preferences-navigation-item.injectable.ts b/src/renderer/components/+preferences/preferences-navigation/application-preferences-navigation-item.injectable.ts
index a3e35d35a9..5628f9bfea 100644
--- a/src/renderer/components/+preferences/preferences-navigation/application-preferences-navigation-item.injectable.ts
+++ b/src/renderer/components/+preferences/preferences-navigation/application-preferences-navigation-item.injectable.ts
@@ -4,29 +4,23 @@
  */
 import { getInjectable } from "@ogre-tools/injectable";
 import { preferenceNavigationItemInjectionToken } from "./preference-navigation-items.injectable";
-import appPreferencesRouteInjectable from "../../../../common/front-end-routing/routes/preferences/app/app-preferences-route.injectable";
-import routeIsActiveInjectable from "../../../routes/route-is-active.injectable";
 import { computed } from "mobx";
-import navigateToPreferenceTabInjectable from "./navigate-to-preference-tab.injectable";
+import navigateToPreferenceTabInjectable from "./navigate-to-preference-tab/navigate-to-preference-tab.injectable";
+import preferenceTabIsActiveInjectable from "./navigate-to-preference-tab/preference-tab-is-active.injectable";
 
 const applicationPreferencesNavigationItemInjectable = getInjectable({
   id: "application-preferences-navigation-item",
 
   instantiate: (di) => {
-    const route = di.inject(appPreferencesRouteInjectable);
     const navigateToPreferenceTab = di.inject(navigateToPreferenceTabInjectable);
-
-    const routeIsActive = di.inject(
-      routeIsActiveInjectable,
-      route,
-    );
+    const preferenceTabIsActive = di.inject(preferenceTabIsActiveInjectable, "app");
 
     return {
       id: "application",
       label: "App",
       parent: "general",
-      navigate: navigateToPreferenceTab(route),
-      isActive: routeIsActive,
+      navigate: () => navigateToPreferenceTab("app"),
+      isActive: preferenceTabIsActive,
       isVisible: computed(() => true),
       orderNumber: 10,
     };
diff --git a/src/renderer/components/+preferences/preferences-navigation/navigate-to-preference-tab/navigate-to-preference-tab.injectable.ts b/src/renderer/components/+preferences/preferences-navigation/navigate-to-preference-tab/navigate-to-preference-tab.injectable.ts
new file mode 100644
index 0000000000..b477d797c6
--- /dev/null
+++ b/src/renderer/components/+preferences/preferences-navigation/navigate-to-preference-tab/navigate-to-preference-tab.injectable.ts
@@ -0,0 +1,25 @@
+/**
+ * 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 { navigateToRouteInjectionToken } from "../../../../../common/front-end-routing/navigate-to-route-injection-token";
+import preferencesRouteInjectable from "../../../../../features/preferences/common/preferences-route.injectable";
+
+const navigateToPreferenceTabInjectable = getInjectable({
+  id: "navigate-to-preference-tab-2",
+
+  instantiate: (di) => {
+    const navigateToRoute = di.inject(navigateToRouteInjectionToken);
+    const route = di.inject(preferencesRouteInjectable);
+
+    return (preferenceTabId: string) => {
+      navigateToRoute(route, {
+        withoutAffectingBackButton: true,
+        parameters: { preferenceTabId },
+      });
+    };
+  },
+});
+
+export default navigateToPreferenceTabInjectable;
diff --git a/src/renderer/components/+preferences/preferences-navigation/navigate-to-preference-tab/preference-tab-is-active.injectable.ts b/src/renderer/components/+preferences/preferences-navigation/navigate-to-preference-tab/preference-tab-is-active.injectable.ts
new file mode 100644
index 0000000000..ab44d91b33
--- /dev/null
+++ b/src/renderer/components/+preferences/preferences-navigation/navigate-to-preference-tab/preference-tab-is-active.injectable.ts
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
+import { computed } from "mobx";
+import routeIsActiveInjectable from "../../../../routes/route-is-active.injectable";
+import preferencesRouteInjectable from "../../../../../features/preferences/common/preferences-route.injectable";
+import routePathParametersInjectable from "../../../../routes/route-path-parameters.injectable";
+
+const preferenceTabIsActiveInjectable = getInjectable({
+  id: "preference-tab-is-active",
+
+  instantiate: (di, tabId: string) => {
+    const route = di.inject(preferencesRouteInjectable);
+    const routeIsActive = di.inject(routeIsActiveInjectable, route);
+    const pathParameters = di.inject(routePathParametersInjectable, route);
+
+    return computed(
+      () =>
+        routeIsActive.get() && pathParameters.get().preferenceTabId === tabId,
+    );
+  },
+
+  lifecycle: lifecycleEnum.keyedSingleton({
+    getInstanceKey: (di, tabId: string) => tabId,
+  }),
+});
+
+export default preferenceTabIsActiveInjectable;