1import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
 2import Button from '@mui/material/Button';
 3import CircularProgress from '@mui/material/CircularProgress';
 4
 5import { BugFragment } from 'src/pages/bug/Bug.generated';
 6import { TimelineDocument } from 'src/pages/bug/TimelineQuery.generated';
 7
 8import { useAddCommentAndCloseBugMutation } from './CloseBugWithComment.generated';
 9
10interface Props {
11  bug: BugFragment;
12  comment: string;
13  postClick?: () => void;
14}
15
16function CloseBugWithCommentButton({ bug, comment, postClick }: Props) {
17  const [addCommentAndCloseBug, { loading, error }] =
18    useAddCommentAndCloseBugMutation();
19
20  function addCommentAndCloseBugAction() {
21    addCommentAndCloseBug({
22      variables: {
23        input: {
24          prefix: bug.id,
25          message: comment,
26        },
27      },
28      refetchQueries: [
29        // TODO: update the cache instead of refetching
30        {
31          query: TimelineDocument,
32          variables: {
33            id: bug.id,
34            first: 100,
35          },
36        },
37      ],
38      awaitRefetchQueries: true,
39    }).then(() => {
40      if (postClick) {
41        postClick();
42      }
43    });
44  }
45
46  if (loading) return <CircularProgress />;
47  if (error) return <div>Error</div>;
48
49  return (
50    <div>
51      <Button
52        variant="contained"
53        onClick={() => addCommentAndCloseBugAction()}
54        startIcon={<ErrorOutlineIcon />}
55      >
56        Close bug with comment
57      </Button>
58    </div>
59  );
60}
61
62export default CloseBugWithCommentButton;