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