Populate history menu with edit steps

webui/src/pages/bug/EditHistoryMenu.tsx

@@ -1,36 +1,43 @@
 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';
 
-const options = [
+import Date from 'src/components/Date';
-  'None',
+
-  'Atria',
+import { AddCommentFragment } from './MessageCommentFragment.generated';
-  'Callisto',
+import { CreateFragment } from './MessageCreateFragment.generated';
-  'Dione',
+import { useMessageEditHistoryQuery } from './MessageEditHistory.generated';
-  'Ganymede',
-  'Hangouts Call',
-  'Luna',
-  'Oberon',
-  'Phobos',
-  'Pyxis',
-  'Sedna',
-  'Titania',
-  'Triton',
-  'Umbriel',
-];
 
 const ITEM_HEIGHT = 48;
 
 type Props = {
+  bugId: string;
+  commentId: string;
   iconBtnProps?: IconButtonProps;
 };
-function EditHistoryMenu({ iconBtnProps }: Props) {
+function EditHistoryMenu({ iconBtnProps, bugId, commentId }: Props) {
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
   const open = Boolean(anchorEl);
 
+  const { loading, error, data } = useMessageEditHistoryQuery({
+    variables: { bugIdPrefix: bugId },
+  });
+  if (loading) return <CircularProgress />;
+  if (error) return <p>Error: {error}</p>;
+
+  const comments = data?.repository?.bug?.timeline.comments as (
+    | AddCommentFragment
+    | CreateFragment
+  )[];
+  // NOTE Searching for the changed comment could be dropped if GraphQL get
+  // filter by id argument for timelineitems
+  const comment = comments.find((elem) => elem.id === commentId);
+  const history = comment?.history;
+
   const handleClick = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
   };
@@ -63,13 +70,12 @@ function EditHistoryMenu({ iconBtnProps }: Props) {
           },
         }}
       >
-        {options.map((option) => (
+        <MenuItem key={0} disabled>
-          <MenuItem
+          Edited {history?.length} times.
-            key={option}
+        </MenuItem>
-            selected={option === 'Pyxis'}
+        {history?.map((edit, index) => (
-            onClick={handleClose}
+          <MenuItem key={index} onClick={handleClose}>
-          >
+            <Date date={edit.date} />
-            {option}
           </MenuItem>
         ))}
       </Menu>

webui/src/pages/bug/Message.tsx

@@ -96,6 +96,8 @@ function Message({ bug, op }: Props) {
           {comment.edited && (
             <EditHistoryMenu
               iconBtnProps={{ className: classes.headerActions }}
+              bugId={bug.id}
+              commentId={comment.id}
             />
           )}
           <IfLoggedIn>

webui/src/pages/bug/MessageCommentFragment.graphql

@@ -6,4 +6,8 @@ fragment AddComment on AddCommentTimelineItem {
   ...authored
   edited
   message
+  history {
+    message
+    date
+  }
 }

webui/src/pages/bug/MessageCreateFragment.graphql

@@ -6,4 +6,8 @@ fragment Create on CreateTimelineItem {
   ...authored
   edited
   message
+  history {
+    message
+    date
+  }
 }

webui/src/pages/bug/MessageEditHistory.graphql

@@ -0,0 +1,15 @@
+#import "./MessageCommentFragment.graphql"
+#import "./MessageCreateFragment.graphql"
+
+query MessageEditHistory($bugIdPrefix: String!) {
+  repository {
+    bug(prefix: $bugIdPrefix) {
+      timeline {
+        comments: nodes {
+          ...Create
+          ...AddComment
+        }
+      }
+    }
+  }
+}