1import { makeStyles } from '@material-ui/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 useStyles = makeStyles(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
 58function BugRow({ bug }) {
 59  const classes = useStyles();
 60  return (
 61    <TableRow hover>
 62      <TableCell className={classes.cell}>
 63        <Status status={bug.status} className={classes.status} />
 64        <div className={classes.expand}>
 65          <Link to={'bug/' + bug.humanId}>
 66            <div className={classes.expand}>
 67              <Typography variant={'title'} className={classes.title}>
 68                {bug.title}
 69              </Typography>
 70              {bug.labels.length > 0 && (
 71                <span className={classes.labels}>
 72                  {bug.labels.map(l => (
 73                    <Label key={l.name} label={l} />
 74                  ))}
 75                </span>
 76              )}
 77            </div>
 78          </Link>
 79          <Typography color={'textSecondary'}>
 80            {bug.humanId} opened
 81            <Date date={bug.createdAt} />
 82            by {bug.author.displayName}
 83          </Typography>
 84        </div>
 85      </TableCell>
 86    </TableRow>
 87  );
 88}
 89
 90BugRow.fragment = gql`
 91  fragment BugRow on Bug {
 92    id
 93    humanId
 94    title
 95    status
 96    createdAt
 97    labels {
 98      name
 99      color {
100        R
101        G
102        B
103      }
104    }
105    author {
106      name
107      displayName
108    }
109  }
110`;
111
112export default BugRow;