5 files changed, 72 insertions, 9 deletions

diff --git a/webui/src/components/CloseBugButton/CloseBug.graphql b/webui/src/components/CloseBugButton/CloseBug.graphql
new file mode 100644
index 00000000..e2f4bff2
--- /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 {
+      id
+    }
+  }
+}
\ 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..19f56cab
--- /dev/null
+++ b/webui/src/components/CloseBugButton/CloseBugButton.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+
+import Button from '@material-ui/core/Button';
+
+import { BugFragment } from 'src/pages/bug/Bug.generated';
+import { TimelineDocument } from 'src/pages/bug/TimelineQuery.generated';
+
+import { useCloseBugMutation } from './CloseBug.generated';
+
+interface Props {
+  bug: BugFragment;
+  disabled: boolean;
+}
+
+function CloseBugButton({ bug, disabled }: Props) {
+  const [closeBug, { loading, error }] = useCloseBugMutation();
+
+  function closeBugAction() {
+    closeBug({
+      variables: {
+        input: {
+          prefix: bug.id,
+        },
+      },
+      refetchQueries: [
+        // TODO: update the cache instead of refetching
+        {
+          query: TimelineDocument,
+          variables: {
+            id: bug.id,
+            first: 100,
+          },
+        },
+      ],
+      awaitRefetchQueries: true,
+    });
+  }
+
+  if (loading) return <div>Loading...</div>;
+  if (error) return <div>Error</div>;
+
+  return (
+    <div>
+      <Button
+        variant="contained"
+        onClick={() => closeBugAction()}
+        disabled={bug.status === 'CLOSED' || disabled}
+      >
+        Close issue
+      </Button>
+    </div>
+  );
+}
+
+export default CloseBugButton;
diff --git a/webui/src/layout/CommentInput/CommentInput.tsx b/webui/src/layout/CommentInput/CommentInput.tsx
index 8a91baf6..86cc7dbb 100644
--- a/webui/src/layout/CommentInput/CommentInput.tsx
+++ b/webui/src/layout/CommentInput/CommentInput.tsx
@@ -23,10 +23,6 @@ const useStyles = makeStyles((theme) => ({
     borderBottom: `solid 3px ${theme.palette.grey['200']}`,
     minHeight: '5rem',
   },
-  actions: {
-    display: 'flex',
-    justifyContent: 'flex-end',
-  },
 }));
 
 type TabPanelProps = {
diff --git a/webui/src/pages/bug/Bug.tsx b/webui/src/pages/bug/Bug.tsx
index f2a116f8..bd6e44c4 100644
--- a/webui/src/pages/bug/Bug.tsx
+++ b/webui/src/pages/bug/Bug.tsx
@@ -82,7 +82,7 @@ function Bug({ bug }: Props) {
           <IfLoggedIn>
             {() => (
               <div className={classes.commentForm}>
-                <CommentForm bugId={bug.id} />
+                <CommentForm bug={bug} />
               </div>
             )}
           </IfLoggedIn>
diff --git a/webui/src/pages/bug/CommentForm.tsx b/webui/src/pages/bug/CommentForm.tsx
index c39f30c2..128e4d32 100644
--- a/webui/src/pages/bug/CommentForm.tsx
+++ b/webui/src/pages/bug/CommentForm.tsx
@@ -5,7 +5,9 @@ import Paper from '@material-ui/core/Paper';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 
 import CommentInput from '../../layout/CommentInput/CommentInput';
+import CloseBugButton from 'src/components/CloseBugButton/CloseBugButton';
 
+import { BugFragment } from './Bug.generated';
 import { useAddCommentMutation } from './CommentForm.generated';
 import { TimelineDocument } from './TimelineQuery.generated';
 
@@ -28,6 +30,7 @@ const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
     justifyContent: 'flex-end',
   },
   greenButton: {
+    marginLeft: '8px',
     backgroundColor: '#2ea44fd9',
     color: '#fff',
     '&:hover': {
@@ -37,10 +40,10 @@ const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
 }));
 
 type Props = {
-  bugId: string;
+  bug: BugFragment;
 };
 
-function CommentForm({ bugId }: Props) {
+function CommentForm({ bug }: Props) {
   const [addComment, { loading }] = useAddCommentMutation();
   const [issueComment, setIssueComment] = useState('');
   const [inputProp, setInputProp] = useState<any>('');
@@ -51,7 +54,7 @@ function CommentForm({ bugId }: Props) {
     addComment({
       variables: {
         input: {
-          prefix: bugId,
+          prefix: bug.id,
           message: issueComment,
         },
       },
@@ -60,7 +63,7 @@ function CommentForm({ bugId }: Props) {
         {
           query: TimelineDocument,
           variables: {
-            id: bugId,
+            id: bug.id,
             first: 100,
           },
         },
@@ -89,6 +92,7 @@ function CommentForm({ bugId }: Props) {
           onChange={(comment: string) => setIssueComment(comment)}
         />
         <div className={classes.actions}>
+          <CloseBugButton bug={bug} disabled={issueComment.length > 0} />
           <Button
             className={classes.greenButton}
             variant="contained"