Simplify logic for injecting many instances which can reactively change e.g. based on extension being enabled or disabled (#5662)

* Reorganize stuff to prevent circular dependencies

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>

* Install injectable extension to allow injecting reactively many implementations

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>

* Switch to using computedInjectMany over filtering injectMany based on enabled extensions for simplicity

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>

* Remove await for not being needed

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>

* Sort dependencies alphabetically

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>

src/renderer/routes/all-routes.injectable.ts

@@ -1,40 +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 { overSome } from "lodash/fp";
-import { computed } from "mobx";
-import rendererExtensionsInjectable from "../../extensions/renderer-extensions.injectable";
-import type { LensRendererExtension } from "../../extensions/lens-renderer-extension";
-import type { Route } from "../../common/front-end-routing/front-end-route-injection-token";
-import { frontEndRouteInjectionToken } from "../../common/front-end-routing/front-end-route-injection-token";
-
-const allRoutesInjectable = getInjectable({
-  id: "all-routes",
-
-  instantiate: (di) => {
-    const extensions = di.inject(rendererExtensionsInjectable);
-
-    return computed(() => {
-      const enabledExtensions = extensions.get();
-
-      return di
-        .injectMany(frontEndRouteInjectionToken)
-        .filter((route) =>
-          overSome([
-            isNonExtensionRoute,
-            isEnabledExtensionRouteFor(enabledExtensions),
-          ])(route),
-        );
-    });
-  },
-});
-
-const isNonExtensionRoute = (route: Route<unknown>) => !route.extension;
-
-const isEnabledExtensionRouteFor =
-  (enabledExtensions: LensRendererExtension[]) => (route: Route<unknown>) =>
-    !!enabledExtensions.find((x) => x === route.extension);
-
-export default allRoutesInjectable;

src/renderer/routes/current-path-parameters.injectable.ts

@@ -1,23 +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 { computed } from "mobx";
-import matchingRouteInjectable from "./matching-route.injectable";
-
-const currentPathParametersInjectable = getInjectable({
-  id: "current-path-parameters",
-
-  instantiate: (di) => {
-    const matchingRoute = di.inject(matchingRouteInjectable);
-
-    return computed((): Record<string, string> => {
-      const match = matchingRoute.get();
-
-      return match ? match.pathParameters: {};
-    });
-  },
-});
-
-export default currentPathParametersInjectable;

src/renderer/routes/current-route-component.injectable.ts

@@ -3,6 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getInjectable } from "@ogre-tools/injectable";
+import { computedInjectManyInjectable } from "@ogre-tools/injectable-extension-for-mobx";
 import { matches } from "lodash/fp";
 import { computed } from "mobx";
 import currentRouteInjectable from "./current-route.injectable";
@@ -13,6 +14,8 @@ const currentRouteComponentInjectable = getInjectable({
 
   instantiate: (di) => {
     const route = di.inject(currentRouteInjectable);
+    const computedInjectMany = di.inject(computedInjectManyInjectable);
+    const routeComponents = computedInjectMany(routeSpecificComponentInjectionToken);
 
     return computed(() => {
       const currentRoute = route.get();
@@ -21,8 +24,8 @@ const currentRouteComponentInjectable = getInjectable({
         return undefined;
       }
 
-      const routeSpecificComponent = di
-        .injectMany(routeSpecificComponentInjectionToken)
+      const routeSpecificComponent = routeComponents
+        .get()
         .find(matches({ route: currentRoute }));
 
       return routeSpecificComponent?.Component;

src/renderer/routes/extension-route-registrator.injectable.tsx

@@ -22,20 +22,17 @@ const extensionRouteRegistratorInjectable = getInjectable({
   id: "extension-route-registrator",
 
   instantiate: (di) => {
-    return (ext, extensionInstallationCount) => {
+    return (ext) => {
       const extension = ext as LensRendererExtension;
       const toRouteInjectable = toRouteInjectableFor(
         di,
         extension,
-        extensionInstallationCount,
       );
 
-      const routeInjectables = [
+      return [
         ...extension.globalPages.map(toRouteInjectable(false)),
         ...extension.clusterPages.map(toRouteInjectable(true)),
       ].flat();
-
-      di.register(...routeInjectables);
     };
   },
 
@@ -48,12 +45,11 @@ const toRouteInjectableFor =
   (
     di: DiContainerForInjection,
     extension: LensRendererExtension,
-    extensionInstallationCount: number,
   ) =>
     (clusterFrame: boolean) =>
       (registration: PageRegistration) => {
         const routeInjectable = getInjectable({
-          id: `route-${registration.id}-for-extension-${extension.sanitizedExtensionId}-installation-${extensionInstallationCount}`,
+          id: `route-${registration.id}-for-extension-${extension.sanitizedExtensionId}`,
 
           instantiate: () => ({
             path: getExtensionRoutePath(extension, registration.id),
@@ -95,7 +91,7 @@ const toRouteInjectableFor =
         };
 
         const routeSpecificComponentInjectable = getInjectable({
-          id: `route-${registration.id}-component-for-extension-${extension.sanitizedExtensionId}-installation-${extensionInstallationCount}`,
+          id: `route-${registration.id}-component-for-extension-${extension.sanitizedExtensionId}`,
 
           instantiate: (di) => ({
             route: di.inject(routeInjectable),

src/renderer/routes/route-is-active.injectable.ts

@@ -4,16 +4,23 @@
  */
 import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
 import { computed } from "mobx";
-import currentRouteInjectable from "./current-route.injectable";
 import type { Route } from "../../common/front-end-routing/front-end-route-injection-token";
+import currentPathInjectable from "./current-path.injectable";
+import { matchPath } from "react-router-dom";
 
 const routeIsActiveInjectable = getInjectable({
   id: "route-is-active",
 
   instantiate: (di, route: Route<unknown>) => {
-    const currentRoute = di.inject(currentRouteInjectable);
+    const currentPath = di.inject(currentPathInjectable);
 
-    return computed(() => currentRoute.get() === route);
+    return computed(
+      () =>
+        !!matchPath(currentPath.get(), {
+          path: route.path,
+          exact: true,
+        }),
+    );
   },
 
   lifecycle: lifecycleEnum.keyedSingleton({

src/renderer/routes/routes.injectable.ts

@@ -5,18 +5,20 @@
 import { getInjectable } from "@ogre-tools/injectable";
 import { computed } from "mobx";
 import currentlyInClusterFrameInjectable from "./currently-in-cluster-frame.injectable";
-import allRoutesInjectable from "./all-routes.injectable";
 import { matches } from "lodash/fp";
+import { frontEndRouteInjectionToken } from "../../common/front-end-routing/front-end-route-injection-token";
+import { computedInjectManyInjectable } from "@ogre-tools/injectable-extension-for-mobx";
 
 const routesInjectable = getInjectable({
   id: "routes",
 
   instantiate: (di) => {
-    const allRoutes = di.inject(allRoutesInjectable);
+    const computedInjectMany = di.inject(computedInjectManyInjectable);
     const currentlyInClusterFrame = di.inject(currentlyInClusterFrameInjectable);
+    const routes = computedInjectMany(frontEndRouteInjectionToken);
 
     return computed(() =>
-      allRoutes
+      routes
         .get()
         .filter(matches({ clusterFrame: currentlyInClusterFrame }))
         .filter((route) => route.isEnabled.get()),