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