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>

src/behaviours/cluster/sidebar-and-tab-navigation-for-core.test.tsx

@@ -22,6 +22,7 @@ import pathExistsInjectable from "../../common/fs/path-exists.injectable";
 import readJsonFileInjectable from "../../common/fs/read-json-file.injectable";
 import { navigateToRouteInjectionToken } from "../../common/front-end-routing/navigate-to-route-injection-token";
 import sidebarStorageInjectable from "../../renderer/components/layout/sidebar-storage/sidebar-storage.injectable";
+import hostedClusterIdInjectable from "../../renderer/cluster-frame-context/hosted-cluster-id.injectable";
 import { advanceFakeTime, useFakeTime } from "../../common/test-utils/use-fake-time";
 
 describe("cluster - sidebar and tab navigation for core", () => {
@@ -38,6 +39,8 @@ describe("cluster - sidebar and tab navigation for core", () => {
     applicationBuilder.setEnvironmentToClusterFrame();
 
     applicationBuilder.beforeApplicationStart(({ rendererDi }) => {
+      rendererDi.override(hostedClusterIdInjectable, () => "some-hosted-cluster-id");
+
       rendererDi.override(
         directoryForLensLocalStorageInjectable,
         () => "/some-directory-for-lens-local-storage",
@@ -94,7 +97,7 @@ describe("cluster - sidebar and tab navigation for core", () => {
           const writeJsonFileFake = rendererDi.inject(writeJsonFileInjectable);
 
           await writeJsonFileFake(
-            "/some-directory-for-lens-local-storage/app.json",
+            "/some-directory-for-lens-local-storage/some-hosted-cluster-id.json",
             {
               sidebar: {
                 expanded: { "some-parent-id": true },
@@ -136,7 +139,7 @@ describe("cluster - sidebar and tab navigation for core", () => {
           const writeJsonFileFake = rendererDi.inject(writeJsonFileInjectable);
 
           await writeJsonFileFake(
-            "/some-directory-for-lens-local-storage/app.json",
+            "/some-directory-for-lens-local-storage/some-hosted-cluster-id.json",
             {
               sidebar: {
                 expanded: { "some-unknown-parent-id": true },
@@ -166,7 +169,7 @@ describe("cluster - sidebar and tab navigation for core", () => {
           const writeJsonFileFake = rendererDi.inject(writeJsonFileInjectable);
 
           await writeJsonFileFake(
-            "/some-directory-for-lens-local-storage/app.json",
+            "/some-directory-for-lens-local-storage/some-hosted-cluster-id.json",
             {
               someThingButSidebar: {},
             },
@@ -268,7 +271,7 @@ describe("cluster - sidebar and tab navigation for core", () => {
             const pathExistsFake = rendererDi.inject(pathExistsInjectable);
 
             const actual = await pathExistsFake(
-              "/some-directory-for-lens-local-storage/app.json",
+              "/some-directory-for-lens-local-storage/some-hosted-cluster-id.json",
             );
 
             expect(actual).toBe(false);
@@ -280,7 +283,7 @@ describe("cluster - sidebar and tab navigation for core", () => {
             const readJsonFileFake = rendererDi.inject(readJsonFileInjectable);
 
             const actual = await readJsonFileFake(
-              "/some-directory-for-lens-local-storage/app.json",
+              "/some-directory-for-lens-local-storage/some-hosted-cluster-id.json",
             );
 
             expect(actual).toEqual({

src/behaviours/cluster/sidebar-and-tab-navigation-for-extensions.test.tsx

@@ -18,8 +18,14 @@ import { navigateToRouteInjectionToken } from "../../common/front-end-routing/na
 import assert from "assert";
 import type { FakeExtensionData } from "../../renderer/components/test-utils/get-renderer-extension-fake";
 import { getRendererExtensionFakeFor } from "../../renderer/components/test-utils/get-renderer-extension-fake";
+import hostedClusterIdInjectable from "../../renderer/cluster-frame-context/hosted-cluster-id.injectable";
 import { advanceFakeTime, useFakeTime } from "../../common/test-utils/use-fake-time";
 
+// TODO: Make tooltips free of side effects by making it deterministic
+jest.mock("../../renderer/components/tooltip/withTooltip", () => ({
+  withTooltip: (target: any) => target,
+}));
+
 describe("cluster - sidebar and tab navigation for extensions", () => {
   let applicationBuilder: ApplicationBuilder;
   let rendererDi: DiContainer;
@@ -34,6 +40,8 @@ describe("cluster - sidebar and tab navigation for extensions", () => {
     applicationBuilder.setEnvironmentToClusterFrame();
 
     applicationBuilder.beforeApplicationStart(({ rendererDi }) => {
+      rendererDi.override(hostedClusterIdInjectable, () => "some-hosted-cluster-id");
+
       rendererDi.override(
         directoryForLensLocalStorageInjectable,
         () => "/some-directory-for-lens-local-storage",
@@ -96,7 +104,7 @@ describe("cluster - sidebar and tab navigation for extensions", () => {
           const writeJsonFileFake = rendererDi.inject(writeJsonFileInjectable);
 
           await writeJsonFileFake(
-            "/some-directory-for-lens-local-storage/app.json",
+            "/some-directory-for-lens-local-storage/some-hosted-cluster-id.json",
             {
               sidebar: {
                 expanded: { "some-extension-name-some-parent-id": true },
@@ -132,7 +140,7 @@ describe("cluster - sidebar and tab navigation for extensions", () => {
           const writeJsonFileFake = rendererDi.inject(writeJsonFileInjectable);
 
           await writeJsonFileFake(
-            "/some-directory-for-lens-local-storage/app.json",
+            "/some-directory-for-lens-local-storage/some-hosted-cluster-id.json",
             {
               sidebar: {
                 expanded: { "some-extension-name-some-unknown-parent-id": true },
@@ -162,7 +170,7 @@ describe("cluster - sidebar and tab navigation for extensions", () => {
           const writeJsonFileFake = rendererDi.inject(writeJsonFileInjectable);
 
           await writeJsonFileFake(
-            "/some-directory-for-lens-local-storage/app.json",
+            "/some-directory-for-lens-local-storage/some-hosted-cluster-id.json",
             {
               someThingButSidebar: {},
             },
@@ -284,7 +292,7 @@ describe("cluster - sidebar and tab navigation for extensions", () => {
             const pathExistsFake = rendererDi.inject(pathExistsInjectable);
 
             const actual = await pathExistsFake(
-              "/some-directory-for-lens-local-storage/app.json",
+              "/some-directory-for-lens-local-storage/some-hosted-cluster-id.json",
             );
 
             expect(actual).toBe(false);
@@ -296,7 +304,7 @@ describe("cluster - sidebar and tab navigation for extensions", () => {
             const readJsonFileFake = rendererDi.inject(readJsonFileInjectable);
 
             const actual = await readJsonFileFake(
-              "/some-directory-for-lens-local-storage/app.json",
+              "/some-directory-for-lens-local-storage/some-hosted-cluster-id.json",
             );
 
             expect(actual).toEqual({

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/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/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/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/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/test-utils/get-application-builder.tsx

@@ -9,18 +9,15 @@ import type { IObservableArray, ObservableSet } from "mobx";
 import { computed, observable, runInAction } from "mobx";
 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";
@@ -43,7 +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 { getDiForUnitTesting as getRendererDi } from "../../getDiForUnitTesting";
 import { getDiForUnitTesting as getMainDi } from "../../../main/getDiForUnitTesting";
 import { overrideChannels } from "../../../test-utils/channel-fakes/override-channels";
@@ -61,6 +57,8 @@ import type { LensExtension } from "../../../extensions/lens-extension";
 import extensionInjectable from "../../../extensions/extension-loader/extension/extension.injectable";
 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>;
 
@@ -182,28 +180,13 @@ export const getApplicationBuilder = () => {
 
     clusterFrame: {
       render: () => {
-        const currentRouteComponent = rendererDi.inject(currentRouteComponentInjectable);
         const history = rendererDi.inject(historyInjectable);
 
         const render = renderFor(rendererDi);
 
         return render(
           <Router history={history}>
-            <Sidebar />
+            <ClusterFrame />
-
-            <Observer>
-              {() => {
-                const Component = currentRouteComponent.get();
-
-                if (!Component) {
-                  return null;
-                }
-
-                return <Component />;
-              }}
-            </Observer>
-
-            <Notifications />
           </Router>,
         );
       },
@@ -419,6 +402,7 @@ export const getApplicationBuilder = () => {
 
       const namespaceStoreStub = {
         contextNamespaces: [],
+        items: [],
       } as unknown as NamespaceStore;
 
       const clusterFrameContextFake = new ClusterFrameContext(
@@ -431,6 +415,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.

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, observer } from "mobx-react";
-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 { 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
+      {childComponents
-        sidebar={<Sidebar />}
+        .map((child) => (
-        footer={<Dock />}
+          <Observer key={child.id}>
-      >
+            {() => (child.shouldRender.get() ? <child.Component /> : null) }
-        {
+          </Observer>
-          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 />
     </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),
+    childComponents: di.injectMany(clusterFrameChildComponentInjectionToken),
-    currentRouteComponent: di.inject(currentRouteComponentInjectable),
-    currentPath: di.inject(currentPathInjectable),
     watchHistoryState: di.inject(watchHistoryStateInjectable),
   }),
 });

src/renderer/getDiForUnitTesting.tsx

@@ -61,6 +61,15 @@ import maximizeWindowInjectable from "./components/layout/top-bar/maximize-windo
 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";
 
 export const getDiForUnitTesting = (opts: { doGeneralOverrides?: boolean } = {}) => {
   const {
@@ -105,14 +114,35 @@ export const getDiForUnitTesting = (opts: { doGeneralOverrides?: boolean } = {})
 
     di.override(lensResourcesDirInjectable, () => "/irrelevant");
 
+    // TODO: Remove side-effects and shared global state
     di.override(commandContainerRootFrameChildComponentInjectable, () => ({
       Component: () => null,
       id: "command-container",
       shouldRender: computed(() => false),
     }));
 
-    di.override(watchHistoryStateInjectable, () => () => () => {});
+    // 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, () => () => {});
@@ -139,7 +169,6 @@ export const getDiForUnitTesting = (opts: { doGeneralOverrides?: boolean } = {})
       getDisplayIndex: () => "0",
     }) as unknown as HotbarStore);
 
-
     di.override(fileSystemProvisionerStoreInjectable, () => ({}) as FileSystemProvisionerStore);
 
     // eslint-disable-next-line unused-imports/no-unused-vars-ts

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;