#955 wp converted to action menu

Author: cielbellerose

src/frontend/src/pages/WorkPackageDetailPage/WorkPackageViewContainer/WorkPackageViewContainer.tsx

@@ -15,6 +15,7 @@ import StageGateWorkPackageModalContainer from '../StageGateWorkPackageModalCont
 import { NERButton } from '../../../components/NERButton';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import { Menu, MenuItem } from '@mui/material';
+import ContentPasteIcon from '@mui/icons-material/ContentPaste';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import EditIcon from '@mui/icons-material/Edit';
 import SyncAltIcon from '@mui/icons-material/SyncAlt';
@@ -29,6 +30,7 @@ import ErrorPage from '../../ErrorPage';
 import ScopeTab from './ScopeTab';
 import FullPageTabs from '../../../components/FullPageTabs';
 import ChangeRequestTab from '../../../components/ChangeRequestTab';
+import ActionsMenu, { ButtonInfo } from '../../../components/ActionsMenu';
 
 interface WorkPackageViewContainerProps {
   workPackage: WorkPackage;
@@ -90,68 +92,49 @@ const WorkPackageViewContainer: React.FC<WorkPackageViewContainerProps> = ({
     handleDropdownClose();
   };
 
-  const editButton = (
-    <MenuItem onClick={handleClickEdit} disabled={!allowEdit}>
-      <ListItemIcon>
-        <EditIcon fontSize="small" />
-      </ListItemIcon>
-      Edit
-    </MenuItem>
-  );
-  const activateButton = (
-    <MenuItem onClick={handleClickActivate} disabled={!allowActivate}>
-      <ListItemIcon>
-        <KeyboardDoubleArrowUpIcon fontSize="small" />
-      </ListItemIcon>
-      Activate
-    </MenuItem>
-  );
-  const stageGateButton = (
-    <MenuItem onClick={handleClickStageGate} disabled={!allowStageGate}>
-      <ListItemIcon>
-        <DoneOutlineIcon fontSize="small" />
-      </ListItemIcon>
-      Stage Gate
-    </MenuItem>
-  );
-  const deleteButton = (
-    <MenuItem onClick={handleClickDelete} disabled={!allowDelete}>
-      <ListItemIcon>
-        <Delete fontSize="small" />
-      </ListItemIcon>
-      Delete
-    </MenuItem>
-  );
-  const createCRButton = (
-    <MenuItem
-      component={RouterLink}
-      to={routes.CHANGE_REQUESTS_NEW_WITH_WBS + wbsPipe(workPackage.wbsNum)}
-      disabled={!allowRequestChange}
-      onClick={handleDropdownClose}
-    >
-      <ListItemIcon>
-        <SyncAltIcon fontSize="small" />
-      </ListItemIcon>
-      Request Change
-    </MenuItem>
-  );
+  const stageGateButton: ButtonInfo = {
+    title: 'Stage Gate',
+    onClick: handleClickStageGate,
+    disabled: !allowStageGate,
+    icon: <DoneOutlineIcon fontSize="small" />,
+  };
+
+  const activateButton: ButtonInfo = {
+    title: 'Activate',
+    onClick: handleClickActivate,
+    disabled: !allowActivate,
+    icon: <KeyboardDoubleArrowUpIcon fontSize="small" />,
+  };
+
   const projectActionsDropdown = (
-    <div>
-      <NERButton
-        endIcon={<ArrowDropDownIcon style={{ fontSize: 28 }} />}
-        variant="contained"
-        id="work-package-actions-dropdown"
-        onClick={handleClick}
-      >
-        Actions
-      </NERButton>
-      <Menu open={dropdownOpen} anchorEl={anchorEl} onClose={handleDropdownClose}>
-        {editButton}
-        {workPackage.status === WbsElementStatus.Inactive ? activateButton : ''}
-        {workPackage.status === WbsElementStatus.Active ? stageGateButton : ''}
-        {createCRButton}
-        {deleteButton}
-      </Menu>
+    <div style={{ marginTop: '10px' }}>
+      <ActionsMenu
+        buttons={[
+          {
+            title: 'Edit',
+            onClick: handleClickEdit,
+            disabled: !allowEdit,
+            icon: <EditIcon fontSize="small" />
+          },
+          ...(workPackage.status === WbsElementStatus.Inactive ? [activateButton] : []),
+          ...(workPackage.status === WbsElementStatus.Active ? [stageGateButton] : []),
+          {
+            title: 'Request Change',
+            component: RouterLink,
+            to: routes.CHANGE_REQUESTS_NEW_WITH_WBS + wbsPipe(workPackage.wbsNum),
+            onClick: handleDropdownClose,
+            disabled: !allowRequestChange,
+            icon: <SyncAltIcon fontSize="small" />,
+          },
+          {
+            title: 'Delete',
+            onClick: handleClickDelete,
+            disabled: !allowDelete,
+            icon: <Delete fontSize="small" />,
+            dividerTop: true
+          }
+        ]}
+      />
     </div>
   );