1 files changed, 51 insertions, 0 deletions
diff --git a/webui/src/BugSummary.js b/webui/src/BugSummary.js
new file mode 100644
index 00000000..461fe2d0
--- /dev/null
+++ b/webui/src/BugSummary.js
@@ -0,0 +1,51 @@
+import React from "react";
+import gql from "graphql-tag";
+import { withStyles } from "@material-ui/core/styles";
+
+import Card from "@material-ui/core/Card";
+import CardContent from "@material-ui/core/CardContent";
+import Chip from "@material-ui/core/Chip";
+import Typography from "@material-ui/core/Typography";
+
+const styles = theme => ({
+  labelList: {
+    display: "flex",
+    flexWrap: "wrap",
+    marginTop: theme.spacing.unit
+  },
+  label: {
+    marginRight: theme.spacing.unit
+  },
+  summary: {
+    marginBottom: theme.spacing.unit * 2
+  }
+});
+
+const BugSummary = ({ bug, classes }) => (
+  <Card className={classes.summary}>
+    <CardContent>
+      <Typography variant="headline" component="h2">
+        {bug.title}
+      </Typography>
+      <Typography variant="subheading" component="h3" title={bug.id}>
+        #{bug.id.slice(0, 8)} • {bug.status.toUpperCase()}
+      </Typography>
+      <div className={classes.labelList}>
+        {bug.labels.map(label => (
+          <Chip key={label} label={label} className={classes.label} />
+        ))}
+      </div>
+    </CardContent>
+  </Card>
+);
+
+BugSummary.fragment = gql`
+  fragment BugSummary on Bug {
+    id
+    title
+    status
+    labels
+  }
+`;
+
+export default withStyles(styles)(BugSummary);