From 9280e437b06c1812d9b4a62f18686878f9b7a769 Mon Sep 17 00:00:00 2001 From: Sascha Date: Fri, 26 Feb 2021 19:07:11 +0100 Subject: Fix Bug description header for dark mode --- webui/src/pages/bug/Message.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'webui/src/pages/bug') diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx index 91549483..0cc9b15a 100644 --- a/webui/src/pages/bug/Message.tsx +++ b/webui/src/pages/bug/Message.tsx @@ -1,7 +1,7 @@ import React from 'react'; import Paper from '@material-ui/core/Paper'; -import { makeStyles } from '@material-ui/core/styles'; +import { fade, makeStyles } from '@material-ui/core/styles'; import Author, { Avatar } from 'src/components/Author'; import Content from 'src/components/Content'; @@ -27,11 +27,11 @@ const useStyles = makeStyles((theme) => ({ }, header: { ...theme.typography.body1, - color: '#444', + color: theme.palette.text.secondary, padding: '0.5rem 1rem', - borderBottom: '1px solid #ddd', + borderBottom: `1px solid ${theme.palette.divider}`, display: 'flex', - backgroundColor: '#e2f1ff', + backgroundColor: fade(theme.palette.text.hint, 0.05), }, title: { flex: 1, -- cgit From 9f6dcc887d31ce5c9cb5438b4e0e6c834c9d81d6 Mon Sep 17 00:00:00 2001 From: Sascha Date: Tue, 2 Mar 2021 17:13:11 +0100 Subject: Use proper semantic color values Adjust header colors on light theme - Use adjusted background-color for header instead of text.hint. - Use slightly darker secondary font color for better readability against the head background color. Use more semantic theme colors for bug list Use more semantic theme colors for bug messages Fix usage of text hint for filter header --- webui/src/pages/bug/Message.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'webui/src/pages/bug') diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx index 0cc9b15a..f2f62b52 100644 --- a/webui/src/pages/bug/Message.tsx +++ b/webui/src/pages/bug/Message.tsx @@ -1,7 +1,7 @@ import React from 'react'; import Paper from '@material-ui/core/Paper'; -import { fade, makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/core/styles'; import Author, { Avatar } from 'src/components/Author'; import Content from 'src/components/Content'; @@ -31,7 +31,9 @@ const useStyles = makeStyles((theme) => ({ padding: '0.5rem 1rem', borderBottom: `1px solid ${theme.palette.divider}`, display: 'flex', - backgroundColor: fade(theme.palette.text.hint, 0.05), + borderTopRightRadius: theme.shape.borderRadius, + borderTopLeftRadius: theme.shape.borderRadius, + backgroundColor: theme.palette.info.main, }, title: { flex: 1, -- cgit From c8a5330bdeabbf2c83890ca096281cd09159cc10 Mon Sep 17 00:00:00 2001 From: Sascha Date: Wed, 3 Mar 2021 13:02:27 +0100 Subject: Fix padding around issue comments --- webui/src/pages/bug/Message.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'webui/src/pages/bug') diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx index f2f62b52..d27f7a3d 100644 --- a/webui/src/pages/bug/Message.tsx +++ b/webui/src/pages/bug/Message.tsx @@ -49,7 +49,7 @@ const useStyles = makeStyles((theme) => ({ }, body: { ...theme.typography.body2, - padding: '0 1rem', + padding: '0.5rem', }, })); -- cgit From 79422fafb28294ad1e2ae6fe25a6d2788f57d3af Mon Sep 17 00:00:00 2001 From: Sascha Date: Thu, 4 Mar 2021 14:08:59 +0100 Subject: Use info.contrastText instead of text.secondary This will ensure better color managment for Message titles --- webui/src/pages/bug/Message.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'webui/src/pages/bug') diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx index d27f7a3d..faff5356 100644 --- a/webui/src/pages/bug/Message.tsx +++ b/webui/src/pages/bug/Message.tsx @@ -27,13 +27,13 @@ const useStyles = makeStyles((theme) => ({ }, header: { ...theme.typography.body1, - color: theme.palette.text.secondary, padding: '0.5rem 1rem', borderBottom: `1px solid ${theme.palette.divider}`, display: 'flex', borderTopRightRadius: theme.shape.borderRadius, borderTopLeftRadius: theme.shape.borderRadius, backgroundColor: theme.palette.info.main, + color: theme.palette.info.contrastText, }, title: { flex: 1, -- cgit From d0505e2f9ab9483f370ba547cb93ce6cc388f241 Mon Sep 17 00:00:00 2001 From: Sascha Date: Sun, 14 Mar 2021 15:44:32 +0100 Subject: Use success.dark for green-button:hover --- webui/src/pages/bug/CommentForm.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) (limited to 'webui/src/pages/bug') diff --git a/webui/src/pages/bug/CommentForm.tsx b/webui/src/pages/bug/CommentForm.tsx index 0b97e133..773e7d0e 100644 --- a/webui/src/pages/bug/CommentForm.tsx +++ b/webui/src/pages/bug/CommentForm.tsx @@ -32,10 +32,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.primary.contrastText, }, }, })); -- cgit From c223c75c11f3ec903413207dd275152e1ec97fcc Mon Sep 17 00:00:00 2001 From: Lena Date: Sun, 28 Feb 2021 00:18:03 +0100 Subject: Add back-to-list-button #10 --- webui/src/pages/bug/CommentForm.tsx | 11 +++++++++++ 1 file changed, 11 insertions(+) (limited to 'webui/src/pages/bug') diff --git a/webui/src/pages/bug/CommentForm.tsx b/webui/src/pages/bug/CommentForm.tsx index 0b97e133..6ec9bf2a 100644 --- a/webui/src/pages/bug/CommentForm.tsx +++ b/webui/src/pages/bug/CommentForm.tsx @@ -28,6 +28,7 @@ const useStyles = makeStyles((theme) => ({ }, actions: { display: 'flex', + gap: '1em', justifyContent: 'flex-end', }, greenButton: { @@ -38,6 +39,13 @@ const useStyles = makeStyles((theme) => ({ backgroundColor: '#2ea44f', }, }, + backButton: { + backgroundColor: '#574142', + color: '#fff', + '&:hover': { + backgroundColor: '#610B0B', + }, + }, })); type Props = { @@ -101,6 +109,9 @@ function CommentForm({ bug }: Props) { onChange={(comment: string) => setIssueComment(comment)} />
+ {bug.status === 'OPEN' ? getCloseButton() : getReopenButton()}
diff --git a/webui/src/pages/bug/CommentForm.tsx b/webui/src/pages/bug/CommentForm.tsx index 6ec9bf2a..e53c7ddd 100644 --- a/webui/src/pages/bug/CommentForm.tsx +++ b/webui/src/pages/bug/CommentForm.tsx @@ -39,13 +39,6 @@ const useStyles = makeStyles((theme) => ({ backgroundColor: '#2ea44f', }, }, - backButton: { - backgroundColor: '#574142', - color: '#fff', - '&:hover': { - backgroundColor: '#610B0B', - }, - }, })); type Props = { @@ -109,9 +102,6 @@ function CommentForm({ bug }: Props) { onChange={(comment: string) => setIssueComment(comment)} />
- {bug.status === 'OPEN' ? getCloseButton() : getReopenButton()} +
@@ -98,8 +118,8 @@ function Bug({ bug }: Props) { )}
-
- Labels +
+ Labels
    {bug.labels.length === 0 && ( None yet @@ -110,15 +130,6 @@ function Bug({ bug }: Props) { ))}
-
diff --git a/webui/src/pages/bug/BugQuery.tsx b/webui/src/pages/bug/BugQuery.tsx index 2a70a2f8..ade64e9d 100644 --- a/webui/src/pages/bug/BugQuery.tsx +++ b/webui/src/pages/bug/BugQuery.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { RouteComponentProps } from 'react-router-dom'; +import { Redirect, RouteComponentProps } from 'react-router-dom'; import CircularProgress from '@material-ui/core/CircularProgress'; @@ -15,8 +15,8 @@ const BugQuery: React.FC = ({ match }: Props) => { variables: { id: match.params.id }, }); if (loading) return ; + if (!data?.repository?.bug) return ; if (error) return

Error: {error}

; - if (!data?.repository?.bug) return

404.

; return ; }; -- cgit From 46d38aa53fa925a2335fdf6c3b0b6f47d05dce94 Mon Sep 17 00:00:00 2001 From: Lena Date: Tue, 2 Mar 2021 20:15:39 +0100 Subject: Route instead of Redirect from empty bug to 404 after a hint from GM #10 --- webui/src/pages/bug/BugQuery.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'webui/src/pages/bug') diff --git a/webui/src/pages/bug/BugQuery.tsx b/webui/src/pages/bug/BugQuery.tsx index ade64e9d..5d459c42 100644 --- a/webui/src/pages/bug/BugQuery.tsx +++ b/webui/src/pages/bug/BugQuery.tsx @@ -1,8 +1,10 @@ import React from 'react'; -import { Redirect, RouteComponentProps } from 'react-router-dom'; +import { RouteComponentProps } from 'react-router-dom'; import CircularProgress from '@material-ui/core/CircularProgress'; +import NotFoundPage from '../notfound/NotFoundPage'; + import Bug from './Bug'; import { useGetBugQuery } from './BugQuery.generated'; @@ -15,7 +17,7 @@ const BugQuery: React.FC = ({ match }: Props) => { variables: { id: match.params.id }, }); if (loading) return ; - if (!data?.repository?.bug) return ; + if (!data?.repository?.bug) return ; if (error) return

