removed secondaryActionsMenuProps

src/features/machines/components/MachineAccordion.js

@@ -42,13 +42,7 @@ GridCell.propTypes = {
   value: PropTypes.string.isRequired
 };
 
-const MachineAccordion = ({
-  machine,
-  actions,
-  logs,
-  addLog,
-  secondaryActionsMenuProps
-}) => {
+const MachineAccordion = ({ machine, actions, logs, addLog }) => {
   const { t } = useTranslation();
   const classes = useStyles();
   return (
@@ -78,7 +72,6 @@ const MachineAccordion = ({
               machine={machine}
               actions={actions}
               addLog={addLog}
-              secondaryActionsMenuProps={secondaryActionsMenuProps}
             />
           </Grid>
         </Grid>
@@ -101,8 +94,7 @@ MachineAccordion.propTypes = {
   }).isRequired,
   actions: PropTypes.array.isRequired,
   logs: PropTypes.array.isRequired,
-  addLog: PropTypes.func.isRequired,
-  secondaryActionsMenuProps: PropTypes.object.isRequired
+  addLog: PropTypes.func.isRequired
 };
 
 export default MachineAccordion;

src/features/machines/components/MachineContainer.js

@@ -4,20 +4,12 @@ import MachineTableRow from "./MachineTableRow";
 import MachineAccordion from "./MachineAccordion";
 import { ViewModes } from "./ViewModeSelection";
 import { useToast } from "../../../hooks";
-import {
-  LastPage,
-  MoreHoriz,
-  RotateLeft,
-  Launch,
-  Stop
-} from "@material-ui/icons";
+import { LastPage, RotateLeft, Launch, Stop } from "@material-ui/icons";
 import { useTranslation } from "react-i18next";
 import useApi from "../../../api";
 
 const MachineContainer = ({ machine, viewMode }) => {
   const [logs, setLogs] = useState([]);
-  const [secondaryActionsAnchor, setSecondaryActionsAnchor] =
-    React.useState(null);
 
   const { success, error } = useToast();
   const { t } = useTranslation();
@@ -44,7 +36,7 @@ const MachineContainer = ({ machine, viewMode }) => {
   );
 
   const pingMachine = useCallback(
-    machine => async () => {
+    async machine => {
       await api.pingMachine(machine.machineId, {
         onCompleted: manageActionResponse
       });
@@ -52,35 +44,20 @@ const MachineContainer = ({ machine, viewMode }) => {
     [manageActionResponse, api]
   );
 
-  const handleOpenSecondaryActions = event => {
-    setSecondaryActionsAnchor(event.currentTarget);
-  };
-
-  const handleCloseSecondaryActions = () => {
-    setSecondaryActionsAnchor(null);
-  };
-
-  const secondaryActionsMenuProps = {
-    anchor: secondaryActionsAnchor,
-    onCloseSecondaryActions: handleCloseSecondaryActions
-  };
-
   const shutdownMachine = useCallback(
-    machine => async () => {
+    async machine => {
       await api.shutdownMachine(machine.machineId, 0, false, {
         onCompleted: manageActionResponse
       });
-      handleCloseSecondaryActions();
     },
     [manageActionResponse, api]
   );
 
   const restartMachine = useCallback(
-    machine => async () => {
+    async machine => {
       await api.restartMachine(machine.machineId, 0, false, {
         onCompleted: manageActionResponse
       });
-      handleCloseSecondaryActions();
     },
     [manageActionResponse, api]
   );
@@ -91,36 +68,28 @@ const MachineContainer = ({ machine, viewMode }) => {
       effect: pingMachine,
       icon: LastPage,
       tooltip: t("Machine.Actions.Ping"),
-      top: true
-    },
-    {
-      code: "more",
-      effect: handleOpenSecondaryActions,
-      icon: MoreHoriz,
-      tooltip: t("Machine.Actions.More"),
-      top: true,
-      system: true
+      main: true
     },
     {
       code: "shutdown",
       effect: shutdownMachine,
       icon: Stop,
       tooltip: t("Machine.Actions.Shutdown"),
-      top: false
+      main: false
     },
     {
       code: "restart",
       effect: restartMachine,
       icon: RotateLeft,
       tooltip: t("Machine.Actions.Restart"),
-      top: false
+      main: false
     },
     {
       code: "advanced",
       effect: () => {},
       icon: Launch,
       tooltip: t("Machine.Actions.Advanced"),
-      top: false
+      main: false
     }
   ];
 
@@ -132,7 +101,6 @@ const MachineContainer = ({ machine, viewMode }) => {
           actions={actions}
           logs={logs}
           addLog={addLog}
-          secondaryActionsMenuProps={secondaryActionsMenuProps}
         />
       )}
       {viewMode === ViewModes.ACCORDION && (
@@ -141,7 +109,6 @@ const MachineContainer = ({ machine, viewMode }) => {
           actions={actions}
           logs={logs}
           addLog={addLog}
-          secondaryActionsMenuProps={secondaryActionsMenuProps}
         />
       )}
     </>

src/features/machines/components/MachineTableRow.js

@@ -15,13 +15,7 @@ const useRowStyles = makeStyles({
   }
 });
 
-const MachineTableRow = ({
-  machine,
-  actions,
-  logs,
-  addLog,
-  secondaryActionsMenuProps
-}) => {
+const MachineTableRow = ({ machine, actions, logs, addLog }) => {
   const [open, setOpen] = React.useState(false);
   const classes = useRowStyles();
   const { mask } = useSensitiveInfo();
@@ -45,12 +39,7 @@ const MachineTableRow = ({
         <TableCell>{mask(machine.iPv4Address)}</TableCell>
         <TableCell>{mask(machine.macAddress)}</TableCell>
         <TableCell align="right">
-          <ActionsGroup
-            machine={machine}
-            actions={actions}
-            addLog={addLog}
-            secondaryActionsMenuProps={secondaryActionsMenuProps}
-          />
+          <ActionsGroup machine={machine} actions={actions} addLog={addLog} />
         </TableCell>
       </TableRow>
       <TableRow>
@@ -75,8 +64,7 @@ MachineTableRow.propTypes = {
   }).isRequired,
   actions: PropTypes.array.isRequired,
   logs: PropTypes.array.isRequired,
-  addLog: PropTypes.func.isRequired,
-  secondaryActionsMenuProps: PropTypes.object.isRequired
+  addLog: PropTypes.func.isRequired
 };
 
 export default MachineTableRow;

src/features/machines/components/common/ActionButton.js

@@ -3,11 +3,11 @@ import PropTypes from "prop-types";
 import { IconButton, Tooltip } from "@material-ui/core";
 
 const ActionButton = React.forwardRef((props, _ref) => {
-  const { action, machine } = props;
+  const { action, machine, callback } = props;
   const id = `machine-item-${machine.machineId}-${action.code}`;
   const handleActionClick = event => {
-    if (action.system) action.effect();
-    else action.effect(machine);
+    action.effect(machine, event);
+    callback && callback(machine);
     event.stopPropagation();
   };
 
@@ -37,9 +37,9 @@ ActionButton.propTypes = {
   action: PropTypes.shape({
     code: PropTypes.string.isRequired,
     tooltip: PropTypes.string.isRequired,
-    system: PropTypes.bool,
     effect: PropTypes.func.isRequired
-  }).isRequired
+  }).isRequired,
+  callback: PropTypes.func
 };
 
 export default ActionButton;

src/features/machines/components/common/ActionsGroup.js

@@ -1,47 +1,67 @@
-import React, { useMemo } from "react";
+import React, { useMemo, useState } from "react";
 import PropTypes from "prop-types";
 import WakeComponent from "./WakeComponent";
 import ActionButton from "./ActionButton";
 import { Menu } from "@material-ui/core";
+import { MoreHoriz } from "@material-ui/icons";
+import { useTranslation } from "react-i18next";
 
-const ActionsGroup = ({
-  machine,
-  actions,
-  addLog,
-  secondaryActionsMenuProps
-}) => {
-  const topActions = useMemo(
-    () => actions.filter(a => a.top === true),
+const ActionsGroup = ({ machine, actions, addLog }) => {
+  const [menuAnchor, setMenuAnchor] = useState(null);
+
+  const { t } = useTranslation();
+
+  const mainActions = useMemo(
+    () => actions.filter(a => a.main === true),
     [actions]
   );
 
   const secondaryActions = useMemo(
-    () => actions.filter(a => a.top === false),
+    () => actions.filter(a => a.main === false),
     [actions]
   );
 
+  const handleMenuOpen = (_, event) => {
+    setMenuAnchor(event.currentTarget);
+  };
+
+  const handleMenuClose = () => {
+    setMenuAnchor(null);
+  };
+
   return (
     <>
       <WakeComponent machine={machine} addLog={addLog} />
-      {topActions.map(action => (
+      {mainActions.map(action => (
         <ActionButton
           key={`machine-item-${machine.machineId}-${action.code}`}
           action={action}
           machine={machine}
         />
       ))}
+      <ActionButton
+        action={{
+          code: "more",
+          effect: handleMenuOpen,
+          icon: MoreHoriz,
+          tooltip: t("Machine.Actions.More")
+        }}
+        machine={machine}
+      />
+
       <Menu
         id="secondary-actions-menu"
-        anchorEl={secondaryActionsMenuProps.anchor}
+        anchorEl={menuAnchor}
         keepMounted
-        open={Boolean(secondaryActionsMenuProps.anchor)}
-        onClose={secondaryActionsMenuProps.onCloseSecondaryActions}
+        open={Boolean(menuAnchor)}
+        onClose={handleMenuClose}
       >
         {secondaryActions.map(action => (
           <ActionButton
             key={`machine-item-${machine.machineId}-${action.code}`}
             action={action}
             machine={machine}
+            callback={handleMenuClose}
           />
         ))}
       </Menu>
@@ -59,8 +79,7 @@ ActionsGroup.propTypes = {
     description: PropTypes.string
   }).isRequired,
   actions: PropTypes.array.isRequired,
-  addLog: PropTypes.func.isRequired,
-  secondaryActionsMenuProps: PropTypes.object.isRequired
+  addLog: PropTypes.func.isRequired
 };
 
 export default ActionsGroup;