1import React from "react";
 2import { Link } from "react-router-dom";
 3import gql from "graphql-tag";
 4import { withStyles } from "@material-ui/core/styles";
 5
 6import Card from "@material-ui/core/Card";
 7import CardContent from "@material-ui/core/CardContent";
 8import Chip from "@material-ui/core/Chip";
 9import Typography from "@material-ui/core/Typography";
10
11const styles = theme => ({
12  labelList: {
13    display: "flex",
14    flexWrap: "wrap",
15    marginTop: theme.spacing.unit
16  },
17  label: {
18    marginRight: theme.spacing.unit
19  },
20  summary: {
21    marginBottom: theme.spacing.unit * 2
22  }
23});
24
25const BugSummary = ({ bug, classes }) => (
26  <Card className={classes.summary}>
27    <CardContent>
28      <Typography variant="headline" component="h2">
29        {bug.title}
30      </Typography>
31      <Typography variant="subheading" component="h3" title={bug.id}>
32        <Link to={"/bug/" + bug.id.slice(0, 8)}>#{bug.id.slice(0, 8)}</Link> •{" "}
33        {bug.status.toUpperCase()}
34      </Typography>
35      <div className={classes.labelList}>
36        {bug.labels.map(label => (
37          <Chip key={label} label={label} className={classes.label} />
38        ))}
39      </div>
40    </CardContent>
41  </Card>
42);
43
44BugSummary.fragment = gql`
45  fragment BugSummary on Bug {
46    id
47    title
48    status
49    labels
50  }
51`;
52
53export default withStyles(styles)(BugSummary);