Organize menu-related code more neatly

Signed-off-by: Alex Culliere <alozhkin@mirantis.com>

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

@@ -0,0 +1,46 @@
+import React from "react";
+import { clusterSettingsURL } from "../+cluster-settings";
+import { landingURL } from "../+landing-page";
+
+import { clusterStore } from "../../../common/cluster-store";
+import { broadcastMessage, requestMain } from "../../../common/ipc";
+import { clusterDisconnectHandler } from "../../../common/cluster-ipc";
+import { ConfirmDialog } from "../confirm-dialog";
+import { Cluster } from "../../../main/cluster";
+
+const navigate = (route: string) =>
+  broadcastMessage("renderer:navigate", route);
+
+const deactivateCluster = (clusterId: string) => {
+  if (clusterStore.isActive(clusterId)) {
+    navigate(landingURL());
+    clusterStore.setActive(null);
+  }
+};
+
+/**
+ * Creates hanndlers for high-level actions
+ * that could be performed on an individual cluster
+ * @param cluster Cluster>
+ */
+export const ClusterActions = (cluster: Cluster) => ({
+  "SHOW_SETTINGS": () => navigate(clusterSettingsURL({
+    params: { clusterId: cluster.id }
+  })),
+  "DISCONNECT": async () => {
+    deactivateCluster(cluster.id);
+    await requestMain(clusterDisconnectHandler, cluster.id);
+  },
+  "REMOVE": () => ConfirmDialog.open({
+    okButtonProps: {
+      primary: false,
+      accent: true,
+      label: "Remove"
+    },
+    ok: () => {
+      deactivateCluster(cluster.id);
+      clusterStore.removeById(cluster.id);
+    },
+    message: <p>Are you sure want to remove cluster <b title={cluster.id}>{cluster.contextName}</b>?</p>,
+  })
+});

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

@@ -2,7 +2,6 @@ import "./clusters-menu.scss";
 
 import React from "react";
 import { remote } from "electron";
-import { requestMain } from "../../../common/ipc";
 import type { Cluster } from "../../../main/cluster";
 import { DragDropContext, Draggable, DraggableProvided, Droppable, DroppableProvided, DropResult } from "react-beautiful-dnd";
 import { observer } from "mobx-react";
@@ -13,12 +12,10 @@ import { Icon } from "../icon";
 import { autobind, cssNames, IClassName } from "../../utils";
 import { isActiveRoute, navigate } from "../../navigation";
 import { addClusterURL } from "../+add-cluster";
-import { clusterSettingsURL } from "../+cluster-settings";
 import { landingURL } from "../+landing-page";
-import { ConfirmDialog } from "../confirm-dialog";
 import { clusterViewURL } from "./cluster-view.route";
+import { ClusterActions } from "./cluster-actions";
 import { getExtensionPageUrl, globalPageMenuRegistry, globalPageRegistry } from "../../../extensions/registries";
-import { clusterDisconnectHandler } from "../../../common/cluster-ipc";
 import { commandRegistry } from "../../../extensions/registries/command-registry";
 import { CommandOverlay } from "../command-palette/command-container";
 import { computed, observable } from "mobx";
