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
|
import { makeStyles } from '@material-ui/styles';
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 ErrorOutline from '@material-ui/icons/ErrorOutline';
import CheckCircleOutline from '@material-ui/icons/CheckCircleOutline';
import gql from 'graphql-tag';
import React from 'react';
import { Link } from 'react-router-dom';
import Date from '../Date';
import Label from '../Label';
import Author from '../Author';
const Open = ({ className }) => (
<Tooltip title="Open">
<ErrorOutline htmlColor="#28a745" className={className} />
</Tooltip>
);
const Closed = ({ className }) => (
<Tooltip title="Closed">
<CheckCircleOutline htmlColor="#cb2431" className={className} />
</Tooltip>
);
const Status = ({ status, className }) => {
switch (status) {
case 'OPEN':
return <Open className={className} />;
case 'CLOSED':
return <Closed className={className} />;
default:
return 'unknown status ' + status;
}
};
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: {
...theme.typography.textSecondary,
lineHeight: '1.5rem',
color: theme.palette.text.secondary,
},
labels: {
paddingLeft: theme.spacing(1),
'& > *': {
display: 'inline-block',
},
},
}));
function BugRow({ bug }) {
const classes = useStyles();
return (
<TableRow hover>
<TableCell className={classes.cell}>
<Status 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>
</TableCell>
</TableRow>
);
}
BugRow.fragment = gql`
fragment BugRow on Bug {
id
humanId
title
status
createdAt
labels {
...Label
}
...authored
}
${Label.fragment}
${Author.fragment}
`;
export default BugRow;
|
