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
|
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 Typography from '@material-ui/core/Typography';
import ErrorOutline from '@material-ui/icons/ErrorOutline';
import gql from 'graphql-tag';
import React from 'react';
import { Link } from 'react-router-dom';
import Date from '../Date';
import Label from '../Label';
const Open = ({ className }) => (
<Tooltip title="Open">
<ErrorOutline nativeColor="#28a745" className={className} />
</Tooltip>
);
const Closed = ({ className }) => (
<Tooltip title="Closed">
<ErrorOutline nativeColor="#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',
'& a': {
textDecoration: 'none',
},
},
status: {
margin: 10,
},
expand: {
width: '100%',
},
title: {
display: 'inline',
},
labels: {
paddingLeft: theme.spacing.unit,
},
}));
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}>
<Typography variant={'title'} className={classes.title}>
{bug.title}
</Typography>
{bug.labels.length > 0 && (
<span className={classes.labels}>
{bug.labels.map(l => (
<Label key={l.name} label={l} />
))}
</span>
)}
</div>
</Link>
<Typography color={'textSecondary'}>
{bug.humanId} opened
<Date date={bug.createdAt} />
by {bug.author.displayName}
</Typography>
</div>
</TableCell>
</TableRow>
);
}
BugRow.fragment = gql`
fragment BugRow on Bug {
id
humanId
title
status
createdAt
labels {
name
color {
R
G
B
}
}
author {
name
displayName
}
}
`;
export default BugRow;
|
