From 0dcb48d03aae413d77c7321f461502fa54abe05f Mon Sep 17 00:00:00 2001 From: Sascha Date: Mon, 15 Mar 2021 13:15:06 +0100 Subject: Add EditButton to bug message --- webui/src/pages/bug/Message.tsx | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) (limited to 'webui/src') diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx index faff5356..6b04059f 100644 --- a/webui/src/pages/bug/Message.tsx +++ b/webui/src/pages/bug/Message.tsx @@ -1,7 +1,10 @@ import React from 'react'; +import IconButton from '@material-ui/core/IconButton'; import Paper from '@material-ui/core/Paper'; +import Tooltip from '@material-ui/core/Tooltip/Tooltip'; import { makeStyles } from '@material-ui/core/styles'; +import EditIcon from '@material-ui/icons/Edit'; import Author, { Avatar } from 'src/components/Author'; import Content from 'src/components/Content'; @@ -51,6 +54,14 @@ const useStyles = makeStyles((theme) => ({ ...theme.typography.body2, padding: '0.5rem', }, + editButton: { + color: theme.palette.info.contrastText, + padding: '0rem', + fontSize: '0.75rem', + '&:hover': { + backgroundColor: 'inherit', + }, + }, })); type Props = { @@ -70,6 +81,15 @@ function Message({ op }: Props) { {op.edited &&
Edited
} + + + + +
-- cgit From 26ad5fc379749d7effc324ae36e778ee540053a7 Mon Sep 17 00:00:00 2001 From: Sascha Date: Wed, 17 Mar 2021 11:37:04 +0100 Subject: Add onClick handler to edit button --- webui/src/pages/bug/Message.tsx | 6 ++++++ webui/src/pages/bug/MessageCommentFragment.graphql | 1 + webui/src/pages/bug/MessageCreateFragment.graphql | 1 + 3 files changed, 8 insertions(+) (limited to 'webui/src') diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx index 6b04059f..390f369e 100644 --- a/webui/src/pages/bug/Message.tsx +++ b/webui/src/pages/bug/Message.tsx @@ -70,6 +70,11 @@ type Props = { function Message({ op }: Props) { const classes = useStyles(); + + const editComment = (id: String) => { + console.log(id); + }; + return (
@@ -86,6 +91,7 @@ function Message({ op }: Props) { disableRipple className={classes.editButton} aria-label="edit message" + onClick={() => editComment(op.id)} > diff --git a/webui/src/pages/bug/MessageCommentFragment.graphql b/webui/src/pages/bug/MessageCommentFragment.graphql index 00f8342d..337eade0 100644 --- a/webui/src/pages/bug/MessageCommentFragment.graphql +++ b/webui/src/pages/bug/MessageCommentFragment.graphql @@ -1,6 +1,7 @@ #import "../../components/fragments.graphql" fragment AddComment on AddCommentTimelineItem { + id createdAt ...authored edited diff --git a/webui/src/pages/bug/MessageCreateFragment.graphql b/webui/src/pages/bug/MessageCreateFragment.graphql index 4cae819d..81f80afb 100644 --- a/webui/src/pages/bug/MessageCreateFragment.graphql +++ b/webui/src/pages/bug/MessageCreateFragment.graphql @@ -1,6 +1,7 @@ #import "../../components/fragments.graphql" fragment Create on CreateTimelineItem { + id createdAt ...authored edited -- cgit From cd4b1adebbb009caba47b7dc4f543c4d951841f2 Mon Sep 17 00:00:00 2001 From: Sascha Date: Wed, 17 Mar 2021 12:28:45 +0100 Subject: Pass BugFragment as prop to EditComment --- webui/src/pages/bug/.Bug.tsx.swp | Bin 0 -> 12288 bytes webui/src/pages/bug/.TimelineQuery.tsx.swp | Bin 0 -> 12288 bytes webui/src/pages/bug/Bug.tsx | 2 +- webui/src/pages/bug/Message.tsx | 13 ++++++++++++- webui/src/pages/bug/Timeline.tsx | 8 +++++--- webui/src/pages/bug/TimelineQuery.tsx | 9 +++++---- 6 files changed, 23 insertions(+), 9 deletions(-) create mode 100644 webui/src/pages/bug/.Bug.tsx.swp create mode 100644 webui/src/pages/bug/.TimelineQuery.tsx.swp (limited to 'webui/src') diff --git a/webui/src/pages/bug/.Bug.tsx.swp b/webui/src/pages/bug/.Bug.tsx.swp new file mode 100644 index 00000000..4a312e0d Binary files /dev/null and b/webui/src/pages/bug/.Bug.tsx.swp differ diff --git a/webui/src/pages/bug/.TimelineQuery.tsx.swp b/webui/src/pages/bug/.TimelineQuery.tsx.swp new file mode 100644 index 00000000..0ad00f67 Binary files /dev/null and b/webui/src/pages/bug/.TimelineQuery.tsx.swp differ diff --git a/webui/src/pages/bug/Bug.tsx b/webui/src/pages/bug/Bug.tsx index d85c5296..46a443d5 100644 --- a/webui/src/pages/bug/Bug.tsx +++ b/webui/src/pages/bug/Bug.tsx @@ -78,7 +78,7 @@ function Bug({ bug }: Props) {
- + {() => (
diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx index 390f369e..3993b5f7 100644 --- a/webui/src/pages/bug/Message.tsx +++ b/webui/src/pages/bug/Message.tsx @@ -9,7 +9,10 @@ import EditIcon from '@material-ui/icons/Edit'; import Author, { Avatar } from 'src/components/Author'; import Content from 'src/components/Content'; import Date from 'src/components/Date'; +import IfLoggedIn from 'src/components/IfLoggedIn/IfLoggedIn'; +import { BugFragment } from './Bug.generated'; +import CommentForm from './CommentForm'; import { AddCommentFragment } from './MessageCommentFragment.generated'; import { CreateFragment } from './MessageCreateFragment.generated'; @@ -65,10 +68,11 @@ const useStyles = makeStyles((theme) => ({ })); type Props = { + bug: BugFragment; op: AddCommentFragment | CreateFragment; }; -function Message({ op }: Props) { +function Message({ bug, op }: Props) { const classes = useStyles(); const editComment = (id: String) => { @@ -101,6 +105,13 @@ function Message({ op }: Props) {
+ + {() => ( +
+ +
+ )} + ); } diff --git a/webui/src/pages/bug/Timeline.tsx b/webui/src/pages/bug/Timeline.tsx index 6e1d242e..60459a53 100644 --- a/webui/src/pages/bug/Timeline.tsx +++ b/webui/src/pages/bug/Timeline.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; +import { BugFragment } from './Bug.generated'; import LabelChange from './LabelChange'; import Message from './Message'; import SetStatus from './SetStatus'; @@ -18,9 +19,10 @@ const useStyles = makeStyles((theme) => ({ type Props = { ops: Array; + bug: BugFragment; }; -function Timeline({ ops }: Props) { +function Timeline({ bug, ops }: Props) { const classes = useStyles(); return ( @@ -28,9 +30,9 @@ function Timeline({ ops }: Props) { {ops.map((op, index) => { switch (op.__typename) { case 'CreateTimelineItem': - return ; + return ; case 'AddCommentTimelineItem': - return ; + return ; case 'LabelChangeTimelineItem': return ; case 'SetTitleTimelineItem': diff --git a/webui/src/pages/bug/TimelineQuery.tsx b/webui/src/pages/bug/TimelineQuery.tsx index 74eed52b..d66c665b 100644 --- a/webui/src/pages/bug/TimelineQuery.tsx +++ b/webui/src/pages/bug/TimelineQuery.tsx @@ -2,17 +2,18 @@ import React from 'react'; import CircularProgress from '@material-ui/core/CircularProgress'; +import { BugFragment } from './Bug.generated'; import Timeline from './Timeline'; import { useTimelineQuery } from './TimelineQuery.generated'; type Props = { - id: string; + bug: BugFragment; }; -const TimelineQuery = ({ id }: Props) => { +const TimelineQuery = ({ bug }: Props) => { const { loading, error, data } = useTimelineQuery({ variables: { - id, + id: bug.id, first: 100, }, }); @@ -25,7 +26,7 @@ const TimelineQuery = ({ id }: Props) => { return null; } - return ; + return ; }; export default TimelineQuery; -- cgit From d82c481e00a729c9736ac3f297347b23201a4080 Mon Sep 17 00:00:00 2001 From: Sascha Date: Wed, 17 Mar 2021 12:30:38 +0100 Subject: Fix remove .swp files --- webui/src/pages/bug/.Bug.tsx.swp | Bin 12288 -> 0 bytes webui/src/pages/bug/.TimelineQuery.tsx.swp | Bin 12288 -> 0 bytes 2 files changed, 0 insertions(+), 0 deletions(-) delete mode 100644 webui/src/pages/bug/.Bug.tsx.swp delete mode 100644 webui/src/pages/bug/.TimelineQuery.tsx.swp (limited to 'webui/src') diff --git a/webui/src/pages/bug/.Bug.tsx.swp b/webui/src/pages/bug/.Bug.tsx.swp deleted file mode 100644 index 4a312e0d..00000000 Binary files a/webui/src/pages/bug/.Bug.tsx.swp and /dev/null differ diff --git a/webui/src/pages/bug/.TimelineQuery.tsx.swp b/webui/src/pages/bug/.TimelineQuery.tsx.swp deleted file mode 100644 index 0ad00f67..00000000 Binary files a/webui/src/pages/bug/.TimelineQuery.tsx.swp and /dev/null differ -- cgit From 2483b2729602b5ab544a9d0e88f47eba233e8e82 Mon Sep 17 00:00:00 2001 From: Sascha Date: Wed, 17 Mar 2021 13:04:24 +0100 Subject: Display comment form on edit click --- webui/src/pages/bug/Message.tsx | 55 +++++++++++++++++++++++++---------------- 1 file changed, 34 insertions(+), 21 deletions(-) (limited to 'webui/src') diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx index 3993b5f7..4ad68b44 100644 --- a/webui/src/pages/bug/Message.tsx +++ b/webui/src/pages/bug/Message.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState } from 'react'; import IconButton from '@material-ui/core/IconButton'; import Paper from '@material-ui/core/Paper'; @@ -74,14 +74,15 @@ type Props = { function Message({ bug, op }: Props) { const classes = useStyles(); + const [editMode, switchToEditMode] = useState(false); const editComment = (id: String) => { + switchToEditMode(true); console.log(id); }; - return ( -
- + function readMessageView() { + return (
@@ -90,28 +91,40 @@ function Message({ bug, op }: Props) {
{op.edited &&
Edited
} - - editComment(op.id)} - > - - - + + {() => ( + + editComment(op.id)} + > + + + + )} +
- - {() => ( -
- -
- )} - + ); + } + + function editMessageView() { + return ( +
+ +
+ ); + } + + return ( +
+ + {editMode ? editMessageView() : readMessageView()}
); } -- cgit From 0cd5c84d59d00141bb997346f538b165644d233c Mon Sep 17 00:00:00 2001 From: Sascha Date: Wed, 17 Mar 2021 13:14:07 +0100 Subject: Fix CommentForm margin --- webui/src/pages/bug/Bug.tsx | 1 + webui/src/pages/bug/CommentForm.tsx | 1 - 2 files changed, 1 insertion(+), 1 deletion(-) (limited to 'webui/src') diff --git a/webui/src/pages/bug/Bug.tsx b/webui/src/pages/bug/Bug.tsx index 46a443d5..83785a37 100644 --- a/webui/src/pages/bug/Bug.tsx +++ b/webui/src/pages/bug/Bug.tsx @@ -59,6 +59,7 @@ const useStyles = makeStyles((theme) => ({ ...theme.typography.body2, }, commentForm: { + marginTop: theme.spacing(2), marginLeft: 48, }, })); diff --git a/webui/src/pages/bug/CommentForm.tsx b/webui/src/pages/bug/CommentForm.tsx index 773e7d0e..fe9536ac 100644 --- a/webui/src/pages/bug/CommentForm.tsx +++ b/webui/src/pages/bug/CommentForm.tsx @@ -15,7 +15,6 @@ import { TimelineDocument } from './TimelineQuery.generated'; type StyleProps = { loading: boolean }; const useStyles = makeStyles((theme) => ({ container: { - margin: theme.spacing(2, 0), padding: theme.spacing(0, 2, 2, 2), }, textarea: {}, -- cgit 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 ++++++++++++++++++++++++++++++++ webui/src/pages/bug/Message.tsx | 12 +++- 2 files changed, 129 insertions(+), 2 deletions(-) create mode 100644 webui/src/pages/bug/EditCommentForm.tsx (limited to 'webui/src') diff --git a/webui/src/pages/bug/EditCommentForm.tsx b/webui/src/pages/bug/EditCommentForm.tsx new file mode 100644 index 00000000..fb192a02 --- /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; diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx index 4ad68b44..928e256f 100644 --- a/webui/src/pages/bug/Message.tsx +++ b/webui/src/pages/bug/Message.tsx @@ -12,7 +12,7 @@ import Date from 'src/components/Date'; import IfLoggedIn from 'src/components/IfLoggedIn/IfLoggedIn'; import { BugFragment } from './Bug.generated'; -import CommentForm from './CommentForm'; +import EditCommentForm from './EditCommentForm'; import { AddCommentFragment } from './MessageCommentFragment.generated'; import { CreateFragment } from './MessageCreateFragment.generated'; @@ -114,9 +114,17 @@ function Message({ bug, op }: Props) { } function editMessageView() { + const cancleEdition = () => { + switchToEditMode(false); + }; + return (
- +
); } -- cgit 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') diff --git a/webui/src/components/CommentInput/CommentInput.tsx b/webui/src/components/CommentInput/CommentInput.tsx index 86cc7dbb..c574538e 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 fb192a02..46cf1e1f 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 00000000..c7047e6e --- /dev/null +++ b/webui/src/pages/bug/EditCommentform.graphql @@ -0,0 +1,7 @@ +mutation EditComment($input: EditCommentInput!) { + editComment(input: $input) { + bug { + id + } + } +} -- cgit 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') diff --git a/webui/src/pages/bug/EditCommentForm.tsx b/webui/src/pages/bug/EditCommentForm.tsx index f5040064..ca627c27 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 From d6c3ffa984c57a546d437d9be989077d824fac46 Mon Sep 17 00:00:00 2001 From: Sascha Date: Wed, 17 Mar 2021 21:21:20 +0100 Subject: Fix graphql filename capitalization --- webui/src/pages/bug/EditCommentForm.graphql | 7 +++++++ webui/src/pages/bug/EditCommentform.graphql | 7 ------- 2 files changed, 7 insertions(+), 7 deletions(-) create mode 100644 webui/src/pages/bug/EditCommentForm.graphql delete mode 100644 webui/src/pages/bug/EditCommentform.graphql (limited to 'webui/src') diff --git a/webui/src/pages/bug/EditCommentForm.graphql b/webui/src/pages/bug/EditCommentForm.graphql new file mode 100644 index 00000000..c7047e6e --- /dev/null +++ b/webui/src/pages/bug/EditCommentForm.graphql @@ -0,0 +1,7 @@ +mutation EditComment($input: EditCommentInput!) { + editComment(input: $input) { + bug { + id + } + } +} diff --git a/webui/src/pages/bug/EditCommentform.graphql b/webui/src/pages/bug/EditCommentform.graphql deleted file mode 100644 index c7047e6e..00000000 --- a/webui/src/pages/bug/EditCommentform.graphql +++ /dev/null @@ -1,7 +0,0 @@ -mutation EditComment($input: EditCommentInput!) { - editComment(input: $input) { - bug { - id - } - } -} -- cgit 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') diff --git a/webui/src/pages/bug/EditCommentForm.graphql b/webui/src/pages/bug/EditCommentForm.graphql index c7047e6e..4765b75c 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 ca627c27..7823d75e 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 08a55dc6..7455104b 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 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') diff --git a/webui/src/pages/bug/EditCommentForm.tsx b/webui/src/pages/bug/EditCommentForm.tsx index 7823d75e..0794c3ef 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 From 142adfd2b15dda3a7b9353c046f5858496012876 Mon Sep 17 00:00:00 2001 From: Sascha Date: Thu, 18 Mar 2021 12:08:19 +0100 Subject: Update message view after editing --- webui/src/pages/bug/Message.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) (limited to 'webui/src') diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx index 7455104b..adb3057c 100644 --- a/webui/src/pages/bug/Message.tsx +++ b/webui/src/pages/bug/Message.tsx @@ -72,9 +72,10 @@ type Props = { op: AddCommentFragment | CreateFragment; }; -function Message({ bug, op: comment }: Props) { +function Message({ bug, op }: Props) { const classes = useStyles(); const [editMode, switchToEditMode] = useState(false); + const [comment, setComment] = useState(op); const editComment = (id: String) => { switchToEditMode(true); @@ -117,8 +118,8 @@ function Message({ bug, op: comment }: Props) { switchToEditMode(false); }; - const onPostSubmit = (comments: AddCommentFragment | CreateFragment) => { - console.log('posted: ' + comments.message); + const onPostSubmit = (comment: AddCommentFragment | CreateFragment) => { + setComment(comment); switchToEditMode(false); }; -- cgit From 58e124056002e7e8e9dc9ac38f672a90b005eebd Mon Sep 17 00:00:00 2001 From: Sascha Date: Thu, 18 Mar 2021 12:13:03 +0100 Subject: Add space between edit button and edited indicator --- webui/src/pages/bug/Message.tsx | 1 + 1 file changed, 1 insertion(+) (limited to 'webui/src') diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx index adb3057c..26bbb1aa 100644 --- a/webui/src/pages/bug/Message.tsx +++ b/webui/src/pages/bug/Message.tsx @@ -60,6 +60,7 @@ const useStyles = makeStyles((theme) => ({ editButton: { color: theme.palette.info.contrastText, padding: '0rem', + marginLeft: theme.spacing(1), fontSize: '0.75rem', '&:hover': { backgroundColor: 'inherit', -- cgit From 25d3aca9adac3441da14d53f489b2609fefac21f Mon Sep 17 00:00:00 2001 From: Sascha Date: Thu, 18 Mar 2021 14:11:41 +0100 Subject: Add test menu for edit history --- webui/src/pages/bug/EditHistoryMenu.tsx | 80 +++++++++++++++++++++++++++++++++ webui/src/pages/bug/Message.tsx | 13 ++++-- 2 files changed, 89 insertions(+), 4 deletions(-) create mode 100644 webui/src/pages/bug/EditHistoryMenu.tsx (limited to 'webui/src') diff --git a/webui/src/pages/bug/EditHistoryMenu.tsx b/webui/src/pages/bug/EditHistoryMenu.tsx new file mode 100644 index 00000000..10b66f8f --- /dev/null +++ b/webui/src/pages/bug/EditHistoryMenu.tsx @@ -0,0 +1,80 @@ +import React from 'react'; + +import IconButton, { IconButtonProps } from '@material-ui/core/IconButton'; +import Menu from '@material-ui/core/Menu'; +import MenuItem from '@material-ui/core/MenuItem'; +import HistoryIcon from '@material-ui/icons/History'; + +const options = [ + 'None', + 'Atria', + 'Callisto', + 'Dione', + 'Ganymede', + 'Hangouts Call', + 'Luna', + 'Oberon', + 'Phobos', + 'Pyxis', + 'Sedna', + 'Titania', + 'Triton', + 'Umbriel', +]; + +const ITEM_HEIGHT = 48; + +type Props = { + iconBtnProps?: IconButtonProps; +}; +function EditHistoryMenu({ iconBtnProps }: Props) { + const [anchorEl, setAnchorEl] = React.useState(null); + const open = Boolean(anchorEl); + + const handleClick = (event: React.MouseEvent) => { + setAnchorEl(event.currentTarget); + }; + + const handleClose = () => { + setAnchorEl(null); + }; + + return ( +
+ + + + + {options.map((option) => ( + + {option} + + ))} + +
+ ); +} + +export default EditHistoryMenu; diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx index 26bbb1aa..d36b1044 100644 --- a/webui/src/pages/bug/Message.tsx +++ b/webui/src/pages/bug/Message.tsx @@ -13,6 +13,7 @@ import IfLoggedIn from 'src/components/IfLoggedIn/IfLoggedIn'; import { BugFragment } from './Bug.generated'; import EditCommentForm from './EditCommentForm'; +import EditHistoryMenu from './EditHistoryMenu'; import { AddCommentFragment } from './MessageCommentFragment.generated'; import { CreateFragment } from './MessageCreateFragment.generated'; @@ -57,7 +58,8 @@ const useStyles = makeStyles((theme) => ({ ...theme.typography.body2, padding: '0.5rem', }, - editButton: { + headerActions2: {}, + headerActions: { color: theme.palette.info.contrastText, padding: '0rem', marginLeft: theme.spacing(1), @@ -91,13 +93,17 @@ function Message({ bug, op }: Props) { commented
- {comment.edited &&
Edited
} + {comment.edited && ( + + )} {() => ( editComment(comment.id)} > @@ -129,7 +135,6 @@ function Message({ bug, op }: Props) { -- cgit From defd1ae00cccce0b46207e03084fe6af32096610 Mon Sep 17 00:00:00 2001 From: Sascha Date: Thu, 18 Mar 2021 15:45:20 +0100 Subject: Populate history menu with edit steps --- webui/src/pages/bug/EditHistoryMenu.tsx | 54 ++++++++++++---------- webui/src/pages/bug/Message.tsx | 2 + webui/src/pages/bug/MessageCommentFragment.graphql | 4 ++ webui/src/pages/bug/MessageCreateFragment.graphql | 4 ++ webui/src/pages/bug/MessageEditHistory.graphql | 15 ++++++ 5 files changed, 55 insertions(+), 24 deletions(-) create mode 100644 webui/src/pages/bug/MessageEditHistory.graphql (limited to 'webui/src') diff --git a/webui/src/pages/bug/EditHistoryMenu.tsx b/webui/src/pages/bug/EditHistoryMenu.tsx index 10b66f8f..a916a1a8 100644 --- a/webui/src/pages/bug/EditHistoryMenu.tsx +++ b/webui/src/pages/bug/EditHistoryMenu.tsx @@ -1,36 +1,43 @@ import React from 'react'; +import CircularProgress from '@material-ui/core/CircularProgress'; import IconButton, { IconButtonProps } from '@material-ui/core/IconButton'; import Menu from '@material-ui/core/Menu'; import MenuItem from '@material-ui/core/MenuItem'; import HistoryIcon from '@material-ui/icons/History'; -const options = [ - 'None', - 'Atria', - 'Callisto', - 'Dione', - 'Ganymede', - 'Hangouts Call', - 'Luna', - 'Oberon', - 'Phobos', - 'Pyxis', - 'Sedna', - 'Titania', - 'Triton', - 'Umbriel', -]; +import Date from 'src/components/Date'; + +import { AddCommentFragment } from './MessageCommentFragment.generated'; +import { CreateFragment } from './MessageCreateFragment.generated'; +import { useMessageEditHistoryQuery } from './MessageEditHistory.generated'; const ITEM_HEIGHT = 48; type Props = { + bugId: string; + commentId: string; iconBtnProps?: IconButtonProps; }; -function EditHistoryMenu({ iconBtnProps }: Props) { +function EditHistoryMenu({ iconBtnProps, bugId, commentId }: Props) { const [anchorEl, setAnchorEl] = React.useState(null); const open = Boolean(anchorEl); + const { loading, error, data } = useMessageEditHistoryQuery({ + variables: { bugIdPrefix: bugId }, + }); + if (loading) return ; + if (error) return

Error: {error}

; + + const comments = data?.repository?.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 comment = comments.find((elem) => elem.id === commentId); + const history = comment?.history; + const handleClick = (event: React.MouseEvent) => { setAnchorEl(event.currentTarget); }; @@ -63,13 +70,12 @@ function EditHistoryMenu({ iconBtnProps }: Props) { }, }} > - {options.map((option) => ( - - {option} + + Edited {history?.length} times. + + {history?.map((edit, index) => ( + + ))} diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx index d36b1044..b117c103 100644 --- a/webui/src/pages/bug/Message.tsx +++ b/webui/src/pages/bug/Message.tsx @@ -96,6 +96,8 @@ function Message({ bug, op }: Props) { {comment.edited && ( )} diff --git a/webui/src/pages/bug/MessageCommentFragment.graphql b/webui/src/pages/bug/MessageCommentFragment.graphql index 337eade0..c852b4b0 100644 --- a/webui/src/pages/bug/MessageCommentFragment.graphql +++ b/webui/src/pages/bug/MessageCommentFragment.graphql @@ -6,4 +6,8 @@ fragment AddComment on AddCommentTimelineItem { ...authored edited message + history { + message + date + } } diff --git a/webui/src/pages/bug/MessageCreateFragment.graphql b/webui/src/pages/bug/MessageCreateFragment.graphql index 81f80afb..1f4647b6 100644 --- a/webui/src/pages/bug/MessageCreateFragment.graphql +++ b/webui/src/pages/bug/MessageCreateFragment.graphql @@ -6,4 +6,8 @@ fragment Create on CreateTimelineItem { ...authored edited message + history { + message + date + } } diff --git a/webui/src/pages/bug/MessageEditHistory.graphql b/webui/src/pages/bug/MessageEditHistory.graphql new file mode 100644 index 00000000..6fde8d45 --- /dev/null +++ b/webui/src/pages/bug/MessageEditHistory.graphql @@ -0,0 +1,15 @@ +#import "./MessageCommentFragment.graphql" +#import "./MessageCreateFragment.graphql" + +query MessageEditHistory($bugIdPrefix: String!) { + repository { + bug(prefix: $bugIdPrefix) { + timeline { + comments: nodes { + ...Create + ...AddComment + } + } + } + } +} -- cgit From d453abdeedcac5b7593f72d63a5641f9a3e99da0 Mon Sep 17 00:00:00 2001 From: Sascha Date: Fri, 19 Mar 2021 11:21:18 +0100 Subject: Move toggle button out of history menu --- webui/src/pages/bug/EditHistoryMenu.tsx | 33 +++++--------------- webui/src/pages/bug/Message.tsx | 54 ++++++++++++++++++++++++++++----- 2 files changed, 54 insertions(+), 33 deletions(-) (limited to 'webui/src') diff --git a/webui/src/pages/bug/EditHistoryMenu.tsx b/webui/src/pages/bug/EditHistoryMenu.tsx index a916a1a8..da2ed0cd 100644 --- a/webui/src/pages/bug/EditHistoryMenu.tsx +++ b/webui/src/pages/bug/EditHistoryMenu.tsx @@ -1,10 +1,8 @@ import React from 'react'; import CircularProgress from '@material-ui/core/CircularProgress'; -import IconButton, { IconButtonProps } from '@material-ui/core/IconButton'; import Menu from '@material-ui/core/Menu'; import MenuItem from '@material-ui/core/MenuItem'; -import HistoryIcon from '@material-ui/icons/History'; import Date from 'src/components/Date'; @@ -15,13 +13,13 @@ import { useMessageEditHistoryQuery } from './MessageEditHistory.generated'; const ITEM_HEIGHT = 48; type Props = { + anchor: null | HTMLElement; bugId: string; commentId: string; - iconBtnProps?: IconButtonProps; + onClose: () => void; }; -function EditHistoryMenu({ iconBtnProps, bugId, commentId }: Props) { - const [anchorEl, setAnchorEl] = React.useState(null); - const open = Boolean(anchorEl); +function EditHistoryMenu({ anchor, bugId, commentId, onClose }: Props) { + const open = Boolean(anchor); const { loading, error, data } = useMessageEditHistoryQuery({ variables: { bugIdPrefix: bugId }, @@ -38,31 +36,14 @@ function EditHistoryMenu({ iconBtnProps, bugId, commentId }: Props) { const comment = comments.find((elem) => elem.id === commentId); const history = comment?.history; - const handleClick = (event: React.MouseEvent) => { - setAnchorEl(event.currentTarget); - }; - - const handleClose = () => { - setAnchorEl(null); - }; - return (
- - - {history?.map((edit, index) => ( - + ))} diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx index b117c103..bf3fb6da 100644 --- a/webui/src/pages/bug/Message.tsx +++ b/webui/src/pages/bug/Message.tsx @@ -5,6 +5,7 @@ import Paper from '@material-ui/core/Paper'; import Tooltip from '@material-ui/core/Tooltip/Tooltip'; import { makeStyles } from '@material-ui/core/styles'; import EditIcon from '@material-ui/icons/Edit'; +import HistoryIcon from '@material-ui/icons/History'; import Author, { Avatar } from 'src/components/Author'; import Content from 'src/components/Content'; @@ -58,7 +59,6 @@ const useStyles = makeStyles((theme) => ({ ...theme.typography.body2, padding: '0.5rem', }, - headerActions2: {}, headerActions: { color: theme.palette.info.contrastText, padding: '0rem', @@ -70,11 +70,55 @@ const useStyles = makeStyles((theme) => ({ }, })); +//TODO move button out of this component and let only menu as component with +//query. Then the query won't execute unless button click renders menu with +//query. +//TODO Fix display of load button spinner. +//TODO Move this button and menu in separate component directory +//TODO fix failing pipeline due to eslint error +type HistBtnProps = { + bugId: string; + commentId: string; +}; +function HistoryMenuToggleButton({ bugId, commentId }: HistBtnProps) { + const classes = useStyles(); + const [anchorEl, setAnchorEl] = React.useState(null); + + const handleClick = (event: React.MouseEvent) => { + setAnchorEl(event.currentTarget); + }; + + const handleClose = () => { + setAnchorEl(null); + }; + + return ( +
+ + + + {anchorEl && ( + + )} +
+ ); +} + type Props = { bug: BugFragment; op: AddCommentFragment | CreateFragment; }; - function Message({ bug, op }: Props) { const classes = useStyles(); const [editMode, switchToEditMode] = useState(false); @@ -94,11 +138,7 @@ function Message({ bug, op }: Props) {
{comment.edited && ( - + )} {() => ( -- cgit From 155b37e81fb3a5f463ddcc0c39790ea9b755d57b Mon Sep 17 00:00:00 2001 From: Sascha Date: Fri, 19 Mar 2021 14:20:54 +0100 Subject: Use dialog with accordion for message history menu --- webui/src/pages/bug/EditHistoryMenu.tsx | 67 --------- webui/src/pages/bug/Message.tsx | 36 ++--- webui/src/pages/bug/MessageHistoryDialog.tsx | 215 +++++++++++++++++++++++++++ 3 files changed, 233 insertions(+), 85 deletions(-) delete mode 100644 webui/src/pages/bug/EditHistoryMenu.tsx create mode 100644 webui/src/pages/bug/MessageHistoryDialog.tsx (limited to 'webui/src') diff --git a/webui/src/pages/bug/EditHistoryMenu.tsx b/webui/src/pages/bug/EditHistoryMenu.tsx deleted file mode 100644 index da2ed0cd..00000000 --- a/webui/src/pages/bug/EditHistoryMenu.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import React from 'react'; - -import CircularProgress from '@material-ui/core/CircularProgress'; -import Menu from '@material-ui/core/Menu'; -import MenuItem from '@material-ui/core/MenuItem'; - -import Date from 'src/components/Date'; - -import { AddCommentFragment } from './MessageCommentFragment.generated'; -import { CreateFragment } from './MessageCreateFragment.generated'; -import { useMessageEditHistoryQuery } from './MessageEditHistory.generated'; - -const ITEM_HEIGHT = 48; - -type Props = { - anchor: null | HTMLElement; - bugId: string; - commentId: string; - onClose: () => void; -}; -function EditHistoryMenu({ anchor, bugId, commentId, onClose }: Props) { - const open = Boolean(anchor); - - const { loading, error, data } = useMessageEditHistoryQuery({ - variables: { bugIdPrefix: bugId }, - }); - if (loading) return ; - if (error) return

Error: {error}

; - - const comments = data?.repository?.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 comment = comments.find((elem) => elem.id === commentId); - const history = comment?.history; - - return ( -
- - - Edited {history?.length} times. - - {history?.map((edit, index) => ( - - - - ))} - -
- ); -} - -export default EditHistoryMenu; diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx index bf3fb6da..51f45a4b 100644 --- a/webui/src/pages/bug/Message.tsx +++ b/webui/src/pages/bug/Message.tsx @@ -14,9 +14,9 @@ import IfLoggedIn from 'src/components/IfLoggedIn/IfLoggedIn'; import { BugFragment } from './Bug.generated'; import EditCommentForm from './EditCommentForm'; -import EditHistoryMenu from './EditHistoryMenu'; import { AddCommentFragment } from './MessageCommentFragment.generated'; import { CreateFragment } from './MessageCreateFragment.generated'; +import MessageHistoryDialog from './MessageHistoryDialog'; const useStyles = makeStyles((theme) => ({ author: { @@ -70,10 +70,6 @@ const useStyles = makeStyles((theme) => ({ }, })); -//TODO move button out of this component and let only menu as component with -//query. Then the query won't execute unless button click renders menu with -//query. -//TODO Fix display of load button spinner. //TODO Move this button and menu in separate component directory //TODO fix failing pipeline due to eslint error type HistBtnProps = { @@ -82,14 +78,14 @@ type HistBtnProps = { }; function HistoryMenuToggleButton({ bugId, commentId }: HistBtnProps) { const classes = useStyles(); - const [anchorEl, setAnchorEl] = React.useState(null); + const [open, setOpen] = React.useState(false); - const handleClick = (event: React.MouseEvent) => { - setAnchorEl(event.currentTarget); + const handleClickOpen = () => { + setOpen(true); }; const handleClose = () => { - setAnchorEl(null); + setOpen(false); }; return ( @@ -98,19 +94,23 @@ function HistoryMenuToggleButton({ bugId, commentId }: HistBtnProps) { aria-label="more" aria-controls="long-menu" aria-haspopup="true" - onClick={handleClick} + onClick={handleClickOpen} className={classes.headerActions} > - {anchorEl && ( - - )} + { + // Render CustomizedDialogs on open to prevent fetching the history + // before opening the history menu. + open && ( + + ) + } ); } diff --git a/webui/src/pages/bug/MessageHistoryDialog.tsx b/webui/src/pages/bug/MessageHistoryDialog.tsx new file mode 100644 index 00000000..c49ac661 --- /dev/null +++ b/webui/src/pages/bug/MessageHistoryDialog.tsx @@ -0,0 +1,215 @@ +import moment from 'moment'; +import React from 'react'; +import Moment from 'react-moment'; + +import MuiAccordion from '@material-ui/core/Accordion'; +import MuiAccordionDetails from '@material-ui/core/AccordionDetails'; +import MuiAccordionSummary from '@material-ui/core/AccordionSummary'; +import CircularProgress from '@material-ui/core/CircularProgress'; +import Dialog from '@material-ui/core/Dialog'; +import MuiDialogContent from '@material-ui/core/DialogContent'; +import MuiDialogTitle from '@material-ui/core/DialogTitle'; +import Grid from '@material-ui/core/Grid'; +import IconButton from '@material-ui/core/IconButton'; +import Tooltip from '@material-ui/core/Tooltip/Tooltip'; +import Typography from '@material-ui/core/Typography'; +import { + createStyles, + Theme, + withStyles, + WithStyles, +} from '@material-ui/core/styles'; +import CloseIcon from '@material-ui/icons/Close'; + +import { AddCommentFragment } from './MessageCommentFragment.generated'; +import { CreateFragment } from './MessageCreateFragment.generated'; +import { useMessageEditHistoryQuery } from './MessageEditHistory.generated'; + +const styles = (theme: Theme) => + createStyles({ + root: { + margin: 0, + padding: theme.spacing(2), + }, + closeButton: { + position: 'absolute', + right: theme.spacing(1), + top: theme.spacing(1), + }, + }); + +export interface DialogTitleProps extends WithStyles { + id: string; + children: React.ReactNode; + onClose: () => void; +} + +const DialogTitle = withStyles(styles)((props: DialogTitleProps) => { + const { children, classes, onClose, ...other } = props; + return ( + + {children} + {onClose ? ( + + + + ) : null} + + ); +}); + +const DialogContent = withStyles((theme: Theme) => ({ + root: { + padding: theme.spacing(2), + }, +}))(MuiDialogContent); + +const Accordion = withStyles({ + root: { + border: '1px solid rgba(0, 0, 0, .125)', + boxShadow: 'none', + '&:not(:last-child)': { + borderBottom: 0, + }, + '&:before': { + display: 'none', + }, + '&$expanded': { + margin: 'auto', + }, + }, + expanded: {}, +})(MuiAccordion); + +const AccordionSummary = withStyles((theme) => ({ + root: { + backgroundColor: theme.palette.primary.light, + borderBottomWidth: '1px', + borderBottomStyle: 'solid', + borderBottomColor: theme.palette.divider, + marginBottom: -1, + minHeight: 56, + '&$expanded': { + minHeight: 56, + }, + }, + content: { + '&$expanded': { + margin: '12px 0', + }, + }, + expanded: {}, +}))(MuiAccordionSummary); + +const AccordionDetails = withStyles((theme) => ({ + root: { + padding: theme.spacing(2), + }, +}))(MuiAccordionDetails); + +type Props = { + bugId: string; + commentId: string; + open: boolean; + onClose: () => void; +}; +function MessageHistoryDialog({ bugId, commentId, open, onClose }: Props) { + const [expanded, setExpanded] = React.useState('panel0'); + + const { loading, error, data } = useMessageEditHistoryQuery({ + variables: { bugIdPrefix: bugId }, + }); + if (loading) { + return ( + + + Loading... + + + + + + + + ); + } + if (error) { + return ( + + + Something went wrong... + + +

Error: {error}

+ + + ); + } + + const comments = data?.repository?.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 comment = comments.find((elem) => elem.id === commentId); + const history = comment?.history; + + const handleChange = (panel: string) => ( + event: React.ChangeEvent<{}>, + newExpanded: boolean + ) => { + setExpanded(newExpanded ? panel : false); + }; + + return ( + + + Edited {history?.length} times. + + + {history?.map((edit, index) => ( + + + + + + + {edit.message} + + ))} + + + ); +} + +export default MessageHistoryDialog; -- cgit From dfb039a9361a1a0d19a31e25130c89f70828ef00 Mon Sep 17 00:00:00 2001 From: Sascha Date: Fri, 19 Mar 2021 14:25:42 +0100 Subject: Rename MessageEditHistoryQuery --- webui/src/pages/bug/MessageEditHistory.graphql | 15 --------------- webui/src/pages/bug/MessageHistory.graphql | 15 +++++++++++++++ webui/src/pages/bug/MessageHistoryDialog.tsx | 4 ++-- 3 files changed, 17 insertions(+), 17 deletions(-) delete mode 100644 webui/src/pages/bug/MessageEditHistory.graphql create mode 100644 webui/src/pages/bug/MessageHistory.graphql (limited to 'webui/src') diff --git a/webui/src/pages/bug/MessageEditHistory.graphql b/webui/src/pages/bug/MessageEditHistory.graphql deleted file mode 100644 index 6fde8d45..00000000 --- a/webui/src/pages/bug/MessageEditHistory.graphql +++ /dev/null @@ -1,15 +0,0 @@ -#import "./MessageCommentFragment.graphql" -#import "./MessageCreateFragment.graphql" - -query MessageEditHistory($bugIdPrefix: String!) { - repository { - bug(prefix: $bugIdPrefix) { - timeline { - comments: nodes { - ...Create - ...AddComment - } - } - } - } -} diff --git a/webui/src/pages/bug/MessageHistory.graphql b/webui/src/pages/bug/MessageHistory.graphql new file mode 100644 index 00000000..e90eb459 --- /dev/null +++ b/webui/src/pages/bug/MessageHistory.graphql @@ -0,0 +1,15 @@ +#import "./MessageCommentFragment.graphql" +#import "./MessageCreateFragment.graphql" + +query MessageHistory($bugIdPrefix: String!) { + repository { + bug(prefix: $bugIdPrefix) { + timeline { + comments: nodes { + ...Create + ...AddComment + } + } + } + } +} diff --git a/webui/src/pages/bug/MessageHistoryDialog.tsx b/webui/src/pages/bug/MessageHistoryDialog.tsx index c49ac661..9857f272 100644 --- a/webui/src/pages/bug/MessageHistoryDialog.tsx +++ b/webui/src/pages/bug/MessageHistoryDialog.tsx @@ -23,7 +23,7 @@ import CloseIcon from '@material-ui/icons/Close'; import { AddCommentFragment } from './MessageCommentFragment.generated'; import { CreateFragment } from './MessageCreateFragment.generated'; -import { useMessageEditHistoryQuery } from './MessageEditHistory.generated'; +import { useMessageHistoryQuery } from './MessageHistory.generated'; const styles = (theme: Theme) => createStyles({ @@ -120,7 +120,7 @@ type Props = { function MessageHistoryDialog({ bugId, commentId, open, onClose }: Props) { const [expanded, setExpanded] = React.useState('panel0'); - const { loading, error, data } = useMessageEditHistoryQuery({ + const { loading, error, data } = useMessageHistoryQuery({ variables: { bugIdPrefix: bugId }, }); if (loading) { -- cgit From de9dd698917f905946c5b0e19039e4202375721d Mon Sep 17 00:00:00 2001 From: Sascha Date: Fri, 19 Mar 2021 14:57:11 +0100 Subject: Sort history from most recent edit to old --- webui/src/pages/bug/MessageHistoryDialog.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'webui/src') diff --git a/webui/src/pages/bug/MessageHistoryDialog.tsx b/webui/src/pages/bug/MessageHistoryDialog.tsx index 9857f272..dc0e09cb 100644 --- a/webui/src/pages/bug/MessageHistoryDialog.tsx +++ b/webui/src/pages/bug/MessageHistoryDialog.tsx @@ -169,7 +169,9 @@ function MessageHistoryDialog({ bugId, commentId, open, onClose }: Props) { // NOTE Searching for the changed comment could be dropped if GraphQL get // filter by id argument for timelineitems const comment = comments.find((elem) => elem.id === commentId); - const history = comment?.history; + // Sort by most recent edit. Must create a copy of constant history as + // reverse() modifies inplace. + const history = comment?.history.slice().reverse(); const handleChange = (panel: string) => ( event: React.ChangeEvent<{}>, @@ -203,6 +205,7 @@ function MessageHistoryDialog({ bugId, commentId, open, onClose }: Props) { + {index === 0 && '• (most recent edit)'} {edit.message} -- cgit From bd316ef9efc5485513d8f2ceeca3938eb0c5b30f Mon Sep 17 00:00:00 2001 From: Sascha Date: Fri, 19 Mar 2021 15:03:27 +0100 Subject: Improve readability of accordion summary --- webui/src/pages/bug/MessageHistoryDialog.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) (limited to 'webui/src') diff --git a/webui/src/pages/bug/MessageHistoryDialog.tsx b/webui/src/pages/bug/MessageHistoryDialog.tsx index dc0e09cb..c359873b 100644 --- a/webui/src/pages/bug/MessageHistoryDialog.tsx +++ b/webui/src/pages/bug/MessageHistoryDialog.tsx @@ -202,10 +202,12 @@ function MessageHistoryDialog({ bugId, commentId, open, onClose }: Props) { aria-controls="panel1d-content" id="panel1d-header" > - - - - {index === 0 && '• (most recent edit)'} + + + + + {index === 0 && '• (most recent edit)'} + {edit.message} -- cgit 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') diff --git a/webui/src/pages/bug/EditCommentForm.tsx b/webui/src/pages/bug/EditCommentForm.tsx index 0794c3ef..8fa659b3 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()}