Backbutton to left with patch from GlancingMind, Adjusting and 404 for missing bug pages #10

Lena created 4 years ago

Change summary

webui/src/App.tsx                |  1 
webui/src/pages/bug/Bug.tsx      | 45 +++++++++++++++++++++------------
webui/src/pages/bug/BugQuery.tsx |  4 +-
3 files changed, 31 insertions(+), 19 deletions(-)

Detailed changes

webui/src/App.tsx

@@ -13,6 +13,7 @@ export default function App() {
       <Switch>
         <Route path="/" exact component={ListPage} />
         <Route path="/new" exact component={NewBugPage} />
+        <Route path="/404bug" exact component={NotFoundPage} />
         <Route path="/bug/:id" exact component={BugPage} />
         <Route component={NotFoundPage} />
       </Switch>

webui/src/pages/bug/Bug.tsx

@@ -17,13 +17,20 @@ import TimelineQuery from './TimelineQuery';
  */
 const useStyles = makeStyles((theme) => ({
   main: {
-    maxWidth: 1000,
+    maxWidth: 1200,
     margin: 'auto',
     marginTop: theme.spacing(4),
   },
   header: {
-    marginLeft: theme.spacing(3) + 40,
     marginRight: theme.spacing(2),
+    marginLeft: theme.spacing(3) + 205,
+  },
+  title: {
+    ...theme.typography.h5,
+  },
+  id: {
+    ...theme.typography.subtitle1,
+    marginLeft: theme.spacing(1),
   },
   container: {
     display: 'flex',
@@ -37,11 +44,15 @@ const useStyles = makeStyles((theme) => ({
     marginRight: theme.spacing(2),
     minWidth: 400,
   },
-  sidebar: {
+  leftSidebar: {
+    marginTop: theme.spacing(2),
+    marginRight: theme.spacing(2),
+  },
+  rightSidebar: {
     marginTop: theme.spacing(2),
     flex: '0 0 200px',
   },
-  sidebarTitle: {
+  rightSidebarTitle: {
     fontWeight: 'bold',
   },
   labelList: {
@@ -64,7 +75,6 @@ const useStyles = makeStyles((theme) => ({
   },
   backButton: {
     position: 'sticky',
-    marginTop: theme.spacing(1),
     top: '80px',
     backgroundColor: '#574142',
     color: '#fff',
@@ -86,8 +96,18 @@ function Bug({ bug }: Props) {
       <div className={classes.header}>
         <BugTitleForm bug={bug} />
       </div>
-
       <div className={classes.container}>
+        <div className={classes.leftSidebar}>
+          <Button
+            variant="contained"
+            className={classes.backButton}
+            aria-label="back to issue list"
+            href="/"
+          >
+            <ArrowBackIcon />
+            Back to List
+          </Button>
+        </div>
         <div className={classes.timeline}>
           <TimelineQuery id={bug.id} />
           <IfLoggedIn>
@@ -98,8 +118,8 @@ function Bug({ bug }: Props) {
             )}
           </IfLoggedIn>
         </div>
-        <div className={classes.sidebar}>
-          <span className={classes.sidebarTitle}>Labels</span>
+        <div className={classes.rightSidebar}>
+          <span className={classes.rightSidebarTitle}>Labels</span>
           <ul className={classes.labelList}>
             {bug.labels.length === 0 && (
               <span className={classes.noLabel}>None yet</span>
@@ -110,15 +130,6 @@ function Bug({ bug }: Props) {
               </li>
             ))}
           </ul>
-          <Button
-            variant="contained"
-            className={classes.backButton}
-            aria-label="back"
-            href="/"
-          >
-            <ArrowBackIcon />
-            Back to List
-          </Button>
         </div>
       </div>
     </main>

webui/src/pages/bug/BugQuery.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { RouteComponentProps } from 'react-router-dom';
+import { Redirect, RouteComponentProps } from 'react-router-dom';
 
 import CircularProgress from '@material-ui/core/CircularProgress';
 
@@ -15,8 +15,8 @@ const BugQuery: React.FC<Props> = ({ match }: Props) => {
     variables: { id: match.params.id },
   });
   if (loading) return <CircularProgress />;
+  if (!data?.repository?.bug) return <Redirect to="/404bug" />;
   if (error) return <p>Error: {error}</p>;
-  if (!data?.repository?.bug) return <p>404.</p>;
   return <Bug bug={data.repository.bug} />;
 };