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.

1 files changed, 69 insertions, 0 deletions

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;