@@ -40,51 +37,24 @@ export class ClustersMenu extends React.Component<Props> {
   showContextMenu = (cluster: Cluster) => {
     const { Menu, MenuItem } = remote;
     const menu = new Menu();
+    const actions = ClusterActions(cluster);
 
     menu.append(new MenuItem({
       label: `Settings`,
-      click: () => {
-        navigate(clusterSettingsURL({
-          params: {
-            clusterId: cluster.id
-          }
-        }));
-      }
+      click: actions.SHOW_SETTINGS
     }));
 
     if (cluster.online) {
       menu.append(new MenuItem({
         label: `Disconnect`,
-        click: async () => {
-          if (clusterStore.isActive(cluster.id)) {
-            navigate(landingURL());
-            clusterStore.setActive(null);
-          }
-          await requestMain(clusterDisconnectHandler, cluster.id);
-        }
+        click: actions.DISCONNECT
       }));
     }
 
     if (!cluster.isManaged) {
       menu.append(new MenuItem({
         label: `Remove`,
-        click: () => {
-          ConfirmDialog.open({
-            okButtonProps: {
-              primary: false,
-              accent: true,
-              label: `Remove`,
-            },
-            ok: () => {
-              if (clusterStore.activeClusterId === cluster.id) {
-                navigate(landingURL());
-                clusterStore.setActive(null);
-              }
-              clusterStore.removeById(cluster.id);
-            },
-            message: <p>Are you sure want to remove cluster <b title={cluster.id}>{cluster.contextName}</b>?</p>,
-          });
-        }
+        click: actions.REMOVE
       }));
     }
     menu.popup({

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

@@ -1 +1,2 @@
 export * from "./cluster-manager";
+export * from "./cluster-actions";

src/renderer/components/layout/main-layout-header.tsx

@@ -1,16 +1,12 @@
+import React, { useState } from "react";
 import { observer } from "mobx-react";
-import React from "react";
-import { remote } from "electron";
+import { uniqueId } from "lodash";
 
-import { clusterSettingsURL } from "../+cluster-settings";
-import { landingURL } from "../+landing-page";
-import { ConfirmDialog } from "../confirm-dialog";
-import { clusterStore } from "../../../common/cluster-store";
-import { clusterDisconnectHandler } from "../../../common/cluster-ipc";
-import { broadcastMessage, requestMain } from "../../../common/ipc";
+import { ClusterActions } from "../cluster-manager";
 import { Cluster } from "../../../main/cluster";
 import { cssNames } from "../../utils";
 import { Icon } from "../icon";
+import { Menu, MenuItem } from "../menu";
 
 interface Props {
   cluster: Cluster
@@ -18,70 +14,39 @@ interface Props {
 }
 
 export const MainLayoutHeader = observer(({ cluster, className }: Props) => {
-  const showContextMenu = () => {
-    const { Menu, MenuItem } = remote;
-    const menu = new Menu();
+  const [isMenuOpen, setMenuOpen] = useState(false);
+  const id = uniqueId("cluster_actions_");
+  const actions = ClusterActions(cluster);
 
-    menu.append(new MenuItem({
-      label: "Settings",
-      click: () => {
-        broadcastMessage("renderer:navigate", clusterSettingsURL({
-          params: {
-            clusterId: cluster.id
-          }
-        }));
-      }
-    }));
-
-    if (cluster.online) {
-      menu.append(new MenuItem({
-        label: "Disconnect",
-        click: async () => {
-          if (clusterStore.isActive(cluster.id)) {
-            broadcastMessage("renderer:navigate", landingURL());
-            clusterStore.setActive(null);
-          }
-          await requestMain(clusterDisconnectHandler, cluster.id);
-        }
-      }));
-
-      if (!cluster.isManaged) {
-        menu.append(new MenuItem({
-          label: "Remove",
-          click: () => {
-            ConfirmDialog.open({
-              okButtonProps: {
-                primary: false,
-                accent: true,
-                label: "Remove"
-              },
-              ok: () => {
-                if (clusterStore.activeClusterId === cluster.id) {
-                  broadcastMessage("renderer:navigate", landingURL());
-                  clusterStore.setActive(null);
-                }
-                clusterStore.removeById(cluster.id);
-              },
-              message: <p>Are you sure want to remove cluster <b title={cluster.id}>{cluster.contextName}</b>?</p>,
-            });
-          }
-        }));
-      }
-    }
-    menu.popup({
-      window: remote.getCurrentWindow()
-    });
-  };
+  const renderMenu = () => <Menu
+    usePortal
+    isOpen={isMenuOpen}
+    open={() => setMenuOpen(true)}
+    close={() => setMenuOpen(false)}
+    className="ClusterActionsMenu"
+    htmlFor={id}
+    toggleEvent="click">
+    <MenuItem onClick={actions.SHOW_SETTINGS}>
+      <span>Settings</span>
+    </MenuItem>
+    { cluster.online && <MenuItem onClick={actions.DISCONNECT}>
+      <span>Disconnect</span>
+    </MenuItem> }
+    { cluster.online && !cluster.isManaged && <MenuItem onClick={actions.REMOVE}>
+      <span>Remove</span>
+    </MenuItem> }
+  </Menu>;
 
   return (
     <header className={cssNames("flex gaps align-center justify-space-between", className)}>
       <span className="cluster">{cluster.name}</span>
       <Icon
+        id={id}
         material="more_vert"
         tooltip="Cluster actions"
         interactive
-        onClick={showContextMenu}
       />
+      {renderMenu()}
     </header>
   );
 });