[grid-ui] Don't hide the drawer if the grid is disconnected

This completes the revert of commit 2eea3d8.
SeleniumHQ · Feb 17, 2021 · 68b17ed · 68b17ed
1 parent a4f5c22
commit 68b17ed
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 27 deletions.
diff --git a/javascript/grid-ui/src/components/NavBar/NavBar.tsx b/javascript/grid-ui/src/components/NavBar/NavBar.tsx
@@ -24,7 +24,7 @@ const useStyles = makeStyles((theme) => ({
   toolbarIcon: {
     display: 'flex',
     alignItems: 'center',
-    justifyContent: 'flex-start',
+    justifyContent: 'flex-end',
     padding: '0 8px',
     ...theme.mixins.toolbar,
     backgroundColor: theme.palette.primary.main,
@@ -84,7 +84,7 @@ function CircularProgressWithLabel(props: CircularProgressProps & { value: numbe
 
 export default function NavBar(props) {
   const classes = useStyles();
-  const {open, setOpen, width, maxSession, sessionCount, nodeCount} = props;
+  const {open, maxSession, sessionCount, nodeCount} = props;
   const currentLoad = Math.min(((sessionCount / (maxSession === 0 ? 1 : maxSession)) * 100), 100);
 
   const location = useLocation();
@@ -93,10 +93,6 @@ export default function NavBar(props) {
   // than one node, or when the user is on a different page and there is at least one node registered.
   const showOverallConcurrency = nodeCount > 1 || (location.pathname !== "/" && nodeCount > 0);
 
-  const handleDrawerClose = () => {
-    setOpen(false);
-  };
-
   return (
     <Drawer
       variant="permanent"
@@ -105,8 +101,8 @@ export default function NavBar(props) {
       }}
       open={open}
     >
-      <div className={classes.toolbarIcon} onClick={handleDrawerClose}>
-        <IconButton color={"secondary"} onClick={handleDrawerClose}>
+      <div className={classes.toolbarIcon}>
+        <IconButton color={"secondary"}>
           <ChevronLeftIcon/>
         </IconButton>
       </div>

diff --git a/javascript/grid-ui/src/components/TopBar/TopBar.tsx b/javascript/grid-ui/src/components/TopBar/TopBar.tsx
@@ -7,6 +7,7 @@ import Toolbar from '@material-ui/core/Toolbar';
 import Typography from '@material-ui/core/Typography';
 import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
 import MenuIcon from '@material-ui/icons/Menu'
+import HelpIcon from '@material-ui/icons/Help';
 import clsx from 'clsx';
 import {loader} from "graphql.macro";
 import * as React from 'react';
@@ -16,8 +17,6 @@ import {GridConfig} from "../../config";
 import NavBar from "../NavBar/NavBar";
 import Loading from "../Loading/Loading";
 
-const drawerWidth = 240;
-
 const useStyles = makeStyles((theme) => ({
   root: {
     display: 'flex',
@@ -28,6 +27,8 @@ const useStyles = makeStyles((theme) => ({
   toolbarTitle: {
     display: "flex",
     width: `calc(100%)`,
+    alignItems: "center",
+    justifyContent: "center",
   },
   appBar: {
     zIndex: theme.zIndex.drawer + 1,
@@ -36,14 +37,6 @@ const useStyles = makeStyles((theme) => ({
       duration: theme.transitions.duration.leavingScreen,
     }),
   },
-  appBarShift: {
-    marginLeft: drawerWidth,
-    width: `calc(100% - ${drawerWidth}px)`,
-    transition: theme.transitions.create(['width', 'margin'], {
-      easing: theme.transitions.easing.sharp,
-      duration: theme.transitions.duration.enteringScreen,
-    }),
-  },
   menuButton: {
     marginRight: 36,
   },
@@ -67,8 +60,11 @@ const GRID_QUERY = loader("../../graphql/grid.gql");
 export default function TopBar() {
   const classes = useStyles();
   const [open, setOpen] = React.useState(true);
-  const toggleDrawer = () => {
-    setOpen(!open);
+  const handleDrawerOpen = () => {
+    setOpen(true);
+  };
+  const handleDrawerClose = () => {
+    setOpen(false);
   };
 
   const {loading, error, data} = useQuery(GRID_QUERY,
@@ -88,20 +84,42 @@ export default function TopBar() {
   const maxSession = error ? 0 : data.grid.maxSession ?? 0;
   const sessionCount = error ? 0 : data.grid.sessionCount ?? 0;
   const nodeCount = error ? 0 : data.grid.nodeCount ?? 0;
-
+  const connectionError = !!error;
   return (
     <div className={classes.root}>
       <CssBaseline/>
-      <AppBar position="fixed" className={clsx(classes.appBar, open && classes.appBarShift)}>
+      <AppBar position="fixed" className={classes.appBar}>
         <Toolbar className={classes.toolbar}>
+          {!connectionError && (
+            <IconButton
+              edge="start"
+              color="inherit"
+              aria-label="open drawer"
+              onClick={handleDrawerOpen}
+              className={clsx(classes.menuButton, open && classes.menuButtonHidden)}
+            >
+              <MenuIcon/>
+            </IconButton>
+          )}
+          {!connectionError && (
+            <IconButton
+              edge="start"
+              color="inherit"
+              aria-label="close drawer"
+              onClick={handleDrawerClose}
+              className={clsx(classes.menuButton, !open && classes.menuButtonHidden)}
+            >
+              <ChevronLeftIcon/>
+            </IconButton>
+          )}
           <IconButton
             edge="start"
             color="inherit"
-            aria-label="open drawer"
-            onClick={toggleDrawer}
-            className={clsx(classes.menuButton)}
+            aria-label="close drawer"
+            href={"#help"}
+            className={clsx(classes.menuButton, !connectionError && classes.menuButtonHidden)}
           >
-            <MenuIcon/>
+            <HelpIcon/>
           </IconButton>
           <Box className={classes.toolbarTitle}>
             <img
@@ -129,7 +147,9 @@ export default function TopBar() {
           </Box>
         </Toolbar>
       </AppBar>
-      <NavBar open={open} setOpen={setOpen} width={drawerWidth} maxSession={maxSession} sessionCount={sessionCount} nodeCount={nodeCount}/>
+      {!error && (
+        <NavBar open={open} maxSession={maxSession} sessionCount={sessionCount} nodeCount={nodeCount}/>
+      )}
     </div>
   );
 }