Extract React Application as a Feature (#7441)

* Fix webpack config for react

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

* Introduce package for discovering html elements in unit tests

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

* Switch to using discovery of html elements from package

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

* Introduce competition for starting react application inside the Feature

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

* Move stuff in application start to earlier timeslot having no real need to be done so late

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

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

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

* Switch to using more familiar pattern of higher order components for wrapping react application

Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com>

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

* Adapt to more familiar pattern for higher order components

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

* Rename feature for clarity

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

---------

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

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";
+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-react-application-hoc.injectable.tsx

@@ -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 { Router } from "react-router";
+import historyInjectable from "../navigation/history.injectable";
+import React from "react";
+
+import {
+  reactApplicationHigherOrderComponentInjectionToken,
+} from "@k8slens/react-application";
+
+const routingReactApplicationHocInjectable = getInjectable({
+  id: "routing-react-application-hoc",
+
+  instantiate: (di) => {
+    const history = di.inject(historyInjectable);
+
+    return ({ children }) =>
+      (
+        <Router history={history}>
+          {children}
+        </Router>
+      );
+  },
+
+  injectionToken: reactApplicationHigherOrderComponentInjectionToken,
+});
+
+export default routingReactApplicationHocInjectable;

packages/core/src/renderer/frames/theme-provider-react-application-hoc.injectable.tsx

@@ -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 React from "react";
+import { reactApplicationHigherOrderComponentInjectionToken } from "@k8slens/react-application";
+import { ThemeProvider } from "@material-ui/core";
+import { defaultMuiBaseTheme } from "../mui-base-theme";
+
+const themeProviderReactApplicationHocInjectable = getInjectable({
+  id: "theme-provider-react-application-hoc",
+
+  instantiate:
+    () =>
+      ({ children }) =>
+        <ThemeProvider theme={defaultMuiBaseTheme}>{children}</ThemeProvider>,
+
+  injectionToken: reactApplicationHigherOrderComponentInjectionToken,
+});
+
+export default themeProviderReactApplicationHocInjectable;