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