fix: navigate to cluster-settings page from clusters-menu

Signed-off-by: Roman <ixrock@gmail.com>

src/common/ipc.ts

@@ -28,7 +28,7 @@ export interface IpcChannelOptions {
   channel: IpcChannel; // main <-> renderer communication channel name
   mode?: IpcMode; // default: "async", use "sync" as last resort: https://www.electronjs.org/docs/api/ipc-renderer#ipcrenderersendsyncchannel-args
   handle?: (...args: any[]) => any; // main-process message handler
-  autoBind?: boolean; // auto-bind message handler in main-process, default: false
+  autoBind?: boolean; // auto-bind message handler in main-process, default: true
   timeout?: number; // timeout for waiting response from the sender
   once?: boolean; // todo: add support
 }
@@ -50,11 +50,10 @@ export function createIpcChannel({ autoBind = true, mode = IpcMode.ASYNC, timeou
           res.msgId = req.msgId; // return back to sender to be able to handle response
           resolved = true
           logger.debug(`[IPC]: sending response to "${channel}"`, res);
-          if (mode === IpcMode.ASYNC) {
-            event.reply(channel, res);
-          }
           if (mode === IpcMode.SYNC) {
             event.returnValue = res;
+          } else {
+            event.reply(channel, res);
           }
         }
 
@@ -82,11 +81,10 @@ export function createIpcChannel({ autoBind = true, mode = IpcMode.ASYNC, timeou
         msgId: getRandId({ prefix: "ipc-msg-id" }),
         args: args,
       }
-      if (mode === IpcMode.ASYNC) {
-        ipcRenderer.send(channel, req)
-      }
       if (mode === IpcMode.SYNC) {
         ipcRenderer.sendSync(channel, req)
+      } else {
+        ipcRenderer.send(channel, req)
       }
       return new Promise(async (resolve, reject) => {
         ipcRenderer.on(channel, function waitResponseHandler(event: IpcRendererEvent, res: IpcChannelResponse) {

src/renderer/components/cluster-manager/cluster-manager.tsx

@@ -1,10 +1,8 @@
 import "./cluster-manager.scss"
 import React from "react";
-import { WebviewTag } from "electron";
 import { Redirect, Route, Switch } from "react-router";
-import { observable, reaction } from "mobx";
+import { reaction } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
-import { clusterIpc } from "../../../common/cluster-ipc";
 import { cssNames } from "../../utils";
 import { ClustersMenu } from "./clusters-menu";
 import { BottomBar } from "./bottom-bar";
@@ -14,52 +12,8 @@ import { Workspaces, workspacesRoute } from "../+workspaces";
 import { AddCluster, addClusterRoute } from "../+add-cluster";
 import { ClusterView } from "./cluster-view";
 import { clusterViewRoute, clusterViewURL, getMatchedCluster, getMatchedClusterId } from "./cluster-view.route";
-import { ClusterId, clusterStore } from "../../../common/cluster-store";
+import { clusterStore } from "../../../common/cluster-store";
-import logger from "../../../main/logger";
+import { initView, lensViews, refreshViews } from "./lens-views";
-
-interface LensView {
-  isLoaded?: boolean
-  clusterId: ClusterId;
-  view: WebviewTag
-}
-
-const lensViews = observable.map<ClusterId, LensView>();
-
-export function hasLoadedView(clusterId: ClusterId): boolean {
-  return !!lensViews.get(clusterId)?.isLoaded;
-}
-
-// todo: figure out how to replace <webview>-tag to <iframe> with nodeIntegration=true
-function initView(clusterId: ClusterId) {
-  if (!clusterId || lensViews.has(clusterId)) {
-    return;
-  }
-  logger.info(`[CLUSTER-VIEW]: init dashboard, clusterId=${clusterId}`)
-  const parentElem = document.getElementById("lens-views"); // defined in cluster-manager's css-grid
-  const webview = document.createElement("webview");
-  webview.setAttribute("src", `//${clusterId}.${location.host}`)
-  webview.setAttribute("nodeintegration", "true")
-  webview.setAttribute("enableremotemodule", "true")
-  webview.addEventListener("did-finish-load", () => {
-    logger.info(`[CLUSTER-VIEW]: loaded, clusterId=${clusterId}`)
-    clusterIpc.init.invokeFromRenderer(clusterId); // push cluster-state to webview and init render
-    lensViews.get(clusterId).isLoaded = true;
-    refreshViews();
-  });
-  webview.addEventListener("did-fail-load", (event) => {
-    logger.error(`[CLUSTER-VIEW]: failed to load, clusterId=${clusterId}`, event)
-  });
-  lensViews.set(clusterId, { clusterId, view: webview });
-  parentElem.appendChild(webview); // add to dom and init cluster-page loading
-}
-
-function refreshViews() {
-  const cluster = getMatchedCluster()
-  lensViews.forEach(({ clusterId, view, isLoaded }) => {
-    const isVisible = cluster && cluster.available && cluster.id === clusterId;
-    view.style.display = isLoaded && isVisible ? "flex" : "none"
-  })
-}
 
 @observer
 export class ClusterManager extends React.Component {

src/renderer/components/cluster-manager/cluster-view.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { observer } from "mobx-react";
 import { getMatchedCluster } from "./cluster-view.route";
 import { ClusterStatus } from "./cluster-status";
-import { hasLoadedView } from "./cluster-manager";
+import { hasLoadedView } from "./lens-views";
 
 @observer
 export class ClusterView extends React.Component {

src/renderer/components/cluster-manager/clusters-menu.tsx

@@ -21,6 +21,7 @@ import { Tooltip } from "../tooltip";
 import { ConfirmDialog } from "../confirm-dialog";
 import { clusterIpc } from "../../../common/cluster-ipc";
 import { clusterViewURL, getMatchedClusterId } from "./cluster-view.route";
+import { navigateInClusterView } from "./lens-views";
 
 // fixme: allow to rearrange clusters with drag&drop
 
@@ -49,7 +50,7 @@ export class ClustersMenu extends React.Component<Props> {
       label: _i18n._(t`Settings`),
       click: () => {
         clusterStore.setActive(cluster.id);
-        navigate(clusterSettingsURL())
+        navigateInClusterView(clusterSettingsURL())
       }
     }));
     if (cluster.online) {

src/renderer/components/cluster-manager/lens-views.ts

@@ -0,0 +1,64 @@
+import { ipcRenderer, WebviewTag } from "electron";
+import { observable } from "mobx";
+import { ClusterId } from "../../../common/cluster-store";
+import { clusterIpc } from "../../../common/cluster-ipc";
+import logger from "../../../main/logger";
+import { getMatchedCluster, getMatchedClusterId } from "./cluster-view.route";
+
+export interface LensView {
+  isLoaded?: boolean
+  clusterId: ClusterId;
+  view: WebviewTag
+}
+
+export const lensViews = observable.map<ClusterId, LensView>();
+
+export function navigateInClusterView(path: string, clusterId: ClusterId = getMatchedClusterId()) {
+  const viewId = getViewId(clusterId);
+  if (viewId) {
+    ipcRenderer.sendTo(viewId, "menu:navigate", path)
+  }
+}
+
+export function hasLoadedView(clusterId: ClusterId): boolean {
+  return !!lensViews.get(clusterId)?.isLoaded;
+}
+
+export function getViewId(clusterId: ClusterId): number {
+  const webview = lensViews.get(clusterId)?.view
+  if (webview) {
+    return webview.getWebContentsId()
+  }
+}
+
+// todo: figure out how to replace <webview>-tag to <iframe> with nodeIntegration=true
+export function initView(clusterId: ClusterId) {
+  if (!clusterId || lensViews.has(clusterId)) {
+    return;
+  }
+  logger.info(`[CLUSTER-VIEW]: init dashboard, clusterId=${clusterId}`)
+  const parentElem = document.getElementById("lens-views"); // defined in cluster-manager's css-grid
+  const webview = document.createElement("webview");
+  webview.setAttribute("src", `//${clusterId}.${location.host}`)
+  webview.setAttribute("nodeintegration", "true")
+  webview.setAttribute("enableremotemodule", "true")
+  webview.addEventListener("did-finish-load", () => {
+    logger.info(`[CLUSTER-VIEW]: loaded, clusterId=${clusterId}`)
+    clusterIpc.init.invokeFromRenderer(clusterId); // push cluster-state to webview and init render
+    lensViews.get(clusterId).isLoaded = true;
+    refreshViews();
+  });
+  webview.addEventListener("did-fail-load", (event) => {
+    logger.error(`[CLUSTER-VIEW]: failed to load, clusterId=${clusterId}`, event)
+  });
+  lensViews.set(clusterId, { clusterId, view: webview });
+  parentElem.appendChild(webview); // add to dom and init cluster-page loading
+}
+
+export function refreshViews() {
+  const visibleCluster = getMatchedCluster();
+  lensViews.forEach(({ clusterId, view, isLoaded }) => {
+    const isVisible = visibleCluster && visibleCluster.available && visibleCluster.id === clusterId;
+    view.style.display = isLoaded && isVisible ? "flex" : "none"
+  })
+}

src/renderer/navigation.ts

@@ -2,21 +2,23 @@
 
 import { ipcRenderer } from "electron";
 import { compile } from "path-to-regexp"
-import { createBrowserHistory, createMemoryHistory, Location, LocationDescriptor } from "history";
+import { createBrowserHistory, createMemoryHistory, LocationDescriptor } from "history";
 import { createObservableHistory } from "mobx-observable-history";
+import logger from "../main/logger";
 
 export const history = typeof window !== "undefined" ? createBrowserHistory() : createMemoryHistory();
 export const navigation = createObservableHistory(history);
 
-// handle navigation from global menu
+// handle navigation from other process (e.g. system menus in main, common->cluster view interactions)
 if (ipcRenderer) {
-  ipcRenderer.on("menu:navigate", (event, path: string) => {
+  ipcRenderer.on("menu:navigate", (event, location: LocationDescriptor) => {
-    navigate(path);
+    logger.info(`Navigation via IPC to location: ${JSON.stringify(location)}`, event);
+    navigate(location);
   })
 }
 
 export function navigate(location: LocationDescriptor) {
-  navigation.location = location as Location;
+  navigation.push(location);
 }
 
 export interface IURLParams<P = {}, Q = {}> {