Integrate existing remove bucket functionality from newux to current UI (#5289)

This commit takes the existing remove bucket functionality written by
brendanashworth, integrates it to the current UI with a dropdown for
each bucket, and fixes small issues that were present, like the dropdown
not disappearing after the user clicks on 'Delete' for certain buckets.
This feature only deletes a bucket that is empty (that has no objects).

Fixes #4166

browser/app/index.js

@@ -41,6 +41,8 @@ import _Login from './js/components/Login.js'
 import _Browse from './js/components/Browse.js'
 import fontAwesome from 'font-awesome/css/font-awesome.css'
 
+import MaterialDesignIconicFonts from 'material-design-iconic-font/dist/css/material-design-iconic-font.min.css'
+
 import Web from './js/web'
 window.Web = Web
 

browser/app/js/actions.js

@@ -24,6 +24,8 @@ export const SET_CURRENT_BUCKET = 'SET_CURRENT_BUCKET'
 export const SET_CURRENT_PATH = 'SET_CURRENT_PATH'
 export const SET_BUCKETS = 'SET_BUCKETS'
 export const ADD_BUCKET = 'ADD_BUCKET'
+export const REMOVE_BUCKET = 'REMOVE_BUCKET'
+export const SHOW_BUCKET_DROPDOWN = 'SHOW_BUCKET_DROPDOWN'
 export const SET_VISIBLE_BUCKETS = 'SET_VISIBLE_BUCKETS'
 export const SET_OBJECTS = 'SET_OBJECTS'
 export const APPEND_OBJECTS = 'APPEND_OBJECTS'
@@ -173,6 +175,27 @@ export const addBucket = bucket => {
   }
 }
 