Error: {error}

; return ; }; -- cgit From de26990afc9f21a9017b039ba9d7546a8d8ea5da Mon Sep 17 00:00:00 2001 From: Sascha Date: Thu, 11 Mar 2021 12:47:09 +0100 Subject: Adjust BackToList button color for dark/light-mode The AppBar is commonly used for navigation. As the BackToList button is a navigation element, use similar colors as the AppBar. --- webui/src/pages/bug/Bug.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) (limited to 'webui/src/pages/bug') diff --git a/webui/src/pages/bug/Bug.tsx b/webui/src/pages/bug/Bug.tsx index 8b537fb8..343721b4 100644 --- a/webui/src/pages/bug/Bug.tsx +++ b/webui/src/pages/bug/Bug.tsx @@ -76,10 +76,11 @@ const useStyles = makeStyles((theme) => ({ backButton: { position: 'sticky', top: '80px', - backgroundColor: '#574142', - color: '#fff', + backgroundColor: theme.palette.primary.dark, + color: theme.palette.primary.contrastText, '&:hover': { - backgroundColor: '#610B0B', + backgroundColor: theme.palette.primary.main, + color: theme.palette.primary.contrastText, }, }, })); -- cgit From cd02d80ca2458be40d64d2e945670e0aeeb30fcc Mon Sep 17 00:00:00 2001 From: Lena Date: Sat, 13 Mar 2021 23:12:24 +0100 Subject: Make BackButton a component and Add it to NewBugPage #10 --- webui/src/pages/bug/BackButton.tsx | 36 ++++++++++++++++++++++++++++++++++++ webui/src/pages/bug/Bug.tsx | 23 ++--------------------- 2 files changed, 38 insertions(+), 21 deletions(-) create mode 100644 webui/src/pages/bug/BackButton.tsx (limited to 'webui/src/pages/bug') diff --git a/webui/src/pages/bug/BackButton.tsx b/webui/src/pages/bug/BackButton.tsx new file mode 100644 index 00000000..4c73dd0a --- /dev/null +++ b/webui/src/pages/bug/BackButton.tsx @@ -0,0 +1,36 @@ +import React from 'react'; + +import Button from '@material-ui/core/Button'; +import { makeStyles } from '@material-ui/core/styles'; +import ArrowBackIcon from '@material-ui/icons/ArrowBack'; + +const useStyles = makeStyles((theme) => ({ + backButton: { + position: 'sticky', + top: '80px', + backgroundColor: theme.palette.primary.dark, + color: theme.palette.primary.contrastText, + '&:hover': { + backgroundColor: theme.palette.primary.main, + color: theme.palette.primary.contrastText, + }, + }, +})); + +function BackButton() { + const classes = useStyles(); + + return ( + + ); +} + +export default BackButton; diff --git a/webui/src/pages/bug/Bug.tsx b/webui/src/pages/bug/Bug.tsx index 343721b4..aa6247f2 100644 --- a/webui/src/pages/bug/Bug.tsx +++ b/webui/src/pages/bug/Bug.tsx @@ -1,13 +1,12 @@ import React from 'react'; -import Button from '@material-ui/core/Button'; import { makeStyles } from '@material-ui/core/styles'; -import ArrowBackIcon from '@material-ui/icons/ArrowBack'; import BugTitleForm from 'src/components/BugTitleForm/BugTitleForm'; import IfLoggedIn from 'src/components/IfLoggedIn/IfLoggedIn'; import Label from 'src/components/Label'; +import BackButton from './BackButton'; import { BugFragment } from './Bug.generated'; import CommentForm from './CommentForm'; import TimelineQuery from './TimelineQuery'; @@ -73,16 +72,6 @@ const useStyles = makeStyles((theme) => ({ commentForm: { marginLeft: 48, }, - backButton: { - position: 'sticky', - top: '80px', - backgroundColor: theme.palette.primary.dark, - color: theme.palette.primary.contrastText, - '&:hover': { - backgroundColor: theme.palette.primary.main, - color: theme.palette.primary.contrastText, - }, - }, })); type Props = { @@ -99,15 +88,7 @@ function Bug({ bug }: Props) {
- +
-- cgit From ac17596c1ab94b6426bb5b48e39ed0dd9038303e Mon Sep 17 00:00:00 2001 From: Lena Date: Mon, 15 Mar 2021 14:52:06 +0100 Subject: Refactor BackToListButton #10 --- webui/src/pages/bug/BackButton.tsx | 36 ------------------------------------ webui/src/pages/bug/Bug.tsx | 4 ++-- 2 files changed, 2 insertions(+), 38 deletions(-) delete mode 100644 webui/src/pages/bug/BackButton.tsx (limited to 'webui/src/pages/bug') diff --git a/webui/src/pages/bug/BackButton.tsx b/webui/src/pages/bug/BackButton.tsx deleted file mode 100644 index 4c73dd0a..00000000 --- a/webui/src/pages/bug/BackButton.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import React from 'react'; - -import Button from '@material-ui/core/Button'; -import { makeStyles } from '@material-ui/core/styles'; -import ArrowBackIcon from '@material-ui/icons/ArrowBack'; - -const useStyles = makeStyles((theme) => ({ - backButton: { - position: 'sticky', - top: '80px', - backgroundColor: theme.palette.primary.dark, - color: theme.palette.primary.contrastText, - '&:hover': { - backgroundColor: theme.palette.primary.main, - color: theme.palette.primary.contrastText, - }, - }, -})); - -function BackButton() { - const classes = useStyles(); - - return ( - - ); -} - -export default BackButton; diff --git a/webui/src/pages/bug/Bug.tsx b/webui/src/pages/bug/Bug.tsx index aa6247f2..9ce2f6a6 100644 --- a/webui/src/pages/bug/Bug.tsx +++ b/webui/src/pages/bug/Bug.tsx @@ -2,11 +2,11 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; +import BackToListButton from '../../components/BackToListButton/BackToListButton'; import BugTitleForm from 'src/components/BugTitleForm/BugTitleForm'; import IfLoggedIn from 'src/components/IfLoggedIn/IfLoggedIn'; import Label from 'src/components/Label'; -import BackButton from './BackButton'; import { BugFragment } from './Bug.generated'; import CommentForm from './CommentForm'; import TimelineQuery from './TimelineQuery'; @@ -88,7 +88,7 @@ function Bug({ bug }: Props) {
- +
-- cgit From 09fabc98a357454b2c4da4f08ce269bb4106c36a Mon Sep 17 00:00:00 2001 From: Lena Date: Mon, 15 Mar 2021 15:40:25 +0100 Subject: Adjust Button #10 --- webui/src/pages/bug/Bug.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'webui/src/pages/bug') diff --git a/webui/src/pages/bug/Bug.tsx b/webui/src/pages/bug/Bug.tsx index 9ce2f6a6..bde8c5dd 100644 --- a/webui/src/pages/bug/Bug.tsx +++ b/webui/src/pages/bug/Bug.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; -import BackToListButton from '../../components/BackToListButton/BackToListButton'; +import BackToListButton from '../../components/BackToListButton'; import BugTitleForm from 'src/components/BugTitleForm/BugTitleForm'; import IfLoggedIn from 'src/components/IfLoggedIn/IfLoggedIn'; import Label from 'src/components/Label'; -- cgit 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/pages/bug') 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/pages/bug') 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/pages/bug') 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/pages/bug') 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/pages/bug') 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/pages/bug') 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/pages/bug') 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/pages/bug/EditCommentForm.tsx | 43 ++++++++++++--------------------- webui/src/pages/bug/Message.tsx | 22 +++++++++-------- 2 files changed, 27 insertions(+), 38 deletions(-) (limited to 'webui/src/pages/bug') 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/pages/bug') 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/pages/bug') 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/pages/bug') 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/pages/bug') 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/pages/bug') 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/pages/bug') 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/pages/bug') 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/pages/bug') 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/pages/bug') 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/pages/bug') 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/pages/bug') 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/pages/bug') 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/pages/bug') 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/pages/bug') 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()}
-
- -
-- cgit From bd6159a25b548f8f939f137b70dcf77a722e70dc Mon Sep 17 00:00:00 2001 From: Sascha Date: Mon, 22 Mar 2021 13:47:44 +0100 Subject: Treat description not as edit --- webui/src/pages/bug/MessageHistoryDialog.tsx | 29 +++++++++++++++++++--------- 1 file changed, 20 insertions(+), 9 deletions(-) (limited to 'webui/src/pages/bug') diff --git a/webui/src/pages/bug/MessageHistoryDialog.tsx b/webui/src/pages/bug/MessageHistoryDialog.tsx index 139eb4a5..0ed33642 100644 --- a/webui/src/pages/bug/MessageHistoryDialog.tsx +++ b/webui/src/pages/bug/MessageHistoryDialog.tsx @@ -173,6 +173,7 @@ function MessageHistoryDialog({ bugId, commentId, open, onClose }: Props) { // Sort by most recent edit. Must create a copy of constant history as // reverse() modifies inplace. const history = comment?.history.slice().reverse(); + const editCount = history?.length === undefined ? 0 : history?.length - 1; const handleChange = (panel: string) => ( event: React.ChangeEvent<{}>, @@ -181,6 +182,23 @@ function MessageHistoryDialog({ bugId, commentId, open, onClose }: Props) { setExpanded(newExpanded ? panel : false); }; + const getSummary = (index: number, date: Date) => { + const desc = + index === editCount ? 'Created ' : `#${editCount - index} • Edited `; + const mostRecent = index === 0 ? ' (most recent)' : ''; + return ( + <> + + + {desc} + + {mostRecent} + + + + ); + }; + return ( - Edited {history?.length} times. + {`Edited ${editCount} ${editCount > 1 ? 'times' : 'time'}.`} {history?.map((edit, index) => ( @@ -204,14 +222,7 @@ function MessageHistoryDialog({ bugId, commentId, open, onClose }: Props) { aria-controls="panel1d-content" id="panel1d-header" > - - {`#${history?.length - index} • Edited `} - - - - {index === 0 && ' (most recent edit)'} - {index === history?.length - 1 && ' (Initial description)'} - + {getSummary(index, edit.date)} {edit.message} -- cgit