1import { withStyles } from "@material-ui/core/styles";
  2import TableCell from "@material-ui/core/TableCell/TableCell";
  3import TableRow from "@material-ui/core/TableRow/TableRow";
  4import Tooltip from "@material-ui/core/Tooltip/Tooltip";
  5import Typography from "@material-ui/core/Typography";
  6import ErrorOutline from "@material-ui/icons/ErrorOutline";
  7import gql from "graphql-tag";
  8import React from "react";
  9import { Link } from "react-router-dom";
 10import Date from "../Date";
 11import Label from "../Label";
 12
 13const Open = ({ className }) => (
 14  <Tooltip title="Open">
 15    <ErrorOutline nativeColor="#28a745" className={className} />
 16  </Tooltip>
 17);
 18
 19const Closed = ({ className }) => (
 20  <Tooltip title="Closed">
 21    <ErrorOutline nativeColor="#cb2431" className={className} />
 22  </Tooltip>
 23);
 24
 25const Status = ({ status, className }) => {
 26  switch (status) {
 27    case "OPEN":
 28      return <Open className={className} />;
 29    case "CLOSED":
 30      return <Closed className={className} />;
 31    default:
 32      return "unknown status " + status;
 33  }
 34};
 35
 36const styles = theme => ({
 37  cell: {
 38    display: "flex",
 39    alignItems: "center",
 40    "& a": {
 41      textDecoration: "none"
 42    }
 43  },
 44  status: {
 45    margin: 10
 46  },
 47  expand: {
 48    width: "100%"
 49  },
 50  title: {
 51    display: "inline"
 52  },
 53  labels: {
 54    paddingLeft: theme.spacing.unit
 55  }
 56});
 57
 58const BugRow = ({ bug, classes }) => (
 59  <TableRow hover>
 60    <TableCell className={classes.cell}>
 61      <Status status={bug.status} className={classes.status} />
 62      <div className={classes.expand}>
 63        <Link to={"bug/" + bug.humanId}>
 64          <div className={classes.expand}>
 65            <Typography variant={"title"} className={classes.title}>
 66              {bug.title}
 67            </Typography>
 68            {bug.labels.length > 0 && (
 69              <span className={classes.labels}>
 70                {bug.labels.map(l => (
 71                  <Label key={l} label={l} />
 72                ))}
 73              </span>
 74            )}
 75          </div>
 76        </Link>
 77        <Typography color={"textSecondary"}>
 78          {bug.humanId} opened
 79          <Date date={bug.createdAt} />
 80          by {bug.author.name}
 81        </Typography>
 82      </div>
 83    </TableCell>
 84  </TableRow>
 85);
 86
 87BugRow.fragment = gql`
 88  fragment BugRow on Bug {
 89    id
 90    humanId
 91    title
 92    status
 93    createdAt
 94    labels
 95    author {
 96      name
 97    }
 98  }
 99`;
100
101export default withStyles(styles)(BugRow);