Browser: Implement multiple object delete (#3859)

browser/app/js/actions.js

@@ -412,13 +412,14 @@ export const setLoginError = () => {
   }
 }
 
-export const downloadAllasZip = (url, req, xhr) => {
+export const downloadSelected = (url, req, xhr) => {
   return (dispatch) => {
     xhr.open('POST', url, true)
     xhr.responseType = 'blob'
 
     xhr.onload = function(e) {
       if (this.status == 200) {
+        dispatch(checkedObjectsReset())
         var blob = new Blob([this.response], {
           type: 'application/zip'
         })

browser/app/js/components/Browse.js

@@ -226,15 +226,43 @@ export default class Browse extends React.Component {
   }
 
   removeObject() {
-    const {web, dispatch, currentPath, currentBucket, deleteConfirmation} = this.props
+    const {web, dispatch, currentPath, currentBucket, deleteConfirmation, checkedObjects} = this.props
+    let objects = checkedObjects.length > 0 ? checkedObjects : [deleteConfirmation.object]
+
     web.RemoveObject({
       bucketname: currentBucket,
-      objects: [deleteConfirmation.object]
+      objects: objects
     })
       .then(() => {
         this.hideDeleteConfirmation()
-	let delObject = deleteConfirmation.object.replace(currentPath, '')
-        dispatch(actions.removeObject(delObject))
+        if (checkedObjects.length > 0) {
+          for (let i = 0; i < checkedObjects.length; i++) {
+            dispatch(actions.removeObject(checkedObjects[i].replace(currentPath, '')))
+          }
+          dispatch(actions.checkedObjectsReset())
+        } else {
+          let delObject = deleteConfirmation.object.replace(currentPath, '')
+          dispatch(actions.removeObject(delObject))
+        }
+      })
+      .catch(e => dispatch(actions.showAlert({
+        type: 'danger',
+        message: e.message
+      })))
+  }
+
+  removeObjectSelected() {
+    const {web, dispatch, currentPath, currentBucket, checkedObjects} = this.props
+    web.RemoveObject({
+      bucketname: currentBucket,
+      objects: checkedObjects
+    })
+      .then(() => {
+        this.hideDeleteConfirmation()
+        for (let i = 0; i < checkedObjects.length; i++) {
+          dispatch(actions.removeObject(checkedObjects[i].replace(currentPath, '')))
+        }
+        dispatch(actions.checkedObjectsReset())
       })
       .catch(e => dispatch(actions.showAlert({
         type: 'danger',
@@ -368,7 +396,7 @@ export default class Browse extends React.Component {
     e.target.checked ? dispatch(actions.checkedObjectsAdd(objectName)) : dispatch(actions.checkedObjectsRemove(objectName))
   }
 
-  downloadAll() {
+  downloadSelected() {
     const {dispatch} = this.props
     let req = {
       bucketName: this.props.currentBucket,
@@ -378,7 +406,12 @@ export default class Browse extends React.Component {
     let requestUrl = location.origin + "/minio/zip?token=" + localStorage.token
 
     this.xhr = new XMLHttpRequest()
-    dispatch(actions.downloadAllasZip(requestUrl, req, this.xhr))
+    dispatch(actions.downloadSelected(requestUrl, req, this.xhr))
+  }
+
+  clearSelected() {
+    const {dispatch} = this.props
+    dispatch(actions.checkedObjectsReset())
   }
 
   render() {
@@ -511,7 +544,9 @@ export default class Browse extends React.Component {
                              ' list-actions-toggled': checkedObjects.length > 0
                            })) }>
             <span className="la-label"><i className="fa fa-check-circle" /> { checkedObjects.length } Objects selected</span>
-            <span className="la-actions pull-right"><button onClick={ this.downloadAll.bind(this) }> Download all as zip </button></span>
+            <span className="la-actions pull-right"><button onClick={ this.downloadSelected.bind(this) }> Download all as zip </button></span>
+            <span className="la-actions pull-right"><button onClick={ this.showDeleteConfirmation.bind(this) }> Delete selected </button></span>
+            <i className="la-close fa fa-times" onClick={ this.clearSelected.bind(this) }></i>
           </div>
           <Dropzone>
             { alertBox }

browser/app/js/components/ObjectsList.js

@@ -29,23 +29,35 @@ let ObjectsList = ({objects, currentPath, selectPrefix, dataType, showDeleteConf
     let deleteButton = ''
     if (web.LoggedIn())
       deleteButton = <a href="" className="fiad-action" onClick={ (e) => showDeleteConfirmation(e, `${currentPath}${object.name}`) }><i className="fa fa-trash"></i></a>
-    if (!object.name.endsWith('/')) {
-      actionButtons = <Dropdown id="fia-dropdown">
-                        <Dropdown.Toggle noCaret className="fia-toggle"></Dropdown.Toggle>
-                        <Dropdown.Menu>
-                          <a href="" className="fiad-action" onClick={ (e) => shareObject(e, `${currentPath}${object.name}`) }><i className="fa fa-copy"></i></a>
-                          { deleteButton }
-                        </Dropdown.Menu>
-                      </Dropdown>
+
+    if (!checkedObjectsArray.length > 0) {
+      if (!object.name.endsWith('/')) {
+        actionButtons = <Dropdown id={ "fia-dropdown-" + object.name.replace('.', '-') }>
+                          <Dropdown.Toggle noCaret className="fia-toggle"></Dropdown.Toggle>
+                          <Dropdown.Menu>
+                            <a href="" className="fiad-action" onClick={ (e) => shareObject(e, `${currentPath}${object.name}`) }><i className="fa fa-copy"></i></a>
+                            { deleteButton }
+                          </Dropdown.Menu>
+                        </Dropdown>
+      }
     }
 
-    let activeClass = checkedObjectsArray.indexOf(object.name) > -1 ? ' fesl-row-selected' : ''
+    let activeClass = ''
+    let isChecked = ''
+
+    if (checkedObjectsArray.indexOf(object.name) > -1) {
+      activeClass = ' fesl-row-selected'
+      isChecked = true
+    }
 
     return (
       <div key={ i } className={ "fesl-row " + loadingClass + activeClass } data-type={ dataType(object.name, object.contentType) }>
         <div className="fesl-item fesl-item-icon">
           <div className="fi-select">
-            <input type="checkbox" name={ object.name } onChange={ (e) => checkObject(e, object.name) } />
+            <input type="checkbox"
+              name={ object.name }
+              checked={ isChecked }
+              onChange={ (e) => checkObject(e, object.name) } />
             <i className="fis-icon"></i>
             <i className="fis-helper"></i>
           </div>

browser/app/less/inc/list.less

@@ -391,7 +391,7 @@ div.fesl-row {
     .opacity(0);
     .transition(all);
     .transition-duration(200ms);
-    padding: 20px 25px;
+    padding: 20px 70px 20px 25px;
     top: 0;
     left: 0;
     width: 100%;
@@ -450,6 +450,7 @@ div.fesl-row {
         font-size: 13px;
         .transition(all);
         .transition-duration(300ms);
+        margin-left: 10px;
         
         &:hover {
             background-color: @white;