diff options
Diffstat (limited to 'webui/src/bug')
-rw-r--r-- | webui/src/bug/Bug.js | 52 | ||||
-rw-r--r-- | webui/src/bug/BugQuery.js | 28 | ||||
-rw-r--r-- | webui/src/bug/LabelChange.js | 48 | ||||
-rw-r--r-- | webui/src/bug/Message.js | 26 | ||||
-rw-r--r-- | webui/src/bug/SetStatus.js | 25 | ||||
-rw-r--r-- | webui/src/bug/SetTitle.js | 28 | ||||
-rw-r--r-- | webui/src/bug/Timeline.js | 47 | ||||
-rw-r--r-- | webui/src/bug/TimelineQuery.js | 41 |
8 files changed, 153 insertions, 142 deletions
diff --git a/webui/src/bug/Bug.js b/webui/src/bug/Bug.js index c6edda35..329fdd72 100644 --- a/webui/src/bug/Bug.js +++ b/webui/src/bug/Bug.js @@ -1,49 +1,49 @@ -import { withStyles } from "@material-ui/core/styles"; -import Typography from "@material-ui/core/Typography/Typography"; -import gql from "graphql-tag"; -import React from "react"; -import Author from "../Author"; -import Date from "../Date"; -import TimelineQuery from "./TimelineQuery"; -import Label from "../Label"; +import { withStyles } from '@material-ui/core/styles'; +import Typography from '@material-ui/core/Typography/Typography'; +import gql from 'graphql-tag'; +import React from 'react'; +import Author from '../Author'; +import Date from '../Date'; +import TimelineQuery from './TimelineQuery'; +import Label from '../Label'; const styles = theme => ({ main: { maxWidth: 600, - margin: "auto", - marginTop: theme.spacing.unit * 4 + margin: 'auto', + marginTop: theme.spacing.unit * 4, }, header: {}, title: { - ...theme.typography.headline + ...theme.typography.headline, }, id: { ...theme.typography.subheading, - marginLeft: 15 + marginLeft: 15, }, container: { - display: "flex", - marginBottom: 30 + display: 'flex', + marginBottom: 30, }, timeline: { - width: "70%", + width: '70%', marginTop: 20, - marginRight: 20 + marginRight: 20, }, sidebar: { - width: "30%" + width: '30%', }, labelList: { - listStyle: "none", + listStyle: 'none', padding: 0, - margin: 0 + margin: 0, }, label: { - margin: "4px 0", - "& > *": { - display: "block" - } - } + margin: '4px 0', + '& > *': { + display: 'block', + }, + }, }); const Bug = ({ bug, classes }) => ( @@ -52,7 +52,7 @@ const Bug = ({ bug, classes }) => ( <span className={classes.title}>{bug.title}</span> <span className={classes.id}>{bug.humanId}</span> - <Typography color={"textSecondary"}> + <Typography color={'textSecondary'}> <Author author={bug.author} /> <span> opened this bug </span> <Date date={bug.createdAt} /> @@ -64,7 +64,7 @@ const Bug = ({ bug, classes }) => ( <TimelineQuery id={bug.id} /> </div> <div className={classes.sidebar}> - <Typography variant={"subheading"}>Labels</Typography> + <Typography variant={'subheading'}>Labels</Typography> <ul className={classes.labelList}> {bug.labels.map(l => ( <li className={classes.label}> diff --git a/webui/src/bug/BugQuery.js b/webui/src/bug/BugQuery.js index 22421414..dbf24c31 100644 --- a/webui/src/bug/BugQuery.js +++ b/webui/src/bug/BugQuery.js @@ -1,9 +1,9 @@ -import CircularProgress from '@material-ui/core/CircularProgress' -import gql from 'graphql-tag' -import React from 'react' -import { Query } from 'react-apollo' +import CircularProgress from '@material-ui/core/CircularProgress'; +import gql from 'graphql-tag'; +import React from 'react'; +import { Query } from 'react-apollo'; -import Bug from './Bug' +import Bug from './Bug'; const QUERY = gql` query GetBug($id: String!) { @@ -15,16 +15,16 @@ const QUERY = gql` } ${Bug.fragment} -` +`; -const BugQuery = ({match}) => ( - <Query query={QUERY} variables={{id: match.params.id}}> - {({loading, error, data}) => { - if (loading) return <CircularProgress/> - if (error) return <p>Error: {error}</p> - return <Bug bug={data.defaultRepository.bug}/> +const BugQuery = ({ match }) => ( + <Query query={QUERY} variables={{ id: match.params.id }}> + {({ loading, error, data }) => { + if (loading) return <CircularProgress />; + if (error) return <p>Error: {error}</p>; + return <Bug bug={data.defaultRepository.bug} />; }} </Query> -) +); -export default BugQuery +export default BugQuery; diff --git a/webui/src/bug/LabelChange.js b/webui/src/bug/LabelChange.js index f954372a..bb546678 100644 --- a/webui/src/bug/LabelChange.js +++ b/webui/src/bug/LabelChange.js @@ -1,31 +1,39 @@ -import { withStyles } from '@material-ui/core/styles' -import gql from 'graphql-tag' -import React from 'react' -import Author from '../Author' -import Date from '../Date' -import Label from '../Label' +import { withStyles } from '@material-ui/core/styles'; +import gql from 'graphql-tag'; +import React from 'react'; +import Author from '../Author'; +import Date from '../Date'; +import Label from '../Label'; const styles = theme => ({ main: { - ...theme.typography.body2 + ...theme.typography.body2, }, -}) +}); -const LabelChange = ({op, classes}) => { - const {added, removed} = op +const LabelChange = ({ op, classes }) => { + const { added, removed } = op; return ( <div className={classes.main}> <Author author={op.author} bold /> - { 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> + {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> - ) -} + ); +}; LabelChange.fragment = gql` fragment LabelChange on Operation { @@ -39,6 +47,6 @@ LabelChange.fragment = gql` removed } } -` +`; -export default withStyles(styles)(LabelChange) +export default withStyles(styles)(LabelChange); diff --git a/webui/src/bug/Message.js b/webui/src/bug/Message.js index 2a96e52d..2d03e780 100644 --- a/webui/src/bug/Message.js +++ b/webui/src/bug/Message.js @@ -1,9 +1,9 @@ -import { withStyles } from '@material-ui/core/styles' -import Typography from '@material-ui/core/Typography' -import gql from 'graphql-tag' -import React from 'react' -import Author from '../Author' -import Date from '../Date' +import { withStyles } from '@material-ui/core/styles'; +import Typography from '@material-ui/core/Typography'; +import gql from 'graphql-tag'; +import React from 'react'; +import Author from '../Author'; +import Date from '../Date'; const styles = theme => ({ header: { @@ -24,10 +24,10 @@ const styles = theme => ({ minHeight: 50, padding: 5, whiteSpace: 'pre-wrap', - } -}) + }, +}); -const Message = ({op, classes}) => ( +const Message = ({ op, classes }) => ( <div> <div className={classes.header}> <Author className={classes.author} author={op.author} bold /> @@ -38,7 +38,7 @@ const Message = ({op, classes}) => ( <Typography>{op.message}</Typography> </div> </div> -) +); Message.createFragment = gql` fragment Create on Operation { @@ -51,7 +51,7 @@ Message.createFragment = gql` message } } -` +`; Message.commentFragment = gql` fragment Comment on Operation { @@ -64,6 +64,6 @@ Message.commentFragment = gql` message } } -` +`; -export default withStyles(styles)(Message) +export default withStyles(styles)(Message); diff --git a/webui/src/bug/SetStatus.js b/webui/src/bug/SetStatus.js index eb41fc28..7d6bccf3 100644 --- a/webui/src/bug/SetStatus.js +++ b/webui/src/bug/SetStatus.js @@ -1,25 +1,24 @@ -import { withStyles } from '@material-ui/core/styles' -import gql from 'graphql-tag' -import React from 'react' -import Author from '../Author' -import Date from '../Date' +import { withStyles } from '@material-ui/core/styles'; +import gql from 'graphql-tag'; +import React from 'react'; +import Author from '../Author'; +import Date from '../Date'; const styles = theme => ({ main: { - ...theme.typography.body2 + ...theme.typography.body2, }, -}) - -const SetStatus = ({op, classes}) => { +}); +const SetStatus = ({ op, classes }) => { return ( <div className={classes.main}> <Author author={op.author} bold /> <span> {op.status.toLowerCase()} this</span> <Date date={op.date} /> </div> - ) -} + ); +}; SetStatus.fragment = gql` fragment SetStatus on Operation { @@ -32,6 +31,6 @@ SetStatus.fragment = gql` status } } -` +`; -export default withStyles(styles)(SetStatus) +export default withStyles(styles)(SetStatus); diff --git a/webui/src/bug/SetTitle.js b/webui/src/bug/SetTitle.js index b6bb8b70..838219e2 100644 --- a/webui/src/bug/SetTitle.js +++ b/webui/src/bug/SetTitle.js @@ -1,19 +1,19 @@ -import { withStyles } from '@material-ui/core/styles' -import gql from 'graphql-tag' -import React from 'react' -import Author from '../Author' -import Date from '../Date' +import { withStyles } from '@material-ui/core/styles'; +import gql from 'graphql-tag'; +import React from 'react'; +import Author from '../Author'; +import Date from '../Date'; const styles = theme => ({ main: { - ...theme.typography.body2 + ...theme.typography.body2, }, bold: { - fontWeight: 'bold' - } -}) + fontWeight: 'bold', + }, +}); -const SetTitle = ({op, classes}) => { +const SetTitle = ({ op, classes }) => { return ( <div className={classes.main}> <Author author={op.author} bold /> @@ -23,8 +23,8 @@ const SetTitle = ({op, classes}) => { <span className={classes.bold}>{op.title}</span> <Date date={op.date} /> </div> - ) -} + ); +}; SetTitle.fragment = gql` fragment SetTitle on Operation { @@ -38,6 +38,6 @@ SetTitle.fragment = gql` was } } -` +`; -export default withStyles(styles)(SetTitle) +export default withStyles(styles)(SetTitle); diff --git a/webui/src/bug/Timeline.js b/webui/src/bug/Timeline.js index a15409ab..d331d11d 100644 --- a/webui/src/bug/Timeline.js +++ b/webui/src/bug/Timeline.js @@ -1,52 +1,51 @@ -import { withStyles } from '@material-ui/core/styles' -import React from 'react' -import LabelChange from './LabelChange' -import Message from './Message' -import SetStatus from './SetStatus' -import SetTitle from './SetTitle' +import { withStyles } from '@material-ui/core/styles'; +import React from 'react'; +import LabelChange from './LabelChange'; +import Message from './Message'; +import SetStatus from './SetStatus'; +import SetTitle from './SetTitle'; const styles = theme => ({ main: { '& > *:not(:last-child)': { - marginBottom: 10 - } - } -}) + marginBottom: 10, + }, + }, +}); class Timeline extends React.Component { - props: { ops: Array, - fetchMore: (any) => any, + fetchMore: any => any, classes: any, - } + }; render() { - const {ops, classes} = this.props + const { ops, classes } = this.props; return ( <div className={classes.main}> - { ops.map((op, index) => { + {ops.map((op, index) => { switch (op.__typename) { case 'CreateOperation': - return <Message key={index} op={op}/> + return <Message key={index} op={op} />; case 'AddCommentOperation': - return <Message key={index} op={op}/> + return <Message key={index} op={op} />; case 'LabelChangeOperation': - return <LabelChange key={index} op={op}/> + return <LabelChange key={index} op={op} />; case 'SetTitleOperation': - return <SetTitle key={index} op={op}/> + return <SetTitle key={index} op={op} />; case 'SetStatusOperation': - return <SetStatus key={index} op={op}/> + return <SetStatus key={index} op={op} />; default: - console.log('unsupported operation type ' + op.__typename) - return null + console.log('unsupported operation type ' + op.__typename); + return null; } })} </div> - ) + ); } } -export default withStyles(styles)(Timeline) +export default withStyles(styles)(Timeline); diff --git a/webui/src/bug/TimelineQuery.js b/webui/src/bug/TimelineQuery.js index 3ee4cb28..78658a6f 100644 --- a/webui/src/bug/TimelineQuery.js +++ b/webui/src/bug/TimelineQuery.js @@ -1,12 +1,12 @@ -import CircularProgress from '@material-ui/core/CircularProgress' -import gql from 'graphql-tag' -import React from 'react' -import { Query } from 'react-apollo' -import LabelChange from './LabelChange' -import SetStatus from './SetStatus' -import SetTitle from './SetTitle' -import Timeline from './Timeline' -import Message from './Message' +import CircularProgress from '@material-ui/core/CircularProgress'; +import gql from 'graphql-tag'; +import React from 'react'; +import { Query } from 'react-apollo'; +import LabelChange from './LabelChange'; +import SetStatus from './SetStatus'; +import SetTitle from './SetTitle'; +import Timeline from './Timeline'; +import Message from './Message'; const QUERY = gql` query($id: String!, $first: Int = 10, $after: String) { @@ -33,16 +33,21 @@ const QUERY = gql` ${LabelChange.fragment} ${SetTitle.fragment} ${SetStatus.fragment} -` +`; -const TimelineQuery = ({id}) => ( - <Query query={QUERY} variables={{id, first: 100}}> - {({loading, error, data, fetchMore}) => { - if (loading) return <CircularProgress/> - if (error) return <p>Error: {error}</p> - return <Timeline ops={data.defaultRepository.bug.operations.nodes} fetchMore={fetchMore}/> +const TimelineQuery = ({ id }) => ( + <Query query={QUERY} variables={{ id, first: 100 }}> + {({ loading, error, data, fetchMore }) => { + if (loading) return <CircularProgress />; + if (error) return <p>Error: {error}</p>; + return ( + <Timeline + ops={data.defaultRepository.bug.operations.nodes} + fetchMore={fetchMore} + /> + ); }} </Query> -) +); -export default TimelineQuery +export default TimelineQuery; |