1import makeStyles from '@mui/styles/makeStyles';
  2
  3import BugTitleForm from 'src/components/BugTitleForm/BugTitleForm';
  4import IfLoggedIn from 'src/components/IfLoggedIn/IfLoggedIn';
  5import Label from 'src/components/Label';
  6
  7import { BugFragment } from './Bug.generated';
  8import CommentForm from './CommentForm';
  9import TimelineQuery from './TimelineQuery';
 10import LabelMenu from './labels/LabelMenu';
 11
 12/**
 13 * Css in JS Styles
 14 */
 15const useStyles = makeStyles((theme) => ({
 16  main: {
 17    maxWidth: 1000,
 18    margin: 'auto',
 19    marginTop: theme.spacing(4),
 20  },
 21  header: {
 22    marginRight: theme.spacing(2),
 23    marginLeft: theme.spacing(3) + 40,
 24  },
 25  title: {
 26    ...theme.typography.h5,
 27  },
 28  id: {
 29    ...theme.typography.subtitle1,
 30    marginLeft: theme.spacing(1),
 31  },
 32  container: {
 33    display: 'flex',
 34    marginBottom: theme.spacing(1),
 35    marginRight: theme.spacing(2),
 36    marginLeft: theme.spacing(2),
 37  },
 38  timeline: {
 39    flex: 1,
 40    marginTop: theme.spacing(2),
 41    marginRight: theme.spacing(2),
 42    minWidth: 400,
 43  },
 44  rightSidebar: {
 45    marginTop: theme.spacing(2),
 46    flex: '0 0 200px',
 47  },
 48  rightSidebarTitle: {
 49    fontWeight: 'bold',
 50  },
 51  labelList: {
 52    listStyle: 'none',
 53    padding: 0,
 54    margin: 0,
 55    display: 'flex',
 56    flexDirection: 'row',
 57    flexWrap: 'wrap',
 58  },
 59  label: {
 60    marginTop: theme.spacing(0.1),
 61    marginBottom: theme.spacing(0.1),
 62    marginLeft: theme.spacing(0.25),
 63    marginRight: theme.spacing(0.25),
 64  },
 65  noLabel: {
 66    ...theme.typography.body2,
 67  },
 68  commentForm: {
 69    marginTop: theme.spacing(2),
 70    marginLeft: 48,
 71  },
 72}));
 73
 74type Props = {
 75  bug: BugFragment;
 76};
 77
 78function Bug({ bug }: Props) {
 79  const classes = useStyles();
 80
 81  return (
 82    <main className={classes.main}>
 83      <div className={classes.header}>
 84        <BugTitleForm bug={bug} />
 85      </div>
 86      <div className={classes.container}>
 87        <div className={classes.timeline}>
 88          <TimelineQuery bug={bug} />
 89          <IfLoggedIn>
 90            {() => (
 91              <div className={classes.commentForm}>
 92                <CommentForm bug={bug} />
 93              </div>
 94            )}
 95          </IfLoggedIn>
 96        </div>
 97        <div className={classes.rightSidebar}>
 98          <span className={classes.rightSidebarTitle}>
 99            <LabelMenu bug={bug} />
100          </span>
101          <ul className={classes.labelList}>
102            {bug.labels.length === 0 && (
103              <span className={classes.noLabel}>None yet</span>
104            )}
105            {bug.labels.map((l) => (
106              <li className={classes.label} key={l.name}>
107                <Label label={l} key={l.name} maxWidth="25ch" />
108              </li>
109            ))}
110          </ul>
111        </div>
112      </div>
113    </main>
114  );
115}
116
117export default Bug;