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