5 files changed, 89 insertions, 5 deletions
diff --git a/webui/src/components/CloseBugButton/CloseBugButton.tsx b/webui/src/components/CloseBugButton/index.tsx
index 5ec78bb2..bb154ea7 100644
--- a/webui/src/components/CloseBugButton/CloseBugButton.tsx
+++ b/webui/src/components/CloseBugButton/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import Button from '@material-ui/core/Button';
+import CircularProgress from '@material-ui/core/CircularProgress';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline';
 
@@ -46,7 +47,7 @@ function CloseBugButton({ bug, disabled }: Props) {
     });
   }
 
-  if (loading) return <div>Loading...</div>;
+  if (loading) return <CircularProgress />;
   if (error) return <div>Error</div>;
 
   return (
diff --git a/webui/src/components/CloseBugWithCommentButton/CloseBugWithCommentButton.tsx b/webui/src/components/CloseBugWithCommentButton/index.tsx
index 1d713f88..a0fefa4a 100644
--- a/webui/src/components/CloseBugWithCommentButton/CloseBugWithCommentButton.tsx
+++ b/webui/src/components/CloseBugWithCommentButton/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import Button from '@material-ui/core/Button';
+import CircularProgress from '@material-ui/core/CircularProgress';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline';
 
@@ -19,9 +20,10 @@ const useStyles = makeStyles((theme: Theme) => ({
 interface Props {
   bug: BugFragment;
   comment: string;
+  postClick?: () => void;
 }
 
-function CloseBugWithCommentButton({ bug, comment }: Props) {
+function CloseBugWithCommentButton({ bug, comment, postClick }: Props) {
   const [
     addCommentAndCloseBug,
     { loading, error },
@@ -47,10 +49,14 @@ function CloseBugWithCommentButton({ bug, comment }: Props) {
         },
       ],
       awaitRefetchQueries: true,
+    }).then(() => {
+      if (postClick) {
+        postClick();
+      }
     });
   }
 
-  if (loading) return <div>Loading...</div>;
+  if (loading) return <CircularProgress />;
   if (error) return <div>Error</div>;
 
   return (
diff --git a/webui/src/components/ReopenBugButton/ReopenBugButton.tsx b/webui/src/components/ReopenBugButton/index.tsx
index e3e792fc..e62c58df 100644
--- a/webui/src/components/ReopenBugButton/ReopenBugButton.tsx
+++ b/webui/src/components/ReopenBugButton/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import Button from '@material-ui/core/Button';
+import CircularProgress from '@material-ui/core/CircularProgress';
 
 import { BugFragment } from 'src/pages/bug/Bug.generated';
 import { TimelineDocument } from 'src/pages/bug/TimelineQuery.generated';
@@ -9,7 +10,7 @@ import { useOpenBugMutation } from './OpenBug.generated';
 
 interface Props {
   bug: BugFragment;
-  disabled: boolean;
+  disabled?: boolean;
 }
 
 function ReopenBugButton({ bug, disabled }: Props) {
@@ -36,7 +37,7 @@ function ReopenBugButton({ bug, disabled }: Props) {
     });
   }
 
-  if (loading) return <div>Loading...</div>;
+  if (loading) return <CircularProgress />;
   if (error) return <div>Error</div>;
 
   return (
diff --git a/webui/src/components/ReopenBugWithCommentButton/ReopenBugWithComment.graphql b/webui/src/components/ReopenBugWithCommentButton/ReopenBugWithComment.graphql
new file mode 100644
index 00000000..4c220208
--- /dev/null
+++ b/webui/src/components/ReopenBugWithCommentButton/ReopenBugWithComment.graphql
@@ -0,0 +1,11 @@
+mutation AddCommentAndReopenBug($input: AddCommentAndReopenBugInput!) {
+  addCommentAndReopen(input: $input) {
+    statusOperation {
+      status
+    }
+    commentOperation {
+      message
+    }
+  }
+}
+
diff --git a/webui/src/components/ReopenBugWithCommentButton/index.tsx b/webui/src/components/ReopenBugWithCommentButton/index.tsx
new file mode 100644
index 00000000..0a534f27
--- /dev/null
+++ b/webui/src/components/ReopenBugWithCommentButton/index.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+
+import Button from '@material-ui/core/Button';
+import CircularProgress from '@material-ui/core/CircularProgress';
+
+import { BugFragment } from 'src/pages/bug/Bug.generated';
+import { TimelineDocument } from 'src/pages/bug/TimelineQuery.generated';
+
+import { useAddCommentAndReopenBugMutation } from './ReopenBugWithComment.generated';
+
+interface Props {
+  bug: BugFragment;
+  comment: string;
+  postClick?: () => void;
+}
+
+function ReopenBugWithCommentButton({ bug, comment, postClick }: Props) {
+  const [
+    addCommentAndReopenBug,
+    { loading, error },
+  ] = useAddCommentAndReopenBugMutation();
+
+  function addCommentAndReopenBugAction() {
+    addCommentAndReopenBug({
+      variables: {
+        input: {
+          prefix: bug.id,
+          message: comment,
+        },
+      },
+      refetchQueries: [
+        // TODO: update the cache instead of refetching
+        {
+          query: TimelineDocument,
+          variables: {
+            id: bug.id,
+            first: 100,
+          },
+        },
+      ],
+      awaitRefetchQueries: true,
+    }).then(() => {
+      if (postClick) {
+        postClick();
+      }
+    });
+  }
+
+  if (loading) return <CircularProgress />;
+  if (error) return <div>Error</div>;
+
+  return (
+    <div>
+      <Button
+        variant="contained"
+        type="submit"
+        onClick={() => addCommentAndReopenBugAction()}
+      >
+        Reopen bug with comment
+      </Button>
+    </div>
+  );
+}
+
+export default ReopenBugWithCommentButton;