refactor: move action buttons to a edit menu

plugins/announcements/src/components/AnnouncementsPage/AnnouncementsPage.tsx

@@ -28,10 +28,14 @@ import {
 import Alert from '@material-ui/lab/Alert';
 import DeleteIcon from '@material-ui/icons/Delete';
 import EditIcon from '@material-ui/icons/Edit';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
 import {
-  Button,
   CardActions,
   CardContent,
+  IconButton,
+  ListItemIcon,
+  Menu,
+  MenuItem,
   makeStyles,
 } from '@material-ui/core';
 import {
@@ -40,6 +44,7 @@ import {
   announcementViewRouteRef,
   rootRouteRef,
 } from '../../routes';
+
 import { Announcement, announcementsApiRef } from '../../api';
 import { DeleteAnnouncementDialog } from './DeleteAnnouncementDialog';
 import { useDeleteAnnouncementDialogState } from './useDeleteAnnouncementDialogState';
@@ -99,28 +104,67 @@ const AnnouncementCard = ({
       , {DateTime.fromISO(announcement.created_at).toRelative()}
     </span>
   );
+
   const { loading: loadingDeletePermission, allowed: canDelete } =
     usePermission({ permission: announcementDeletePermission });
   const { loading: loadingUpdatePermission, allowed: canUpdate } =
     usePermission({ permission: announcementUpdatePermission });
 
+  const AnnoucementEditMenu = () => {
+    const [open, setOpen] = React.useState(false);
+    const [anchorEl, setAnchorEl] = React.useState<undefined | HTMLElement>(
+      undefined,
+    );
+
+    const handleOpenEditMenu = (event: React.MouseEvent<HTMLButtonElement>) => {
+      setAnchorEl(event.currentTarget);
+      setOpen(true);
+    };
+
+    const handleCloseEditClose = () => {
+      setAnchorEl(undefined);
+      setOpen(false);
+    };
+    return (
+      <>
+        <IconButton
+          data-testid="annoucement-edit-menu"
+          aria-label="more"
+          onClick={handleOpenEditMenu}
+        >
+          <MoreVertIcon />
+        </IconButton>
+        <Menu anchorEl={anchorEl} open={open} onClose={handleCloseEditClose}>
+          {!loadingUpdatePermission && canUpdate && (
+            <MenuItem
+              data-testid="sign-out"
+              component={LinkButton}
+              to={editAnnouncementLink({ id: announcement.id })}
+            >
+              <ListItemIcon>
+                <EditIcon />
+              </ListItemIcon>
+              EDIT
+            </MenuItem>
+          )}
+          {!loadingDeletePermission && canDelete && (
+            <MenuItem onClick={onDelete}>
+              <ListItemIcon>
+                <DeleteIcon />
+              </ListItemIcon>
+              DELETE
+            </MenuItem>
+          )}
+        </Menu>
+      </>
+    );
+  };
+
   return (
     <InfoCard title={title} subheader={subHeader}>
       <CardContent>{announcement.excerpt}</CardContent>
       <CardActions>
-        {!loadingUpdatePermission && canUpdate && (
-          <LinkButton
-            to={editAnnouncementLink({ id: announcement.id })}
-            color="default"
-          >
-            <EditIcon />
-          </LinkButton>
-        )}
-        {!loadingDeletePermission && canDelete && (
-          <Button onClick={onDelete} color="default">
-            <DeleteIcon />
-          </Button>
-        )}
+        <AnnoucementEditMenu />
       </CardActions>
     </InfoCard>
   );