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