Refactor cluster modals registrator and injectable

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/extensions/common-api/registrations.ts

@@ -14,3 +14,4 @@ export type { CustomCategoryViewProps, CustomCategoryViewComponents, CustomCateg
 export type { ShellEnvModifier, ShellEnvContext } from "../../main/shell-session/shell-env-modifier/shell-env-modifier-registration";
 export type { KubeObjectContextMenuItem, KubeObjectOnContextMenuOpenContext, KubeObjectOnContextMenuOpen, KubeObjectHandlers, KubeObjectHandlerRegistration } from "../../renderer/kube-object/handler";
 export type { TrayMenuRegistration } from "../../main/tray/tray-menu-registration";
+export type { ClusterModalRegistration } from "../registries/modal-registry";

src/extensions/registries/modal-registry.ts

@@ -12,4 +12,3 @@ export interface ClusterModalRegistration {
   Component: React.ComponentType;
   visible: IComputedValue<boolean>;
 }
-

src/features/cluster/cluster-modal-items.test.tsx

@@ -5,7 +5,7 @@
 import type { Injectable } from "@ogre-tools/injectable";
 import { getInjectable } from "@ogre-tools/injectable";
 import type { RenderResult } from "@testing-library/react";
-import type { IComputedValue, IObservableValue } from "mobx";
+import type { IObservableValue } from "mobx";
 import { computed, observable, runInAction } from "mobx";
 import React from "react";
 import type { ClusterModalRegistration } from "../../extensions/registries";
@@ -24,8 +24,8 @@ describe("<body/> elements originated from cluster modal registration", () => {
 
   describe("given custom components for cluster view available", () => {
     let someObservable: IObservableValue<boolean>;
-    let clusterModalInjectable: Injectable<IComputedValue<ClusterModalRegistration[]>, any, any>;
+    let clusterModalInjectable: Injectable<ClusterModalRegistration, any, any>;
-    let clusterDialogInjectable: Injectable<IComputedValue<ClusterModalRegistration[]>, any, any>;
+    let clusterDialogInjectable: Injectable<ClusterModalRegistration, any, any>;
   
     beforeEach(async () => {
       someObservable = observable.box(false);
@@ -34,11 +34,11 @@ describe("<body/> elements originated from cluster modal registration", () => {
         id: "some-cluster-modal-injectable",
       
         instantiate: () => {
-          return computed((): ClusterModalRegistration[] => [{
+          return {
             id: "test-modal-id",
             Component: () => <div data-testid="test-modal">test modal</div>,
             visible: computed(() => true),
-          }]);
+          };
         },
       
         injectionToken: clusterModalsInjectionToken,
@@ -48,11 +48,11 @@ describe("<body/> elements originated from cluster modal registration", () => {
         id: "dialog-with-observable-visibility-injectable",
       
         instantiate: () => {
-          return computed((): ClusterModalRegistration[] => [{
+          return {
             id: "dialog-with-observable-visibility-id",
             Component: () => <div data-testid="dialog-with-observable-visibility">dialog contents</div>,
             visible: computed(() => someObservable.get()),
-          }]);
+          };
         },
       
         injectionToken: clusterModalsInjectionToken,

src/renderer/cluster-modals/cluster-modals-injection-token.ts

@@ -4,9 +4,8 @@
  */
 
 import { getInjectionToken } from "@ogre-tools/injectable";
-import type { IComputedValue } from "mobx";
 import type { ClusterModalRegistration } from "../../extensions/registries";
 
 export const clusterModalsInjectionToken = getInjectionToken<
-  IComputedValue<ClusterModalRegistration[]>
+  ClusterModalRegistration
 >({ id: "cluster-modals-injection-token" });

src/renderer/cluster-modals/cluster-modals-registrator.injectable.ts

@@ -2,28 +2,35 @@
  * Copyright (c) OpenLens Authors. All rights reserved.
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
+import { pipeline } from "@ogre-tools/fp";
 import { getInjectable } from "@ogre-tools/injectable";
-import type { ExtensionRegistrator } from "../../extensions/extension-loader/extension-registrator-injection-token";
+import { map } from "lodash/fp";
 import { extensionRegistratorInjectionToken } from "../../extensions/extension-loader/extension-registrator-injection-token";
 import type { LensRendererExtension } from "../../extensions/lens-renderer-extension";
+import { clusterModalsInjectionToken } from "./cluster-modals-injection-token";
 
 const clusterModalsRegistratorInjectable = getInjectable({
   id: "cluster-modals-registrator",
 
-  instantiate: (): ExtensionRegistrator => {
+  instantiate: (di) => {
     return (ext) => {
       const extension = ext as LensRendererExtension;
 
-      return extension.clusterModals.map(registration => {
+      return pipeline(
-        return getInjectable({
+        extension.clusterModals,
-          id: registration.id,
 
+        map((modal) => {
+          return getInjectable({
+            id: modal.id,
+            injectionToken: clusterModalsInjectionToken,
             instantiate: () => ({
-            Component: registration.Component,
+              id: `${modal.id}-id`,
-            visible: registration.visible,
+              visible: modal.visible,
-          }),
+              Component: modal.Component
-        });
+            })
-      });
+          })
+        })
+      )
     };
   },
   injectionToken: extensionRegistratorInjectionToken,

src/renderer/cluster-modals/cluster-modals.injectable.ts

@@ -2,12 +2,8 @@
  * Copyright (c) OpenLens Authors. All rights reserved.
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
-import { pipeline } from "@ogre-tools/fp";
 import { getInjectable } from "@ogre-tools/injectable";
 import { computedInjectManyInjectable } from "@ogre-tools/injectable-extension-for-mobx";
-import { flatMap } from "lodash/fp";
-import type { IComputedValue } from "mobx";
-import type { ClusterModalRegistration } from "../../extensions/registries";
 import { clusterModalsInjectionToken } from "./cluster-modals-injection-token";
 
 const clusterModalsInjectable = getInjectable({
@@ -15,18 +11,10 @@ const clusterModalsInjectable = getInjectable({
 
   instantiate: (di) => {
     const computedInjectMany = di.inject(computedInjectManyInjectable);
-
     const modalRegistrations = computedInjectMany(clusterModalsInjectionToken);
-    const registrations = pipeline(
-      modalRegistrations.get(),
-      flatMap(dereference),
-    );
     
-    return registrations;
+    return modalRegistrations;
   },
 });
 
-const dereference = (items: IComputedValue<ClusterModalRegistration[]>) =>
-  items.get();
-
 export default clusterModalsInjectable;

src/renderer/cluster-modals/cluster-modals.tsx

@@ -9,15 +9,16 @@ import React from "react";
 import type { ClusterModalRegistration } from "../../extensions/registries";
 import clusterModalsInjectable from "./cluster-modals.injectable";
 import { observer } from "mobx-react";
+import type { IComputedValue } from "mobx";
 
 interface Dependencies {
-  clusterModals: ClusterModalRegistration[];
+  clusterModals: IComputedValue<ClusterModalRegistration[]>;
 }
 
 export const NonInjectedClusterModals = observer(({ clusterModals }: Dependencies) => {
   return (
     <div className={styles.clusterModals} style={{ height: 0 }}>
-      {clusterModals.map((modal) => {
+      {clusterModals.get().map((modal) => {
         return modal.visible.get() ? <modal.Component key={modal.id} /> : null;
       })}
     </div>