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 { useCloseBugMutation } from './CloseBug.generated';
 9
10interface Props {
11  bug: BugFragment;
12  disabled?: boolean;
13}
14
15function CloseBugButton({ bug, disabled }: Props) {
16  const [closeBug, { loading, error }] = useCloseBugMutation();
17
18  function closeBugAction() {
19    closeBug({
20      variables: {
21        input: {
22          prefix: bug.id,
23        },
24      },
25      refetchQueries: [
26        // TODO: update the cache instead of refetching
27        {
28          query: TimelineDocument,
29          variables: {
30            id: bug.id,
31            first: 100,
32          },
33        },
34      ],
35      awaitRefetchQueries: true,
36    });
37  }
38
39  if (loading) return <CircularProgress />;
40  if (error) return <div>Error</div>;
41
42  return (
43    <div>
44      <Button
45        variant="contained"
46        onClick={() => closeBugAction()}
47        disabled={bug.status === 'CLOSED' || disabled}
48        startIcon={<ErrorOutlineIcon />}
49      >
50        Close bug
51      </Button>
52    </div>
53  );
54}
55
56export default CloseBugButton;