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/technical-features/react-application/src/render-application/render-application-when-application-is-ready.injectable.tsx

@@ -0,0 +1,21 @@
+import { getInjectable } from "@ogre-tools/injectable";
+import { afterApplicationIsLoadedInjectionToken } from "@k8slens/application";
+import renderInjectable from "./render.injectable";
+import { ReactApplication } from "../react-application/react-application";
+import React from "react";
+
+export const renderApplicationWhenApplicationIsReadyInjectable = getInjectable({
+  id: "render-application-when-application-is-ready",
+
+  instantiate: (di) => {
+    const render = di.inject(renderInjectable);
+
+    return {
+      run: () => {
+        render(<ReactApplication di={di} />);
+      },
+    };
+  },
+
+  injectionToken: afterApplicationIsLoadedInjectionToken,
+});

packages/technical-features/react-application/src/render-application/render.injectable.tsx

@@ -0,0 +1,22 @@
+import { getInjectable, getInjectionToken } from "@ogre-tools/injectable";
+import { render } from "react-dom";
+import type React from "react";
+
+export type Render = (application: React.ReactElement) => void;
+
+export const renderInjectionToken = getInjectionToken<Render>({
+  id: "render-injection-token",
+});
+
+const renderInjectable = getInjectable({
+  id: "render",
+
+  /* c8 ignore next */
+  instantiate: () => (application) => render(application, document.getElementById("app")),
+
+  causesSideEffects: true,
+
+  injectionToken: renderInjectionToken,
+});
+
+export default renderInjectable;