Using clusterFrameChildComponentsInjectionToken

for specific extension elements

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

src/extensions/lens-renderer-extension.ts

@@ -28,12 +28,13 @@ import type { LensRendererExtensionDependencies } from "./lens-extension-set-dep
 import type { KubeObjectHandlerRegistration } from "../renderer/kube-object/handler";
 import type { AppPreferenceTabRegistration } from "../features/preferences/renderer/compliance-for-legacy-extension-api/app-preference-tab-registration";
 import type { KubeObjectDetailRegistration } from "../renderer/components/kube-object-details/kube-object-detail-registration";
+import type { ClusterFrameChildComponent } from "../renderer/frames/cluster-frame/cluster-frame-child-component-injection-token";
 
 export class LensRendererExtension extends LensExtension<LensRendererExtensionDependencies> {
   globalPages: registries.PageRegistration[] = [];
   clusterPages: registries.PageRegistration[] = [];
   clusterPageMenus: registries.ClusterPageMenuRegistration[] = [];
-  clusterModals: registries.ClusterModalRegistration[] = [];
+  clusterFrameComponents: ClusterFrameChildComponent[] = [];
   kubeObjectStatusTexts: KubeObjectStatusRegistration[] = [];
   appPreferences: AppPreferenceRegistration[] = [];
   appPreferenceTabs: AppPreferenceTabRegistration[] = [];

src/renderer/frames/cluster-frame/cluster-frame-component-registrator.injectable.ts

@@ -0,0 +1,42 @@
+/**
+ * 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 { map } from "lodash/fp";
+import { extensionRegistratorInjectionToken } from "../../../extensions/extension-loader/extension-registrator-injection-token";
+import type { ExtensionRegistrator } from "../../../extensions/extension-loader/extension-registrator-injection-token";
+import type { LensRendererExtension } from "../../../extensions/lens-renderer-extension";
+import { clusterFrameChildComponentInjectionToken } from "./cluster-frame-child-component-injection-token";
+
+const clusterFrameComponentRegistratorInjectable = getInjectable({
+  id: "cluster-frame-component-registrator",
+
+  instantiate: (): ExtensionRegistrator => {
+    return (ext) => {
+      const extension = ext as LensRendererExtension;
+
+      return pipeline(
+        extension.clusterFrameComponents,
+
+        map((clusterFrameComponentRegistration) => {
+          const id = `${extension.sanitizedExtensionId}-${clusterFrameComponentRegistration.id}`;
+
+          return getInjectable({
+            id,
+            injectionToken: clusterFrameChildComponentInjectionToken,
+            instantiate: () => ({
+              id,
+              shouldRender: clusterFrameComponentRegistration.shouldRender,
+              Component: clusterFrameComponentRegistration.Component,
+            }),
+          });
+        }),
+      );
+    };
+  },
+  injectionToken: extensionRegistratorInjectionToken,
+});
+
+export default clusterFrameComponentRegistratorInjectable;

src/renderer/frames/cluster-frame/cluster-frame.tsx

@@ -14,11 +14,13 @@ import subscribeStoresInjectable from "../../kube-watch-api/subscribe-stores.inj
 import type { ClusterFrameChildComponent } from "./cluster-frame-child-component-injection-token";
 import { clusterFrameChildComponentInjectionToken } from "./cluster-frame-child-component-injection-token";
 import watchHistoryStateInjectable from "../../remote-helpers/watch-history-state.injectable";
+import { computedInjectManyInjectable } from "@ogre-tools/injectable-extension-for-mobx";
+import type { IComputedValue } from "mobx";
 
 interface Dependencies {
   namespaceStore: NamespaceStore;
   subscribeStores: SubscribeStores;
-  childComponents: ClusterFrameChildComponent[];
+  childComponents: IComputedValue<ClusterFrameChildComponent[]>;
   watchHistoryState: () => () => void;
 }
 
@@ -37,7 +39,7 @@ export const NonInjectedClusterFrame = observer(({
 
   return (
     <ErrorBoundary>
-      {childComponents
+      {childComponents.get()
         .map((child) => (
           <Observer key={child.id}>
             {() => (child.shouldRender.get() ? <child.Component /> : null) }
@@ -48,12 +50,16 @@ export const NonInjectedClusterFrame = observer(({
 });
 
 export const ClusterFrame = withInjectables<Dependencies>(NonInjectedClusterFrame, {
-  getProps: di => ({
+  getProps: di => {
-    namespaceStore: di.inject(namespaceStoreInjectable),
+    const computedInjectMany = di.inject(computedInjectManyInjectable);
-    subscribeStores: di.inject(subscribeStoresInjectable),
+
-    childComponents: di.injectMany(clusterFrameChildComponentInjectionToken),
+    return {
-    watchHistoryState: di.inject(watchHistoryStateInjectable),
+      namespaceStore: di.inject(namespaceStoreInjectable),
-  }),
+      subscribeStores: di.inject(subscribeStoresInjectable),
+      childComponents: computedInjectMany(clusterFrameChildComponentInjectionToken),
+      watchHistoryState: di.inject(watchHistoryStateInjectable),
+    }
+  },
 });
 
 ClusterFrame.displayName = "ClusterFrame";