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>,
       );