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