1import { makeStyles } from '@material-ui/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 ErrorOutline from '@material-ui/icons/ErrorOutline';
  6import gql from 'graphql-tag';
  7import React from 'react';
  8import { Link } from 'react-router-dom';
  9import Date from '../Date';
 10import Label from '../Label';
 11import Author from '../Author';
 12
 13const Open = ({ className }) => (
 14  <Tooltip title="Open">
 15    <ErrorOutline htmlColor="#28a745" className={className} />
 16  </Tooltip>
 17);
 18
 19const Closed = ({ className }) => (
 20  <Tooltip title="Closed">
 21    <ErrorOutline htmlColor="#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 useStyles = makeStyles(theme => ({
 37  cell: {
 38    display: 'flex',
 39    alignItems: 'center',
 40    padding: theme.spacing(1),
 41    '& a': {
 42      textDecoration: 'none',
 43    },
 44  },
 45  status: {
 46    margin: theme.spacing(1, 2),
 47  },
 48  expand: {
 49    width: '100%',
 50    lineHeight: '20px',
 51  },
 52  title: {
 53    display: 'inline',
 54    color: theme.palette.text.primary,
 55    fontSize: '1.3rem',
 56    fontWeight: 500,
 57  },
 58  details: {
 59    ...theme.typography.textSecondary,
 60    lineHeight: '1.5rem',
 61    color: theme.palette.text.secondary,
 62  },
 63  labels: {
 64    paddingLeft: theme.spacing(1),
 65    '& > *': {
 66      display: 'inline-block',
 67    },
 68  },
 69}));
 70
 71function BugRow({ bug }) {
 72  const classes = useStyles();
 73  return (
 74    <TableRow hover>
 75      <TableCell className={classes.cell}>
 76        <Status status={bug.status} className={classes.status} />
 77        <div className={classes.expand}>
 78          <Link to={'bug/' + bug.humanId}>
 79            <div className={classes.expand}>
 80              <span className={classes.title}>{bug.title}</span>
 81              {bug.labels.length > 0 && (
 82                <span className={classes.labels}>
 83                  {bug.labels.map(l => (
 84                    <Label key={l.name} label={l} />
 85                  ))}
 86                </span>
 87              )}
 88            </div>
 89          </Link>
 90          <div className={classes.details}>
 91            {bug.humanId} opened
 92            <Date date={bug.createdAt} />
 93            by {bug.author.displayName}
 94          </div>
 95        </div>
 96      </TableCell>
 97    </TableRow>
 98  );
 99}
100
101BugRow.fragment = gql`
102  fragment BugRow on Bug {
103    id
104    humanId
105    title
106    status
107    createdAt
108    labels {
109      ...Label
110    }
111    ...authored
112  }
113
114  ${Label.fragment}
115  ${Author.fragment}
116`;
117
118export default BugRow;