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      display: 'inline-block',
 76    },
 77  },
 78  commentCount: {
 79    fontSize: '1rem',
 80    marginLeft: theme.spacing(0.5),
 81  },
 82  commentCountCell: {
 83    display: 'inline-flex',
 84  },
 85}));
 86
 87type Props = {
 88  bug: BugRowFragment;
 89};
 90
 91function BugRow({ bug }: Props) {
 92  const classes = useStyles();
 93  // Subtract 1 from totalCount as 1 comment is the bug description
 94  const commentCount = bug.comments.totalCount - 1;
 95  return (
 96    <TableRow hover>
 97      <TableCell className={classes.cell}>
 98        <BugStatus status={bug.status} className={classes.status} />
 99        <div className={classes.expand}>
100          <Link to={'bug/' + bug.humanId}>
101            <div className={classes.expand}>
102              <span className={classes.title}>{bug.title}</span>
103              {bug.labels.length > 0 && (
104                <span className={classes.labels}>
105                  {bug.labels.map((l) => (
106                    <Label key={l.name} label={l} />
107                  ))}
108                </span>
109              )}
110            </div>
111          </Link>
112          <div className={classes.details}>
113            {bug.humanId} opened&nbsp;
114            <Date date={bug.createdAt} />
115            &nbsp;by {bug.author.displayName}
116          </div>
117        </div>
118        {commentCount > 0 && (
119          <span className={classes.commentCountCell}>
120            <CommentOutlinedIcon aria-label="Comment count" />
121            <span className={classes.commentCount}>{commentCount}</span>
122          </span>
123        )}
124      </TableCell>
125    </TableRow>
126  );
127}
128
129export default BugRow;