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
68
69
70
71
72
73
74
75
|
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 { useAddCommentAndCloseBugMutation } from './CloseBugWithComment.generated';
const useStyles = makeStyles((theme: Theme) => ({
closeIssueIcon: {
color: theme.palette.secondary.dark,
paddingTop: '0.1rem',
},
}));
interface Props {
bug: BugFragment;
comment: string;
postClick?: () => void;
}
function CloseBugWithCommentButton({ bug, comment, postClick }: Props) {
const [
addCommentAndCloseBug,
{ loading, error },
] = useAddCommentAndCloseBugMutation();
const classes = useStyles();
function addCommentAndCloseBugAction() {
addCommentAndCloseBug({
variables: {
input: {
prefix: bug.id,
message: comment,
},
},
refetchQueries: [
// TODO: update the cache instead of refetching
{
query: TimelineDocument,
variables: {
id: bug.id,
first: 100,
},
},
],
awaitRefetchQueries: true,
}).then(() => {
if (postClick) {
postClick();
}
});
}
if (loading) return <CircularProgress />;
if (error) return <div>Error</div>;
return (
<div>
<Button
variant="contained"
onClick={() => addCommentAndCloseBugAction()}
startIcon={<ErrorOutlineIcon className={classes.closeIssueIcon} />}
>
Close bug with comment
</Button>
</div>
);
}
export default CloseBugWithCommentButton;
|
