2 files changed, 57 insertions, 0 deletions
diff --git a/webui/src/components/CloseBugButton/CloseBug.graphql b/webui/src/components/CloseBugButton/CloseBug.graphql
new file mode 100644
index 00000000..b134cc04
--- /dev/null
+++ b/webui/src/components/CloseBugButton/CloseBug.graphql
@@ -0,0 +1,8 @@
+# Write your query or mutation here
+mutation closeBug($input: CloseBugInput!) {
+  closeBug(input: $input) {
+    bug {
+      humanId
+    }
+  }
+}
+\ No newline at end of file
diff --git a/webui/src/components/CloseBugButton/CloseBugButton.tsx b/webui/src/components/CloseBugButton/CloseBugButton.tsx
new file mode 100644
index 00000000..9aca6fdd
--- /dev/null
+++ b/webui/src/components/CloseBugButton/CloseBugButton.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+
+import Button from '@material-ui/core/Button';
+
+import { TimelineDocument } from 'src/pages/bug/TimelineQuery.generated';
+
+import { useCloseBugMutation } from './CloseBug.generated';
+
+interface Props {
+  bugId: string;
+}
+
+function CloseBugButton({ bugId }: Props) {
+  const [closeBug, { loading, error }] = useCloseBugMutation();
+
+  function closeBugAction() {
+    closeBug({
+      variables: {
+        input: {
+          prefix: bugId,
+        },
+      },
+      refetchQueries: [
+        // TODO: update the cache instead of refetching
+        {
+          query: TimelineDocument,
+          variables: {
+            id: bugId,
+            first: 100,
+          },
+        },
+      ],
+      awaitRefetchQueries: true,
+    });
+  }
+
+  if (loading) return <div>Loading...</div>;
+  if (error) return <div>Error</div>;
+
+  return (
+    <div>
+      <Button variant="contained" onClick={() => closeBugAction()}>
+        Close issue
+      </Button>
+    </div>
+  );
+}
+
+export default CloseBugButton;