1import TableCell from '@material-ui/core/TableCell/TableCell';
  2import TableRow from '@material-ui/core/TableRow/TableRow';
  3import Tooltip from '@material-ui/core/Tooltip/Tooltip';
  4import { makeStyles } from '@material-ui/core/styles';
  5import CheckCircleOutline from '@material-ui/icons/CheckCircleOutline';
  6import ErrorOutline from '@material-ui/icons/ErrorOutline';
  7import React from 'react';
  8import { Link } from 'react-router-dom';
  9
 10import Date from '../components/Date';
 11import Label from '../components/Label';
 12import { Status } from '../gqlTypes';
 13
 14import { BugRowFragment } from './BugRow.generated';
 15
 16type OpenClosedProps = { className: string };
 17const Open = ({ className }: OpenClosedProps) => (
 18  <Tooltip title="Open">
 19    <ErrorOutline htmlColor="#28a745" className={className} />
 20  </Tooltip>
 21);
 22
 23const Closed = ({ className }: OpenClosedProps) => (
 24  <Tooltip title="Closed">
 25    <CheckCircleOutline htmlColor="#cb2431" className={className} />
 26  </Tooltip>
 27);
 28
 29type StatusProps = { className: string; status: Status };
 30const BugStatus: React.FC<StatusProps> = ({
 31  status,
 32  className,
 33}: StatusProps) => {
 34  switch (status) {
 35    case 'OPEN':
 36      return <Open className={className} />;
 37    case 'CLOSED':
 38      return <Closed className={className} />;
 39    default:
 40      return <p>{'unknown status ' + status}</p>;
 41  }
 42};
 43
 44const useStyles = makeStyles(theme => ({
 45  cell: {
 46    display: 'flex',
 47    alignItems: 'center',
 48    padding: theme.spacing(1),
 49    '& a': {
 50      textDecoration: 'none',
 51    },
 52  },
 53  status: {
 54    margin: theme.spacing(1, 2),
 55  },
 56  expand: {
 57    width: '100%',
 58    lineHeight: '20px',
 59  },
 60  title: {
 61    display: 'inline',
 62    color: theme.palette.text.primary,
 63    fontSize: '1.3rem',
 64    fontWeight: 500,
 65  },
 66  details: {
 67    lineHeight: '1.5rem',
 68    color: theme.palette.text.secondary,
 69  },
 70  labels: {
 71    paddingLeft: theme.spacing(1),
 72    '& > *': {
 73      display: 'inline-block',
 74    },
 75  },
 76}));
 77
 78type Props = {
 79  bug: BugRowFragment;
 80};
 81
 82function BugRow({ bug }: Props) {
 83  const classes = useStyles();
 84  return (
 85    <TableRow hover>
 86      <TableCell className={classes.cell}>
 87        <BugStatus status={bug.status} className={classes.status} />
 88        <div className={classes.expand}>
 89          <Link to={'bug/' + bug.humanId}>
 90            <div className={classes.expand}>
 91              <span className={classes.title}>{bug.title}</span>
 92              {bug.labels.length > 0 && (
 93                <span className={classes.labels}>
 94                  {bug.labels.map(l => (
 95                    <Label key={l.name} label={l} />
 96                  ))}
 97                </span>
 98              )}
 99            </div>
100          </Link>
101          <div className={classes.details}>
102            {bug.humanId} opened
103            <Date date={bug.createdAt} />
104            by {bug.author.displayName}
105          </div>
106        </div>
107      </TableCell>
108    </TableRow>
109  );
110}
111
112export default BugRow;