Upgrade to React@18 (#5172)

* upgrade to react@18
read more: https://reactjs.org/blog/2022/03/29/react-v18.html

src/renderer/frames/cluster-frame/init-cluster-frame/init-cluster-frame.ts

@@ -10,7 +10,6 @@ import { Notifications } from "../../../components/notifications";
 import type { AppEvent } from "../../../../common/app-event-bus/event-bus";
 import type { CatalogEntity } from "../../../../common/catalog";
 import { when } from "mobx";
-import { unmountComponentAtNode } from "react-dom";
 import type { ClusterFrameContext } from "../../../cluster-frame-context/cluster-frame-context";
 import { KubeObjectStore } from "../../../../common/k8s-api/kube-object.store";
 import { requestSetClusterFrameId } from "../../../ipc";
@@ -30,7 +29,7 @@ const logPrefix = "[CLUSTER-FRAME]:";
 
 export const initClusterFrame =
   ({ hostedCluster, loadExtensions, catalogEntityRegistry, frameRoutingId, emitEvent, clusterFrameContext }: Dependencies) =>
-    async (rootElem: HTMLElement) => {
+    async (unmountRoot: () => void) => {
 
       // TODO: Make catalogEntityRegistry already initialized when passed as dependency
       catalogEntityRegistry.init();
@@ -80,7 +79,7 @@ export const initClusterFrame =
           `${logPrefix} Unload dashboard, clusterId=${(hostedCluster.id)}, frameId=${frameRoutingId}`,
         );
 
-        unmountComponentAtNode(rootElem);
+        unmountRoot();
       };
 
       // TODO: Make context dependency of KubeObjectStore

src/renderer/frames/root-frame/init-root-frame/init-root-frame.ts

@@ -5,7 +5,6 @@
 import { delay } from "../../../../common/utils";
 import { broadcastMessage } from "../../../../common/ipc";
 import logger from "../../../../common/logger";
-import { unmountComponentAtNode } from "react-dom";
 import type { ExtensionLoading } from "../../../../extensions/extension-loader";
 import type { CatalogEntityRegistry } from "../../../api/catalog-entity-registry";
 import { bundledExtensionsLoaded } from "../../../../common/ipc/extension-handling";
@@ -34,10 +33,9 @@ export const initRootFrame =
     lensProtocolRouterRenderer,
     ipcRenderer,
     registerIpcListeners,
-
     catalogEntityRegistry,
   }: Dependencies) =>
-    async (rootElem: HTMLElement) => {
+    async (unmountRoot: () => void) => {
       catalogEntityRegistry.init();
 
       try {
@@ -72,6 +70,6 @@ export const initRootFrame =
       window.addEventListener("beforeunload", () => {
         logger.info(`${logPrefix} Unload app`);
 
-        unmountComponentAtNode(rootElem);
+        unmountRoot();
       });
     };