1 files changed, 65 insertions, 0 deletions
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;