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/components/layout/extension-sidebar-item-registrator.injectable.tsx

@@ -18,17 +18,16 @@ import type { LensRendererExtension } from "../../../extensions/lens-renderer-ex
 const extensionSidebarItemRegistratorInjectable = getInjectable({
   id: "extension-sidebar-item-registrator",
 
-  instantiate: (di) => (ext, extensionInstallationCount) => {
+  instantiate: (di) => (ext) => {
     const extension = ext as LensRendererExtension;
+    const navigateToRoute = di.inject(navigateToRouteInjectionToken);
+    const routes = di.inject(routesInjectable);
 
     const sidebarItemsForExtensionInjectable = getInjectable({
-      id: `sidebar-items-for-extension-${extension.sanitizedExtensionId}-instance-${extensionInstallationCount}`,
+      id: `sidebar-items-for-extension-${extension.sanitizedExtensionId}`,
       injectionToken: sidebarItemsInjectionToken,
 
       instantiate: (di) => {
-        const navigateToRoute = di.inject(navigateToRouteInjectionToken);
-        const routes = di.inject(routesInjectable);
-
         return computed(() => {
           const extensionRoutes = routes.get().filter(matches({ extension }));
 
@@ -44,7 +43,6 @@ const extensionSidebarItemRegistratorInjectable = getInjectable({
 
             const res: SidebarItemRegistration = {
               id: `${extension.sanitizedExtensionId}-${registration.id}`,
-              extension,
               orderNumber: 9999,
 
               parentId: registration.parentId
@@ -73,7 +71,9 @@ const extensionSidebarItemRegistratorInjectable = getInjectable({
       },
     });
 
-    di.register(sidebarItemsForExtensionInjectable);
+    return [
+      sidebarItemsForExtensionInjectable,
+    ];
   },
 
   injectionToken: extensionRegistratorInjectionToken,

src/renderer/components/layout/sidebar-items.injectable.ts

@@ -6,7 +6,7 @@ import { getInjectable, getInjectionToken } from "@ogre-tools/injectable";
 import type { IComputedValue } from "mobx";
 import { computed } from "mobx";
 import { pipeline } from "@ogre-tools/fp";
-
+import { computedInjectManyInjectable } from "@ogre-tools/injectable-extension-for-mobx";
 import {
   filter,
   flatMap,
@@ -15,11 +15,8 @@ import {
   isEmpty,
   map,
   orderBy,
-  overSome,
   some,
 } from "lodash/fp";
-import rendererExtensionsInjectable from "../../../extensions/renderer-extensions.injectable";
-import type { LensRendererExtension } from "../../../extensions/lens-renderer-extension";
 
 export interface SidebarItemRegistration {
   id: string;
@@ -30,7 +27,6 @@ export interface SidebarItemRegistration {
   isActive?: IComputedValue<boolean>;
   isVisible?: IComputedValue<boolean>;
   orderNumber: number;
-  extension?: LensRendererExtension;
 }
 
 export const sidebarItemsInjectionToken = getInjectionToken<
@@ -47,25 +43,14 @@ const sidebarItemsInjectable = getInjectable({
   id: "sidebar-items",
 
   instantiate: (di) => {
-    const extensions = di.inject(rendererExtensionsInjectable);
+    const computedInjectMany = di.inject(computedInjectManyInjectable);
+
+    const sidebarItemRegistrations = computedInjectMany(sidebarItemsInjectionToken);
 
     return computed((): HierarchicalSidebarItem[] => {
-      const enabledExtensions = extensions.get();
-
-      const sidebarItemRegistrations = di.injectMany(
-        sidebarItemsInjectionToken,
-      );
-
       const registrations = pipeline(
-        sidebarItemRegistrations,
+        sidebarItemRegistrations.get(),
         flatMap(dereference),
-
-        filter(
-          overSome([
-            isNonExtensionSidebarItem,
-            isEnabledExtensionSidebarItemFor(enabledExtensions),
-          ]),
-        ),
       );
 
       const getSidebarItemsHierarchy = (registrations: SidebarItemRegistration[]) => {
@@ -114,14 +99,6 @@ const sidebarItemsInjectable = getInjectable({
   },
 });
 
-const isNonExtensionSidebarItem = (sidebarItem: SidebarItemRegistration) =>
-  !sidebarItem.extension;
-
-const isEnabledExtensionSidebarItemFor =
-  (enabledExtensions: LensRendererExtension[]) =>
-    (sidebarItem: SidebarItemRegistration) =>
-      !!enabledExtensions.find((x) => x === sidebarItem.extension);
-
 const dereference = (items: IComputedValue<SidebarItemRegistration[]>) =>
   items.get();