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