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 }) => (
 14  <Tooltip title="Open">
 15    <ErrorOutline nativeColor="#28a745" className={className} />
 16  </Tooltip>
 17);
 18
 19const Closed = ({ className }) => (
 20  <Tooltip title="Closed">
 21    <ErrorOutline nativeColor="#cb2431" className={className} />
 22  </Tooltip>
 23);
 24
 25const Status = ({ status, className }) => {
 26  switch (status) {
 27    case 'OPEN':
 28      return <Open className={className} />;
 29    case 'CLOSED':
 30      return <Closed className={className} />;
 31    default:
 32      return 'unknown status ' + status;
 33  }
 34};
 35
 36const styles = theme => ({
 37  cell: {
 38    display: 'flex',
 39    alignItems: 'center',
 40    '& a': {
 41      textDecoration: 'none',
 42    },
 43  },
 44  status: {
 45    margin: 10,
 46  },
 47  expand: {
 48    width: '100%',
 49  },
 50  title: {
 51    display: 'inline',
 52  },
 53  labels: {
 54    paddingLeft: theme.spacing.unit,
 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            <Typography variant={'title'} className={classes.title}>
 66              {bug.title}
 67            </Typography>
 68            {bug.labels.length > 0 && (
 69              <span className={classes.labels}>
 70                {bug.labels.map(l => (
 71                  <Label key={l} label={l} />
 72                ))}
 73              </span>
 74            )}
 75          </div>
 76        </Link>
 77        <Typography color={'textSecondary'}>
 78          {bug.humanId} opened
 79          <Date date={bug.createdAt} />
 80          by {bug.author.displayName}
 81        </Typography>
 82      </div>
 83    </TableCell>
 84  </TableRow>
 85);
 86
 87BugRow.fragment = gql`
 88  fragment BugRow on Bug {
 89    id
 90    humanId
 91    title
 92    status
 93    createdAt
 94    labels
 95    author {
 96      name
 97      displayName
 98    }
 99  }
100`;
101
102export default withStyles(styles)(BugRow);