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 { useCloseBugMutation } from './CloseBug.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  disabled?: boolean;
21}
22
23function CloseBugButton({ bug, disabled }: Props) {
24  const [closeBug, { loading, error }] = useCloseBugMutation();
25  const classes = useStyles();
26
27  function closeBugAction() {
28    closeBug({
29      variables: {
30        input: {
31          prefix: bug.id,
32        },
33      },
34      refetchQueries: [
35        // TODO: update the cache instead of refetching
36        {
37          query: TimelineDocument,
38          variables: {
39            id: bug.id,
40            first: 100,
41          },
42        },
43      ],
44      awaitRefetchQueries: true,
45    });
46  }
47
48  if (loading) return <CircularProgress />;
49  if (error) return <div>Error</div>;
50
51  return (
52    <div>
53      <Button
54        variant="contained"
55        onClick={() => closeBugAction()}
56        disabled={bug.status === 'CLOSED' || disabled}
57        startIcon={<ErrorOutlineIcon className={classes.closeIssueIcon} />}
58      >
59        Close bug
60      </Button>
61    </div>
62  );
63}
64
65export default CloseBugButton;