From c874d111f50dc129a1ac8210beff626eea2f2186 Mon Sep 17 00:00:00 2001 From: Sascha Date: Wed, 17 Mar 2021 16:04:34 +0100 Subject: Create EditCommentForm and handle cancle button --- webui/src/pages/bug/EditCommentForm.tsx | 119 ++++++++++++++++++++++++++++++++ 1 file changed, 119 insertions(+) create mode 100644 webui/src/pages/bug/EditCommentForm.tsx (limited to 'webui/src/pages/bug/EditCommentForm.tsx') diff --git a/webui/src/pages/bug/EditCommentForm.tsx b/webui/src/pages/bug/EditCommentForm.tsx new file mode 100644 index 000000000..fb192a020 --- /dev/null +++ b/webui/src/pages/bug/EditCommentForm.tsx @@ -0,0 +1,119 @@ +import React, { useState, useRef } from 'react'; + +import Button from '@material-ui/core/Button'; +import Paper from '@material-ui/core/Paper'; +import { makeStyles, Theme } from '@material-ui/core/styles'; + +import CommentInput from '../../components/CommentInput/CommentInput'; + +import { BugFragment } from './Bug.generated'; +import { useAddCommentMutation } from './CommentForm.generated'; +import { TimelineDocument } from './TimelineQuery.generated'; + +type StyleProps = { loading: boolean }; +const useStyles = makeStyles((theme) => ({ + container: { + padding: theme.spacing(0, 2, 2, 2), + }, + textarea: {}, + tabContent: { + margin: theme.spacing(2, 0), + }, + preview: { + borderBottom: `solid 3px ${theme.palette.grey['200']}`, + minHeight: '5rem', + }, + actions: { + display: 'flex', + justifyContent: 'flex-end', + }, + greenButton: { + marginLeft: '8px', + backgroundColor: '#2ea44fd9', + color: '#fff', + '&:hover': { + backgroundColor: '#2ea44f', + }, + }, +})); + +type Props = { + bug: BugFragment; + commentId: string; + onCancleClick?: () => void; +}; + +function EditCommentForm({ bug, commentId, onCancleClick }: Props) { + const [addComment, { loading }] = useAddCommentMutation(); + const [issueComment, setIssueComment] = useState(''); + const [inputProp, setInputProp] = useState(''); + const classes = useStyles({ loading }); + const form = useRef(null); + + const submit = () => { + addComment({ + variables: { + input: { + prefix: bug.id, + message: issueComment, + }, + }, + refetchQueries: [ + // TODO: update the cache instead of refetching + { + query: TimelineDocument, + variables: { + id: bug.id, + first: 100, + }, + }, + ], + awaitRefetchQueries: true, + }).then(() => resetForm()); + }; + + function resetForm() { + setInputProp({ + value: '', + }); + } + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + if (issueComment.length > 0) submit(); + }; + + function getCancleButton() { + return ( + + ); + } + + return ( + +
+ setIssueComment(comment)} + /> +
+ {onCancleClick ? getCancleButton() : ''} + +
+ +
+ ); +} + +export default EditCommentForm; -- cgit v1.2.3 From 9f6c045f8b6e44e47300cec181217906f48d8261 Mon Sep 17 00:00:00 2001 From: Sascha Date: Wed, 17 Mar 2021 17:54:49 +0100 Subject: Several fixes - Fix misspelling of cancel... - Fix flickering of green "update comment" button - Fill input with comment text - Close edit view after submit --- webui/src/components/CommentInput/CommentInput.tsx | 5 ++- webui/src/pages/bug/EditCommentForm.tsx | 43 ++++++++-------------- webui/src/pages/bug/Message.tsx | 22 ++++++----- 3 files changed, 30 insertions(+), 40 deletions(-) (limited to 'webui/src/pages/bug/EditCommentForm.tsx') diff --git a/webui/src/components/CommentInput/CommentInput.tsx b/webui/src/components/CommentInput/CommentInput.tsx index 86cc7dbbd..c574538e8 100644 --- a/webui/src/components/CommentInput/CommentInput.tsx +++ b/webui/src/components/CommentInput/CommentInput.tsx @@ -51,6 +51,7 @@ const a11yProps = (index: number) => ({ type Props = { inputProps?: any; + inputText?: string; loading: boolean; onChange: (comment: string) => void; }; @@ -62,8 +63,8 @@ type Props = { * @param loading Disable input when component not ready yet * @param onChange Callback to return input value changes */ -function CommentInput({ inputProps, loading, onChange }: Props) { - const [input, setInput] = useState(''); +function CommentInput({ inputProps, inputText, loading, onChange }: Props) { + const [input, setInput] = useState(inputText ? inputText : ''); const [tab, setTab] = useState(0); const classes = useStyles(); diff --git a/webui/src/pages/bug/EditCommentForm.tsx b/webui/src/pages/bug/EditCommentForm.tsx index fb192a020..46cf1e1f0 100644 --- a/webui/src/pages/bug/EditCommentForm.tsx +++ b/webui/src/pages/bug/EditCommentForm.tsx @@ -8,7 +8,8 @@ import CommentInput from '../../components/CommentInput/CommentInput'; import { BugFragment } from './Bug.generated'; import { useAddCommentMutation } from './CommentForm.generated'; -import { TimelineDocument } from './TimelineQuery.generated'; +import { AddCommentFragment } from './MessageCommentFragment.generated'; +import { CreateFragment } from './MessageCreateFragment.generated'; type StyleProps = { loading: boolean }; const useStyles = makeStyles((theme) => ({ @@ -39,37 +40,22 @@ const useStyles = makeStyles((theme) => ({ type Props = { bug: BugFragment; - commentId: string; - onCancleClick?: () => void; + comment: AddCommentFragment | CreateFragment; + onCancelClick?: () => void; + onPostSubmit?: () => void; }; -function EditCommentForm({ bug, commentId, onCancleClick }: Props) { +function EditCommentForm({ bug, comment, onCancelClick, onPostSubmit }: Props) { const [addComment, { loading }] = useAddCommentMutation(); - const [issueComment, setIssueComment] = useState(''); + const [issueComment, setIssueComment] = useState(comment.message); const [inputProp, setInputProp] = useState(''); const classes = useStyles({ loading }); const form = useRef(null); const submit = () => { - addComment({ - variables: { - input: { - prefix: bug.id, - message: issueComment, - }, - }, - refetchQueries: [ - // TODO: update the cache instead of refetching - { - query: TimelineDocument, - variables: { - id: bug.id, - first: 100, - }, - }, - ], - awaitRefetchQueries: true, - }).then(() => resetForm()); + console.log('submit: ' + issueComment); + resetForm(); + if (onPostSubmit) onPostSubmit(); }; function resetForm() { @@ -83,10 +69,10 @@ function EditCommentForm({ bug, commentId, onCancleClick }: Props) { if (issueComment.length > 0) submit(); }; - function getCancleButton() { + function getCancelButton() { return ( - ); } @@ -98,9 +84,10 @@ function EditCommentForm({ bug, commentId, onCancleClick }: Props) { inputProps={inputProp} loading={loading} onChange={(comment: string) => setIssueComment(comment)} + inputText={comment.message} />
- {onCancleClick ? getCancleButton() : ''} + {onCancelClick ? getCancelButton() : ''} diff --git a/webui/src/pages/bug/EditCommentform.graphql b/webui/src/pages/bug/EditCommentform.graphql new file mode 100644 index 000000000..c7047e6ec --- /dev/null +++ b/webui/src/pages/bug/EditCommentform.graphql @@ -0,0 +1,7 @@ +mutation EditComment($input: EditCommentInput!) { + editComment(input: $input) { + bug { + id + } + } +} -- cgit v1.2.3 From d4f96fa91faa6f56a790ebc7fd041af705ed77b0 Mon Sep 17 00:00:00 2001 From: Sascha Date: Wed, 17 Mar 2021 18:21:52 +0100 Subject: Use theme colors for submit button --- webui/src/pages/bug/EditCommentForm.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) (limited to 'webui/src/pages/bug/EditCommentForm.tsx') diff --git a/webui/src/pages/bug/EditCommentForm.tsx b/webui/src/pages/bug/EditCommentForm.tsx index f50400642..ca627c276 100644 --- a/webui/src/pages/bug/EditCommentForm.tsx +++ b/webui/src/pages/bug/EditCommentForm.tsx @@ -30,10 +30,11 @@ const useStyles = makeStyles((theme) => ({ }, greenButton: { marginLeft: '8px', - backgroundColor: '#2ea44fd9', - color: '#fff', + backgroundColor: theme.palette.success.main, + color: theme.palette.success.contrastText, '&:hover': { - backgroundColor: '#2ea44f', + backgroundColor: theme.palette.success.dark, + color: theme.palette.success.contrastText, }, }, })); -- cgit v1.2.3 From 9fb033ef191a23b1338e0fdfe8ab1f462165b99d Mon Sep 17 00:00:00 2001 From: Sascha Date: Wed, 17 Mar 2021 22:28:45 +0100 Subject: Return of new comment works... ...but the types are quite hacky --- webui/src/pages/bug/EditCommentForm.graphql | 9 +++++++++ webui/src/pages/bug/EditCommentForm.tsx | 11 +++++++---- webui/src/pages/bug/Message.tsx | 8 ++++++-- 3 files changed, 22 insertions(+), 6 deletions(-) (limited to 'webui/src/pages/bug/EditCommentForm.tsx') diff --git a/webui/src/pages/bug/EditCommentForm.graphql b/webui/src/pages/bug/EditCommentForm.graphql index c7047e6ec..4765b75ca 100644 --- a/webui/src/pages/bug/EditCommentForm.graphql +++ b/webui/src/pages/bug/EditCommentForm.graphql @@ -1,7 +1,16 @@ +#import "./MessageCommentFragment.graphql" +#import "./MessageCreateFragment.graphql" + mutation EditComment($input: EditCommentInput!) { editComment(input: $input) { bug { id + timeline { + comments: nodes { + ...Create + ...AddComment + } + } } } } diff --git a/webui/src/pages/bug/EditCommentForm.tsx b/webui/src/pages/bug/EditCommentForm.tsx index ca627c276..7823d75ef 100644 --- a/webui/src/pages/bug/EditCommentForm.tsx +++ b/webui/src/pages/bug/EditCommentForm.tsx @@ -7,7 +7,7 @@ import { makeStyles, Theme } from '@material-ui/core/styles'; import CommentInput from '../../components/CommentInput/CommentInput'; import { BugFragment } from './Bug.generated'; -import { useEditCommentMutation } from './EditCommentform.generated'; +import { useEditCommentMutation } from './EditCommentForm.generated'; import { AddCommentFragment } from './MessageCommentFragment.generated'; import { CreateFragment } from './MessageCreateFragment.generated'; @@ -43,7 +43,7 @@ type Props = { bug: BugFragment; comment: AddCommentFragment | CreateFragment; onCancelClick?: () => void; - onPostSubmit?: () => void; + onPostSubmit?: (comments: any) => void; }; function EditCommentForm({ bug, comment, onCancelClick, onPostSubmit }: Props) { @@ -54,7 +54,6 @@ function EditCommentForm({ bug, comment, onCancelClick, onPostSubmit }: Props) { const form = useRef(null); const submit = () => { - console.log('submit: ' + message + '\nTo: ' + comment.id); editComment({ variables: { input: { @@ -63,9 +62,13 @@ function EditCommentForm({ bug, comment, onCancelClick, onPostSubmit }: Props) { target: comment.id, }, }, + }).then((result) => { + const comments = result.data?.editComment.bug.timeline.comments; + const coms = comments as (AddCommentFragment | CreateFragment)[]; + const res = coms.find((elem) => elem.id === comment.id); + if (onPostSubmit) onPostSubmit(res); }); resetForm(); - if (onPostSubmit) onPostSubmit(); }; function resetForm() { diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx index 08a55dc6d..7455104bf 100644 --- a/webui/src/pages/bug/Message.tsx +++ b/webui/src/pages/bug/Message.tsx @@ -78,7 +78,6 @@ function Message({ bug, op: comment }: Props) { const editComment = (id: String) => { switchToEditMode(true); - console.log(id); }; function readMessageView() { @@ -118,13 +117,18 @@ function Message({ bug, op: comment }: Props) { switchToEditMode(false); }; + const onPostSubmit = (comments: AddCommentFragment | CreateFragment) => { + console.log('posted: ' + comments.message); + switchToEditMode(false); + }; + return (
-- cgit v1.2.3 From b06f7c781620c967e939577fc92e1265cdff6485 Mon Sep 17 00:00:00 2001 From: Sascha Date: Thu, 18 Mar 2021 12:07:09 +0100 Subject: Reduced arbitary variable names --- webui/src/pages/bug/EditCommentForm.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) (limited to 'webui/src/pages/bug/EditCommentForm.tsx') diff --git a/webui/src/pages/bug/EditCommentForm.tsx b/webui/src/pages/bug/EditCommentForm.tsx index 7823d75ef..0794c3efe 100644 --- a/webui/src/pages/bug/EditCommentForm.tsx +++ b/webui/src/pages/bug/EditCommentForm.tsx @@ -63,10 +63,14 @@ function EditCommentForm({ bug, comment, onCancelClick, onPostSubmit }: Props) { }, }, }).then((result) => { - const comments = result.data?.editComment.bug.timeline.comments; - const coms = comments as (AddCommentFragment | CreateFragment)[]; - const res = coms.find((elem) => elem.id === comment.id); - if (onPostSubmit) onPostSubmit(res); + const comments = result.data?.editComment.bug.timeline.comments as ( + | AddCommentFragment + | CreateFragment + )[]; + // NOTE Searching for the changed comment could be dropped if GraphQL get + // filter by id argument for timelineitems + const modifiedComment = comments.find((elem) => elem.id === comment.id); + if (onPostSubmit) onPostSubmit(modifiedComment); }); resetForm(); }; -- cgit v1.2.3 From 5b562559e36d07888e888d014db5130a80be4519 Mon Sep 17 00:00:00 2001 From: Sascha Date: Fri, 19 Mar 2021 16:06:41 +0100 Subject: Fix eslint pipeline fail hopefully --- webui/src/pages/bug/EditCommentForm.tsx | 8 ++++---- webui/src/pages/bug/Message.tsx | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) (limited to 'webui/src/pages/bug/EditCommentForm.tsx') diff --git a/webui/src/pages/bug/EditCommentForm.tsx b/webui/src/pages/bug/EditCommentForm.tsx index 0794c3efe..8fa659b3b 100644 --- a/webui/src/pages/bug/EditCommentForm.tsx +++ b/webui/src/pages/bug/EditCommentForm.tsx @@ -42,11 +42,11 @@ const useStyles = makeStyles((theme) => ({ type Props = { bug: BugFragment; comment: AddCommentFragment | CreateFragment; - onCancelClick?: () => void; + onCancel?: () => void; onPostSubmit?: (comments: any) => void; }; -function EditCommentForm({ bug, comment, onCancelClick, onPostSubmit }: Props) { +function EditCommentForm({ bug, comment, onCancel, onPostSubmit }: Props) { const [editComment, { loading }] = useEditCommentMutation(); const [message, setMessage] = useState(comment.message); const [inputProp, setInputProp] = useState(''); @@ -88,7 +88,7 @@ function EditCommentForm({ bug, comment, onCancelClick, onPostSubmit }: Props) { function getCancelButton() { return ( - ); @@ -104,7 +104,7 @@ function EditCommentForm({ bug, comment, onCancelClick, onPostSubmit }: Props) { inputText={comment.message} />
- {onCancelClick ? getCancelButton() : ''} + {onCancel && getCancelButton()}