Expose a way to add cluster frame components in Extension API (#6385)

* Add cluster modals registrator

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

* Add ClusterModal components and injection token

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

* Add clusterModals tests

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

* Update snapshots and use css modules

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

* Linter fixes

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

* Setting 0 height as an inline style

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

* Update snapshots

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

* Do not export clusterModalsInjectionToken to extensions

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

* Testing changing visibility flag

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

* Linter fix

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

* Refactor cluster modals registrator and injectable

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

* Linter fixes

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

* Harder linter fix

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

* Fix linter again

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

* Using clusterFrameChildComponentsInjectionToken

for specific extension elements

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

* Removing unused files

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

* Removing unused modal registration

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

* Improving tests

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

* Fix linting

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

* Update snapshots

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

* Rename test suite for consistency

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

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>
Co-authored-by: Janne Savolainen <janne.savolainen@live.fi>

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 => ({
-    namespaceStore: di.inject(namespaceStoreInjectable),
-    subscribeStores: di.inject(subscribeStoresInjectable),
-    childComponents: di.injectMany(clusterFrameChildComponentInjectionToken),
-    watchHistoryState: di.inject(watchHistoryStateInjectable),
-  }),
+  getProps: di => {
+    const computedInjectMany = di.inject(computedInjectManyInjectable);
+
+    return {
+      namespaceStore: di.inject(namespaceStoreInjectable),
+      subscribeStores: di.inject(subscribeStoresInjectable),
+      childComponents: computedInjectMany(clusterFrameChildComponentInjectionToken),
+      watchHistoryState: di.inject(watchHistoryStateInjectable),
+    };
+  },
 });
 
 ClusterFrame.displayName = "ClusterFrame";