Move toggle button out of history menu

2 files changed, 54 insertions, 33 deletions

diff --git a/webui/src/pages/bug/EditHistoryMenu.tsx b/webui/src/pages/bug/EditHistoryMenu.tsx
index a916a1a8..da2ed0cd 100644
--- a/webui/src/pages/bug/EditHistoryMenu.tsx
+++ b/webui/src/pages/bug/EditHistoryMenu.tsx
@@ -1,10 +1,8 @@
 import React from 'react';
 
 import CircularProgress from '@material-ui/core/CircularProgress';
-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';
 
 import Date from 'src/components/Date';
 
@@ -15,13 +13,13 @@ import { useMessageEditHistoryQuery } from './MessageEditHistory.generated';
 const ITEM_HEIGHT = 48;
 
 type Props = {
+  anchor: null | HTMLElement;
   bugId: string;
   commentId: string;
-  iconBtnProps?: IconButtonProps;
+  onClose: () => void;
 };
-function EditHistoryMenu({ iconBtnProps, bugId, commentId }: Props) {
-  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
-  const open = Boolean(anchorEl);
+function EditHistoryMenu({ anchor, bugId, commentId, onClose }: Props) {
+  const open = Boolean(anchor);
 
   const { loading, error, data } = useMessageEditHistoryQuery({
     variables: { bugIdPrefix: bugId },
@@ -38,31 +36,14 @@ function EditHistoryMenu({ iconBtnProps, bugId, commentId }: Props) {
   const comment = comments.find((elem) => elem.id === commentId);
   const history = comment?.history;
 
-  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}
+        anchorEl={anchor}
         keepMounted
         open={open}
-        onClose={handleClose}
+        onClose={onClose}
         PaperProps={{
           style: {
             maxHeight: ITEM_HEIGHT * 4.5,
@@ -74,7 +55,7 @@ function EditHistoryMenu({ iconBtnProps, bugId, commentId }: Props) {
           Edited {history?.length} times.
         </MenuItem>
         {history?.map((edit, index) => (
-          <MenuItem key={index} onClick={handleClose}>
+          <MenuItem key={index} onClick={onClose}>
             <Date date={edit.date} />
           </MenuItem>
         ))}
diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx
index b117c103..bf3fb6da 100644
--- a/webui/src/pages/bug/Message.tsx
+++ b/webui/src/pages/bug/Message.tsx
@@ -5,6 +5,7 @@ import Paper from '@material-ui/core/Paper';
 import Tooltip from '@material-ui/core/Tooltip/Tooltip';
 import { makeStyles } from '@material-ui/core/styles';
 import EditIcon from '@material-ui/icons/Edit';
+import HistoryIcon from '@material-ui/icons/History';
 
 import Author, { Avatar } from 'src/components/Author';
 import Content from 'src/components/Content';
@@ -58,7 +59,6 @@ const useStyles = makeStyles((theme) => ({
     ...theme.typography.body2,
     padding: '0.5rem',
   },
-  headerActions2: {},
   headerActions: {
     color: theme.palette.info.contrastText,
     padding: '0rem',
@@ -70,11 +70,55 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
+//TODO move button out of this component and let only menu as component with
+//query. Then the query won't execute unless button click renders menu with
+//query.
+//TODO Fix display of load button spinner.
+//TODO Move this button and menu in separate component directory
+//TODO fix failing pipeline due to eslint error
+type HistBtnProps = {
+  bugId: string;
+  commentId: string;
+};
+function HistoryMenuToggleButton({ bugId, commentId }: HistBtnProps) {
+  const classes = useStyles();
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+
+  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}
+        className={classes.headerActions}
+      >
+        <HistoryIcon />
+      </IconButton>
+      {anchorEl && (
+        <EditHistoryMenu
+          bugId={bugId}
+          commentId={commentId}
+          anchor={anchorEl}
+          onClose={handleClose}
+        />
+      )}
+    </div>
+  );
+}
+
 type Props = {
   bug: BugFragment;
   op: AddCommentFragment | CreateFragment;
 };
-
 function Message({ bug, op }: Props) {
   const classes = useStyles();
   const [editMode, switchToEditMode] = useState(false);
@@ -94,11 +138,7 @@ function Message({ bug, op }: Props) {
             <Date date={comment.createdAt} />
           </div>
           {comment.edited && (
-            <EditHistoryMenu
-              iconBtnProps={{ className: classes.headerActions }}
-              bugId={bug.id}
-              commentId={comment.id}
-            />
+            <HistoryMenuToggleButton bugId={bug.id} commentId={comment.id} />
           )}
           <IfLoggedIn>
             {() => (