Use <MenuActions> instead of <Menu> in cluster actions menu

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

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

@@ -1,12 +1,10 @@
-import React, { useState } from "react";
+import React from "react";
 import { observer } from "mobx-react";
-import { uniqueId } from "lodash";
 
 import { ClusterActions } from "../cluster-manager";
 import { Cluster } from "../../../main/cluster";
 import { cssNames } from "../../utils";
-import { Icon } from "../icon";
-import { Menu, MenuItem } from "../menu";
+import { MenuActions, MenuItem } from "../menu";
 
 interface Props {
   cluster: Cluster
@@ -14,18 +12,8 @@ interface Props {
 }
 
 export const MainLayoutHeader = observer(({ cluster, className }: Props) => {
-  const [isMenuOpen, setMenuOpen] = useState(false);
-  const id = uniqueId("cluster_actions_");
   const actions = ClusterActions(cluster);
-
-  const renderMenu = () => <Menu
-    usePortal
-    isOpen={isMenuOpen}
-    open={() => setMenuOpen(true)}
-    close={() => setMenuOpen(false)}
-    className="ClusterActionsMenu"
-    htmlFor={id}
-    toggleEvent="click">
+  const renderMenu = () => <MenuActions>
     <MenuItem onClick={actions.SHOW_SETTINGS}>
       <span>Settings</span>
     </MenuItem>
@@ -35,16 +23,11 @@ export const MainLayoutHeader = observer(({ cluster, className }: Props) => {
     { !cluster.isManaged && <MenuItem onClick={actions.REMOVE}>
       <span>Remove</span>
     </MenuItem> }
-  </Menu>;
+  </MenuActions>;
 
   return (
     <header className={cssNames("flex gaps align-center justify-space-between", className)}>
       <span className="cluster">{cluster.name}</span>
-      <Icon
-        id={id}
-        material="more_vert"
-        interactive
-      />
       {renderMenu()}
     </header>
   );