1 files changed, 30 insertions, 24 deletions

diff --git a/webui/src/pages/bug/EditHistoryMenu.tsx b/webui/src/pages/bug/EditHistoryMenu.tsx
index 10b66f8f..a916a1a8 100644
--- a/webui/src/pages/bug/EditHistoryMenu.tsx
+++ b/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 = [
-  'None',
-  'Atria',
-  'Callisto',
-  'Dione',
-  'Ganymede',
-  'Hangouts Call',
-  'Luna',
-  'Oberon',
-  'Phobos',
-  'Pyxis',
-  'Sedna',
-  'Titania',
-  'Triton',
-  'Umbriel',
-];
+import Date from 'src/components/Date';
+
+import { AddCommentFragment } from './MessageCommentFragment.generated';
+import { CreateFragment } from './MessageCreateFragment.generated';
+import { useMessageEditHistoryQuery } from './MessageEditHistory.generated';
 
 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={option}
-            selected={option === 'Pyxis'}
-            onClick={handleClose}
-          >
-            {option}
+        <MenuItem key={0} disabled>
+          Edited {history?.length} times.
+        </MenuItem>
+        {history?.map((edit, index) => (
+          <MenuItem key={index} onClick={handleClose}>
+            <Date date={edit.date} />
           </MenuItem>
         ))}
       </Menu>