Split root and cluster frames in smaller pieces (#5737)

* Make root frame child components comply with open closed principle and include it in the behavioural unit tests

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

* Make cluster frame child components comply with open closed principle and include it in behavioural unit tests

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

* Remove duplication

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

* Simplify test

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

* Make a component more determistic in unit tests

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

* Mock uninterested, non-deterministic third party library in unit tests

Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com>

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

* Optimize registration of injectables in unit tests to make tests faster

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

* Update snapshots

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

* Remove import time side-effect causing memory leak

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

src/renderer/components/+workloads-cronjobs/cron-job-trigger-dialog-cluster-frame-child-component.injectable.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { computed } from "mobx";
+import { CronJobTriggerDialog } from "./cronjob-trigger-dialog";
+import { clusterFrameChildComponentInjectionToken } from "../../frames/cluster-frame/cluster-frame-child-component-injection-token";
+
+const cronJobTriggerDialogClusterFrameChildComponentInjectable = getInjectable({
+  id: "cron-job-trigger-dialog-cluster-frame-child-component",
+
+  instantiate: () => ({
+    id: "cron-job-trigger-dialog",
+    shouldRender: computed(() => true),
+    Component: CronJobTriggerDialog,
+  }),
+
+  injectionToken: clusterFrameChildComponentInjectionToken,
+
+  causesSideEffects: true,
+});
+
+export default cronJobTriggerDialogClusterFrameChildComponentInjectable;

src/renderer/components/+workloads-deployments/scale/deployment-scale-dialog-cluster-frame-child-component.injectable.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { computed } from "mobx";
+import { DeploymentScaleDialog } from "./dialog";
+import { clusterFrameChildComponentInjectionToken } from "../../../frames/cluster-frame/cluster-frame-child-component-injection-token";
+
+const deploymentScaleDialogClusterFrameChildComponentInjectable = getInjectable({
+  id: "deployment-scale-dialog-cluster-frame-child-component",
+
+  instantiate: () => ({
+    id: "deployment-scale-dialog",
+    shouldRender: computed(() => true),
+    Component: DeploymentScaleDialog,
+  }),
+
+  injectionToken: clusterFrameChildComponentInjectionToken,
+
+  causesSideEffects: true,
+});
+
+export default deploymentScaleDialogClusterFrameChildComponentInjectable;

src/renderer/components/+workloads-replicasets/scale-dialog/replicaset-scale-dialog-cluster-frame-child-component.injectable.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { computed } from "mobx";
+import { clusterFrameChildComponentInjectionToken } from "../../../frames/cluster-frame/cluster-frame-child-component-injection-token";
+import { ReplicaSetScaleDialog } from "./dialog";
+
+const replicasetScaleDialogClusterFrameChildComponentInjectable = getInjectable({
+  id: "replicaset-scale-dialog-cluster-frame-child-component",
+
+  instantiate: () => ({
+    id: "replicaset-scale-dialog",
+    shouldRender: computed(() => true),
+    Component: ReplicaSetScaleDialog,
+  }),
+
+  injectionToken: clusterFrameChildComponentInjectionToken,
+
+  causesSideEffects: true,
+});
+
+export default replicasetScaleDialogClusterFrameChildComponentInjectable;

src/renderer/components/+workloads-statefulsets/scale/statefulset-scale-dialog-cluster-frame-child-component.injectable.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { computed } from "mobx";
+import { StatefulSetScaleDialog } from "./dialog";
+import { clusterFrameChildComponentInjectionToken } from "../../../frames/cluster-frame/cluster-frame-child-component-injection-token";
+
+const statefulsetScaleDialogClusterFrameChildComponentInjectable = getInjectable({
+  id: "statefulset-scale-dialog-cluster-frame-child-component",
+
+  instantiate: () => ({
+    id: "statefulset-scale-dialog",
+    shouldRender: computed(() => true),
+    Component: StatefulSetScaleDialog,
+  }),
+
+  injectionToken: clusterFrameChildComponentInjectionToken,
+
+  causesSideEffects: true,
+});
+
+export default statefulsetScaleDialogClusterFrameChildComponentInjectable;

src/renderer/components/cluster-manager/cluster-manager-root-frame-child-component.injectable.tsx

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import React from "react";
+import { getInjectable } from "@ogre-tools/injectable";
+import { rootFrameChildComponentInjectionToken } from "../../frames/root-frame/root-frame-child-component-injection-token";
+import { ClusterManager } from "./cluster-manager";
+import { computed } from "mobx";
+import { ErrorBoundary } from "../error-boundary";
+
+const clusterManagerRootFrameChildComponentInjectable = getInjectable({
+  id: "cluster-manager-root-frame-child-component",
+
+  instantiate: () => ({
+    id: "cluster-manager",
+
+    shouldRender: computed(() => true),
+
+    Component: () => (
+      <ErrorBoundary>
+        <ClusterManager />
+      </ErrorBoundary>
+    ),
+  }),
+
+  injectionToken: rootFrameChildComponentInjectionToken,
+});
+
+export default clusterManagerRootFrameChildComponentInjectable;

src/renderer/components/command-palette/command-container-cluster-frame-child-component.injectable.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { computed } from "mobx";
+import { CommandContainer } from "./command-container";
+import { clusterFrameChildComponentInjectionToken } from "../../frames/cluster-frame/cluster-frame-child-component-injection-token";
+
+const commandContainerClusterFrameChildComponentInjectable = getInjectable({
+  id: "command-container-cluster-frame-child-component",
+
+  instantiate: () => ({
+    id: "command-container",
+    shouldRender: computed(() => true),
+    Component: CommandContainer,
+  }),
+
+  causesSideEffects: true,
+
+  injectionToken: clusterFrameChildComponentInjectionToken,
+});
+
+export default commandContainerClusterFrameChildComponentInjectable;

src/renderer/components/command-palette/command-container-root-frame-child-component.injectable.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { rootFrameChildComponentInjectionToken } from "../../frames/root-frame/root-frame-child-component-injection-token";
+import { computed } from "mobx";
+import { CommandContainer } from "./command-container";
+
+const commandContainerRootFrameChildComponentInjectable = getInjectable({
+  id: "command-container-root-frame-child-component",
+
+  instantiate: () => ({
+    id: "command-container",
+    shouldRender: computed(() => true),
+    Component: CommandContainer,
+  }),
+
+  causesSideEffects: true,
+
+  injectionToken: rootFrameChildComponentInjectionToken,
+});
+
+export default commandContainerRootFrameChildComponentInjectable;

src/renderer/components/confirm-dialog/confirm-dialog-cluster-frame-child-component.injectable.ts

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { computed } from "mobx";
+import { ConfirmDialog } from "./confirm-dialog";
+import { clusterFrameChildComponentInjectionToken } from "../../frames/cluster-frame/cluster-frame-child-component-injection-token";
+
+const confirmDialogClusterFrameChildComponentInjectable = getInjectable({
+  id: "confirm-dialog-cluster-frame-child-component",
+
+  instantiate: () => ({
+    id: "confirm-dialog",
+    shouldRender: computed(() => true),
+    Component: ConfirmDialog,
+  }),
+
+  injectionToken: clusterFrameChildComponentInjectionToken,
+});
+
+export default confirmDialogClusterFrameChildComponentInjectable;

src/renderer/components/confirm-dialog/confirm-dialog-root-frame-child-component.injectable.ts

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { rootFrameChildComponentInjectionToken } from "../../frames/root-frame/root-frame-child-component-injection-token";
+import { computed } from "mobx";
+import { ConfirmDialog } from "./confirm-dialog";
+
+const confirmDialogRootFrameChildComponentInjectable = getInjectable({
+  id: "confirm-dialog-root-frame-child-component",
+
+  instantiate: () => ({
+    id: "confirm-dialog",
+    shouldRender: computed(() => true),
+    Component: ConfirmDialog,
+  }),
+
+  injectionToken: rootFrameChildComponentInjectionToken,
+});
+
+export default confirmDialogRootFrameChildComponentInjectable;

src/renderer/components/delete-cluster-dialog/__tests__/delete-cluster-dialog.test.tsx

@@ -7,9 +7,7 @@ import { KubeConfig } from "@kubernetes/client-node";
 import { fireEvent } from "@testing-library/react";
 import type { RenderResult } from "@testing-library/react";
 import mockFs from "mock-fs";
-import React from "react";
 import * as selectEvent from "react-select-event";
-import { DeleteClusterDialog } from "../view";
 import type { CreateCluster } from "../../../../common/cluster/create-cluster-injection-token";
 import { createClusterInjectionToken } from "../../../../common/cluster/create-cluster-injection-token";
 import createContextHandlerInjectable from "../../../../main/context-handler/create-context-handler.injectable";
@@ -19,12 +17,6 @@ import storesAndApisCanBeCreatedInjectable from "../../../stores-apis-can-be-cre
 import createKubeconfigManagerInjectable from "../../../../main/kubeconfig-manager/create-kubeconfig-manager.injectable";
 import type { ApplicationBuilder } from "../../test-utils/get-application-builder";
 import { getApplicationBuilder } from "../../test-utils/get-application-builder";
-import { frontEndRouteInjectionToken } from "../../../../common/front-end-routing/front-end-route-injection-token";
-import { getInjectable } from "@ogre-tools/injectable";
-import { computed } from "mobx";
-import { routeSpecificComponentInjectionToken } from "../../../routes/route-specific-component-injection-token";
-import { navigateToRouteInjectionToken } from "../../../../common/front-end-routing/navigate-to-route-injection-token";
-import hotbarStoreInjectable from "../../../../common/hotbars/store.injectable";
 import normalizedPlatformInjectable from "../../../../common/vars/normalized-platform.injectable";
 import kubectlBinaryNameInjectable from "../../../../main/kubectl/binary-name.injectable";
 import kubectlDownloadingNormalizedArchInjectable from "../../../../main/kubectl/normalized-arch.injectable";
@@ -111,22 +103,9 @@ describe("<DeleteClusterDialog />", () => {
       mainDi.override(kubectlBinaryNameInjectable, () => "kubectl");
       mainDi.override(kubectlDownloadingNormalizedArchInjectable, () => "amd64");
       mainDi.override(normalizedPlatformInjectable, () => "darwin");
-
-      rendererDi.override(hotbarStoreInjectable, () => ({}));
       rendererDi.override(storesAndApisCanBeCreatedInjectable, () => true);
     });
 
-    const { rendererDi } = applicationBuilder.dis;
-
-    rendererDi.register(testRouteInjectable, testRouteComponentInjectable);
-
-    applicationBuilder.beforeRender(({ rendererDi }) => {
-      const navigateToRoute = rendererDi.inject(navigateToRouteInjectionToken);
-      const testRoute = rendererDi.inject(testRouteInjectable);
-
-      navigateToRoute(testRoute);
-    });
-
     mockFs();
 
     applicationBuilder.beforeRender(({ rendererDi }) => {
@@ -321,26 +300,3 @@ describe("<DeleteClusterDialog />", () => {
     });
   });
 });
