From 098bcd0c1f26d0896e7ede3edb4040b01bc3126a Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Tue, 25 May 2021 14:07:27 +0200
Subject: [PATCH] WebUI: Add comment-and-close of a bug in one step

When a user has some text entered in the comment field, the close bug
button will change to "Close bug with comment". This way the user does
not have to comment and close a bug in two separate steps.
---
 .../CloseBugButton/CloseBugButton.tsx         |  2 +-
 .../CloseBugWithComment.graphql               | 11 +++
 .../CloseBugWithCommentButton.tsx             | 69 +++++++++++++++++++
 webui/src/pages/bug/CommentForm.tsx           | 17 +++--
 4 files changed, 91 insertions(+), 8 deletions(-)
 create mode 100644 webui/src/components/CloseBugWithCommentButton/CloseBugWithComment.graphql
 create mode 100644 webui/src/components/CloseBugWithCommentButton/CloseBugWithCommentButton.tsx

diff --git a/webui/src/components/CloseBugButton/CloseBugButton.tsx b/webui/src/components/CloseBugButton/CloseBugButton.tsx
index 9f098483a8fc2450c6e50aea1845ee3e37a3474c..5ec78bb261d96638cb886acc8dafb43895f59eee 100644
--- a/webui/src/components/CloseBugButton/CloseBugButton.tsx
+++ b/webui/src/components/CloseBugButton/CloseBugButton.tsx
@@ -18,7 +18,7 @@ const useStyles = makeStyles((theme: Theme) => ({
 
 interface Props {
   bug: BugFragment;
-  disabled: boolean;
+  disabled?: boolean;
 }
 
 function CloseBugButton({ bug, disabled }: Props) {
diff --git a/webui/src/components/CloseBugWithCommentButton/CloseBugWithComment.graphql b/webui/src/components/CloseBugWithCommentButton/CloseBugWithComment.graphql
new file mode 100644
index 0000000000000000000000000000000000000000..eb736f53bb023d927cbe70a088b9a14354a9b550
--- /dev/null
+++ b/webui/src/components/CloseBugWithCommentButton/CloseBugWithComment.graphql
@@ -0,0 +1,11 @@
+mutation AddCommentAndCloseBug($input: AddCommentAndCloseBugInput!) {
+  addCommentAndClose(input: $input) {
+    statusOperation {
+      status
+    }
+    commentOperation {
+      message
+    }
+  }
+}
+
diff --git a/webui/src/components/CloseBugWithCommentButton/CloseBugWithCommentButton.tsx b/webui/src/components/CloseBugWithCommentButton/CloseBugWithCommentButton.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..1d713f88272339bf4fb0fd0b1974a85ac0a97bae
--- /dev/null
+++ b/webui/src/components/CloseBugWithCommentButton/CloseBugWithCommentButton.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+
+import Button from '@material-ui/core/Button';
+import { makeStyles, Theme } from '@material-ui/core/styles';
+import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline';
+
+import { BugFragment } from 'src/pages/bug/Bug.generated';
+import { TimelineDocument } from 'src/pages/bug/TimelineQuery.generated';
+
+import { useAddCommentAndCloseBugMutation } from './CloseBugWithComment.generated';
+
+const useStyles = makeStyles((theme: Theme) => ({
+  closeIssueIcon: {
+    color: theme.palette.secondary.dark,
+    paddingTop: '0.1rem',
+  },
+}));
+
+interface Props {
+  bug: BugFragment;
+  comment: string;
+}
+
+function CloseBugWithCommentButton({ bug, comment }: Props) {
+  const [
+    addCommentAndCloseBug,
+    { loading, error },
+  ] = useAddCommentAndCloseBugMutation();
+  const classes = useStyles();
+
+  function addCommentAndCloseBugAction() {
+    addCommentAndCloseBug({
+      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,
+    });
+  }
+
+  if (loading) return <div>Loading...</div>;
+  if (error) return <div>Error</div>;
+
+  return (
+    <div>
+      <Button
+        variant="contained"
+        onClick={() => addCommentAndCloseBugAction()}
+        startIcon={<ErrorOutlineIcon className={classes.closeIssueIcon} />}
+      >
+        Close bug with comment
+      </Button>
+    </div>
+  );
+}
+
+export default CloseBugWithCommentButton;
diff --git a/webui/src/pages/bug/CommentForm.tsx b/webui/src/pages/bug/CommentForm.tsx
index a8ce431950fa6bbd002d4512010c61e27a8ee907..fb33a8be1994f9864a0ff4aca4bc8118e824a0c8 100644
--- a/webui/src/pages/bug/CommentForm.tsx
+++ b/webui/src/pages/bug/CommentForm.tsx
@@ -6,6 +6,7 @@ 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 { BugFragment } from './Bug.generated';
@@ -77,12 +78,14 @@ function CommentForm({ bug }: Props) {
     if (issueComment.length > 0) submit();
   };
 
-  function getCloseButton() {
-    return <CloseBugButton bug={bug} disabled={issueComment.length > 0} />;
-  }
-
-  function getReopenButton() {
-    return <ReopenBugButton bug={bug} disabled={issueComment.length > 0} />;
+  function getBugStatusButton() {
+    if (bug.status === 'OPEN' && issueComment.length > 0) {
+      return <CloseBugWithCommentButton bug={bug} comment={issueComment} />;
+    } else if (bug.status === 'OPEN') {
+      return <CloseBugButton bug={bug} />;
+    } else {
+      return <ReopenBugButton bug={bug} disabled={issueComment.length > 0} />;
+    }
   }
 
   return (
@@ -94,7 +97,7 @@ function CommentForm({ bug }: Props) {
           onChange={(comment: string) => setIssueComment(comment)}
         />
         <div className={classes.actions}>
-          {bug.status === 'OPEN' ? getCloseButton() : getReopenButton()}
+          {getBugStatusButton()}
           <Button
             className={classes.greenButton}
             variant="contained"