fix watch leak on window unload (#3858)

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

src/renderer/components/app.tsx

@@ -73,6 +73,7 @@ import { getHostedClusterId } from "../utils";
 import { ClusterStore } from "../../common/cluster-store";
 import type { ClusterId } from "../../common/cluster-types";
 import { watchHistoryState } from "../remote-helpers/history-updater";
+import { unmountComponentAtNode } from "react-dom";
 
 @observer
 export class App extends React.Component {
@@ -83,7 +84,7 @@ export class App extends React.Component {
     makeObservable(this);
   }
 
-  static async init() {
+  static async init(rootElem: HTMLElement) {
     catalogEntityRegistry.init();
     const frameId = webFrame.routingId;
 
@@ -112,6 +113,20 @@ export class App extends React.Component {
     window.addEventListener("online", () => {
       window.location.reload();
     });
+
+    window.addEventListener("message", (ev: MessageEvent) => {
+      if (ev.data === "teardown") {
+        unmountComponentAtNode(rootElem);
+        window.location.href = "about:blank";
+      }
+    });
+
+    window.onbeforeunload = () => {
+      logger.info(`[APP]: Unload dashboard, clusterId=${App.clusterId}, frameId=${frameId}`);
+
+      unmountComponentAtNode(rootElem);
+    };
+
     whatInput.ask(); // Start to monitor user input device
 
     // Setup hosted cluster context