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