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