-
-const testRouteInjectable = getInjectable({
-  id: "some-test-route",
-
-  instantiate: () => ({
-    path: "/some-test-path",
-    clusterFrame: false,
-    isEnabled: computed(() => true),
-  }),
-
-  injectionToken: frontEndRouteInjectionToken,
-});
-
-const testRouteComponentInjectable = getInjectable({
-  id: "some-test-component",
-
-  instantiate: (di) => ({
-    route: di.inject(testRouteInjectable),
-    Component: () => <DeleteClusterDialog />,
-  }),
-
-  injectionToken: routeSpecificComponentInjectionToken,
-});

src/renderer/components/delete-cluster-dialog/delete-cluster-dialog-cluster-frame-child-component.injectable.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { computed } from "mobx";
+import { DeleteClusterDialog } from "./view";
+import { clusterFrameChildComponentInjectionToken } from "../../frames/cluster-frame/cluster-frame-child-component-injection-token";
+
+const deleteClusterDialogClusterFrameChildComponentInjectable = getInjectable({
+  id: "delete-cluster-dialog-cluster-frame-child-component",
+
+  instantiate: () => ({
+    id: "delete-cluster-dialog",
+    shouldRender: computed(() => true),
+    Component: DeleteClusterDialog,
+  }),
+
+  injectionToken: clusterFrameChildComponentInjectionToken,
+
+  causesSideEffects: true,
+});
+
+export default deleteClusterDialogClusterFrameChildComponentInjectable;

