From 098bcd0c1f26d0896e7ede3edb4040b01bc3126a Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Tue, 25 May 2021 14:07:27 +0200
Subject: 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.
---
 .../components/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 9f098483..5ec78bb2 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 00000000..eb736f53
--- /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 00000000..1d713f88
--- /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 a8ce4319..fb33a8be 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"
-- 
cgit