Add test menu for edit history

2 files changed, 89 insertions, 4 deletions

diff --git a/webui/src/pages/bug/EditHistoryMenu.tsx b/webui/src/pages/bug/EditHistoryMenu.tsx
new file mode 100644
index 00000000..10b66f8f
--- /dev/null
+++ b/webui/src/pages/bug/EditHistoryMenu.tsx
@@ -0,0 +1,80 @@
+import React from 'react';
+
+import IconButton, { IconButtonProps } from '@material-ui/core/IconButton';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+import HistoryIcon from '@material-ui/icons/History';
+
+const options = [
+  'None',
+  'Atria',
+  'Callisto',
+  'Dione',
+  'Ganymede',
+  'Hangouts Call',
+  'Luna',
+  'Oberon',
+  'Phobos',
+  'Pyxis',
+  'Sedna',
+  'Titania',
+  'Triton',
+  'Umbriel',
+];
+
+const ITEM_HEIGHT = 48;
+
+type Props = {
+  iconBtnProps?: IconButtonProps;
+};
+function EditHistoryMenu({ iconBtnProps }: Props) {
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <div>
+      <IconButton
+        aria-label="more"
+        aria-controls="long-menu"
+        aria-haspopup="true"
+        onClick={handleClick}
+        {...iconBtnProps}
+      >
+        <HistoryIcon />
+      </IconButton>
+      <Menu
+        id="long-menu"
+        anchorEl={anchorEl}
+        keepMounted
+        open={open}
+        onClose={handleClose}
+        PaperProps={{
+          style: {
+            maxHeight: ITEM_HEIGHT * 4.5,
+            width: '20ch',
+          },
+        }}
+      >
+        {options.map((option) => (
+          <MenuItem
+            key={option}
+            selected={option === 'Pyxis'}
+            onClick={handleClose}
+          >
+            {option}
+          </MenuItem>
+        ))}
+      </Menu>
+    </div>
+  );
+}
+
+export default EditHistoryMenu;
diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx
index 26bbb1aa..d36b1044 100644
--- a/webui/src/pages/bug/Message.tsx
+++ b/webui/src/pages/bug/Message.tsx
@@ -13,6 +13,7 @@ import IfLoggedIn from 'src/components/IfLoggedIn/IfLoggedIn';
 
 import { BugFragment } from './Bug.generated';
 import EditCommentForm from './EditCommentForm';
+import EditHistoryMenu from './EditHistoryMenu';
 import { AddCommentFragment } from './MessageCommentFragment.generated';
 import { CreateFragment } from './MessageCreateFragment.generated';
 
@@ -57,7 +58,8 @@ const useStyles = makeStyles((theme) => ({
     ...theme.typography.body2,
     padding: '0.5rem',
   },
-  editButton: {
+  headerActions2: {},
+  headerActions: {
     color: theme.palette.info.contrastText,
     padding: '0rem',
     marginLeft: theme.spacing(1),
@@ -91,13 +93,17 @@ function Message({ bug, op }: Props) {
             <span> commented </span>
             <Date date={comment.createdAt} />
           </div>
-          {comment.edited && <div className={classes.tag}>Edited</div>}
+          {comment.edited && (
+            <EditHistoryMenu
+              iconBtnProps={{ className: classes.headerActions }}
+            />
+          )}
           <IfLoggedIn>
             {() => (
               <Tooltip title="Edit Message" placement="top" arrow={true}>
                 <IconButton
                   disableRipple
-                  className={classes.editButton}
+                  className={classes.headerActions}
                   aria-label="edit message"
                   onClick={() => editComment(comment.id)}
                 >
@@ -129,7 +135,6 @@ function Message({ bug, op }: Props) {
         <EditCommentForm
           bug={bug}
           onCancelClick={cancelEdition}
-          // Close edit view after submitted changes
           onPostSubmit={onPostSubmit}
           comment={comment}
         />