SSDM-13579: Added navigation possibility to the navigation bar.

ui-admin/src/js/components/database/data-browser/DataBrowser.jsx

@@ -150,11 +150,15 @@ class DataBrowser extends React.Component {
     this.controller.gridController = gridController
   }
 
+  async handlePathChange(path) {
+    await this.setPath(path)
+  }
+
   async setPath(path) {
-    if (this.state.path !== path) {
+    if (this.state.path !== path + '/') {
       this.setState({ path: path + '/' })
       this.controller.setPath(path + '/')
-      this.controller.gridController.load()
+      await this.controller.gridController.load()
     }
   }
 
@@ -180,7 +184,10 @@ class DataBrowser extends React.Component {
           selectedFile={selectedFile}
           multiselectedFiles={multiselectedFiles}
         />
-        <NavigationBar path={path} />
+        <NavigationBar
+          path={path}
+          onPathChange={this.handlePathChange}
+        />
         <div className={[classes.flexContainer, classes.boundary, classes.content].join(' ')}>
           {viewType === 'list' && (
             <Grid

ui-admin/src/js/components/database/data-browser/NavigationBar.jsx

@@ -20,6 +20,7 @@ import { withStyles } from '@material-ui/core/styles'
 import autoBind from 'auto-bind'
 import logger from "@src/js/common/logger.js";
 import Container from "@src/js/components/common/form/Container.jsx";
+import Link from "@material-ui/core/Link";
 
 const buttonSize = 'small'
 
@@ -29,7 +30,10 @@ const styles = theme => ({
     display: 'flex',
     whiteSpace: 'nowrap',
     marginLeft: theme.spacing(1),
-    marginRight: theme.spacing(1)
+    marginRight: theme.spacing(1),
+  },
+  link: {
+    fontSize: theme.typography.body2.fontSize
   }
 })
 
@@ -37,21 +41,50 @@ class NavigationBar extends React.Component {
   constructor(props, context) {
     super(props, context)
     autoBind(this)
+  }
+
+  splitPath(path) {
+    const folders = path.split('/').filter((folder) => folder.length > 0)
+    let paths = new Array(folders.length)
+
+    if (paths.length > 0) {
+      paths[0] = '/' + folders[0]
+      for (let i = 1; i < paths.length; i++) {
+        paths[i] = paths[i - 1] + '/' + folders[i]
+      }
+    }
 
-    this.controller = this.props.controller
+    return { folders, paths }
   }
 
-  handleUploadFiles() {}
+  renderLinks() {
+    const { classes, path, onPathChange } = this.props
+    const { folders, paths } = this.splitPath(path)
+    const components = new Array(2 * paths.length + 1)
 
-  handleUploadFolders() {}
+    components[0] = '/'
+    for (let i = 0; i < paths.length; i++) {
+      components[2 * i + 1] = <Link
+        key={'path-' + i}
+        classes={{ root: classes.link }}
+        component="button"
+        onClick={() => onPathChange(paths[i])}
+        disabled={i === path.length - 1}
+      >
+        {folders[i]}
+      </Link>
+      components[2 * i + 2] = '/'
+    }
+
+    return components
+  }
 
   render() {
     logger.log(logger.DEBUG, 'NavigationBar.render')
 
-    const { classes, path } = this.props
     return (
       <Container>
-        { path }
+        { this.renderLinks() }
       </Container>
     )
   }