SSDM-13579: Made the LeftToolbar component change depending on whether at...

SSDM-13579: Made the LeftToolbar component change depending on whether at least one file is selected or not.

ui-admin/src/js/common/messages.js

@@ -65,6 +65,7 @@ const keys = {
   DATE: 'DATE',
   DAY_OR_DAYS: 'DAY_OR_DAYS',
   DEACTIVATE_USER: 'DEACTIVATE_USER',
+  DELETE: 'DELETE',
   DELETION: 'DELETION',
   DELETIONS: 'DELETIONS',
   DESCENDING: 'DESCENDING',
@@ -373,6 +374,7 @@ const messages_en = {
   [keys.DATE]: 'Date',
   [keys.DAY_OR_DAYS]: '${0} day(s)',
   [keys.DEACTIVATE_USER]: 'Deactivate user',
+  [keys.DELETE]: 'Delete',
   [keys.DELETION]: 'Deletion',
   [keys.DELETIONS]: 'Deletions',
   [keys.DESCENDING]: 'Descending',

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

@@ -142,6 +142,7 @@ class DataBrowser extends React.Component {
           onViewTypeChange={this.handleViewTypeChange}
           onShowInfoChange={this.handleShowInfoChange}
           showInfo={showInfo}
+          selectedFile={selectedFile}
         />
         <div className={[classes.flexContainer, classes.boundary, classes.content].join(' ')}>
           {viewType === 'list' && (
@@ -209,7 +210,7 @@ class DataBrowser extends React.Component {
             />
           )}
           {showInfo && selectedFile && (
-            <InfoPanel file={selectedFile} configuration={configuration} />
+            <InfoPanel selectedFile={selectedFile} configuration={configuration} />
           )}
         </div>
       </div>

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

@@ -58,33 +58,33 @@ class InfoPanel extends React.Component {
   render() {
     const {
       classes,
-      file,
+      selectedFile,
       configuration
     } = this.props
 
-    return (file &&
+    return (selectedFile &&
       <Container className={classes.container}>
         <span className={classes.fileName}>
-          <Header size='big'>{file.name}</Header>
+          <Header size='big'>{selectedFile.name}</Header>
         </span>
-        <ItemIcon file={file} classes={classes} configuration={configuration} />
+        <ItemIcon file={selectedFile} classes={classes} configuration={configuration} />
         <Table>
           <TableBody>
             <TableRow>
               <TableCell variant='head' component='th'>{messages.get(messages.SIZE)}</TableCell>
-              <TableCell>{file.size}</TableCell>
+              <TableCell>{selectedFile.size}</TableCell>
             </TableRow>
             <TableRow>
               <TableCell variant='head' component='th'>{messages.get(messages.CREATED)}</TableCell>
-              <TableCell>{file.creationTime.toLocaleString()}</TableCell>
+              <TableCell>{selectedFile.creationTime.toLocaleString()}</TableCell>
             </TableRow>
             <TableRow>
               <TableCell variant='head' component='th'>{messages.get(messages.MODIFIED)}</TableCell>
-              <TableCell>{file.lastModifiedTime.toLocaleString()}</TableCell>
+              <TableCell>{selectedFile.lastModifiedTime.toLocaleString()}</TableCell>
             </TableRow>
             <TableRow>
               <TableCell variant='head' component='th'>{messages.get(messages.ACCESSED)}</TableCell>
-              <TableCell>{file.lastAccessTime.toLocaleString()}</TableCell>
+              <TableCell>{selectedFile.lastAccessTime.toLocaleString()}</TableCell>
             </TableRow>
           </TableBody>
         </Table>

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

@@ -18,9 +18,12 @@
 import React from 'react'
 import Button from '@material-ui/core/Button'
 import CreateNewFolderIcon from '@material-ui/icons/CreateNewFolderOutlined'
+import DownloadIcon from '@material-ui/icons/GetApp'
+import DeleteIcon from '@material-ui/icons/Delete'
 import messages from '@src/js/common/messages.js'
 import { withStyles } from '@material-ui/core/styles'
 import logger from "@src/js/common/logger.js";
+import autoBind from "auto-bind";
 
 const color = 'secondary'
 
@@ -35,10 +38,16 @@ const styles = theme => ({
 })
 
 class LeftToolbar extends React.Component {
-  render() {
-    logger.log(logger.DEBUG, 'LeftToolbar.render')
 
-    const { buttonSize, controller, classes } = this.props
+  constructor(props, context) {
+    super(props, context)
+    autoBind(this)
+
+    this.controller = this.props.controller
+  }
+
+  renderNoSelectionContextToolbar() {
+    const { classes, buttonSize } = this.props
     return (
       <div className={classes.buttons}>
         <Button
@@ -47,13 +56,50 @@ class LeftToolbar extends React.Component {
           size={buttonSize}
           variant='outlined'
           startIcon={<CreateNewFolderIcon />}
-          onClick={controller.handleNewFolderClick}
+          onClick={this.controller.handleNewFolderClick}
         >
           {messages.get(messages.NEW_FOLDER)}
         </Button>
       </div>
     )
   }
+
+  renderSelectionContextToolbar() {
+    const { classes, buttonSize } = this.props
+    return (
+      <div className={classes.buttons}>
+        <Button
+          classes={{ root: classes.button }}
+          color={color}
+          size={buttonSize}
+          variant='outlined'
+          startIcon={<DownloadIcon />}
+          onClick={this.controller.handleNewFolderClick}
+        >
+          {messages.get(messages.DOWNLOAD)}
+        </Button>
+        <Button
+          classes={{ root: classes.button }}
+          color={color}
+          size={buttonSize}
+          variant='outlined'
+          startIcon={<DeleteIcon />}
+          onClick={this.controller.handleNewFolderClick}
+        >
+          {messages.get(messages.DELETE)}
+        </Button>
+      </div>
+    )
+  }
+
+  render() {
+    logger.log(logger.DEBUG, 'LeftToolbar.render')
+
+    const { selectedFile } = this.props
+    return selectedFile
+        ? this.renderSelectionContextToolbar()
+        : this.renderNoSelectionContextToolbar()
+  }
 }
 
 export default withStyles(styles)(LeftToolbar)

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

@@ -49,11 +49,14 @@ class Toolbar extends React.Component {
   render() {
     logger.log(logger.DEBUG, 'Toolbar.render')
 
-    const { viewType, onViewTypeChange, classes, showInfo, onShowInfoChange } =
-      this.props
+    const { viewType, onViewTypeChange, classes, showInfo, onShowInfoChange,
+      selectedFile } = this.props
     return (
       <div className={classes.toolbar}>
-        <LeftToolbar buttonSize={buttonSize} controller={this.controller} />
+        <LeftToolbar
+          buttonSize={buttonSize}
+          controller={this.controller}
+          selectedFile={selectedFile} />
         <RightToolbar
           buttonSize={buttonSize}
           selected={showInfo}