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