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