diff options
author | Michael Muré <batolettre@gmail.com> | 2020-02-23 14:49:09 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-02-23 14:49:09 +0100 |
commit | f87d63b3c656f6efba3c62c121f66e513ca3efea (patch) | |
tree | 368886eb57bab83c76f73b3b7b0238b483733a30 /webui/src/pages/list/BugRow.tsx | |
parent | 4559af5e71a2d6d1c53329e565d101c3eadacf6e (diff) | |
parent | f96484391ae817a18f503b5c31cd3bd2211553df (diff) | |
download | git-bug-f87d63b3c656f6efba3c62c121f66e513ca3efea.tar.gz |
Merge pull request #331 from MichaelMure/webui/mutations
Webui: add comments
Diffstat (limited to 'webui/src/pages/list/BugRow.tsx')
-rw-r--r-- | webui/src/pages/list/BugRow.tsx | 113 |
1 files changed, 113 insertions, 0 deletions
diff --git a/webui/src/pages/list/BugRow.tsx b/webui/src/pages/list/BugRow.tsx new file mode 100644 index 00000000..9c1883a3 --- /dev/null +++ b/webui/src/pages/list/BugRow.tsx @@ -0,0 +1,113 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; + +import TableCell from '@material-ui/core/TableCell/TableCell'; +import TableRow from '@material-ui/core/TableRow/TableRow'; +import Tooltip from '@material-ui/core/Tooltip/Tooltip'; +import { makeStyles } from '@material-ui/core/styles'; +import CheckCircleOutline from '@material-ui/icons/CheckCircleOutline'; +import ErrorOutline from '@material-ui/icons/ErrorOutline'; + +import Date from 'src/components/Date'; +import Label from 'src/components/Label'; +import { Status } from 'src/gqlTypes'; + +import { BugRowFragment } from './BugRow.generated'; + +type OpenClosedProps = { className: string }; +const Open = ({ className }: OpenClosedProps) => ( + <Tooltip title="Open"> + <ErrorOutline htmlColor="#28a745" className={className} /> + </Tooltip> +); + +const Closed = ({ className }: OpenClosedProps) => ( + <Tooltip title="Closed"> + <CheckCircleOutline htmlColor="#cb2431" className={className} /> + </Tooltip> +); + +type StatusProps = { className: string; status: Status }; +const BugStatus: React.FC<StatusProps> = ({ + status, + className, +}: StatusProps) => { + switch (status) { + case 'OPEN': + return <Open className={className} />; + case 'CLOSED': + return <Closed className={className} />; + default: + return <p>{'unknown status ' + status}</p>; + } +}; + +const useStyles = makeStyles(theme => ({ + cell: { + display: 'flex', + alignItems: 'center', + padding: theme.spacing(1), + '& a': { + textDecoration: 'none', + }, + }, + status: { + margin: theme.spacing(1, 2), + }, + expand: { + width: '100%', + lineHeight: '20px', + }, + title: { + display: 'inline', + color: theme.palette.text.primary, + fontSize: '1.3rem', + fontWeight: 500, + }, + details: { + lineHeight: '1.5rem', + color: theme.palette.text.secondary, + }, + labels: { + paddingLeft: theme.spacing(1), + '& > *': { + display: 'inline-block', + }, + }, +})); + +type Props = { + bug: BugRowFragment; +}; + +function BugRow({ bug }: Props) { + const classes = useStyles(); + return ( + <TableRow hover> + <TableCell className={classes.cell}> + <BugStatus status={bug.status} className={classes.status} /> + <div className={classes.expand}> + <Link to={'bug/' + bug.humanId}> + <div className={classes.expand}> + <span className={classes.title}>{bug.title}</span> + {bug.labels.length > 0 && ( + <span className={classes.labels}> + {bug.labels.map(l => ( + <Label key={l.name} label={l} /> + ))} + </span> + )} + </div> + </Link> + <div className={classes.details}> + {bug.humanId} opened + <Date date={bug.createdAt} /> + by {bug.author.displayName} + </div> + </div> + </TableCell> + </TableRow> + ); +} + +export default BugRow; |