diff options
4 files changed, 91 insertions, 8 deletions
diff --git a/webui/src/components/CloseBugButton/CloseBugButton.tsx b/webui/src/components/CloseBugButton/CloseBugButton.tsx index 9f098483..5ec78bb2 100644 --- a/webui/src/components/CloseBugButton/CloseBugButton.tsx +++ b/webui/src/components/CloseBugButton/CloseBugButton.tsx @@ -18,7 +18,7 @@ const useStyles = makeStyles((theme: Theme) => ({ interface Props { bug: BugFragment; - disabled: boolean; + disabled?: boolean; } function CloseBugButton({ bug, disabled }: Props) { diff --git a/webui/src/components/CloseBugWithCommentButton/CloseBugWithComment.graphql b/webui/src/components/CloseBugWithCommentButton/CloseBugWithComment.graphql new file mode 100644 index 00000000..eb736f53 --- /dev/null +++ b/webui/src/components/CloseBugWithCommentButton/CloseBugWithComment.graphql @@ -0,0 +1,11 @@ +mutation AddCommentAndCloseBug($input: AddCommentAndCloseBugInput!) { + addCommentAndClose(input: $input) { + statusOperation { + status + } + commentOperation { + message + } + } +} + diff --git a/webui/src/components/CloseBugWithCommentButton/CloseBugWithCommentButton.tsx b/webui/src/components/CloseBugWithCommentButton/CloseBugWithCommentButton.tsx new file mode 100644 index 00000000..1d713f88 --- /dev/null +++ b/webui/src/components/CloseBugWithCommentButton/CloseBugWithCommentButton.tsx @@ -0,0 +1,69 @@ +import React from 'react'; + +import Button from '@material-ui/core/Button'; +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; +} + +function CloseBugWithCommentButton({ bug, comment }: 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, + }); + } + + if (loading) return <div>Loading...</div>; + 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; diff --git a/webui/src/pages/bug/CommentForm.tsx b/webui/src/pages/bug/CommentForm.tsx index a8ce4319..fb33a8be 100644 --- a/webui/src/pages/bug/CommentForm.tsx +++ b/webui/src/pages/bug/CommentForm.tsx @@ -6,6 +6,7 @@ import { makeStyles, Theme } from '@material-ui/core/styles'; import CommentInput from '../../components/CommentInput/CommentInput'; import CloseBugButton from 'src/components/CloseBugButton/CloseBugButton'; +import CloseBugWithCommentButton from 'src/components/CloseBugWithCommentButton/CloseBugWithCommentButton'; import ReopenBugButton from 'src/components/ReopenBugButton/ReopenBugButton'; import { BugFragment } from './Bug.generated'; @@ -77,12 +78,14 @@ function CommentForm({ bug }: Props) { if (issueComment.length > 0) submit(); }; - function getCloseButton() { - return <CloseBugButton bug={bug} disabled={issueComment.length > 0} />; - } - - function getReopenButton() { - return <ReopenBugButton bug={bug} disabled={issueComment.length > 0} />; + function getBugStatusButton() { + if (bug.status === 'OPEN' && issueComment.length > 0) { + return <CloseBugWithCommentButton bug={bug} comment={issueComment} />; + } else if (bug.status === 'OPEN') { + return <CloseBugButton bug={bug} />; + } else { + return <ReopenBugButton bug={bug} disabled={issueComment.length > 0} />; + } } return ( @@ -94,7 +97,7 @@ function CommentForm({ bug }: Props) { onChange={(comment: string) => setIssueComment(comment)} /> <div className={classes.actions}> - {bug.status === 'OPEN' ? getCloseButton() : getReopenButton()} + {getBugStatusButton()} <Button className={classes.greenButton} variant="contained" |