src/renderer/components/dock/dock-tab.tsx

@@ -14,10 +14,10 @@ import { Tab } from "../tabs";
 import { Icon } from "../icon";
 import { Menu, MenuItem } from "../menu";
 import { observable } from "mobx";
-import { isMac } from "../../../common/vars";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import dockStoreInjectable from "./dock/store.injectable";
 import { Tooltip, TooltipPosition } from "../tooltip";
+import isMacInjectable from "../../../common/vars/is-mac.injectable";
 
 export interface DockTabProps extends TabProps<DockTabModel> {
   moreActions?: React.ReactNode;
@@ -25,6 +25,7 @@ export interface DockTabProps extends TabProps<DockTabModel> {
 
 interface Dependencies {
   dockStore: DockStore;
+  isMac: boolean;
 }
 
 @observer
@@ -73,7 +74,7 @@ class NonInjectedDockTab extends React.Component<DockTabProps & Dependencies> {
   }
 
   render() {
-    const { className, moreActions, dockStore, active, ...tabProps } = this.props;
+    const { className, moreActions, dockStore, active, isMac, ...tabProps } = this.props;
 
     if (!tabProps.value) {
       return;
@@ -100,7 +101,7 @@ class NonInjectedDockTab extends React.Component<DockTabProps & Dependencies> {
                   <Icon
                     small
                     material="close"
-                    tooltip={`Close ${isMac ? "⌘+W" : "Ctrl+W"}`}
+                    tooltip={`Close ${this.props.isMac ? "⌘+W" : "Ctrl+W"}`}
                     onClick={close}
                   />
                 </div>
@@ -124,6 +125,7 @@ class NonInjectedDockTab extends React.Component<DockTabProps & Dependencies> {
 export const DockTab = withInjectables<Dependencies, DockTabProps>(NonInjectedDockTab, {
   getProps: (di, props) => ({
     dockStore: di.inject(dockStoreInjectable),
+    isMac: di.inject(isMacInjectable),
     ...props,
   }),
 });

src/renderer/components/hotbar/hotbar-menu.tsx

@@ -184,7 +184,9 @@ class NonInjectedHotbarMenu extends React.Component<Dependencies & HotbarMenuPro
     return (
       <div className={cssNames("HotbarMenu flex column", { draggingOver: this.draggingOver }, className)}>
         <div className="HotbarItems flex column gaps">
-          <DragDropContext onDragStart={() => this.onDragStart()} onDragEnd={(result) => this.onDragEnd(result)}>
+          <DragDropContext
+            onDragStart={() => this.onDragStart()}
+            onDragEnd={(result) => this.onDragEnd(result)}>
             {this.renderGrid()}
           </DragDropContext>
         </div>

src/renderer/components/kube-object-details/kube-object-details-cluster-frame-child-component.injectable.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { computed } from "mobx";
+import { KubeObjectDetails } from "./kube-object-details";
+import { clusterFrameChildComponentInjectionToken } from "../../frames/cluster-frame/cluster-frame-child-component-injection-token";
+
+const kubeObjectDetailsClusterFrameChildComponentInjectable = getInjectable({
+  id: "kube-object-details-cluster-frame-child-component",
+
+  instantiate: () => ({
+    id: "kube-object-details",
+    shouldRender: computed(() => true),
+    Component: KubeObjectDetails,
+  }),
+
+  injectionToken: clusterFrameChildComponentInjectionToken,
+
+  causesSideEffects: true,
+});
+
+export default kubeObjectDetailsClusterFrameChildComponentInjectable;

src/renderer/components/kubeconfig-dialog/kubeconfig-dialog-cluster-frame-child-component.injectable.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { computed } from "mobx";
+import { clusterFrameChildComponentInjectionToken } from "../../frames/cluster-frame/cluster-frame-child-component-injection-token";
+import { KubeConfigDialog } from "./kubeconfig-dialog";
+
+const kubeconfigDialogClusterFrameChildComponentInjectable = getInjectable({
+  id: "kubeconfig-dialog-cluster-frame-child-component",
+
+  instantiate: () => ({
+    id: "kubeconfig-dialog",
+    shouldRender: computed(() => true),
+    Component: KubeConfigDialog,
+  }),
+
+  injectionToken: clusterFrameChildComponentInjectionToken,
+
+  causesSideEffects: true,
+});
+
+export default kubeconfigDialogClusterFrameChildComponentInjectable;

src/renderer/components/notifications/notifications-cluster-frame-child-component.injectable.ts

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { computed } from "mobx";
+import { Notifications } from "./notifications";
+import { clusterFrameChildComponentInjectionToken } from "../../frames/cluster-frame/cluster-frame-child-component-injection-token";
+
+const notificationsClusterFrameChildComponentInjectable = getInjectable({
+  id: "notifications-cluster-frame-child-component",
+
+  instantiate: () => ({
+    id: "notifications",
+    shouldRender: computed(() => true),
+    Component: Notifications,
+  }),
+
+  injectionToken: clusterFrameChildComponentInjectionToken,
+});
+
+export default notificationsClusterFrameChildComponentInjectable;

src/renderer/components/notifications/notifications-root-frame-child-component.injectable.ts

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { rootFrameChildComponentInjectionToken } from "../../frames/root-frame/root-frame-child-component-injection-token";
+import { computed } from "mobx";
+import { Notifications } from "./notifications";
+
+const notificationsRootFrameChildComponentInjectable = getInjectable({
+  id: "notifications-root-frame-child-component",
+
+  instantiate: () => ({
+    id: "notifications",
+    shouldRender: computed(() => true),
+    Component: Notifications,
+  }),
+
+  injectionToken: rootFrameChildComponentInjectionToken,
+});
+
+export default notificationsRootFrameChildComponentInjectable;

src/renderer/components/test-utils/get-application-builder.tsx

@@ -7,21 +7,17 @@ import rendererExtensionsInjectable from "../../../extensions/renderer-extension
 import currentlyInClusterFrameInjectable from "../../routes/currently-in-cluster-frame.injectable";
 import type { IObservableArray, ObservableSet } from "mobx";
 import { computed, observable, runInAction } from "mobx";
-import { renderFor } from "./renderFor";
 import React from "react";
 import { Router } from "react-router";
-import { Observer } from "mobx-react";
 import subscribeStoresInjectable from "../../kube-watch-api/subscribe-stores.injectable";
 import allowedResourcesInjectable from "../../cluster-frame-context/allowed-resources.injectable";
 import type { RenderResult } from "@testing-library/react";
 import { getByText, fireEvent } from "@testing-library/react";
 import type { KubeResource } from "../../../common/rbac";
-import { Sidebar } from "../layout/sidebar";
 import type { DiContainer } from "@ogre-tools/injectable";
 import clusterStoreInjectable from "../../../common/cluster-store/cluster-store.injectable";
 import type { ClusterStore } from "../../../common/cluster-store/cluster-store";
 import mainExtensionsInjectable from "../../../extensions/main-extensions.injectable";
-import currentRouteComponentInjectable from "../../routes/current-route-component.injectable";
 import { pipeline } from "@ogre-tools/fp";
 import { flatMap, compact, join, get, filter, map, matches, last } from "lodash/fp";
 import preferenceNavigationItemsInjectable from "../+preferences/preferences-navigation/preference-navigation-items.injectable";
@@ -44,8 +40,6 @@ import historyInjectable from "../../navigation/history.injectable";
 import type { MinimalTrayMenuItem } from "../../../main/tray/electron-tray/electron-tray.injectable";
 import electronTrayInjectable from "../../../main/tray/electron-tray/electron-tray.injectable";
 import applicationWindowInjectable from "../../../main/start-main-application/lens-window/application-window/application-window.injectable";
-import { Notifications } from "../notifications/notifications";
-import broadcastThatRootFrameIsRenderedInjectable from "../../frames/root-frame/broadcast-that-root-frame-is-rendered.injectable";
 import { getDiForUnitTesting as getRendererDi } from "../../getDiForUnitTesting";
 import { getDiForUnitTesting as getMainDi } from "../../../main/getDiForUnitTesting";
 import { overrideChannels } from "../../../test-utils/channel-fakes/override-channels";
@@ -53,7 +47,6 @@ import trayIconPathsInjectable from "../../../main/tray/tray-icon-path.injectabl
 import assert from "assert";
 import { openMenu } from "react-select-event";
 import userEvent from "@testing-library/user-event";
-import { StatusBar } from "../status-bar/status-bar";
 import lensProxyPortInjectable from "../../../main/lens-proxy/lens-proxy-port.injectable";
 import type { Route } from "../../../common/front-end-routing/front-end-route-injection-token";
 import type { NavigateToRouteOptions } from "../../../common/front-end-routing/navigate-to-route-injection-token";
@@ -62,7 +55,10 @@ import type { LensMainExtension } from "../../../extensions/lens-main-extension"
 import type { LensExtension } from "../../../extensions/lens-extension";
 
 import extensionInjectable from "../../../extensions/extension-loader/extension/extension.injectable";
-import { TopBar } from "../layout/top-bar/top-bar";
+import { renderFor } from "./renderFor";
+import { RootFrame } from "../../frames/root-frame/root-frame";
+import { ClusterFrame } from "../../frames/cluster-frame/cluster-frame";
+import hostedClusterIdInjectable from "../../cluster-frame-context/hosted-cluster-id.injectable";
 
 type Callback = (dis: DiContainers) => void | Promise<void>;
 
@@ -125,10 +121,7 @@ interface DiContainers {
 }
 
 interface Environment {
-  renderSidebar: () => React.ReactNode;
-  renderTopBar: () => React.ReactNode;
-  renderStatusBar: () => React.ReactNode;
-  beforeRender: () => void;
+  RootComponent: React.ElementType;
   onAllowKubeResource: () => void;
 }
 
@@ -166,17 +159,7 @@ export const getApplicationBuilder = () => {
 
   const environments = {
     application: {
-      renderSidebar: () => null,
-
-      renderTopBar: () => <TopBar />,
-
-      renderStatusBar: () => <StatusBar />,
-
-      beforeRender: () => {
-        const nofifyThatRootFrameIsRendered = rendererDi.inject(broadcastThatRootFrameIsRenderedInjectable);
-
-        nofifyThatRootFrameIsRendered();
-      },
+      RootComponent: RootFrame,
 
       onAllowKubeResource: () => {
         throw new Error(
@@ -186,10 +169,7 @@ export const getApplicationBuilder = () => {
     } as Environment,
 
     clusterFrame: {
-      renderSidebar: () => <Sidebar />,
-      renderStatusBar: () => null,
-      renderTopBar: () => null,
-      beforeRender: () => {},
+      RootComponent: ClusterFrame,
       onAllowKubeResource: () => {},
     } as Environment,
   };
@@ -401,6 +381,7 @@ export const getApplicationBuilder = () => {
 
       const namespaceStoreStub = {
         contextNamespaces: [],
+        items: [],
       } as unknown as NamespaceStore;
 
       const clusterFrameContextFake = new ClusterFrameContext(
@@ -413,6 +394,7 @@ export const getApplicationBuilder = () => {
 
       rendererDi.override(namespaceStoreInjectable, () => namespaceStoreStub);
       rendererDi.override(hostedClusterInjectable, () => clusterStub);
+      rendererDi.override(hostedClusterIdInjectable, () => "irrelevant-hosted-cluster-id");
       rendererDi.override(clusterFrameContextInjectable, () => clusterFrameContextFake);
 
       // Todo: get rid of global state.
@@ -474,35 +456,17 @@ export const getApplicationBuilder = () => {
 
       await startFrame();
 
-      const render = renderFor(rendererDi);
-      const history = rendererDi.inject(historyInjectable);
-      const currentRouteComponent = rendererDi.inject(currentRouteComponentInjectable);
-
       for (const callback of beforeRenderCallbacks) {
         await callback(dis);
       }
 
-      environment.beforeRender();
+      const history = rendererDi.inject(historyInjectable);
+
+      const render = renderFor(rendererDi);
 
       rendered = render(
         <Router history={history}>
-          {environment.renderSidebar()}
-          {environment.renderTopBar()}
-          {environment.renderStatusBar()}
-
-          <Observer>
-            {() => {
-              const Component = currentRouteComponent.get();
-
-              if (!Component) {
-                return null;
-              }
-
-              return <Component />;
-            }}
-          </Observer>
-
-          <Notifications />
+          <environment.RootComponent />
         </Router>,
       );
 

src/renderer/frames/cluster-frame/__snapshots__/cluster-frame.test.tsx.snap

@@ -2,6 +2,9 @@
 
 exports[`<ClusterFrame /> given cluster with list nodes and namespaces permissions given no matching component given current url is starting url renders 1`] = `
 <div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
   <div
     class="mainLayout"
     style="--sidebar-width: 200px;"
@@ -467,14 +470,14 @@ exports[`<ClusterFrame /> given cluster with list nodes and namespaces permissio
       </div>
     </div>
   </div>
-  <div
-    class="Notifications flex column align-flex-end"
-  />
 </div>
 `;
 
 exports[`<ClusterFrame /> given cluster with list nodes and namespaces permissions renders 1`] = `
 <div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
   <div
     class="mainLayout"
     style="--sidebar-width: 200px;"
@@ -947,14 +950,14 @@ exports[`<ClusterFrame /> given cluster with list nodes and namespaces permissio
       </div>
     </div>
   </div>
-  <div
-    class="Notifications flex column align-flex-end"
-  />
 </div>
 `;
 
 exports[`<ClusterFrame /> given cluster without list nodes, but with namespaces permissions renders 1`] = `
 <div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
   <div
     class="mainLayout"
     style="--sidebar-width: 200px;"
@@ -1483,8 +1486,5 @@ exports[`<ClusterFrame /> given cluster without list nodes, but with namespaces
       </div>
     </div>
   </div>
-  <div
-    class="Notifications flex column align-flex-end"
-  />
 </div>
 `;

src/renderer/frames/cluster-frame/cluster-frame-child-component-injection-token.ts

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import { getInjectionToken } from "@ogre-tools/injectable";
+import type { IComputedValue } from "mobx";
+
+export interface ClusterFrameChildComponent {
+  id: string;
+  Component: React.ElementType;
+  shouldRender: IComputedValue<boolean>;
+}
+
+export const clusterFrameChildComponentInjectionToken = getInjectionToken<ClusterFrameChildComponent>({
+  id: "cluster-frame-child-component",
+});

src/renderer/frames/cluster-frame/cluster-frame-layout-child-component.injectable.tsx

@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import React from "react";
+import { getInjectable } from "@ogre-tools/injectable";
+import { clusterFrameChildComponentInjectionToken } from "./cluster-frame-child-component-injection-token";
+import { MainLayout } from "../../components/layout/main-layout";
+import { Sidebar } from "../../components/layout/sidebar";
+import { Dock } from "../../components/dock";
+import styles from "./cluster-frame.module.css";
+import { computed } from "mobx";
+import currentRouteComponentInjectable from "../../routes/current-route-component.injectable";
+import { Redirect } from "react-router";
+import startUrlInjectable from "./start-url.injectable";
+import currentPathInjectable from "../../routes/current-path.injectable";
+import { observer } from "mobx-react";
+
+const clusterFrameLayoutChildComponentInjectable = getInjectable({
+  id: "cluster-frame-layout-child-component",
+
+  instantiate: (di) => {
+    const currentRouteComponent = di.inject(currentRouteComponentInjectable);
+    const startUrl = di.inject(startUrlInjectable);
+    const currentPath = di.inject(currentPathInjectable);
+
+    return {
+      id: "cluster-frame-layout",
+
+      shouldRender: computed(() => true),
+
+      Component: observer(() => {
+        const Component = currentRouteComponent.get();
+        const starting = startUrl.get();
+        const current = currentPath.get();
+
+        return (
+          <MainLayout sidebar={<Sidebar />} footer={<Dock />}>
+            {Component ? (
+              <Component />
+            ) : // NOTE: this check is to prevent an infinite loop
+              starting !== current ? (
+                <Redirect to={startUrl.get()} />
+              ) : (
+                <div className={styles.centering}>
+                  <div className="error">
+                    An error has occured. No route can be found matching the
+                    current route, which is also the starting route.
+                  </div>
+                </div>
+              )}
+          </MainLayout>
+        );
+      }),
+    };
+  },
+
+  injectionToken: clusterFrameChildComponentInjectionToken,
+});
+
+export default clusterFrameLayoutChildComponentInjectable;

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

@@ -2,52 +2,30 @@
  * Copyright (c) OpenLens Authors. All rights reserved.
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
-import styles from "./cluster-frame.module.css";
 import React, { useEffect } from "react";
-import type { IComputedValue } from "mobx";
-import { observer } from "mobx-react";
-import { Redirect } from "react-router";
-import { ConfirmDialog } from "../../components/confirm-dialog";
-import { DeploymentScaleDialog } from "../../components/+workloads-deployments/scale/dialog";
-import { CronJobTriggerDialog } from "../../components/+workloads-cronjobs/cronjob-trigger-dialog";
-import { StatefulSetScaleDialog } from "../../components/+workloads-statefulsets/scale/dialog";
-import { ReplicaSetScaleDialog } from "../../components/+workloads-replicasets/scale-dialog/dialog";
-import { CommandContainer } from "../../components/command-palette/command-container";
+import { Observer, observer } from "mobx-react";
 import { ErrorBoundary } from "../../components/error-boundary";
-import { MainLayout } from "../../components/layout/main-layout";
-import { Notifications } from "../../components/notifications";
-import { KubeObjectDetails } from "../../components/kube-object-details";
-import { KubeConfigDialog } from "../../components/kubeconfig-dialog";
-import { Sidebar } from "../../components/layout/sidebar";
-import { Dock } from "../../components/dock";
-import { PortForwardDialog } from "../../port-forward";
-import { DeleteClusterDialog } from "../../components/delete-cluster-dialog";
 import type { NamespaceStore } from "../../components/+namespaces/store";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import namespaceStoreInjectable  from "../../components/+namespaces/store.injectable";
 import type { SubscribeStores } from "../../kube-watch-api/kube-watch-api";
 import { disposer } from "../../utils";
-import currentRouteComponentInjectable from "../../routes/current-route-component.injectable";
-import startUrlInjectable from "./start-url.injectable";
 import subscribeStoresInjectable from "../../kube-watch-api/subscribe-stores.injectable";
-import currentPathInjectable from "../../routes/current-path.injectable";
+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";
 
 interface Dependencies {
   namespaceStore: NamespaceStore;
-  currentRouteComponent: IComputedValue<React.ElementType<{}> | undefined>;
-  startUrl: IComputedValue<string>;
   subscribeStores: SubscribeStores;
-  currentPath: IComputedValue<string>;
+  childComponents: ClusterFrameChildComponent[];
   watchHistoryState: () => () => void;
 }
 
 export const NonInjectedClusterFrame = observer(({
   namespaceStore,
-  currentRouteComponent,
-  startUrl,
   subscribeStores,
-  currentPath,
+  childComponents,
   watchHistoryState,
 }: Dependencies) => {
   useEffect(() => disposer(
@@ -57,43 +35,14 @@ export const NonInjectedClusterFrame = observer(({
     watchHistoryState(),
   ), []);
 
-  const Component = currentRouteComponent.get();
-  const starting = startUrl.get();
-  const current = currentPath.get();
-
   return (
     <ErrorBoundary>
-      <MainLayout
-        sidebar={<Sidebar />}
-        footer={<Dock />}
-      >
-        {
-          Component
-            ? <Component />
-            // NOTE: this check is to prevent an infinite loop
-            : starting !== current
-              ? <Redirect to={startUrl.get()} />
-              : (
-                <div className={styles.centering}>
-                  <div className="error">
-                    An error has occured. No route can be found matching the current route, which is also the starting route.
-                  </div>
-                </div>
-              )
-        }
-      </MainLayout>
-
-      <Notifications />
-      <ConfirmDialog />
-      <KubeObjectDetails />
-      <KubeConfigDialog />
-      <DeploymentScaleDialog />
-      <StatefulSetScaleDialog />
-      <ReplicaSetScaleDialog />
-      <CronJobTriggerDialog />
-      <PortForwardDialog />
-      <DeleteClusterDialog />
-      <CommandContainer />
+      {childComponents
+        .map((child) => (
+          <Observer key={child.id}>
+            {() => (child.shouldRender.get() ? <child.Component /> : null) }
+          </Observer>
+        ))}
     </ErrorBoundary>
   );
 });
@@ -102,9 +51,7 @@ export const ClusterFrame = withInjectables<Dependencies>(NonInjectedClusterFram
   getProps: di => ({
     namespaceStore: di.inject(namespaceStoreInjectable),
     subscribeStores: di.inject(subscribeStoresInjectable),
-    startUrl: di.inject(startUrlInjectable),
-    currentRouteComponent: di.inject(currentRouteComponentInjectable),
-    currentPath: di.inject(currentPathInjectable),
+    childComponents: di.injectMany(clusterFrameChildComponentInjectionToken),
     watchHistoryState: di.inject(watchHistoryStateInjectable),
   }),
 });

src/renderer/frames/root-frame/root-frame-child-component-injection-token.ts

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import { getInjectionToken } from "@ogre-tools/injectable";
+import type { IComputedValue } from "mobx";
+
+export interface RootFrameChildComponent {
+  id: string;
+  Component: React.ElementType;
+  shouldRender: IComputedValue<boolean>;
+}
+
+export const rootFrameChildComponentInjectionToken = getInjectionToken<RootFrameChildComponent>({
+  id: "root-frame-child-component",
+});

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

@@ -3,25 +3,18 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-import { injectSystemCAs } from "../../../common/system-ca";
 import React from "react";
-import { observer } from "mobx-react";
-import { ClusterManager } from "../../components/cluster-manager";
-import { ErrorBoundary } from "../../components/error-boundary";
-import { Notifications } from "../../components/notifications";
-import { ConfirmDialog } from "../../components/confirm-dialog";
-import { CommandContainer } from "../../components/command-palette/command-container";
+import { Observer } from "mobx-react";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import broadcastThatRootFrameIsRenderedInjectable from "./broadcast-that-root-frame-is-rendered.injectable";
-
-// Todo: remove import-time side-effect.
-injectSystemCAs();
+import type { RootFrameChildComponent } from "./root-frame-child-component-injection-token";
+import { rootFrameChildComponentInjectionToken } from "./root-frame-child-component-injection-token";
 
 interface Dependencies {
   broadcastThatRootFrameIsRendered: () => void;
+  childComponents: RootFrameChildComponent[];
 }
 
-@observer
 class NonInjectedRootFrame extends React.Component<Dependencies> {
   static displayName = "RootFrame";
 
@@ -32,12 +25,12 @@ class NonInjectedRootFrame extends React.Component<Dependencies> {
   render() {
     return (
       <>
-        <ErrorBoundary>
-          <ClusterManager />
-        </ErrorBoundary>
-        <Notifications />
-        <ConfirmDialog />
-        <CommandContainer />
+        {this.props.childComponents
+          .map((child) => (
+            <Observer key={child.id}>
+              {() => (child.shouldRender.get() ? <child.Component /> : null) }
+            </Observer>
+          ))}
       </>
     );
   }
@@ -49,6 +42,7 @@ export const RootFrame = withInjectables<Dependencies>(
   {
     getProps: (di, props) => ({
       broadcastThatRootFrameIsRendered: di.inject(broadcastThatRootFrameIsRenderedInjectable),
+      childComponents: di.injectMany(rootFrameChildComponentInjectionToken),
       ...props,
     }),
   },

src/renderer/frames/root-frame/setup-system-ca.injectable.ts

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { injectSystemCAs } from "../../../common/system-ca";
+import { getInjectable } from "@ogre-tools/injectable";
+import { beforeFrameStartsInjectionToken } from "../../before-frame-starts/before-frame-starts-injection-token";
+
+const setupSystemCaInjectable = getInjectable({
+  id: "setup-system-ca",
+
+  instantiate: () => ({
+    run: async () => {
+      await injectSystemCAs();
+    },
+  }),
+
+  causesSideEffects: true,
+
+  injectionToken: beforeFrameStartsInjectionToken,
+});
+
+export default setupSystemCaInjectable;

src/renderer/getDiForUnitTesting.tsx

@@ -4,10 +4,8 @@
  */
 
 import glob from "glob";
-import { memoize, noop } from "lodash/fp";
-import type {
-  DiContainer,
-  Injectable } from "@ogre-tools/injectable";
+import { memoize, noop, chunk } from "lodash/fp";
+import type { DiContainer, Injectable } from "@ogre-tools/injectable";
 import {
   createContainer,
 } from "@ogre-tools/injectable";
@@ -41,7 +39,7 @@ import apiManagerInjectable from "../common/k8s-api/api-manager/manager.injectab
 import ipcRendererInjectable from "./utils/channel/ipc-renderer.injectable";
 import type { IpcRenderer } from "electron";
 import setupOnApiErrorListenersInjectable from "./api/setup-on-api-errors.injectable";
-import { observable } from "mobx";
+import { observable, computed } from "mobx";
 import defaultShellInjectable from "./components/+preferences/default-shell.injectable";
 import appVersionInjectable from "../common/get-configuration-file-model/app-version/app-version.injectable";
 import provideInitialValuesForSyncBoxesInjectable from "./utils/sync-box/provide-initial-values-for-sync-boxes.injectable";
@@ -59,6 +57,18 @@ import goForwardInjectable from "./components/layout/top-bar/go-forward.injectab
 import closeWindowInjectable from "./components/layout/top-bar/close-window.injectable";
 import maximizeWindowInjectable from "./components/layout/top-bar/maximize-window.injectable";
 import toggleMaximizeWindowInjectable from "./components/layout/top-bar/toggle-maximize-window.injectable";
+import commandContainerRootFrameChildComponentInjectable from "./components/command-palette/command-container-root-frame-child-component.injectable";
+import type { HotbarStore } from "../common/hotbars/store";
+import commandContainerClusterFrameChildComponentInjectable from "./components/command-palette/command-container-cluster-frame-child-component.injectable";
+import cronJobTriggerDialogClusterFrameChildComponentInjectable from "./components/+workloads-cronjobs/cron-job-trigger-dialog-cluster-frame-child-component.injectable";
+import deploymentScaleDialogClusterFrameChildComponentInjectable from "./components/+workloads-deployments/scale/deployment-scale-dialog-cluster-frame-child-component.injectable";
+import replicasetScaleDialogClusterFrameChildComponentInjectable from "./components/+workloads-replicasets/scale-dialog/replicaset-scale-dialog-cluster-frame-child-component.injectable";
+import statefulsetScaleDialogClusterFrameChildComponentInjectable from "./components/+workloads-statefulsets/scale/statefulset-scale-dialog-cluster-frame-child-component.injectable";
+import deleteClusterDialogClusterFrameChildComponentInjectable from "./components/delete-cluster-dialog/delete-cluster-dialog-cluster-frame-child-component.injectable";
+import kubeObjectDetailsClusterFrameChildComponentInjectable from "./components/kube-object-details/kube-object-details-cluster-frame-child-component.injectable";
+import kubeconfigDialogClusterFrameChildComponentInjectable from "./components/kubeconfig-dialog/kubeconfig-dialog-cluster-frame-child-component.injectable";
+import portForwardDialogClusterFrameChildComponentInjectable from "./port-forward/port-forward-dialog-cluster-frame-child-component.injectable";
+import setupSystemCaInjectable from "./frames/root-frame/setup-system-ca.injectable";
 
 export const getDiForUnitTesting = (opts: { doGeneralOverrides?: boolean } = {}) => {
   const {
@@ -71,14 +81,13 @@ export const getDiForUnitTesting = (opts: { doGeneralOverrides?: boolean } = {})
 
   setLegacyGlobalDiForExtensionApi(di, Environments.renderer);
 
-  for (const filePath of getInjectableFilePaths()) {
-    const injectableInstance = require(filePath).default;
+  const filePaths = getInjectableFilePaths();
 
-    di.register({
-      ...injectableInstance,
-      aliases: [injectableInstance, ...(injectableInstance.aliases || [])],
-    });
-  }
+  const injectables = filePaths.map(filePath => require(filePath).default);
+
+  chunk(100)(injectables).forEach(chunkInjectables => {
+    di.register(...chunkInjectables);
+  });
 
   di.preventSideEffects();
 
@@ -103,8 +112,35 @@ export const getDiForUnitTesting = (opts: { doGeneralOverrides?: boolean } = {})
 
     di.override(lensResourcesDirInjectable, () => "/irrelevant");
 
-    di.override(watchHistoryStateInjectable, () => () => () => {});
+    // TODO: Remove side-effects and shared global state
+    di.override(commandContainerRootFrameChildComponentInjectable, () => ({
+      Component: () => null,
+      id: "command-container",
+      shouldRender: computed(() => false),
+    }));
 
+    // TODO: Remove side-effects and shared global state
+    const clusterFrameChildComponentInjectables: Injectable<any, any, any>[] = [
+      commandContainerClusterFrameChildComponentInjectable,
+      cronJobTriggerDialogClusterFrameChildComponentInjectable,
+      deploymentScaleDialogClusterFrameChildComponentInjectable,
+      replicasetScaleDialogClusterFrameChildComponentInjectable,
+      statefulsetScaleDialogClusterFrameChildComponentInjectable,
+      deleteClusterDialogClusterFrameChildComponentInjectable,
+      kubeObjectDetailsClusterFrameChildComponentInjectable,
+      kubeconfigDialogClusterFrameChildComponentInjectable,
+      portForwardDialogClusterFrameChildComponentInjectable,
+    ];
+
+    clusterFrameChildComponentInjectables.forEach((injectable) => {
+      di.override(injectable, () => ({
+        Component: () => null,
+        id: injectable.id,
+        shouldRender: computed(() => false),
+      }));
+    });
+
+    di.override(watchHistoryStateInjectable, () => () => () => {});
     di.override(openAppContextMenuInjectable, () => () => {});
     di.override(goBackInjectable, () => () => {});
     di.override(goForwardInjectable, () => () => {});
@@ -126,13 +162,17 @@ export const getDiForUnitTesting = (opts: { doGeneralOverrides?: boolean } = {})
     // eslint-disable-next-line unused-imports/no-unused-vars-ts
     di.override(extensionsStoreInjectable, () => ({ isEnabled: ({ id, isBundled }) => false }) as ExtensionsStore);
 
-    di.override(hotbarStoreInjectable, () => ({}));
+    di.override(hotbarStoreInjectable, () => ({
+      getActive: () => ({ name: "some-hotbar", items: [] }),
+      getDisplayIndex: () => "0",
+    }) as unknown as HotbarStore);
 
     di.override(fileSystemProvisionerStoreInjectable, () => ({}) as FileSystemProvisionerStore);
 
     // eslint-disable-next-line unused-imports/no-unused-vars-ts
     di.override(clusterStoreInjectable, () => ({ getById: (id): Cluster => ({}) as Cluster }) as ClusterStore);
 
+    di.override(setupSystemCaInjectable, () => ({ run: () => {} }));
     di.override(setupOnApiErrorListenersInjectable, () => ({ run: () => {} }));
     di.override(provideInitialValuesForSyncBoxesInjectable, () => ({ run: () => {} }));
 

src/renderer/port-forward/port-forward-dialog-cluster-frame-child-component.injectable.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { computed } from "mobx";
+import { PortForwardDialog } from "./port-forward-dialog";
+import { clusterFrameChildComponentInjectionToken } from "../frames/cluster-frame/cluster-frame-child-component-injection-token";
+
+const portForwardDialogClusterFrameChildComponentInjectable = getInjectable({
+  id: "port-forward-dialog-cluster-frame-child-component",
+
+  instantiate: () => ({
+    id: "port-forward-dialog",
+    shouldRender: computed(() => true),
+    Component: PortForwardDialog,
+  }),
+
+  injectionToken: clusterFrameChildComponentInjectionToken,
+
+  causesSideEffects: true,
+});
+
+export default portForwardDialogClusterFrameChildComponentInjectable;