diff --git a/package-lock.json b/package-lock.json
index 687ed39373..72e6ba4a87 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -34411,6 +34411,7 @@
"@hapi/subtext": "^7.1.0",
"@k8slens/cluster-settings": "^6.5.0-alpha.1",
"@k8slens/node-fetch": "^6.5.0-alpha.1",
+ "@k8slens/react-application-root": "^1.0.0-alpha.0",
"@kubernetes/client-node": "^0.18.1",
"@material-ui/styles": "^4.11.5",
"@ogre-tools/fp": "^15.1.2",
@@ -37620,6 +37621,7 @@
"@k8slens/messaging": "^1.0.0-alpha.1",
"@k8slens/messaging-for-main": "^1.0.0-alpha.1",
"@k8slens/messaging-for-renderer": "^1.0.0-alpha.1",
+ "@k8slens/react-application-root": "^1.0.0-alpha.0",
"@k8slens/run-many": "^1.0.0-alpha.1",
"@k8slens/startable-stoppable": "^1.0.0-alpha.1",
"@k8slens/test-utils": "^1.0.0-alpha.1",
diff --git a/packages/core/package.json b/packages/core/package.json
index b608493c38..78a260e3fd 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -122,6 +122,7 @@
"@hapi/subtext": "^7.1.0",
"@k8slens/cluster-settings": "^6.5.0-alpha.1",
"@k8slens/node-fetch": "^6.5.0-alpha.1",
+ "@k8slens/react-application-root": "^1.0.0-alpha.0",
"@kubernetes/client-node": "^0.18.1",
"@material-ui/styles": "^4.11.5",
"@ogre-tools/fp": "^15.1.2",
diff --git a/packages/core/src/renderer/bootstrap.tsx b/packages/core/src/renderer/bootstrap.tsx
index a811f07d5c..fcd2dc7415 100644
--- a/packages/core/src/renderer/bootstrap.tsx
+++ b/packages/core/src/renderer/bootstrap.tsx
@@ -5,10 +5,7 @@
import "./components/app.scss";
-import React from "react";
-import { render, unmountComponentAtNode } from "react-dom";
-import { DefaultProps } from "./mui-base-theme";
-import { DiContextProvider } from "@ogre-tools/injectable-react";
+import { unmountComponentAtNode } from "react-dom";
import type {
DiContainerForInjection,
} from "@ogre-tools/injectable";
@@ -17,8 +14,6 @@ import extensionDiscoveryInjectable from "../extensions/extension-discovery/exte
import extensionInstallationStateStoreInjectable from "../extensions/extension-installation-state-store/extension-installation-state-store.injectable";
import initRootFrameInjectable from "./frames/root-frame/init-root-frame.injectable";
import initClusterFrameInjectable from "./frames/cluster-frame/init-cluster-frame/init-cluster-frame.injectable";
-import { Router } from "react-router";
-import historyInjectable from "./navigation/history.injectable";
import assert from "assert";
export async function bootstrap(di: DiContainerForInjection) {
@@ -30,16 +25,13 @@ export async function bootstrap(di: DiContainerForInjection) {
await di.inject(extensionDiscoveryInjectable).init();
di.inject(extensionInstallationStateStoreInjectable).bindIpcListeners();
- let App;
let initializeApp;
// TODO: Introduce proper architectural boundaries between root and cluster iframes
if (process.isMainFrame) {
initializeApp = di.inject(initRootFrameInjectable);
- App = (await import("./frames/root-frame/root-frame")).RootFrame;
} else {
initializeApp = di.inject(initClusterFrameInjectable);
- App = (await import("./frames/cluster-frame/cluster-frame")).ClusterFrame;
}
try {
@@ -50,15 +42,4 @@ export async function bootstrap(di: DiContainerForInjection) {
isTopFrameView: process.isMainFrame,
});
}
-
- const history = di.inject(historyInjectable);
-
- render(
-
-
- {DefaultProps(App)}
-
- ,
- rootElem,
- );
}
diff --git a/packages/core/src/renderer/frames/frame-application-root.injectable.ts b/packages/core/src/renderer/frames/frame-application-root.injectable.ts
new file mode 100644
index 0000000000..6813fbfacb
--- /dev/null
+++ b/packages/core/src/renderer/frames/frame-application-root.injectable.ts
@@ -0,0 +1,31 @@
+/**
+ * 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 {
+ reactApplicationChildrenInjectionToken,
+} from "@k8slens/react-application-root";
+import { computed } from "mobx";
+
+const frameApplicationRootInjectable = getInjectable({
+ id: "frame-application-root",
+
+ instantiate: () => {
+ const Frame = process.isMainFrame
+ ? require("./root-frame/root-frame").RootFrame
+ : require("./cluster-frame/cluster-frame").ClusterFrame;
+
+ return {
+ id: "frame-application-root",
+ Component: Frame,
+ enabled: computed(() => true),
+ };
+ },
+
+ causesSideEffects: true,
+
+ injectionToken: reactApplicationChildrenInjectionToken,
+});
+
+export default frameApplicationRootInjectable;
diff --git a/packages/core/src/renderer/frames/routing-application-root-wrapper.injectable.tsx b/packages/core/src/renderer/frames/routing-application-root-wrapper.injectable.tsx
new file mode 100644
index 0000000000..207cc0d422
--- /dev/null
+++ b/packages/core/src/renderer/frames/routing-application-root-wrapper.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 { getInjectable } from "@ogre-tools/injectable";
+import { Router } from "react-router";
+import historyInjectable from "../navigation/history.injectable";
+import React from "react";
+import {
+ reactApplicationWrapperInjectionToken,
+} from "@k8slens/react-application-root";
+
+const routingApplicationRootWrapperInjectable = getInjectable({
+ id: "routing-application-root-wrapper",
+
+ instantiate: (di) => {
+ const history = di.inject(historyInjectable);
+
+ return (Component) => () =>
+ (
+
+
+
+ );
+ },
+
+ injectionToken: reactApplicationWrapperInjectionToken,
+});
+
+export default routingApplicationRootWrapperInjectable;
diff --git a/packages/core/src/renderer/frames/theme-provider-application-root-wrapper.injectable.tsx b/packages/core/src/renderer/frames/theme-provider-application-root-wrapper.injectable.tsx
new file mode 100644
index 0000000000..577bac8efb
--- /dev/null
+++ b/packages/core/src/renderer/frames/theme-provider-application-root-wrapper.injectable.tsx
@@ -0,0 +1,26 @@
+/**
+ * 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 React from "react";
+import {
+ reactApplicationWrapperInjectionToken,
+} from "@k8slens/react-application-root";
+import { ThemeProvider } from "@material-ui/core";
+import { defaultMuiBaseTheme } from "../mui-base-theme";
+
+const themeProviderApplicationRootWrapperInjectable = getInjectable({
+ id: "theme-provider-application-root-wrapper",
+
+ instantiate: () => (Component) => () =>
+ (
+
+
+
+ ),
+
+ injectionToken: reactApplicationWrapperInjectionToken,
+});
+
+export default themeProviderApplicationRootWrapperInjectable;
diff --git a/packages/core/src/renderer/mui-base-theme.tsx b/packages/core/src/renderer/mui-base-theme.tsx
index c32374cf58..7238462172 100644
--- a/packages/core/src/renderer/mui-base-theme.tsx
+++ b/packages/core/src/renderer/mui-base-theme.tsx
@@ -6,7 +6,7 @@
import React from "react";
import { createTheme, ThemeProvider } from "@material-ui/core";
-const defaultTheme = createTheme({
+export const defaultMuiBaseTheme = createTheme({
props: {
MuiIconButton: {
color: "inherit",
@@ -32,7 +32,7 @@ const defaultTheme = createTheme({
export function DefaultProps(App: React.ComponentType | React.FunctionComponent) {
return (
-
+
);
diff --git a/packages/open-lens/package.json b/packages/open-lens/package.json
index fb4fbc6616..8f8da66c10 100644
--- a/packages/open-lens/package.json
+++ b/packages/open-lens/package.json
@@ -206,6 +206,7 @@
"@k8slens/messaging": "^1.0.0-alpha.1",
"@k8slens/messaging-for-main": "^1.0.0-alpha.1",
"@k8slens/messaging-for-renderer": "^1.0.0-alpha.1",
+ "@k8slens/react-application-root": "^1.0.0-alpha.0",
"@k8slens/run-many": "^1.0.0-alpha.1",
"@k8slens/startable-stoppable": "^1.0.0-alpha.1",
"@k8slens/test-utils": "^1.0.0-alpha.1",
diff --git a/packages/open-lens/src/renderer/index.ts b/packages/open-lens/src/renderer/index.ts
index 207fc2265c..eb371f1e27 100644
--- a/packages/open-lens/src/renderer/index.ts
+++ b/packages/open-lens/src/renderer/index.ts
@@ -15,6 +15,7 @@ import { createContainer } from "@ogre-tools/injectable";
import { registerMobX } from "@ogre-tools/injectable-extension-for-mobx";
import { registerInjectableReact } from "@ogre-tools/injectable-react";
import { messagingFeatureForRenderer } from "@k8slens/messaging-for-renderer";
+import { reactApplicationRootFeature } from "@k8slens/react-application-root";
const environment = "renderer";
@@ -24,7 +25,13 @@ runInAction(() => {
registerMobX(di);
registerInjectableReact(di);
registerLensCore(di, environment);
- registerFeature(di, applicationFeature, messagingFeatureForRenderer);
+
+ registerFeature(
+ di,
+ applicationFeature,
+ messagingFeatureForRenderer,
+ reactApplicationRootFeature
+ );
autoRegister({
di,