aboutsummaryrefslogtreecommitdiffstats
path: root/webui/src/bug
diff options
context:
space:
mode:
Diffstat (limited to 'webui/src/bug')
-rw-r--r--webui/src/bug/Bug.js52
-rw-r--r--webui/src/bug/BugQuery.js28
-rw-r--r--webui/src/bug/LabelChange.js48
-rw-r--r--webui/src/bug/Message.js26
-rw-r--r--webui/src/bug/SetStatus.js25
-rw-r--r--webui/src/bug/SetTitle.js28
-rw-r--r--webui/src/bug/Timeline.js47
-rw-r--r--webui/src/bug/TimelineQuery.js41
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;