+export const removeBucket = bucket => {
+  return {
+    type: REMOVE_BUCKET,
+    bucket
+  }
+}
+
+export const showBucketDropdown = bucket => {
+  return {
+    type: SHOW_BUCKET_DROPDOWN,
+    showBucketDropdown: true
+  }
+}
+
+export const hideBucketDropdown = bucket => {
+  return {
+    type: SHOW_BUCKET_DROPDOWN,
+    showBucketDropdown: false
+  }
+}
+
 export const showMakeBucketModal = () => {
   return {
     type: SHOW_MAKEBUCKET_MODAL,
@@ -314,6 +337,31 @@ export const selectBucket = (newCurrentBucket, prefix) => {
   }
 }
 
+export const deleteBucket = (bucket) => {
+  return (dispatch, getState) => {
+    // DeleteBucket() RPC call will ONLY delete a bucket if it is empty of
+    // objects. This means a call can just be sent, as it is entirely reversable
+    // and won't do any permanent damage.
+    web.DeleteBucket({
+      bucketName: bucket
+    })
+      .then(() => {
+        dispatch(showAlert({
+          type: 'info',
+          message: `Bucket '${bucket}' has been deleted.`
+        }))
+        dispatch(removeBucket(bucket))
+      })
+      .catch(err => {
+        let message = err.message
+        dispatch(showAlert({
+          type: 'danger',
+          message: message
+        }))
+      })
+  }
+}
+
 export const listObjects = () => {
   return (dispatch, getState) => {
     const {buckets, currentBucket, currentPath, marker, objects, istruncated, web} = getState()

browser/app/js/components/Browse.js

@@ -210,9 +210,19 @@ export default class Browse extends React.Component {
     dispatch(actions.hideAbout())
   }
 
+  toggleBucketDropdown(e) {
+    const {dispatch, showBucketDropdown} = this.props
+    if (showBucketDropdown) {
+      dispatch(actions.hideBucketDropdown())
+    } else {
+      dispatch(actions.showBucketDropdown())
+    }
+  }
+
   showBucketPolicy(e) {
     e.preventDefault()
     const {dispatch} = this.props
+    this.toggleBucketDropdown(e)
     dispatch(actions.showBucketPolicy())
   }
 
@@ -222,10 +232,17 @@ export default class Browse extends React.Component {
     dispatch(actions.hideBucketPolicy())
   }
 
+  deleteBucket(e, bucket) {
+    e.preventDefault()
+    const {dispatch} = this.props
+    this.toggleBucketDropdown(e)
+    dispatch(actions.deleteBucket(bucket))
+    browserHistory.push(`${minioBrowserPrefix}/`)
+  }
+
   uploadFile(e) {
     e.preventDefault()
-    const {dispatch, buckets} = this.props
-
+    const {dispatch, buckets, currentBucket} = this.props
     if (buckets.length === 0) {
       dispatch(actions.showAlert({
         type: 'danger',
@@ -233,6 +250,13 @@ export default class Browse extends React.Component {
       }))
       return
     }
+    if (currentBucket === '') {
+      dispatch(actions.showAlert({
+        type: 'danger',
+        message: "Please choose a bucket before trying to upload files."
+      }))
+      return
+    }
     let file = e.target.files[0]
     e.target.value = null
     this.xhr = new XMLHttpRequest()
@@ -577,7 +601,9 @@ export default class Browse extends React.Component {
         <SideBar searchBuckets={ this.searchBuckets.bind(this) }
           selectBucket={ this.selectBucket.bind(this) }
           clickOutside={ this.hideSidebar.bind(this) }
-          showPolicy={ this.showBucketPolicy.bind(this) } />
+          showPolicy={ this.showBucketPolicy.bind(this) }
+          deleteBucket={ this.deleteBucket.bind(this) }
+          toggleBucketDropdown={ this.toggleBucketDropdown.bind(this) } />
         <div className="fe-body">
           <div className={ 'list-actions' + (classNames({
                              ' list-actions-toggled': checkedObjects.length > 0

browser/app/js/components/SideBar.js

@@ -21,8 +21,9 @@ import Scrollbars from 'react-custom-scrollbars/lib/Scrollbars'
 import connect from 'react-redux/lib/components/connect'
 
 import logo from '../../img/logo.svg'
+import Dropdown from 'react-bootstrap/lib/Dropdown'
 
-let SideBar = ({visibleBuckets, loadBucket, currentBucket, selectBucket, searchBuckets, sidebarStatus, clickOutside, showPolicy}) => {
+let SideBar = ({visibleBuckets, loadBucket, currentBucket, selectBucket, searchBuckets, sidebarStatus, clickOutside, showPolicy, deleteBucket, toggleBucketDropdown, showBucketDropdown}) => {
 
   const list = visibleBuckets.map((bucket, i) => {
     return <li className={ classNames({
@@ -33,7 +34,19 @@ let SideBar = ({visibleBuckets, loadBucket, currentBucket, selectBucket, searchB
                                     }) }>
                { bucket }
              </a>
-             <i className="fesli-trigger" onClick={ showPolicy }></i>
+             <Dropdown open={bucket === currentBucket && showBucketDropdown} onToggle={toggleBucketDropdown} className="bucket-dropdown" id="bucket-dropdown">
+               <Dropdown.Toggle noCaret>
+                 <i className="zmdi zmdi-more-vert" />
+               </Dropdown.Toggle>
+               <Dropdown.Menu className="dropdown-menu-right">
+                 <li>
+                   <a onClick={ showPolicy }>Edit policy</a>
+                 </li>
+                 <li>
+                   <a onClick={ (e) => deleteBucket(e, bucket) }>Delete</a>
+                 </li>
+               </Dropdown.Menu>
+             </Dropdown>
            </li>
   })
 
@@ -80,6 +93,7 @@ export default connect(state => {
     visibleBuckets: state.visibleBuckets,
     loadBucket: state.loadBucket,
     currentBucket: state.currentBucket,
+    showBucketDropdown: state.showBucketDropdown,
     sidebarStatus: state.sidebarStatus
   }
 })(SideBar)

browser/app/js/reducers.js

@@ -25,6 +25,7 @@ export default (state = {
     storageInfo: {},
     serverInfo: {},
     currentBucket: '',
+    showBucketDropdown: false,
     currentPath: '',
     showMakeBucketModal: false,
     uploads: {},
@@ -71,6 +72,14 @@ export default (state = {
       newState.buckets = [action.bucket, ...newState.buckets]
       newState.visibleBuckets = [action.bucket, ...newState.visibleBuckets]
       break
+    case actions.REMOVE_BUCKET:
+      newState.buckets = newState.buckets.filter(bucket => bucket != action.bucket)
+      newState.visibleBuckets = newState.visibleBuckets.filter(bucket => bucket != action.bucket)
+      newState.currentBucket = ""
+      break
+    case actions.SHOW_BUCKET_DROPDOWN:
+      newState.showBucketDropdown = action.showBucketDropdown
+      break
     case actions.SET_VISIBLE_BUCKETS:
       newState.visibleBuckets = action.visibleBuckets
       break

browser/app/js/web.js

@@ -87,6 +87,9 @@ export default class Web {
   MakeBucket(args) {
     return this.makeCall('MakeBucket', args)
   }
+  DeleteBucket(args) {
+    return this.makeCall('DeleteBucket', args)
+  }
   ListObjects(args) {
     return this.makeCall('ListObjects', args)
   }

browser/app/less/inc/sidebar.less

@@ -111,7 +111,7 @@
 		}
 
 		&:hover {
-			.fesli-trigger {
+			.bucket-dropdown .dropdown-toggle {
 				.opacity(0.6);
 
 				&:hover {
@@ -132,17 +132,40 @@
 	}
 }
 
-.fesli-trigger {
-	.opacity(0);
-	.transition(all);
-	.transition-duration(200ms);
+/* Dropdown */
+.bucket-dropdown {
 	position: absolute;
-	top: 0;
-	right: 0;
+	top: 0px;
+	right: 0px;
 	width: 35px;
 	height: 100%;
 	cursor: pointer;
-	background: url(../../img/more-h-light.svg) no-repeat top 20px left;
+	color: @white;
+
+	.dropdown-toggle {
+		.opacity(0);
+		.transition(all);
+		.transition-duration(200ms);
+		font-size: 20px;
+		background-color: transparent;
+	}
+
+	.dropdown-menu-right {
+		padding: 15px 0;
+		margin-top: -1px;
+		& li {
+			a:before {
+				content: none;
+				-webkit-box-shadow: @dropdown-shadow;
+				box-shadow: @dropdown-shadow;	
+			}
+			&:not(.active):hover {
+				& > a {
+					color: @dropdown-link-hover-color;
+				}
+			}
+		}
+	}
 }
 
 /* Scrollbar */

browser/package.json

@@ -60,6 +60,7 @@
     "humanize": "0.0.9",
     "json-loader": "^0.5.4",
     "local-storage-fallback": "^1.3.0",
+    "material-design-iconic-font": "^2.2.0",
     "mime-db": "^1.25.0",
     "mime-types": "^2.1.13",
     "moment": "^2.15.1",