Switch to using react application root feature being more friendly to extending

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

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",

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",

packages/core/src/renderer/bootstrap.tsx

@@ -5,10 +5,7 @@
 
 import "./components/app.scss";
 
-import React from "react";
+import { unmountComponentAtNode } from "react-dom";
-import { render, unmountComponentAtNode } from "react-dom";
-import { DefaultProps } from "./mui-base-theme";
-import { DiContextProvider } from "@ogre-tools/injectable-react";
 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(
-    <DiContextProvider value={{ di }}>
-      <Router history={history}>
-        {DefaultProps(App)}
-      </Router>
-    </DiContextProvider>,
-    rootElem,
-  );
 }

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;

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) => () =>
+      (
+        <Router history={history}>
+          <Component />
+        </Router>
+      );
+  },
+
+  injectionToken: reactApplicationWrapperInjectionToken,
+});
+
+export default routingApplicationRootWrapperInjectable;

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) => () =>
+    (
+      <ThemeProvider theme={defaultMuiBaseTheme}>
+        <Component />
+      </ThemeProvider>
+    ),
+
+  injectionToken: reactApplicationWrapperInjectionToken,
+});
+
+export default themeProviderApplicationRootWrapperInjectable;

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 (
-    <ThemeProvider theme= { defaultTheme } >
+    <ThemeProvider theme= { defaultMuiBaseTheme } >
       <App />
     </ThemeProvider>
   );

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",

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,