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