1import { withStyles } from '@material-ui/core/styles'
 2import TableCell from '@material-ui/core/TableCell/TableCell'
 3import TableRow from '@material-ui/core/TableRow/TableRow'
 4import Tooltip from '@material-ui/core/Tooltip/Tooltip'
 5import Typography from '@material-ui/core/Typography'
 6import ErrorOutline from '@material-ui/icons/ErrorOutline'
 7import gql from 'graphql-tag'
 8import React from 'react'
 9import { Link } from 'react-router-dom'
10import Date from '../Date'
11import Label from '../Label'
12
13const Open = ({className}) => <Tooltip title="Open">
14  <ErrorOutline nativeColor='#28a745' className={className}/>
15</Tooltip>
16
17const Closed = ({className}) => <Tooltip title="Closed">
18  <ErrorOutline nativeColor='#cb2431' className={className}/>
19</Tooltip>
20
21const Status = ({status, className}) => {
22  switch (status) {
23    case 'OPEN':
24      return <Open className={className}/>
25    case 'CLOSED':
26      return <Closed className={className}/>
27    default:
28      return 'unknown status ' + status
29  }
30}
31
32const styles = theme => ({
33  cell: {
34    display: 'flex',
35    alignItems: 'center',
36    '& a': {
37      textDecoration: 'none'
38    }
39  },
40  status: {
41    margin: 10
42  },
43  expand: {
44    width: '100%'
45  },
46  title: {
47    display: 'inline',
48  },
49  labels: {
50    ...theme.typography.body2,
51    display: 'inline',
52    paddingLeft: theme.spacing.unit,
53  }
54})
55
56const BugRow = ({bug, classes}) => (
57  <TableRow hover>
58    <TableCell className={classes.cell}>
59      <Status status={bug.status} className={classes.status}/>
60      <div className={classes.expand}>
61        <Link to={'bug/' + bug.humanId}>
62          <div className={classes.expand}>
63            <Typography variant={'title'} className={classes.title}>
64              {bug.title}
65            </Typography>
66            { bug.labels.length > 0 && (
67              <span className={classes.labels}>
68                {bug.labels.map(l => (
69                  <Label key={l} label={l}/>
70                ))}
71              </span>
72            )}
73          </div>
74        </Link>
75        <Typography color={'textSecondary'}>
76          {bug.humanId} opened
77          <Date date={bug.createdAt} />
78          by {bug.author.name}
79        </Typography>
80      </div>
81    </TableCell>
82  </TableRow>
83)
84
85BugRow.fragment = gql`
86  fragment BugRow on Bug {
87    id
88    humanId
89    title
90    status
91    createdAt
92    labels
93    author {
94      name
95    }
96  }
97`
98
99export default withStyles(styles)(BugRow)