7 files changed, 112 insertions, 10 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;
diff --git a/webui/src/pages/bug/CommentForm.tsx b/webui/src/pages/bug/CommentForm.tsx
index 1a7ebc29..6d917889 100644
--- a/webui/src/pages/bug/CommentForm.tsx
+++ b/webui/src/pages/bug/CommentForm.tsx
@@ -5,9 +5,10 @@ import Paper from '@material-ui/core/Paper';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 
 import CommentInput from '../../components/CommentInput/CommentInput';
-import CloseBugButton from 'src/components/CloseBugButton/CloseBugButton';
-import CloseBugWithCommentButton from 'src/components/CloseBugWithCommentButton/CloseBugWithCommentButton';
-import ReopenBugButton from 'src/components/ReopenBugButton/ReopenBugButton';
+import CloseBugButton from 'src/components/CloseBugButton';
+import CloseBugWithCommentButton from 'src/components/CloseBugWithCommentButton';
+import ReopenBugButton from 'src/components/ReopenBugButton';
+import ReopenBugWithCommentButton from 'src/components/ReopenBugWithCommentButton';
 
 import { BugFragment } from './Bug.generated';
 import { useAddCommentMutation } from './CommentForm.generated';
@@ -80,12 +81,27 @@ function CommentForm({ bug }: Props) {
 
   function getBugStatusButton() {
     if (bug.status === 'OPEN' && issueComment.length > 0) {
-      return <CloseBugWithCommentButton bug={bug} comment={issueComment} />;
+      return (
+        <CloseBugWithCommentButton
+          bug={bug}
+          comment={issueComment}
+          postClick={resetForm}
+        />
+      );
     }
     if (bug.status === 'OPEN') {
       return <CloseBugButton bug={bug} />;
     }
-    return <ReopenBugButton bug={bug} disabled={issueComment.length > 0} />;
+    if (bug.status === 'CLOSED' && issueComment.length > 0) {
+      return (
+        <ReopenBugWithCommentButton
+          bug={bug}
+          comment={issueComment}
+          postClick={resetForm}
+        />
+      );
+    }
+    return <ReopenBugButton bug={bug} />;
   }
 
   return (
diff --git a/webui/src/pages/list/BugRow.tsx b/webui/src/pages/list/BugRow.tsx
index 562149f3..68a3b299 100644
--- a/webui/src/pages/list/BugRow.tsx
+++ b/webui/src/pages/list/BugRow.tsx
@@ -84,7 +84,9 @@ const useStyles = makeStyles((theme) => ({
   },
   commentCount: {
     fontSize: '1rem',
+    minWidth: '2rem',
     marginLeft: theme.spacing(0.5),
+    marginRight: theme.spacing(1),
   },
   commentCountCell: {
     display: 'inline-flex',