Add ClusterModal components and injection token

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

src/extensions/registries/modal-registry.ts

@@ -1,10 +1,15 @@
 
 // Extensions-api -> Cluster frame custom modal registration
 
+import { getInjectionToken } from "@ogre-tools/injectable";
 import type { IComputedValue } from "mobx";
 
 export interface ClusterModalRegistration {
   id: string;
-  component: React.ComponentType;
+  Component: React.ComponentType;
   visible?: IComputedValue<boolean>;
-}
+}
+
+export const clusterModalsInjectionToken = getInjectionToken<
+  IComputedValue<ClusterModalRegistration[]>
+>({ id: "cluster-modals-injection-token" });

src/renderer/cluster-modals/cluster-modals-cluster-frame-child-component.injectable.ts

@@ -1,6 +1,7 @@
 import { getInjectable } from "@ogre-tools/injectable";
 import { computed } from "mobx";
 import { clusterFrameChildComponentInjectionToken } from "../frames/cluster-frame/cluster-frame-child-component-injection-token";
+import { ClusterModals } from "./cluster-modals";
 
 const clusterModalsClusterFrameChildComponentInjectable = getInjectable({
   id: "cluster-modals-cluster-frame-child-component",

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

@@ -1,5 +1,5 @@
 import { getInjectable } from "@ogre-tools/injectable";
-import { extensionRegistratorInjectionToken } from "../../extensions/extension-loader/extension-registrator-injection-token";
+import { ExtensionRegistrator, extensionRegistratorInjectionToken } from "../../extensions/extension-loader/extension-registrator-injection-token";
 import type { LensRendererExtension } from "../../extensions/lens-renderer-extension";
 
 const clusterModalsRegistratorInjectable = getInjectable({
@@ -9,16 +9,18 @@ const clusterModalsRegistratorInjectable = getInjectable({
     return (ext) => {
       const extension = ext as LensRendererExtension;
 
-      return extension.clusterModals.map((registration) => {
-        return {
+      return extension.clusterModals.map(registration => {
+        return getInjectable({
           id: registration.id,
-          Component: registration.component,
-          visible: registration.visible,
-        }
-      })
+
+          instantiate: () => ({
+            Component: registration.Component,
+            visible: registration.visible,
+          }),
+        });
+      });
     };
   },
-
   injectionToken: extensionRegistratorInjectionToken,
 });
 

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

@@ -0,0 +1,27 @@
+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 { ClusterModalRegistration, clusterModalsInjectionToken } from "../../extensions/registries";
+
+const clusterModalsInjectable = getInjectable({
+  id: "cluster-modals",
+
+  instantiate: (di) => {
+    const computedInjectMany = di.inject(computedInjectManyInjectable);
+
+    const modalRegistrations = computedInjectMany(clusterModalsInjectionToken);
+    const registrations = pipeline(
+      modalRegistrations.get(),
+      flatMap(dereference),
+    );
+
+    return registrations;
+  }
+});
+
+const dereference = (items: IComputedValue<ClusterModalRegistration[]>) =>
+  items.get();
+
+export default clusterModalsInjectable;

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

@@ -0,0 +1,25 @@
+import { withInjectables } from "@ogre-tools/injectable-react";
+import React from "react";
+import type { ClusterModalRegistration } from "../../extensions/registries";
+import clusterModalsInjectable from "./cluster-modals.injectable";
+
+interface Dependencies {
+  clusterModals: ClusterModalRegistration[];
+}
+
+export const NonInjectedClusterModals = ({ clusterModals }: Dependencies) => {
+  return (
+    <div className="clusterFrameModals" style={{ height: 0 }}>
+      {clusterModals.map((modal) => {
+        return modal.visible ? <modal.Component key={modal.id} /> : null;
+      })}
+    </div>
+  );
+}
+
+export const ClusterModals = withInjectables<Dependencies>(NonInjectedClusterModals, {
+  getProps: (di, props) => ({
+    ...props,
+    clusterModals: di.inject(clusterModalsInjectable),
+  }),
+});