Show extension preferences in separate page (#5284)

Co-authored-by: Alex Andreev <alex.andreev.email@gmail.com>
Co-authored-by: Janne Savolainen <janne.savolainen@live.fi>

src/common/front-end-routing/routes/preferences/extension/extension-preferences-route.injectable.ts

@@ -5,12 +5,18 @@
 import { getInjectable } from "@ogre-tools/injectable";
 import { computed } from "mobx";
 import { frontEndRouteInjectionToken } from "../../../front-end-route-injection-token";
+import type { Route } from "../../../front-end-route-injection-token";
+
+interface ExtensionPreferenceRouteParams {
+  extensionId: string;
+  tabId?: string;
+}
 
 const extensionPreferencesRouteInjectable = getInjectable({
   id: "extension-preferences-route",
 
-  instantiate: () => ({
-    path: "/preferences/extensions",
+  instantiate: (): Route<ExtensionPreferenceRouteParams> => ({
+    path: "/preferences/extension/:extensionId/:tabId?",
     clusterFrame: false,
     isEnabled: computed(() => true),
   }),

src/common/front-end-routing/routes/preferences/extension/navigate-to-extension-preferences.injectable.ts

@@ -13,7 +13,10 @@ const navigateToExtensionPreferencesInjectable = getInjectable({
     const navigateToRoute = di.inject(navigateToRouteInjectionToken);
     const route = di.inject(extensionPreferencesRouteInjectable);
 
-    return () => navigateToRoute(route);
+    return (extensionId: string, tabId?: string) => navigateToRoute(route, { parameters: {
+      extensionId,
+      tabId,
+    }});
   },
 });