From defd1ae00cccce0b46207e03084fe6af32096610 Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Thu, 18 Mar 2021 15:45:20 +0100
Subject: [PATCH] Populate history menu with edit steps

---
 webui/src/pages/bug/EditHistoryMenu.tsx       | 54 ++++++++++---------
 webui/src/pages/bug/Message.tsx               |  2 +
 .../pages/bug/MessageCommentFragment.graphql  |  4 ++
 .../pages/bug/MessageCreateFragment.graphql   |  4 ++
 .../src/pages/bug/MessageEditHistory.graphql  | 15 ++++++
 5 files changed, 55 insertions(+), 24 deletions(-)
 create mode 100644 webui/src/pages/bug/MessageEditHistory.graphql

diff --git a/webui/src/pages/bug/EditHistoryMenu.tsx b/webui/src/pages/bug/EditHistoryMenu.tsx
index 10b66f8faa03c688dc79b49212e4524a7847349e..a916a1a89183722750751b6b067ac362c1b71d03 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>
diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx
index d36b104440f6676e3951a72ac0300e344b75bf51..b117c103b2b6995f4b13bd812cb637c380acfaf0 100644
--- a/webui/src/pages/bug/Message.tsx
+++ b/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>
diff --git a/webui/src/pages/bug/MessageCommentFragment.graphql b/webui/src/pages/bug/MessageCommentFragment.graphql
index 337eade0967384dcc0db81d3249d59245aef2a29..c852b4b0bf3685e38efc5c39ee923acfc67fd9af 100644
--- a/webui/src/pages/bug/MessageCommentFragment.graphql
+++ b/webui/src/pages/bug/MessageCommentFragment.graphql
@@ -6,4 +6,8 @@ fragment AddComment on AddCommentTimelineItem {
   ...authored
   edited
   message
+  history {
+    message
+    date
+  }
 }
diff --git a/webui/src/pages/bug/MessageCreateFragment.graphql b/webui/src/pages/bug/MessageCreateFragment.graphql
index 81f80afb6b659743de1c48fae64ae2ea0b947562..1f4647b65205a22c934ccc37bd54ed0f302ce4ca 100644
--- a/webui/src/pages/bug/MessageCreateFragment.graphql
+++ b/webui/src/pages/bug/MessageCreateFragment.graphql
@@ -6,4 +6,8 @@ fragment Create on CreateTimelineItem {
   ...authored
   edited
   message
+  history {
+    message
+    date
+  }
 }
diff --git a/webui/src/pages/bug/MessageEditHistory.graphql b/webui/src/pages/bug/MessageEditHistory.graphql
new file mode 100644
index 0000000000000000000000000000000000000000..6fde8d452772caac3143ff89fd1214a61d00dab9
--- /dev/null
+++ b/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
+        }
+      }
+    }
+  }
+}