From 850b9db8744c47b3f42b877078678f62ce77e38d Mon Sep 17 00:00:00 2001 From: Quentin Gliech Date: Wed, 13 Mar 2019 21:16:02 +0100 Subject: [PATCH 1/2] webui: Use Timeline API instead of raw operations --- webui/src/bug/LabelChange.js | 4 ++-- webui/src/bug/Message.js | 14 +++++++------- webui/src/bug/SetStatus.js | 4 ++-- webui/src/bug/SetTitle.js | 4 ++-- webui/src/bug/Timeline.js | 10 +++++----- webui/src/bug/TimelineQuery.js | 10 +++++----- 6 files changed, 23 insertions(+), 23 deletions(-) diff --git a/webui/src/bug/LabelChange.js b/webui/src/bug/LabelChange.js index b1bed4a570977a566bba5eeb9c18724b922ded65..9b19959ecc5960ce12128f43e640167302dbc86b 100644 --- a/webui/src/bug/LabelChange.js +++ b/webui/src/bug/LabelChange.js @@ -36,8 +36,8 @@ const LabelChange = ({ op, classes }) => { }; LabelChange.fragment = gql` - fragment LabelChange on Operation { - ... on LabelChangeOperation { + fragment LabelChange on TimelineItem { + ... on LabelChangeTimelineItem { date author { name diff --git a/webui/src/bug/Message.js b/webui/src/bug/Message.js index a4e3eeb0e92da7636c8242113ad40f0a85db0e09..e858e0032403f5a379252e6e373279befedcc35f 100644 --- a/webui/src/bug/Message.js +++ b/webui/src/bug/Message.js @@ -32,7 +32,7 @@ const Message = ({ op, classes }) => (
commented - +
{op.message} @@ -41,9 +41,9 @@ const Message = ({ op, classes }) => ( ); Message.createFragment = gql` - fragment Create on Operation { - ... on CreateOperation { - date + fragment Create on TimelineItem { + ... on CreateTimelineItem { + createdAt author { name email @@ -55,9 +55,9 @@ Message.createFragment = gql` `; Message.commentFragment = gql` - fragment Comment on Operation { - ... on AddCommentOperation { - date + fragment AddComment on TimelineItem { + ... on AddCommentTimelineItem { + createdAt author { name email diff --git a/webui/src/bug/SetStatus.js b/webui/src/bug/SetStatus.js index 332c8352e8b94a05ca6c9f19036c32d2f0d6989a..4e03fff77051f3b7271e9109efd0b2efa38a6b58 100644 --- a/webui/src/bug/SetStatus.js +++ b/webui/src/bug/SetStatus.js @@ -21,8 +21,8 @@ const SetStatus = ({ op, classes }) => { }; SetStatus.fragment = gql` - fragment SetStatus on Operation { - ... on SetStatusOperation { + fragment SetStatus on TimelineItem { + ... on SetStatusTimelineItem { date author { name diff --git a/webui/src/bug/SetTitle.js b/webui/src/bug/SetTitle.js index 5b17c431e1f208864e893fc96b5c1a09f06e17ae..a32cf791e3df8f4ed0314092d23ec15d49437eed 100644 --- a/webui/src/bug/SetTitle.js +++ b/webui/src/bug/SetTitle.js @@ -27,8 +27,8 @@ const SetTitle = ({ op, classes }) => { }; SetTitle.fragment = gql` - fragment SetTitle on Operation { - ... on SetTitleOperation { + fragment SetTitle on TimelineItem { + ... on SetTitleTimelineItem { date author { name diff --git a/webui/src/bug/Timeline.js b/webui/src/bug/Timeline.js index d331d11d586775b565bfdcbb850091dbd96d8e97..f59907112597f1abde3b7e418d19face5cadc7f5 100644 --- a/webui/src/bug/Timeline.js +++ b/webui/src/bug/Timeline.js @@ -27,15 +27,15 @@ class Timeline extends React.Component {
{ops.map((op, index) => { switch (op.__typename) { - case 'CreateOperation': + case 'CreateTimelineItem': return ; - case 'AddCommentOperation': + case 'AddCommentTimelineItem': return ; - case 'LabelChangeOperation': + case 'LabelChangeTimelineItem': return ; - case 'SetTitleOperation': + case 'SetTitleTimelineItem': return ; - case 'SetStatusOperation': + case 'SetStatusTimelineItem': return ; default: diff --git a/webui/src/bug/TimelineQuery.js b/webui/src/bug/TimelineQuery.js index 78658a6fd1fbbfbe398b84e887f8c63d9425cbf5..ebb20f9d478c428d48925e541b92536ab9cf0b7e 100644 --- a/webui/src/bug/TimelineQuery.js +++ b/webui/src/bug/TimelineQuery.js @@ -12,13 +12,13 @@ const QUERY = gql` query($id: String!, $first: Int = 10, $after: String) { defaultRepository { bug(prefix: $id) { - operations(first: $first, after: $after) { + timeline(first: $first, after: $after) { nodes { - ...Create - ...Comment ...LabelChange - ...SetTitle ...SetStatus + ...SetTitle + ...AddComment + ...Create } pageInfo { hasNextPage @@ -42,7 +42,7 @@ const TimelineQuery = ({ id }) => ( if (error) return

Error: {error}

; return ( ); From 22089b5e628f1356e517d24d0346a8ec2def97fc Mon Sep 17 00:00:00 2001 From: Quentin Gliech Date: Sat, 30 Mar 2019 20:48:19 +0100 Subject: [PATCH 2/2] webui: Rework timeline style --- webui/src/Author.js | 29 ++++++-------- webui/src/bug/Bug.js | 24 ++++++----- webui/src/bug/LabelChange.js | 6 ++- webui/src/bug/Message.js | 77 ++++++++++++++++++++++++------------ webui/src/bug/SetStatus.js | 1 + webui/src/bug/SetTitle.js | 3 +- webui/src/bug/Timeline.js | 2 +- 7 files changed, 88 insertions(+), 54 deletions(-) diff --git a/webui/src/Author.js b/webui/src/Author.js index 7285ed4bd704d1798fd121a3fc34af83210dfa49..7bb1bf3ca7402af163c34d8e7f0021a0549e8ee0 100644 --- a/webui/src/Author.js +++ b/webui/src/Author.js @@ -1,28 +1,25 @@ -import { withStyles } from '@material-ui/core/styles'; import Tooltip from '@material-ui/core/Tooltip/Tooltip'; +import MAvatar from '@material-ui/core/Avatar'; import React from 'react'; -const styles = theme => ({ - author: { - ...theme.typography.body2, - }, - bold: { - fontWeight: 'bold', - }, -}); - -const Author = ({ author, bold, classes }) => { - const klass = bold ? [classes.author, classes.bold] : [classes.author]; - +const Author = ({ author, ...props }) => { if (!author.email) { - return {author.displayName}; + return {author.displayName}; } return ( - {author.displayName} + {author.displayName} ); }; -export default withStyles(styles)(Author); +export const Avatar = ({ author, ...props }) => { + if (author.avatarUrl) { + return ; + } + + return {author.displayName[0]}; +}; + +export default Author; diff --git a/webui/src/bug/Bug.js b/webui/src/bug/Bug.js index 496d0c4f89d5e875a1ae2980be88214676c7c5cb..9b5f84ad19a77fd0d31005dcfc1cdd15fb193e28 100644 --- a/webui/src/bug/Bug.js +++ b/webui/src/bug/Bug.js @@ -9,29 +9,32 @@ import Label from '../Label'; const styles = theme => ({ main: { - maxWidth: 600, + maxWidth: 800, margin: 'auto', marginTop: theme.spacing.unit * 4, }, - header: {}, + header: { + marginLeft: theme.spacing.unit + 40, + }, title: { ...theme.typography.headline, }, id: { ...theme.typography.subheading, - marginLeft: 15, + marginLeft: theme.spacing.unit, }, container: { display: 'flex', - marginBottom: 30, + marginBottom: theme.spacing.unit, }, timeline: { - width: '70%', - marginTop: 20, - marginRight: 20, + flex: 1, + marginTop: theme.spacing.unit * 2, + marginRight: theme.spacing.unit * 2, }, sidebar: { - width: '30%', + marginTop: theme.spacing.unit * 2, + flex: '0 0 200px', }, labelList: { listStyle: 'none', @@ -39,7 +42,8 @@ const styles = theme => ({ margin: 0, }, label: { - margin: '4px 0', + marginTop: theme.spacing.unit, + marginBottom: theme.spacing.unit, '& > *': { display: 'block', }, @@ -54,7 +58,7 @@ const Bug = ({ bug, classes }) => ( - opened this bug + {' opened this bug '}
diff --git a/webui/src/bug/LabelChange.js b/webui/src/bug/LabelChange.js index 9b19959ecc5960ce12128f43e640167302dbc86b..6301f35f36a8ed73dab9b1fc2137a57665346889 100644 --- a/webui/src/bug/LabelChange.js +++ b/webui/src/bug/LabelChange.js @@ -8,6 +8,10 @@ import Label from '../Label'; const styles = theme => ({ main: { ...theme.typography.body2, + marginLeft: theme.spacing.unit + 40, + }, + author: { + fontWeight: 'bold', }, }); @@ -15,7 +19,7 @@ const LabelChange = ({ op, classes }) => { const { added, removed } = op; return (
- + {added.length > 0 && added the } {added.map((label, index) => (