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