UI: Close menu on click (kubeflow#1114)

* Close menu on click Fix close time for snackbar Add Material UI to the README Add link to developer guide * Change README
arrikto · Apr 1, 2020 · bccc281 · bccc281
1 parent 2e50219
commit bccc281
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 31 deletions.
diff --git a/docs/developer-guide.md b/docs/developer-guide.md
@@ -67,6 +67,10 @@ Please see [new-trial-kind.md](./new-trial-kind.md)
 
 Please see [algorithm-settings.md](./algorithm-settings.md)
 
+## Katib UI documentation
+
+Please see [Katib UI README](https://github.com/kubeflow/katib/tree/master/pkg/ui/v1alpha3)
+
 ## Design proposals
 
-Please see [proposals](./proposals)
+Please see [proposals](./proposals)
diff --git a/pkg/ui/v1alpha3/README.md b/pkg/ui/v1alpha3/README.md
@@ -3,6 +3,8 @@
 This is the source code for the Katib UI. Current version of Katib UI is v1alpha3. On the official Kubeflow website [here](https://www.kubeflow.org/docs/components/hyperparameter-tuning/experiment/#running-the-experiment-from-the-katib-ui) you can find information how to use Katib UI.
 We are using [React](https://reactjs.org/) framework to create frontend and Go as a backend.
 
+We are using [Material UI](https://material-ui.com/) to design frontend. Try to use Material UI components to implement new Katib UI features.
+
 ## Folder structure
 
 1. `Dockerfile` and file to serve the UI `main.go` you can find under [cmd/ui/v1alpha3](https://github.com/kubeflow/katib/tree/master/cmd/ui/v1alpha3).

diff --git a/pkg/ui/v1alpha3/frontend/src/components/Menu/Menu.jsx b/pkg/ui/v1alpha3/frontend/src/components/Menu/Menu.jsx
@@ -1,4 +1,7 @@
 import React from 'react';
+import { connect } from 'react-redux';
+import { Link } from 'react-router-dom';
+
 import makeStyles from '@material-ui/styles/makeStyles';
 import Drawer from '@material-ui/core/Drawer';
 import List from '@material-ui/core/List';
@@ -8,19 +11,15 @@ import ListItem from '@material-ui/core/ListItem';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
 import ListItemText from '@material-ui/core/ListItemText';
 import Collapse from '@material-ui/core/Collapse';
-
 import TuneIcon from '@material-ui/icons/Tune';
 import NoteAddIcon from '@material-ui/icons/NoteAdd';
 import WatchLaterIcon from '@material-ui/icons/WatchLater';
 import SearchIcon from '@material-ui/icons/Search';
-import SetttingsIcon from '@material-ui/icons/Settings';
+import SettingsIcon from '@material-ui/icons/Settings';
 import ExpandLess from '@material-ui/icons/ExpandLess';
 import ExpandMore from '@material-ui/icons/ExpandMore';
 import InfoIcon from '@material-ui/icons/Info';
 
-import { Link } from 'react-router-dom';
-
-import { connect } from 'react-redux';
 import { toggleMenu } from '../../actions/generalActions';
 
 const module = 'general';
@@ -48,7 +47,7 @@ const Menu = props => {
 
   const classes = useStyles();
 
-  const closeMenu = () => {
+  const onCloseMenu = () => {
     props.toggleMenu(false);
   };
 
@@ -58,7 +57,7 @@ const Menu = props => {
   const variant = 'title';
   return (
     <div>
-      <Drawer open={props.menuOpen} onClose={closeMenu}>
+      <Drawer open={props.menuOpen} onClose={onCloseMenu}>
         <List>
           {/* HP */}
           <ListItem button onClick={toggleHP}>
@@ -74,7 +73,13 @@ const Menu = props => {
           </ListItem>
           <Collapse in={hp} timeout="auto" unmountOnExit>
             <List component="div" disablePadding>
-              <ListItem button className={classes.nested} component={Link} to="/katib/hp">
+              <ListItem
+                button
+                className={classes.nested}
+                component={Link}
+                to="/katib/hp"
+                onClick={onCloseMenu}
+              >
                 <ListItemIcon>
                   <NoteAddIcon color={iconColor} />
                 </ListItemIcon>
@@ -84,7 +89,13 @@ const Menu = props => {
                   </Typography>
                 </ListItemText>
               </ListItem>
-              <ListItem button className={classes.nested} component={Link} to="/katib/hp_monitor">
+              <ListItem
+                button
+                className={classes.nested}
+                component={Link}
+                to="/katib/hp_monitor"
+                onClick={onCloseMenu}
+              >
                 <ListItemIcon>
                   <WatchLaterIcon color={iconColor} />
                 </ListItemIcon>
@@ -111,7 +122,13 @@ const Menu = props => {
           </ListItem>
           <Collapse in={nas} timeout="auto" unmountOnExit>
             <List component="div" disablePadding>
-              <ListItem button className={classes.nested} component={Link} to="/katib/nas">
+              <ListItem
+                button
+                className={classes.nested}
+                component={Link}
+                to="/katib/nas"
+                onClick={onCloseMenu}
+              >
                 <ListItemIcon>
                   <NoteAddIcon color={iconColor} />
                 </ListItemIcon>
@@ -121,7 +138,13 @@ const Menu = props => {
                   </Typography>
                 </ListItemText>
               </ListItem>
-              <ListItem button className={classes.nested} component={Link} to="/katib/nas_monitor">
+              <ListItem
+                button
+                className={classes.nested}
+                component={Link}
+                to="/katib/nas_monitor"
+                onClick={onCloseMenu}
+              >
                 <ListItemIcon>
                   <WatchLaterIcon color={iconColor} />
                 </ListItemIcon>
@@ -135,9 +158,9 @@ const Menu = props => {
           </Collapse>
           <Divider />
           {/* TRIAL MANIFESTS */}
-          <ListItem button component={Link} to="/katib/trial">
+          <ListItem button component={Link} to="/katib/trial" onClick={onCloseMenu}>
             <ListItemIcon>
-              <SetttingsIcon color={iconColor} />
+              <SettingsIcon color={iconColor} />
             </ListItemIcon>
             <ListItemText>
               <Typography variant={variant} color={color}>
@@ -146,17 +169,6 @@ const Menu = props => {
             </ListItemText>
           </ListItem>
           <Divider />
-          {/* ABOUT */}
-          <ListItem button component={Link} to="/katib/about">
-            <ListItemIcon>
-              <InfoIcon color={iconColor} />
-            </ListItemIcon>
-            <ListItemText>
-              <Typography variant={variant} color={color}>
-                About
-              </Typography>
-            </ListItemText>
-          </ListItem>
         </List>
       </Drawer>
     </div>

diff --git a/pkg/ui/v1alpha3/frontend/src/components/Menu/Snack.jsx b/pkg/ui/v1alpha3/frontend/src/components/Menu/Snack.jsx
@@ -11,10 +11,6 @@ import { closeSnackbar } from '../../actions/generalActions';
 const module = 'general';
 
 const useStyles = makeStyles({
-  root: {
-    flexGrow: 1,
-    marginTop: 40,
-  },
   close: {
     padding: 4,
   },
@@ -32,8 +28,8 @@ const Snack = props => {
         horizontal: horizontal,
       }}
       open={props.snackOpen}
-      autoHideDuration={600}
-      onClose={props.handleClose}
+      autoHideDuration={6000}
+      onClose={props.closeSnackbar}
       ContentProps={{
         'aria-describedby': 'message-id',
       }}