Refactor announcements infoCard (#89)

* refactor: replace card by generic infocard Signed-off-by: Gaël G <[email protected]> * refactor: move action buttons to a edit menu Signed-off-by: Gaël G <[email protected]> * Update screenshot Signed-off-by: Gaël G <[email protected]> --------- Signed-off-by: Gaël G <[email protected]>
procore-oss · Nov 16, 2023 · 95c94c0 · 95c94c0
1 parent 88b197c
commit 95c94c0
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 22 deletions.
diff --git a/.changeset/warm-pigs-fetch.md b/.changeset/warm-pigs-fetch.md
@@ -0,0 +1,5 @@
+---
+'@procore-oss/backstage-plugin-announcements': minor
+---
+
+Update announcement card layout. That fixes color font that was incorrect with light theme
diff --git a/docs/images/announcements_page.png b/docs/images/announcements_page.png
diff --git a/plugins/announcements/src/components/AnnouncementsPage/AnnouncementsPage.tsx b/plugins/announcements/src/components/AnnouncementsPage/AnnouncementsPage.tsx
@@ -15,7 +15,6 @@ import {
   Link,
   ItemCardGrid,
   Progress,
-  ItemCardHeader,
   ContentHeader,
   LinkButton,
 } from '@backstage/core-components';
@@ -28,12 +27,15 @@ 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,
   Card,
-  CardActions,
   CardContent,
-  CardMedia,
+  CardHeader,
+  IconButton,
+  ListItemIcon,
+  Menu,
+  MenuItem,
   makeStyles,
 } from '@material-ui/core';
 import {
@@ -51,6 +53,7 @@ import { ContextMenu } from './ContextMenu';
 const useStyles = makeStyles(theme => ({
   cardHeader: {
     color: theme.palette.text.primary,
+    fontSize: '1.5rem',
   },
   pagination: {
     display: 'flex',
@@ -106,27 +109,64 @@ const AnnouncementCard = ({
   const { loading: loadingUpdatePermission, allowed: canUpdate } =
     usePermission({ permission: announcementUpdatePermission });
 
+  const AnnouncementEditMenu = () => {
+    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="announcement-edit-menu"
+          aria-label="more"
+          onClick={handleOpenEditMenu}
+        >
+          <MoreVertIcon />
+        </IconButton>
+        <Menu anchorEl={anchorEl} open={open} onClose={handleCloseEditClose}>
+          {!loadingUpdatePermission && canUpdate && (
+            <MenuItem
+              data-testid="edit-announcement"
+              component={LinkButton}
+              to={editAnnouncementLink({ id: announcement.id })}
+            >
+              <ListItemIcon>
+                <EditIcon />
+              </ListItemIcon>
+              EDIT
+            </MenuItem>
+          )}
+          {!loadingDeletePermission && canDelete && (
+            <MenuItem onClick={onDelete}>
+              <ListItemIcon>
+                <DeleteIcon />
+              </ListItemIcon>
+              DELETE
+            </MenuItem>
+          )}
+        </Menu>
+      </>
+    );
+  };
+
   return (
     <Card>
-      <CardMedia>
-        <ItemCardHeader title={title} subtitle={subTitle} />
-      </CardMedia>
+      <CardHeader
+        action={<AnnouncementEditMenu />}
+        title={title}
+        subheader={subTitle}
+      />
       <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>
-        )}
-      </CardActions>
     </Card>
   );
 };