WebUI: Add comment-and-reopen of a bug in one step

Sascha created 4 years ago

Change summary

webui/src/components/CloseBugWithCommentButton/CloseBugWithCommentButton.tsx   | 10 
webui/src/components/ReopenBugButton/ReopenBugButton.tsx                       |  2 
webui/src/components/ReopenBugWithCommentButton/ReopenBugWithComment.graphql   | 11 
webui/src/components/ReopenBugWithCommentButton/ReopenBugWithCommentButton.tsx | 65 
webui/src/pages/bug/CommentForm.tsx                                            | 20 
5 files changed, 103 insertions(+), 5 deletions(-)

Detailed changes

webui/src/components/CloseBugWithCommentButton/CloseBugWithCommentButton.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import Button from '@material-ui/core/Button';
+import CircularProgress from '@material-ui/core/CircularProgress';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline';
 
@@ -19,9 +20,10 @@ const useStyles = makeStyles((theme: Theme) => ({
 interface Props {
   bug: BugFragment;
   comment: string;
+  postClick?: () => void;
 }
 
-function CloseBugWithCommentButton({ bug, comment }: Props) {
+function CloseBugWithCommentButton({ bug, comment, postClick }: Props) {
   const [
     addCommentAndCloseBug,
     { loading, error },
@@ -47,10 +49,14 @@ function CloseBugWithCommentButton({ bug, comment }: Props) {
         },
       ],
       awaitRefetchQueries: true,
+    }).then(() => {
+      if (postClick) {
+        postClick();
+      }
     });
   }
 
-  if (loading) return <div>Loading...</div>;
+  if (loading) return <CircularProgress />;
   if (error) return <div>Error</div>;
 
   return (

webui/src/components/ReopenBugButton/ReopenBugButton.tsx

@@ -9,7 +9,7 @@ import { useOpenBugMutation } from './OpenBug.generated';
 
 interface Props {
   bug: BugFragment;
-  disabled: boolean;
+  disabled?: boolean;
 }
 
 function ReopenBugButton({ bug, disabled }: Props) {

webui/src/components/ReopenBugWithCommentButton/ReopenBugWithComment.graphql

@@ -0,0 +1,11 @@
+mutation AddCommentAndReopenBug($input: AddCommentAndReopenBugInput!) {
+  addCommentAndReopen(input: $input) {
+    statusOperation {
+      status
+    }
+    commentOperation {
+      message
+    }
+  }
+}
+

webui/src/components/ReopenBugWithCommentButton/ReopenBugWithCommentButton.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+
+import Button from '@material-ui/core/Button';
+import CircularProgress from '@material-ui/core/CircularProgress';
+
+import { BugFragment } from 'src/pages/bug/Bug.generated';
+import { TimelineDocument } from 'src/pages/bug/TimelineQuery.generated';
+
+import { useAddCommentAndReopenBugMutation } from './ReopenBugWithComment.generated';
+
+interface Props {
+  bug: BugFragment;
+  comment: string;
+  postClick?: () => void;
+}
+
+function ReopenBugWithCommentButton({ bug, comment, postClick }: Props) {
+  const [
+    addCommentAndReopenBug,
+    { loading, error },
+  ] = useAddCommentAndReopenBugMutation();
+
+  function addCommentAndReopenBugAction() {
+    addCommentAndReopenBug({
+      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,
+    }).then(() => {
+      if (postClick) {
+        postClick();
+      }
+    });
+  }
+
+  if (loading) return <CircularProgress />;
+  if (error) return <div>Error</div>;
+
+  return (
+    <div>
+      <Button
+        variant="contained"
+        type="submit"
+        onClick={() => addCommentAndReopenBugAction()}
+      >
+        Reopen bug with comment
+      </Button>
+    </div>
+  );
+}
+
+export default ReopenBugWithCommentButton;

webui/src/pages/bug/CommentForm.tsx

@@ -8,6 +8,7 @@ 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 ReopenBugWithCommentButton from 'src/components/ReopenBugWithCommentButton/ReopenBugWithCommentButton';
 
 import { BugFragment } from './Bug.generated';
 import { useAddCommentMutation } from './CommentForm.generated';
@@ -80,12 +81,27 @@ function CommentForm({ bug }: Props) {
 
   function getBugStatusButton() {
     if (bug.status === 'OPEN' && issueComment.length > 0) {
-      return <CloseBugWithCommentButton bug={bug} comment={issueComment} />;
+      return (
+        <CloseBugWithCommentButton
+          bug={bug}
+          comment={issueComment}
+          postClick={resetForm}
+        />
+      );
     }
     if (bug.status === 'OPEN') {
       return <CloseBugButton bug={bug} />;
     }
-    return <ReopenBugButton bug={bug} disabled={issueComment.length > 0} />;
+    if (bug.status === 'CLOSED' && issueComment.length > 0) {
+      return (
+        <ReopenBugWithCommentButton
+          bug={bug}
+          comment={issueComment}
+          postClick={resetForm}
+        />
+      );
+    }
+    return <ReopenBugButton bug={bug} />;
   }
 
   return (