1import CheckCircleOutline from '@mui/icons-material/CheckCircleOutline';
  2import CommentOutlinedIcon from '@mui/icons-material/CommentOutlined';
  3import ErrorOutline from '@mui/icons-material/ErrorOutline';
  4import TableCell from '@mui/material/TableCell/TableCell';
  5import TableRow from '@mui/material/TableRow/TableRow';
  6import Tooltip from '@mui/material/Tooltip/Tooltip';
  7import makeStyles from '@mui/styles/makeStyles';
  8import * as React from 'react';
  9import { Link } from 'react-router';
 10
 11import Author from 'src/components/Author';
 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  bugTitleWrapper: {
 63    display: 'flex',
 64    flexDirection: 'row',
 65    flexWrap: 'wrap',
 66    //alignItems: 'center',
 67  },
 68  title: {
 69    display: 'inline',
 70    color: theme.palette.text.primary,
 71    fontSize: '1.3rem',
 72    fontWeight: 500,
 73    marginBottom: theme.spacing(1),
 74  },
 75  label: {
 76    maxWidth: '40ch',
 77    marginLeft: theme.spacing(0.25),
 78    marginRight: theme.spacing(0.25),
 79  },
 80  details: {
 81    lineHeight: '1.5rem',
 82    color: theme.palette.text.secondary,
 83  },
 84  commentCount: {
 85    fontSize: '1rem',
 86    minWidth: '2rem',
 87    marginLeft: theme.spacing(0.5),
 88    marginRight: theme.spacing(1),
 89  },
 90  commentCountCell: {
 91    display: 'inline-flex',
 92    minWidth: theme.spacing(5),
 93    marginLeft: theme.spacing(0.5),
 94  },
 95}));
 96
 97type Props = {
 98  bug: BugRowFragment;
 99};
100
101function BugRow({ bug }: Props) {
102  const classes = useStyles();
103  // Subtract 1 from totalCount as 1 comment is the bug description
104  const commentCount = bug.comments.totalCount - 1;
105  return (
106    <TableRow hover>
107      <TableCell className={classes.cell}>
108        <BugStatus status={bug.status} className={classes.status} />
109        <div className={classes.expand}>
110          <Link to={'bug/' + bug.id}>
111            <div className={classes.bugTitleWrapper}>
112              <span className={classes.title}>{bug.title}</span>
113              {bug.labels.length > 0 &&
114                bug.labels.map((l) => (
115                  <Label key={l.name} label={l} className={classes.label} />
116                ))}
117            </div>
118          </Link>
119          <div className={classes.details}>
120            {bug.humanId} opened&nbsp;
121            <Date date={bug.createdAt} />
122            &nbsp;by&nbsp;
123            <Author className={classes.details} author={bug.author} />
124          </div>
125        </div>
126        <span className={classes.commentCountCell}>
127          {commentCount > 0 && (
128            <>
129              <CommentOutlinedIcon aria-label="Comment count" />
130              <span className={classes.commentCount}>{commentCount}</span>
131            </>
132          )}
133        </span>
134      </TableCell>
135    </TableRow>
136  );
137}
138
139export default BugRow;