From 0b383eb2a2a27993eefe208d5b94d9d17eb2731f Mon Sep 17 00:00:00 2001 From: Janne Savolainen Date: Thu, 30 Mar 2023 14:45:45 +0300 Subject: [PATCH] Switch to using react application root feature being more friendly to extending Signed-off-by: Janne Savolainen --- package-lock.json | 2 ++ packages/core/package.json | 1 + packages/core/src/renderer/bootstrap.tsx | 21 +------------ .../frame-application-root.injectable.ts | 31 +++++++++++++++++++ ...ng-application-root-wrapper.injectable.tsx | 30 ++++++++++++++++++ ...er-application-root-wrapper.injectable.tsx | 26 ++++++++++++++++ packages/core/src/renderer/mui-base-theme.tsx | 4 +-- packages/open-lens/package.json | 1 + packages/open-lens/src/renderer/index.ts | 9 +++++- 9 files changed, 102 insertions(+), 23 deletions(-) create mode 100644 packages/core/src/renderer/frames/frame-application-root.injectable.ts create mode 100644 packages/core/src/renderer/frames/routing-application-root-wrapper.injectable.tsx create mode 100644 packages/core/src/renderer/frames/theme-provider-application-root-wrapper.injectable.tsx 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,