diff options
Diffstat (limited to 'webui/src/pages/bug')
-rw-r--r-- | webui/src/pages/bug/Bug.graphql | 13 | ||||
-rw-r--r-- | webui/src/pages/bug/Bug.tsx | 113 | ||||
-rw-r--r-- | webui/src/pages/bug/BugQuery.graphql | 9 | ||||
-rw-r--r-- | webui/src/pages/bug/BugQuery.tsx | 23 | ||||
-rw-r--r-- | webui/src/pages/bug/CommentForm.graphql | 5 | ||||
-rw-r--r-- | webui/src/pages/bug/CommentForm.tsx | 146 | ||||
-rw-r--r-- | webui/src/pages/bug/LabelChange.tsx | 50 | ||||
-rw-r--r-- | webui/src/pages/bug/LabelChangeFragment.graphql | 12 | ||||
-rw-r--r-- | webui/src/pages/bug/Message.tsx | 80 | ||||
-rw-r--r-- | webui/src/pages/bug/MessageCommentFragment.graphql | 8 | ||||
-rw-r--r-- | webui/src/pages/bug/MessageCreateFragment.graphql | 8 | ||||
-rw-r--r-- | webui/src/pages/bug/SetStatus.tsx | 40 | ||||
-rw-r--r-- | webui/src/pages/bug/SetStatusFragment.graphql | 7 | ||||
-rw-r--r-- | webui/src/pages/bug/SetTitle.tsx | 45 | ||||
-rw-r--r-- | webui/src/pages/bug/SetTitleFragment.graphql | 8 | ||||
-rw-r--r-- | webui/src/pages/bug/Timeline.tsx | 49 | ||||
-rw-r--r-- | webui/src/pages/bug/TimelineQuery.graphql | 39 | ||||
-rw-r--r-- | webui/src/pages/bug/TimelineQuery.tsx | 31 | ||||
-rw-r--r-- | webui/src/pages/bug/index.tsx | 1 |
19 files changed, 687 insertions, 0 deletions
diff --git a/webui/src/pages/bug/Bug.graphql b/webui/src/pages/bug/Bug.graphql new file mode 100644 index 00000000..498242c0 --- /dev/null +++ b/webui/src/pages/bug/Bug.graphql @@ -0,0 +1,13 @@ +#import "../components/fragments.graphql" + +fragment Bug on Bug { + id + humanId + status + title + labels { + ...Label + } + createdAt + ...authored +} diff --git a/webui/src/pages/bug/Bug.tsx b/webui/src/pages/bug/Bug.tsx new file mode 100644 index 00000000..1bc128dd --- /dev/null +++ b/webui/src/pages/bug/Bug.tsx @@ -0,0 +1,113 @@ +import React from 'react'; + +import Typography from '@material-ui/core/Typography/Typography'; +import { makeStyles } from '@material-ui/core/styles'; + +import Author from 'src/components/Author'; +import Date from 'src/components/Date'; +import Label from 'src/components/Label'; + +import { BugFragment } from './Bug.generated'; +import CommentForm from './CommentForm'; +import TimelineQuery from './TimelineQuery'; + +const useStyles = makeStyles(theme => ({ + main: { + maxWidth: 1000, + margin: 'auto', + marginTop: theme.spacing(4), + }, + header: { + marginLeft: theme.spacing(3) + 40, + }, + title: { + ...theme.typography.h5, + }, + id: { + ...theme.typography.subtitle1, + marginLeft: theme.spacing(1), + }, + container: { + display: 'flex', + marginBottom: theme.spacing(1), + marginRight: theme.spacing(2), + marginLeft: theme.spacing(2), + }, + timeline: { + flex: 1, + marginTop: theme.spacing(2), + marginRight: theme.spacing(2), + minWidth: 400, + }, + sidebar: { + marginTop: theme.spacing(2), + flex: '0 0 200px', + }, + sidebarTitle: { + fontWeight: 'bold', + }, + labelList: { + listStyle: 'none', + padding: 0, + margin: 0, + }, + label: { + marginTop: theme.spacing(1), + marginBottom: theme.spacing(1), + '& > *': { + display: 'block', + }, + }, + noLabel: { + ...theme.typography.body2, + }, + commentForm: { + marginLeft: 48, + }, +})); + +type Props = { + bug: BugFragment; +}; + +function Bug({ bug }: Props) { + const classes = useStyles(); + return ( + <main className={classes.main}> + <div className={classes.header}> + <span className={classes.title}>{bug.title}</span> + <span className={classes.id}>{bug.humanId}</span> + + <Typography color={'textSecondary'}> + <Author author={bug.author} /> + {' opened this bug '} + <Date date={bug.createdAt} /> + </Typography> + </div> + + <div className={classes.container}> + <div className={classes.timeline}> + <TimelineQuery id={bug.id} /> + <div className={classes.commentForm}> + <CommentForm bugId={bug.id} /> + </div> + </div> + <div className={classes.sidebar}> + <span className={classes.sidebarTitle}>Labels</span> + <ul className={classes.labelList}> + {bug.labels.length === 0 && ( + <span className={classes.noLabel}>None yet</span> + )} + {bug.labels.map(l => ( + <li className={classes.label} key={l.name}> + <Label label={l} key={l.name} /> + </li> + ))} + </ul> + </div> + </div> + </main> + ); +} + +export default Bug; diff --git a/webui/src/pages/bug/BugQuery.graphql b/webui/src/pages/bug/BugQuery.graphql new file mode 100644 index 00000000..cdc4723f --- /dev/null +++ b/webui/src/pages/bug/BugQuery.graphql @@ -0,0 +1,9 @@ +#import "./Bug.graphql" + +query GetBug($id: String!) { + repository { + bug(prefix: $id) { + ...Bug + } + } +} diff --git a/webui/src/pages/bug/BugQuery.tsx b/webui/src/pages/bug/BugQuery.tsx new file mode 100644 index 00000000..2a70a2f8 --- /dev/null +++ b/webui/src/pages/bug/BugQuery.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import { RouteComponentProps } from 'react-router-dom'; + +import CircularProgress from '@material-ui/core/CircularProgress'; + +import Bug from './Bug'; +import { useGetBugQuery } from './BugQuery.generated'; + +type Props = RouteComponentProps<{ + id: string; +}>; + +const BugQuery: React.FC<Props> = ({ match }: Props) => { + const { loading, error, data } = useGetBugQuery({ + variables: { id: match.params.id }, + }); + if (loading) return <CircularProgress />; + if (error) return <p>Error: {error}</p>; + if (!data?.repository?.bug) return <p>404.</p>; + return <Bug bug={data.repository.bug} />; +}; + +export default BugQuery; diff --git a/webui/src/pages/bug/CommentForm.graphql b/webui/src/pages/bug/CommentForm.graphql new file mode 100644 index 00000000..33d21193 --- /dev/null +++ b/webui/src/pages/bug/CommentForm.graphql @@ -0,0 +1,5 @@ +mutation AddComment($input: AddCommentInput!) { + addComment(input: $input) { + operation { id } + } +} diff --git a/webui/src/pages/bug/CommentForm.tsx b/webui/src/pages/bug/CommentForm.tsx new file mode 100644 index 00000000..3724baf0 --- /dev/null +++ b/webui/src/pages/bug/CommentForm.tsx @@ -0,0 +1,146 @@ +import React, { useState, useRef } from 'react'; + +import Button from '@material-ui/core/Button'; +import Paper from '@material-ui/core/Paper'; +import Tab from '@material-ui/core/Tab'; +import Tabs from '@material-ui/core/Tabs'; +import TextField from '@material-ui/core/TextField'; +import { makeStyles, Theme } from '@material-ui/core/styles'; + +import Content from 'src/components/Content'; + +import { useAddCommentMutation } from './CommentForm.generated'; +import { TimelineDocument } from './TimelineQuery.generated'; + +type StyleProps = { loading: boolean }; +const useStyles = makeStyles<Theme, StyleProps>(theme => ({ + container: { + margin: theme.spacing(2, 0), + 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', + }, +})); + +type TabPanelProps = { + children: React.ReactNode; + value: number; + index: number; +} & React.HTMLProps<HTMLDivElement>; +function TabPanel({ children, value, index, ...props }: TabPanelProps) { + return ( + <div + role="tabpanel" + hidden={value !== index} + id={`editor-tabpanel-${index}`} + aria-labelledby={`editor-tab-${index}`} + {...props} + > + {value === index && children} + </div> + ); +} + +const a11yProps = (index: number) => ({ + id: `editor-tab-${index}`, + 'aria-controls': `editor-tabpanel-${index}`, +}); + +type Props = { + bugId: string; +}; + +function CommentForm({ bugId }: Props) { + const [addComment, { loading }] = useAddCommentMutation(); + const [input, setInput] = useState<string>(''); + const [tab, setTab] = useState(0); + const classes = useStyles({ loading }); + const form = useRef<HTMLFormElement>(null); + + const submit = () => { + addComment({ + variables: { + input: { + prefix: bugId, + message: input, + }, + }, + refetchQueries: [ + // TODO: update the cache instead of refetching + { + query: TimelineDocument, + variables: { + id: bugId, + first: 100, + }, + }, + ], + awaitRefetchQueries: true, + }).then(() => setInput('')); + }; + + const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => { + e.preventDefault(); + submit(); + }; + + const handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => { + // Submit on cmd/ctrl+enter + if ((e.metaKey || e.altKey) && e.keyCode === 13) { + submit(); + } + }; + + return ( + <Paper className={classes.container}> + <form onSubmit={handleSubmit} ref={form}> + <Tabs value={tab} onChange={(_, t) => setTab(t)}> + <Tab label="Write" {...a11yProps(0)} /> + <Tab label="Preview" {...a11yProps(1)} /> + </Tabs> + <div className={classes.tabContent}> + <TabPanel value={tab} index={0}> + <TextField + onKeyDown={handleKeyDown} + fullWidth + label="Comment" + placeholder="Leave a comment" + className={classes.textarea} + multiline + value={input} + variant="filled" + rows="4" // TODO: rowsMin support + onChange={(e: any) => setInput(e.target.value)} + disabled={loading} + /> + </TabPanel> + <TabPanel value={tab} index={1} className={classes.preview}> + <Content markdown={input} /> + </TabPanel> + </div> + <div className={classes.actions}> + <Button + variant="contained" + color="primary" + type="submit" + disabled={loading} + > + Comment + </Button> + </div> + </form> + </Paper> + ); +} + +export default CommentForm; diff --git a/webui/src/pages/bug/LabelChange.tsx b/webui/src/pages/bug/LabelChange.tsx new file mode 100644 index 00000000..93fa8a32 --- /dev/null +++ b/webui/src/pages/bug/LabelChange.tsx @@ -0,0 +1,50 @@ +import React from 'react'; + +import { makeStyles } from '@material-ui/core/styles'; + +import Author from 'src/components/Author'; +import Date from 'src/components/Date'; +import Label from 'src/components/Label'; + +import { LabelChangeFragment } from './LabelChangeFragment.generated'; + +const useStyles = makeStyles(theme => ({ + main: { + ...theme.typography.body2, + marginLeft: theme.spacing(1) + 40, + }, + author: { + fontWeight: 'bold', + }, +})); + +type Props = { + op: LabelChangeFragment; +}; + +function LabelChange({ op }: Props) { + const { added, removed } = op; + const classes = useStyles(); + return ( + <div className={classes.main}> + <Author author={op.author} className={classes.author} /> + {added.length > 0 && <span> added the </span>} + {added.map((label, index) => ( + <Label key={index} label={label} /> + ))} + {added.length > 0 && removed.length > 0 && <span> and</span>} + {removed.length > 0 && <span> removed the </span>} + {removed.map((label, index) => ( + <Label key={index} label={label} /> + ))} + <span> + {' '} + label + {added.length + removed.length > 1 && 's'}{' '} + </span> + <Date date={op.date} /> + </div> + ); +} + +export default LabelChange; diff --git a/webui/src/pages/bug/LabelChangeFragment.graphql b/webui/src/pages/bug/LabelChangeFragment.graphql new file mode 100644 index 00000000..82d41235 --- /dev/null +++ b/webui/src/pages/bug/LabelChangeFragment.graphql @@ -0,0 +1,12 @@ +#import "../../components/fragments.graphql" + +fragment LabelChange on LabelChangeTimelineItem { + date + ...authored + added { + ...Label + } + removed { + ...Label + } +} diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx new file mode 100644 index 00000000..4a438b77 --- /dev/null +++ b/webui/src/pages/bug/Message.tsx @@ -0,0 +1,80 @@ +import React from 'react'; + +import Paper from '@material-ui/core/Paper'; +import { makeStyles } from '@material-ui/core/styles'; + +import Author, { Avatar } from 'src/components/Author'; +import Content from 'src/components/Content'; +import Date from 'src/components/Date'; + +import { AddCommentFragment } from './MessageCommentFragment.generated'; +import { CreateFragment } from './MessageCreateFragment.generated'; + +const useStyles = makeStyles(theme => ({ + author: { + fontWeight: 'bold', + }, + container: { + display: 'flex', + }, + avatar: { + marginTop: 2, + }, + bubble: { + flex: 1, + marginLeft: theme.spacing(1), + minWidth: 0, + }, + header: { + ...theme.typography.body1, + color: '#444', + padding: '0.5rem 1rem', + borderBottom: '1px solid #ddd', + display: 'flex', + backgroundColor: '#e2f1ff', + }, + title: { + flex: 1, + }, + tag: { + ...theme.typography.button, + color: '#888', + border: '#ddd solid 1px', + padding: '0 0.5rem', + fontSize: '0.75rem', + borderRadius: 2, + marginLeft: '0.5rem', + }, + body: { + ...theme.typography.body2, + padding: '0 1rem', + }, +})); + +type Props = { + op: AddCommentFragment | CreateFragment; +}; + +function Message({ op }: Props) { + const classes = useStyles(); + return ( + <article className={classes.container}> + <Avatar author={op.author} className={classes.avatar} /> + <Paper elevation={1} className={classes.bubble}> + <header className={classes.header}> + <div className={classes.title}> + <Author className={classes.author} author={op.author} /> + <span> commented </span> + <Date date={op.createdAt} /> + </div> + {op.edited && <div className={classes.tag}>Edited</div>} + </header> + <section className={classes.body}> + <Content markdown={op.message} /> + </section> + </Paper> + </article> + ); +} + +export default Message; diff --git a/webui/src/pages/bug/MessageCommentFragment.graphql b/webui/src/pages/bug/MessageCommentFragment.graphql new file mode 100644 index 00000000..00f8342d --- /dev/null +++ b/webui/src/pages/bug/MessageCommentFragment.graphql @@ -0,0 +1,8 @@ +#import "../../components/fragments.graphql" + +fragment AddComment on AddCommentTimelineItem { + createdAt + ...authored + edited + message +} diff --git a/webui/src/pages/bug/MessageCreateFragment.graphql b/webui/src/pages/bug/MessageCreateFragment.graphql new file mode 100644 index 00000000..4cae819d --- /dev/null +++ b/webui/src/pages/bug/MessageCreateFragment.graphql @@ -0,0 +1,8 @@ +#import "../../components/fragments.graphql" + +fragment Create on CreateTimelineItem { + createdAt + ...authored + edited + message +} diff --git a/webui/src/pages/bug/SetStatus.tsx b/webui/src/pages/bug/SetStatus.tsx new file mode 100644 index 00000000..e9674424 --- /dev/null +++ b/webui/src/pages/bug/SetStatus.tsx @@ -0,0 +1,40 @@ +import React from 'react'; + +import { makeStyles } from '@material-ui/core/styles'; + +import { Status } from '../../gqlTypes'; +import Author from 'src/components/Author'; +import Date from 'src/components/Date'; + +import { SetStatusFragment } from './SetStatusFragment.generated'; + +const useStyles = makeStyles(theme => ({ + main: { + ...theme.typography.body2, + marginLeft: theme.spacing(1) + 40, + }, + author: { + fontWeight: 'bold', + }, +})); + +type Props = { + op: SetStatusFragment; +}; + +function SetStatus({ op }: Props) { + const classes = useStyles(); + const status = { [Status.Open]: 'reopened', [Status.Closed]: 'closed' }[ + op.status + ]; + + return ( + <div className={classes.main}> + <Author author={op.author} className={classes.author} /> + <span> {status} this </span> + <Date date={op.date} /> + </div> + ); +} + +export default SetStatus; diff --git a/webui/src/pages/bug/SetStatusFragment.graphql b/webui/src/pages/bug/SetStatusFragment.graphql new file mode 100644 index 00000000..d8380409 --- /dev/null +++ b/webui/src/pages/bug/SetStatusFragment.graphql @@ -0,0 +1,7 @@ +#import "../../components/fragments.graphql" + +fragment SetStatus on SetStatusTimelineItem { + date + ...authored + status +} diff --git a/webui/src/pages/bug/SetTitle.tsx b/webui/src/pages/bug/SetTitle.tsx new file mode 100644 index 00000000..64b97517 --- /dev/null +++ b/webui/src/pages/bug/SetTitle.tsx @@ -0,0 +1,45 @@ +import React from 'react'; + +import { makeStyles } from '@material-ui/core/styles'; + +import Author from 'src/components/Author'; +import Date from 'src/components/Date'; + +import { SetTitleFragment } from './SetTitleFragment.generated'; + +const useStyles = makeStyles(theme => ({ + main: { + ...theme.typography.body2, + marginLeft: theme.spacing(1) + 40, + }, + author: { + fontWeight: 'bold', + }, + before: { + fontWeight: 'bold', + textDecoration: 'line-through', + }, + after: { + fontWeight: 'bold', + }, +})); + +type Props = { + op: SetTitleFragment; +}; + +function SetTitle({ op }: Props) { + const classes = useStyles(); + return ( + <div className={classes.main}> + <Author author={op.author} className={classes.author} /> + <span> changed the title from </span> + <span className={classes.before}>{op.was}</span> + <span> to </span> + <span className={classes.after}>{op.title}</span> + <Date date={op.date} /> + </div> + ); +} + +export default SetTitle; diff --git a/webui/src/pages/bug/SetTitleFragment.graphql b/webui/src/pages/bug/SetTitleFragment.graphql new file mode 100644 index 00000000..2225dfd3 --- /dev/null +++ b/webui/src/pages/bug/SetTitleFragment.graphql @@ -0,0 +1,8 @@ +#import "../../components/fragments.graphql" + +fragment SetTitle on SetTitleTimelineItem { + date + ...authored + title + was +} diff --git a/webui/src/pages/bug/Timeline.tsx b/webui/src/pages/bug/Timeline.tsx new file mode 100644 index 00000000..73c88cdf --- /dev/null +++ b/webui/src/pages/bug/Timeline.tsx @@ -0,0 +1,49 @@ +import React from 'react'; + +import { makeStyles } from '@material-ui/core/styles'; + +import LabelChange from './LabelChange'; +import Message from './Message'; +import SetStatus from './SetStatus'; +import SetTitle from './SetTitle'; +import { TimelineItemFragment } from './TimelineQuery.generated'; + +const useStyles = makeStyles(theme => ({ + main: { + '& > *:not(:last-child)': { + marginBottom: theme.spacing(2), + }, + }, +})); + +type Props = { + ops: Array<TimelineItemFragment>; +}; + +function Timeline({ ops }: Props) { + const classes = useStyles(); + + return ( + <div className={classes.main}> + {ops.map((op, index) => { + switch (op.__typename) { + case 'CreateTimelineItem': + return <Message key={index} op={op} />; + case 'AddCommentTimelineItem': + return <Message key={index} op={op} />; + case 'LabelChangeTimelineItem': + return <LabelChange key={index} op={op} />; + case 'SetTitleTimelineItem': + return <SetTitle key={index} op={op} />; + case 'SetStatusTimelineItem': + return <SetStatus key={index} op={op} />; + } + + console.warn('unsupported operation type ' + op.__typename); + return null; + })} + </div> + ); +} + +export default Timeline; diff --git a/webui/src/pages/bug/TimelineQuery.graphql b/webui/src/pages/bug/TimelineQuery.graphql new file mode 100644 index 00000000..6d78ab7f --- /dev/null +++ b/webui/src/pages/bug/TimelineQuery.graphql @@ -0,0 +1,39 @@ +#import "./MessageCreateFragment.graphql" +#import "./MessageCommentFragment.graphql" +#import "./LabelChangeFragment.graphql" +#import "./SetTitleFragment.graphql" +#import "./SetStatusFragment.graphql" + +query Timeline($id: String!, $first: Int = 10, $after: String) { + repository { + bug(prefix: $id) { + timeline(first: $first, after: $after) { + nodes { + ...TimelineItem + } + pageInfo { + hasNextPage + endCursor + } + } + } + } +} + +fragment TimelineItem on TimelineItem { + ... on LabelChangeTimelineItem { + ...LabelChange + } + ... on SetStatusTimelineItem { + ...SetStatus + } + ... on SetTitleTimelineItem { + ...SetTitle + } + ... on AddCommentTimelineItem { + ...AddComment + } + ... on CreateTimelineItem { + ...Create + } +} diff --git a/webui/src/pages/bug/TimelineQuery.tsx b/webui/src/pages/bug/TimelineQuery.tsx new file mode 100644 index 00000000..74eed52b --- /dev/null +++ b/webui/src/pages/bug/TimelineQuery.tsx @@ -0,0 +1,31 @@ +import React from 'react'; + +import CircularProgress from '@material-ui/core/CircularProgress'; + +import Timeline from './Timeline'; +import { useTimelineQuery } from './TimelineQuery.generated'; + +type Props = { + id: string; +}; + +const TimelineQuery = ({ id }: Props) => { + const { loading, error, data } = useTimelineQuery({ + variables: { + id, + first: 100, + }, + }); + + if (loading) return <CircularProgress />; + if (error) return <p>Error: {error}</p>; + + const nodes = data?.repository?.bug?.timeline.nodes; + if (!nodes) { + return null; + } + + return <Timeline ops={nodes} />; +}; + +export default TimelineQuery; diff --git a/webui/src/pages/bug/index.tsx b/webui/src/pages/bug/index.tsx new file mode 100644 index 00000000..a3bbcea4 --- /dev/null +++ b/webui/src/pages/bug/index.tsx @@ -0,0 +1 @@ +export { default } from './BugQuery'; |