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