Fix backend format for disk-cache - not to use FS format.json (#5732)

Fixes #5736

.gitignore

@@ -17,11 +17,8 @@ release
 *.syso
 coverage.txt
 .vscode/
-.snap
 *.tar.bz2
 parts/
 prime/
-snap/.snapcraft/
 stage/
 .sia_temp/
-buildcoveragecoverage.txt

.travis.yml

@@ -14,6 +14,9 @@ os:
 env:
 - ARCH=x86_64
 
+before_install:
+- nvm install stable
+
 script:
 ## Run all the tests
 - make
@@ -21,6 +24,8 @@ script:
 - diff -au <(gofmt -s -d pkg) <(printf "")
 - make test GOFLAGS="-timeout 15m -race -v"
 - make coverage
+- node --version
+- cd browser && yarn && yarn test && cd ..
 
 after_success:
 - bash <(curl -s https://codecov.io/bash)

README.md

@@ -53,18 +53,6 @@ chmod +x minio
 ./minio server /data
 ```
 
-### Snap
-Install minio using [Snap](https://snapcraft.io)
-```sh
-sudo snap install minio --edge
-```
-
-Start minio using `snap run` command
-```sh
-sudo snap connect minio:mount-observe
-sudo snap run minio server /data
-```
-
 ## Microsoft Windows
 ### Binary Download
 | Platform| Architecture | URL|
@@ -92,6 +80,41 @@ Source installation is only intended for developers and advanced users. If you d
 go get -u github.com/minio/minio
 ```
 
+## Allow port access for Firewalls
+
+By default Minio uses the port 9000 to listen for incoming connections. If your platform blocks the port by default, you may need to enable access to the port.
+
+### iptables
+
+For hosts with iptables enabled (RHEL, CentOS, etc), you can use `iptables` command to enable all traffic coming to specific ports. Use below command to allow
+access to port 9000
+
+```sh
+iptables -A INPUT -p tcp --dport 9000 -j ACCEPT
+service iptables restart
+```
+
+Below command enables all incoming traffic to ports ranging from 9000 to 9010.
+
+```sh
+iptables -A INPUT -p tcp --dport 9000:9010 -j ACCEPT
+service iptables restart
+```
+
+### ufw in Debian
+
+For hosts with ufw enabled (Debian based distros), you can use `ufw` command to allow traffic to specific ports. Use below command to allow access to port 9000
+
+```sh
+ufw allow 9000
+```
+
+Below command enables all incoming traffic to ports ranging from 9000 to 9010.
+
+```sh
+ufw allow 9000:9010/tcp
+```
+
 ## Test using Minio Browser
 Minio Server comes with an embedded web based object browser. Point your web browser to http://127.0.0.1:9000 ensure your server has started successfully.
 

README_zh_CN.md

@@ -53,21 +53,6 @@ chmod +x minio
 ./minio server /data
 ```
 
-### 快照版
-你可以下载最新版 `minio` [快照](https://snapcraft.io), 并且帮助我们一起验证master分支上[所有支持的Linux发行版](https://snapcraft.io/docs/core/install) 的一些最新修改:
-
-```sh
-sudo snap install minio --edge
-```
-
-每次有最新的 `minio` 被推送到服务器,你都会自动更新下来.
-
-你需要允许minio snap来观察其安装:
-
-```sh
-sudo snap connect minio:mount-observe
-```
-
 ## 微软Windows系统
 ### 下载二进制文件
 | 操作系统| CPU架构 | 地址|

browser/.editorconfig

@@ -3,7 +3,7 @@ root = true
 
 [*]
 indent_style = space
-indent_size = 4
+indent_size = 2
 end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true

browser/.prettierrc

@@ -0,0 +1,3 @@
+{
+  "semi": false
+}

browser/app/css/loader.css

@@ -54,7 +54,7 @@
 
 .pl-inner > img {
     width: 30px;
-    margin-top: 28px;
+    margin-top: 21px;
 }
 
 @-webkit-keyframes fade-in {

browser/app/img/logo.svg

@@ -1,57 +1,16 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   viewbox="0 0 160 256"
-   version="1.1"
-   id="svg3092"
-   height="218.14844"
-   width="137">
-  <defs
-     id="defs3094" />
-  <metadata
-     id="metadata3097">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     transform="translate(0.99999967,-982.85149)"
-     id="layer1">
-    <g
-       transform="matrix(1.0112586,0,0,1.0112586,5.4603732,-13.223714)"
-       id="g4144">
-      <g
-         id="g4140">
-        <g
-           style="image-rendering:auto"
-           id="minio"
-           transform="matrix(1.0000023,0,0,0.99999799,-739.31646,295.2269)">
-          <title
-             id="title3337">Minio Logo</title>
-          <path
-             d="m 803.42903,801.80813 c 12.40802,4.17067 27.0499,9.11665 37.95186,12.80906 -12.01295,-21.20683 -27.84305,-34.11687 -37.95186,-40.78578 l 0,27.97672 z m 0,93.72113 -14.22303,8.96217 0,-92.45864 c -1.52985,-0.5139 -2.97948,-0.9981 -4.33405,-1.45259 -19.98593,-6.67189 -32.7207,-17.95703 -35.85168,-31.77904 -2.54577,-11.21386 1.55064,-23.02184 11.24654,-32.39691 8.84929,-8.55225 21.22761,-18.39964 31.17304,-26.31619 3.60329,-2.86658 6.73129,-5.3173 9.2028,-7.39669 2.31406,-1.93977 1.61598,-4.95488 0.57033,-6.21441 -1.74073,-2.09127 -4.61921,-1.74669 -6.56195,-0.32379 -0.10398,0.0802 -5.65595,4.40832 -5.65595,4.40832 l -8.58195,-11.57033 c 0,0 5.60843,-4.14096 5.8223,-4.30137 8.39777,-6.155 19.54034,-4.98758 25.92406,2.71509 3.19039,3.84093 4.68459,8.69779 4.20929,13.67051 -0.47232,4.9549 -2.84579,9.43153 -6.68078,12.5922 -2.58439,2.12988 -5.73912,4.64298 -9.39291,7.54522 -9.70779,7.72641 -21.78905,17.33915 -30.14226,25.41907 -6.1253,5.9233 -8.70671,12.67834 -7.26896,19.02345 1.9873,8.75424 11.33268,16.34105 26.32213,21.37911 l 0,-46.22486 c 40.29563,13.62298 68.76248,61.22321 78.20589,87.64039 0,0 -41.76308,-14.15768 -63.98286,-21.64051 l 0,78.7198"
-             style="fill:#f8f8f8;fill-opacity:1;fill-rule:nonzero;stroke:none"
-             id="path48" />
-          <path
-             d="m 803.42903,826.12513 -14.22303,-4.78261 0,-9.30973 14.22303,4.77667 0,9.31567"
-             style="fill:#cdccca;fill-opacity:1;fill-rule:nonzero;stroke:none"
-             id="path50" />
-          <path
-             d="m 734.75566,745.06155 c -0.23469,0.16636 -0.54956,0.14853 -0.73077,-0.0743 -0.17823,-0.22576 -0.13063,-0.53766 0.0802,-0.73373 4.93113,-4.51525 24.45661,-23.86844 46.30805,-45.2624 l 8.58193,11.57033 c 0,0 -53.54135,34.01288 -54.23942,34.50007"
-             style="fill:#f14621;fill-opacity:1;fill-rule:nonzero;stroke:none"
-             id="path52" />
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="302px" height="579px" viewBox="0 0 302 579" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
+    <title>Untitled 2</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Minio_Logo_White" fill-rule="nonzero">
+            <g id="Group">
+                <path d="M225.835,28.882 C225.835,28.882 282.569,120.259 301.531,152.735 C301.837,153.264 301.707,153.963 301.251,154.419 C300.676,154.994 299.81,155.056 299.24,154.481 L201.484,52.243 L225.835,28.882 Z" id="Shape" fill="#F15A29"></path>
+                <path d="M58.706,361.854 C75.299,326.75 97.681,294.989 125.38,267.29 C135.915,256.76 147.036,247.002 158.701,238.037 L158.701,310.385 L58.706,361.854 Z M0.971,428.672 L158.7,348.375 L158.7,531.932 L194.244,578.623 L194.244,330.092 L215.833,318.987 C225.778,313.991 235.105,307.343 243.402,299.041 C284.517,257.931 285.17,191.574 245.226,149.749 L163.742,64.855 C160.493,61.383 158.788,56.838 158.938,52.06 C159.088,47.251 161.099,42.784 164.597,39.488 C171.811,32.704 183.305,33.161 190.088,40.369 L201.484,52.247 L225.835,28.881 C197.064,-8.431 161.861,-3.746 141.47,14.92 C131.417,24.383 125.644,37.198 125.208,51.003 C124.773,64.829 129.753,77.981 139.221,88.04 L139.33,88.159 L221.239,173.483 C248.176,202.151 247.637,247.235 219.617,275.255 C215.248,279.623 210.46,283.324 205.387,286.36 L194.245,292.091 L194.245,176.126 C160.167,193.688 129.09,216.251 101.692,243.655 C67.568,277.774 40.776,317.516 22.058,361.772 C12.875,383.479 5.837,405.829 0.971,428.672 Z" id="Shape" fill="#FFFFFF"></path>
+                <polygon id="Shape" fill="#BCBEC0" points="194.246 330.09 194.246 367.609 158.701 385.648 158.701 348.373"></polygon>
+            </g>
         </g>
-      </g>
     </g>
-  </g>
-</svg>
+</svg>

browser/app/index.js

@@ -1,5 +1,5 @@
 /*
- * Minio Cloud Storage (C) 2016 Minio, Inc.
+ * Minio Cloud Storage (C) 2016, 2018 Minio, Inc.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -13,106 +13,31 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import 'babel-polyfill'
 
-import './less/main.less'
+import "babel-polyfill"
+import "./less/main.less"
+import "font-awesome/css/font-awesome.css"
+import "material-design-iconic-font/dist/css/material-design-iconic-font.min.css"
 
-import React from 'react'
-import ReactDOM from 'react-dom'
-import thunkMiddleware from 'redux-thunk'
-import createStore from 'redux/lib/createStore'
-import applyMiddleware from 'redux/lib/applyMiddleware'
+import React from "react"
+import ReactDOM from "react-dom"
+import { Router, Route } from "react-router-dom"
+import { Provider } from "react-redux"
 
-import Route from 'react-router/lib/Route'
-import Router from 'react-router/lib/Router'
-import browserHistory from 'react-router/lib/browserHistory'
-import IndexRoute from 'react-router/lib/IndexRoute'
+import history from "./js/history"
+import configureStore from "./js/store/configure-store"
+import hideLoader from "./js/loader"
+import App from "./js/App"
 
-import Provider from 'react-redux/lib/components/Provider'
-import connect from 'react-redux/lib/components/connect'
+const store = configureStore()
 
-import Moment from 'moment'
-
-import { minioBrowserPrefix } from './js/constants.js'
-import * as actions from './js/actions.js'
-import reducer from './js/reducers.js'
-
-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
-
-import storage from 'local-storage-fallback'
-const store = applyMiddleware(thunkMiddleware)(createStore)(reducer)
-const Browse = connect(state => state)(_Browse)
-const Login = connect(state => state)(_Login)
-
-let web = new Web(`${window.location.protocol}//${window.location.host}${minioBrowserPrefix}/webrpc`, store.dispatch)
-
-window.web = web
-
-store.dispatch(actions.setWeb(web))
-
-function authNeeded(nextState, replace, cb) {
-  if (web.LoggedIn()) {
-    return cb()
-  }
-  if (location.pathname === minioBrowserPrefix || location.pathname === minioBrowserPrefix + '/') {
-    replace(`${minioBrowserPrefix}/login`)
-  }
-  return cb()
-}
-
-function authNotNeeded(nextState, replace) {
-  if (web.LoggedIn()) {
-    replace(`${minioBrowserPrefix}`)
-  }
-}
-
-const App = (props) => {
-  return <div>
-           { props.children }
-         </div>
-}
-
-ReactDOM.render((
-  <Provider store={ store } web={ web }>
-    <Router history={ browserHistory }>
-      <Route path='/' component={ App }>
-        <Route path={ minioBrowserPrefix } component={ App }>
-          <IndexRoute component={ Browse } onEnter={ authNeeded } />
-          <Route path='login' component={ Login } onEnter={ authNotNeeded } />
-          <Route path=':bucket' component={ Browse } onEnter={ authNeeded } />
-          <Route path=':bucket/*' component={ Browse } onEnter={ authNeeded } />
-        </Route>
-      </Route>
+ReactDOM.render(
+  <Provider store={store}>
+    <Router history={history}>
+      <App />
     </Router>
-  </Provider>
-  ), document.getElementById('root'))
+  </Provider>,
+  document.getElementById("root")
+)
 
-//Page loader
-let delay = [0, 400]
-let i = 0
-
-function handleLoader() {
-  if (i < 2) {
-    setTimeout(function() {
-      document.querySelector('.page-load').classList.add('pl-' + i)
-      i++
-      handleLoader()
-    }, delay[i])
-  }
-}
-handleLoader()
-
-if (storage.getItem('newlyUpdated')) {
-  store.dispatch(actions.showAlert({
-    type: 'success',
-    message: "Updated to the latest UI Version."
-  }))
-  storage.removeItem('newlyUpdated')
-}
+hideLoader()

browser/app/js/App.js

@@ -0,0 +1,32 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import { Route, Switch, Redirect } from "react-router-dom"
+import Browser from "./browser/Browser"
+import Login from "./browser/Login"
+import web from "./web"
+
+export const App = () => {
+  return (
+    <Switch>
+      <Route path={"/login"} component={Login} />
+      <Route path={"/:bucket?/*"} component={Browser} />
+    </Switch>
+  )
+}
+
+export default App

browser/app/js/__tests__/App.test.js

@@ -0,0 +1,65 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import { shallow, mount } from "enzyme"
+import { MemoryRouter } from "react-router-dom"
+import App from "../App"
+
+jest.mock("../browser/Login", () => () => <div>Login</div>)
+jest.mock("../browser/Browser", () => () => <div>Browser</div>)
+
+describe("App", () => {
+  it("should render without crashing", () => {
+    shallow(<App />)
+  })
+
+  it("should render Login component for '/login' route", () => {
+    const wrapper = mount(
+      <MemoryRouter initialEntries={["/login"]}>
+        <App />
+      </MemoryRouter>
+    )
+    expect(wrapper.text()).toBe("Login")
+  })
+
+  it("should render Browser component for '/' route", () => {
+    const wrapper = mount(
+      <MemoryRouter initialEntries={["/"]}>
+        <App />
+      </MemoryRouter>
+    )
+    expect(wrapper.text()).toBe("Browser")
+  })
+
+  it("should render Browser component for '/bucket' route", () => {
+    const wrapper = mount(
+      <MemoryRouter initialEntries={["/bucket"]}>
+        <App />
+      </MemoryRouter>
+    )
+    expect(wrapper.text()).toBe("Browser")
+  })
+
+  it("should render Browser component for '/bucket/a/b/c' route", () => {
+    const wrapper = mount(
+      <MemoryRouter initialEntries={["/bucket/a/b/c"]}>
+        <App />
+      </MemoryRouter>
+    )
+    expect(wrapper.text()).toBe("Browser")
+  })
+})

browser/app/js/__tests__/jsonrpc-test.js

@@ -14,30 +14,28 @@
  * limitations under the License.
  */
 
-import expect from 'expect';
-import JSONrpc from '../jsonrpc';
+import JSONrpc from "../jsonrpc"
 
-describe('jsonrpc', () => {
-  it('should fail with invalid endpoint', (done) => {
+describe("jsonrpc", () => {
+  it("should fail with invalid endpoint", done => {
     try {
       let jsonRPC = new JSONrpc({
-        endpoint: 'htt://localhost:9000',
-        namespace: 'Test'
-      });
+        endpoint: "htt://localhost:9000",
+        namespace: "Test"
+      })
     } catch (e) {
-      done();
+      done()
     }
-  });
-  it('should succeed with valid endpoint', () => {
+  })
+  it("should succeed with valid endpoint", () => {
     let jsonRPC = new JSONrpc({
-      endpoint: 'http://localhost:9000/webrpc',
-      namespace: 'Test'
-    });
-    expect(jsonRPC.version).toEqual('2.0');
-    expect(jsonRPC.host).toEqual('localhost');
-    expect(jsonRPC.port).toEqual('9000');
-    expect(jsonRPC.path).toEqual('/webrpc');
-    expect(jsonRPC.scheme).toEqual('http');
-  });
-});
-
+      endpoint: "http://localhost:9000/webrpc",
+      namespace: "Test"
+    })
+    expect(jsonRPC.version).toEqual("2.0")
+    expect(jsonRPC.host).toEqual("localhost")
+    expect(jsonRPC.port).toEqual("9000")
+    expect(jsonRPC.path).toEqual("/webrpc")
+    expect(jsonRPC.scheme).toEqual("http")
+  })
+})

browser/app/js/actions.js

@@ -1,695 +0,0 @@
-/*
- * Minio Cloud Storage (C) 2016 Minio, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import Moment from 'moment'
-import browserHistory from 'react-router/lib/browserHistory'
-import storage from 'local-storage-fallback'
-import { minioBrowserPrefix } from './constants'
-
-export const SET_WEB = 'SET_WEB'
-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'
-export const RESET_OBJECTS = 'RESET_OBJECTS'
-export const SET_STORAGE_INFO = 'SET_STORAGE_INFO'
-export const SET_SERVER_INFO = 'SET_SERVER_INFO'
-export const SHOW_MAKEBUCKET_MODAL = 'SHOW_MAKEBUCKET_MODAL'
-export const ADD_UPLOAD = 'ADD_UPLOAD'
-export const STOP_UPLOAD = 'STOP_UPLOAD'
-export const UPLOAD_PROGRESS = 'UPLOAD_PROGRESS'
-export const SET_ALERT = 'SET_ALERT'
-export const SET_LOGIN_ERROR = 'SET_LOGIN_ERROR'
-export const SET_SHOW_ABORT_MODAL = 'SET_SHOW_ABORT_MODAL'
-export const SHOW_ABOUT = 'SHOW_ABOUT'
-export const SET_SORT_NAME_ORDER = 'SET_SORT_NAME_ORDER'
-export const SET_SORT_SIZE_ORDER = 'SET_SORT_SIZE_ORDER'
-export const SET_SORT_DATE_ORDER = 'SET_SORT_DATE_ORDER'
-export const SET_LATEST_UI_VERSION = 'SET_LATEST_UI_VERSION'
-export const SET_SIDEBAR_STATUS = 'SET_SIDEBAR_STATUS'
-export const SET_LOGIN_REDIRECT_PATH = 'SET_LOGIN_REDIRECT_PATH'
-export const SET_LOAD_BUCKET = 'SET_LOAD_BUCKET'
-export const SET_LOAD_PATH = 'SET_LOAD_PATH'
-export const SHOW_SETTINGS = 'SHOW_SETTINGS'
-export const SET_SETTINGS = 'SET_SETTINGS'
-export const SHOW_BUCKET_POLICY = 'SHOW_BUCKET_POLICY'
-export const SET_POLICIES = 'SET_POLICIES'
-export const SET_SHARE_OBJECT = 'SET_SHARE_OBJECT'
-export const DELETE_CONFIRMATION = 'DELETE_CONFIRMATION'
-export const SET_PREFIX_WRITABLE = 'SET_PREFIX_WRITABLE'
-export const REMOVE_OBJECT = 'REMOVE_OBJECT'
-export const CHECKED_OBJECTS_ADD = 'CHECKED_OBJECTS_ADD'
-export const CHECKED_OBJECTS_REMOVE = 'CHECKED_OBJECTS_REMOVE'
-export const CHECKED_OBJECTS_RESET = 'CHECKED_OBJECTS_RESET'
-
-export const showDeleteConfirmation = (object) => {
-  return {
-    type: DELETE_CONFIRMATION,
-    payload: {
-      object,
-      show: true
-    }
-  }
-}
-
-export const hideDeleteConfirmation = () => {
-  return {
-    type: DELETE_CONFIRMATION,
-    payload: {
-      object: '',
-      show: false
-    }
-  }
-}
-
-export const showShareObject = (object, url) => {
-  return {
-    type: SET_SHARE_OBJECT,
-    shareObject: {
-      object,
-      url,
-      show: true
-    }
-  }
-}
-
-export const hideShareObject = () => {
-  return {
-    type: SET_SHARE_OBJECT,
-    shareObject: {
-      url: '',
-      show: false
-    }
-  }
-}
-
-export const shareObject = (object, days, hours, minutes) => (dispatch, getState) => {
-  const {currentBucket, web} = getState()
-  let host = location.host
-  let bucket = currentBucket
-
-  if (!web.LoggedIn()) {
-    dispatch(showShareObject(object, `${host}/${bucket}/${object}`))
-    return
-  }
-
-  let expiry = days * 24 * 60 * 60 + hours * 60 * 60 + minutes * 60
-  web.PresignedGet({
-    host,
-    bucket,
-    object,
-    expiry
-  })
-    .then(obj => {
-      dispatch(showShareObject(object, obj.url))
-      dispatch(showAlert({
-        type: 'success',
-        message: `Object shared. Expires in ${days} days ${hours} hours ${minutes} minutes.`
-      }))
-    })
-    .catch(err => {
-      dispatch(showAlert({
-        type: 'danger',
-        message: err.message
-      }))
-    })
-}
-
-export const setLoginRedirectPath = (path) => {
-  return {
-    type: SET_LOGIN_REDIRECT_PATH,
-    path
-  }
-}
-
-export const setLoadPath = (loadPath) => {
-  return {
-    type: SET_LOAD_PATH,
-    loadPath
-  }
-}
-
-export const setLoadBucket = (loadBucket) => {
-  return {
-    type: SET_LOAD_BUCKET,
-    loadBucket
-  }
-}
-
-export const setWeb = web => {
-  return {
-    type: SET_WEB,
-    web
-  }
-}
-
-export const setBuckets = buckets => {
-  return {
-    type: SET_BUCKETS,
-    buckets
-  }
-}
-
-export const addBucket = bucket => {
-  return {
-    type: ADD_BUCKET,
-    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,
-    showMakeBucketModal: true
-  }
-}
-
-export const hideAlert = () => {
-  return {
-    type: SET_ALERT,
-    alert: {
-      show: false,
-      message: '',
-      type: ''
-    }
-  }
-}
-
-export const showAlert = alert => {
-  return (dispatch, getState) => {
-    let alertTimeout = null
-    if (alert.type !== 'danger') {
-      alertTimeout = setTimeout(() => {
-        dispatch({
-          type: SET_ALERT,
-          alert: {
-            show: false
-          }
-        })
-      }, 5000)
-    }
-    dispatch({
-      type: SET_ALERT,
-      alert: Object.assign({}, alert, {
-        show: true,
-        alertTimeout
-      })
-    })
-  }
-}
-
-export const removeObject = object => {
-  return {
-    type: REMOVE_OBJECT,
-    object
-  }
-}
-
-export const setSidebarStatus = (status) => {
-  return {
-    type: SET_SIDEBAR_STATUS,
-    sidebarStatus: status
-  }
-}
-
-export const hideMakeBucketModal = () => {
-  return {
-    type: SHOW_MAKEBUCKET_MODAL,
-    showMakeBucketModal: false
-  }
-}
-
-export const setVisibleBuckets = visibleBuckets => {
-  return {
-    type: SET_VISIBLE_BUCKETS,
-    visibleBuckets
-  }
-}
-
-const appendObjects = (objects, marker, istruncated) => {
-  return {
-    type: APPEND_OBJECTS,
-    objects,
-    marker,
-    istruncated
-  }
-}
-
-export const setObjects = (objects) => {
-  return {
-    type: SET_OBJECTS,
-    objects,
-  }
-}
-
-export const resetObjects = () => {
-  return {
-    type: RESET_OBJECTS
-  }
-}
-
-export const setCurrentBucket = currentBucket => {
-  return {
-    type: SET_CURRENT_BUCKET,
-    currentBucket
-  }
-}
-
-export const setCurrentPath = currentPath => {
-  return {
-    type: SET_CURRENT_PATH,
-    currentPath
-  }
-}
-
-export const setStorageInfo = storageInfo => {
-  return {
-    type: SET_STORAGE_INFO,
-    storageInfo
-  }
-}
-
-export const setServerInfo = serverInfo => {
-  return {
-    type: SET_SERVER_INFO,
-    serverInfo
-  }
-}
-
-const setPrefixWritable = prefixWritable => {
-  return {
-    type: SET_PREFIX_WRITABLE,
-    prefixWritable,
-  }
-}
-
-export const selectBucket = (newCurrentBucket, prefix) => {
-  if (!prefix)
-    prefix = ''
-  return (dispatch, getState) => {
-    let web = getState().web
-    let currentBucket = getState().currentBucket
-
-    if (currentBucket !== newCurrentBucket) dispatch(setLoadBucket(newCurrentBucket))
-
-    dispatch(setCurrentBucket(newCurrentBucket))
-    dispatch(selectPrefix(prefix))
-    return
-  }
-}
-
-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()
-    if (!istruncated || buckets.length === 0) return
-    web.ListObjects({
-      bucketName: currentBucket,
-      prefix: currentPath,
-      marker: marker
-    })
-      .then(res => {
-        let objects = res.objects
-        if (!objects)
-          objects = []
-        objects = objects.map(object => {
-          object.name = object.name.replace(`${currentPath}`, '');
-          return object
-        })
-        dispatch(appendObjects(objects, res.nextmarker, res.istruncated))
-        dispatch(setPrefixWritable(res.writable))
-        dispatch(setLoadBucket(''))
-        dispatch(setLoadPath(''))
-      })
-      .catch(err => {
-        dispatch(showAlert({
-          type: 'danger',
-          message: err.message
-        }))
-        dispatch(setLoadBucket(''))
-        dispatch(setLoadPath(''))
-        // Use browserHistory.replace instead of push so that browser back button works fine.
-        browserHistory.replace(`${minioBrowserPrefix}/login`)
-      })
-  }
-}
-
-export const selectPrefix = prefix => {
-  return (dispatch, getState) => {
-    const {currentBucket, web} = getState()
-    dispatch(setLoadPath(prefix))
-    web.ListObjects({
-      bucketName: currentBucket,
-      prefix,
-      marker: ""
-    })
-      .then(res => {
-        let objects = res.objects
-        if (!objects)
-          objects = []
-        objects = objects.map(object => {
-          object.name = object.name.replace(`${prefix}`, '');
-          return object
-        })
-        dispatch(resetObjects())
-        dispatch(appendObjects(
-          objects,
-          res.nextmarker,
-          res.istruncated
-        ))
-        dispatch(setPrefixWritable(res.writable))
-        dispatch(setSortNameOrder(false))
-        dispatch(setCurrentPath(prefix))
-        dispatch(setLoadBucket(''))
-        dispatch(setLoadPath(''))
-      })
-      .catch(err => {
-        dispatch(showAlert({
-          type: 'danger',
-          message: err.message
-        }))
-        dispatch(setLoadBucket(''))
-        dispatch(setLoadPath(''))
-        // Use browserHistory.replace instead of push so that browser back button works fine.
-        browserHistory.replace(`${minioBrowserPrefix}/login`)
-      })
-  }
-}
-
-export const addUpload = options => {
-  return {
-    type: ADD_UPLOAD,
-    slug: options.slug,
-    size: options.size,
-    xhr: options.xhr,
-    name: options.name
-  }
-}
-
-export const stopUpload = options => {
-  return {
-    type: STOP_UPLOAD,
-    slug: options.slug
-  }
-}
-
-export const uploadProgress = options => {
-  return {
-    type: UPLOAD_PROGRESS,
-    slug: options.slug,
-    loaded: options.loaded
-  }
-}
-
-export const setShowAbortModal = showAbortModal => {
-  return {
-    type: SET_SHOW_ABORT_MODAL,
-    showAbortModal
-  }
-}
-
-export const setLoginError = () => {
-  return {
-    type: SET_LOGIN_ERROR,
-    loginError: true
-  }
-}
-
-export const downloadSelected = (url, req, xhr) => {
-  return (dispatch) => {
-    var anchor = document.createElement('a')
-    document.body.appendChild(anchor);
-    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: 'octet/stream'
-        })
-        var blobUrl = window.URL.createObjectURL(blob);
-        var separator = req.prefix.length > 1 ? '-' : ''
-
-        anchor.href = blobUrl
-        anchor.download = req.bucketName+separator+req.prefix.slice(0, -1)+'.zip';
-
-
-
-
-        anchor.click()
-        window.URL.revokeObjectURL(blobUrl)
-        anchor.remove()
-      }
-    };
-    xhr.send(JSON.stringify(req));
-  }
-}
-
-export const uploadFile = (file, xhr) => {
-  return (dispatch, getState) => {
-    const {currentBucket, currentPath} = getState()
-    const objectName = `${currentPath}${file.name}`
-    const uploadUrl = `${window.location.origin}${minioBrowserPrefix}/upload/${currentBucket}/${objectName}`
-    // The slug is a unique identifer for the file upload.
-    const slug = `${currentBucket}-${currentPath}-${file.name}`
-
-    xhr.open('PUT', uploadUrl, true)
-    xhr.withCredentials = false
-    const token = storage.getItem('token')
-    if (token) xhr.setRequestHeader("Authorization", 'Bearer ' + storage.getItem('token'))
-    xhr.setRequestHeader('x-amz-date', Moment().utc().format('YYYYMMDDTHHmmss') + 'Z')
-    dispatch(addUpload({
-      slug,
-      xhr,
-      size: file.size,
-      name: file.name
-    }))
-
-    xhr.onload = function(event) {
-      if (xhr.status == 401 || xhr.status == 403) {
-        setShowAbortModal(false)
-        dispatch(stopUpload({
-          slug
-        }))
-        dispatch(showAlert({
-          type: 'danger',
-          message: 'Unauthorized request.'
-        }))
-      }
-      if (xhr.status == 500) {
-        setShowAbortModal(false)
-        dispatch(stopUpload({
-          slug
-        }))
-        dispatch(showAlert({
-          type: 'danger',
-          message: xhr.responseText
-        }))
-      }
-      if (xhr.status == 200) {
-        setShowAbortModal(false)
-        dispatch(stopUpload({
-          slug
-        }))
-        dispatch(showAlert({
-          type: 'success',
-          message: 'File \'' + file.name + '\' uploaded successfully.'
-        }))
-        dispatch(selectPrefix(currentPath))
-      }
-    }
-
-    xhr.upload.addEventListener('error', event => {
-      dispatch(showAlert({
-        type: 'danger',
-        message: 'Error occurred uploading \'' + file.name + '\'.'
-      }))
-      dispatch(stopUpload({
-        slug
-      }))
-    })
-
-    xhr.upload.addEventListener('progress', event => {
-      if (event.lengthComputable) {
-        let loaded = event.loaded
-        let total = event.total
-
-        // Update the counter.
-        dispatch(uploadProgress({
-          slug,
-          loaded
-        }))
-      }
-    })
-    xhr.send(file)
-  }
-}
-
-export const showAbout = () => {
-  return {
-    type: SHOW_ABOUT,
-    showAbout: true
-  }
-}
-
-export const hideAbout = () => {
-  return {
-    type: SHOW_ABOUT,
-    showAbout: false
-  }
-}
-
-export const setSortNameOrder = (sortNameOrder) => {
-  return {
-    type: SET_SORT_NAME_ORDER,
-    sortNameOrder
-  }
-}
-
-export const setSortSizeOrder = (sortSizeOrder) => {
-  return {
-    type: SET_SORT_SIZE_ORDER,
-    sortSizeOrder
-  }
-}
-
-export const setSortDateOrder = (sortDateOrder) => {
-  return {
-    type: SET_SORT_DATE_ORDER,
-    sortDateOrder
-  }
-}
-
-export const setLatestUIVersion = (latestUiVersion) => {
-  return {
-    type: SET_LATEST_UI_VERSION,
-    latestUiVersion
-  }
-}
-
-export const showSettings = () => {
-  return {
-    type: SHOW_SETTINGS,
-    showSettings: true
-  }
-}
-
-export const hideSettings = () => {
-  return {
-    type: SHOW_SETTINGS,
-    showSettings: false
-  }
-}
-
-export const setSettings = (settings) => {
-  return {
-    type: SET_SETTINGS,
-    settings
-  }
-}
-
-export const showBucketPolicy = () => {
-  return {
-    type: SHOW_BUCKET_POLICY,
-    showBucketPolicy: true
-  }
-}
-
-export const hideBucketPolicy = () => {
-  return {
-    type: SHOW_BUCKET_POLICY,
-    showBucketPolicy: false
-  }
-}
-
-export const setPolicies = (policies) => {
-  return {
-    type: SET_POLICIES,
-    policies
-  }
-}
-
-export const checkedObjectsAdd = (objectName) => {
-  return {
-    type: CHECKED_OBJECTS_ADD,
-    objectName
-  }
-}
-
-export const checkedObjectsRemove = (objectName) => {
-  return {
-    type: CHECKED_OBJECTS_REMOVE,
-    objectName
-  }
-}
-
-export const checkedObjectsReset = (objectName) => {
-  return {
-    type: CHECKED_OBJECTS_RESET,
-    objectName
-  }
-}

browser/app/js/alert/Alert.js

@@ -0,0 +1,30 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import AlertComponent from "react-bootstrap/lib/Alert"
+
+const Alert = ({ show, type, message, onDismiss }) => (
+  <AlertComponent
+    className={"alert animated " + (show ? "fadeInDown" : "fadeOutUp")}
+    bsStyle={type}
+    onDismiss={onDismiss}
+  >
+    <div className="text-center">{message}</div>
+  </AlertComponent>
+)
+
+export default Alert

browser/app/js/alert/AlertContainer.js

@@ -0,0 +1,41 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import { connect } from "react-redux"
+import Alert from "./Alert"
+import * as alertActions from "./actions"
+
+export const AlertContainer = ({ alert, clearAlert }) => {
+  if (!alert.message) {
+    return ""
+  }
+  return <Alert {...alert} onDismiss={clearAlert} />
+}
+
+const mapStateToProps = state => {
+  return {
+    alert: state.alert
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    clearAlert: () => dispatch(alertActions.clear())
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(AlertContainer)

browser/app/js/alert/__tests___/Alert.test.js

@@ -0,0 +1,34 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import { shallow, mount } from "enzyme"
+import Alert from "../Alert"
+
+describe("Alert", () => {
+  it("should render without crashing", () => {
+    shallow(<Alert />)
+  })
+
+  it("should call onDismiss when close button is clicked", () => {
+    const onDismiss = jest.fn()
+    const wrapper = mount(
+      <Alert show={true} type="danger" message="test" onDismiss={onDismiss} />
+    )
+    wrapper.find("button").simulate("click", { preventDefault: jest.fn() })
+    expect(onDismiss).toHaveBeenCalled()
+  })
+})

browser/app/js/alert/__tests___/AlertContainer.test.js

@@ -0,0 +1,34 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import { shallow, mount } from "enzyme"
+import { AlertContainer } from "../AlertContainer"
+
+describe("Alert", () => {
+  it("should render without crashing", () => {
+    shallow(
+      <AlertContainer alert={{ show: true, type: "danger", message: "Test" }} />
+    )
+  })
+
+  it("should render nothing if message is empty", () => {
+    const wrapper = shallow(
+      <AlertContainer alert={{ show: true, type: "danger", message: "" }} />
+    )
+    expect(wrapper.find("Alert").length).toBe(0)
+  })
+})

browser/app/js/alert/__tests___/actions.test.js

@@ -0,0 +1,69 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import configureStore from "redux-mock-store"
+import thunk from "redux-thunk"
+import * as actionsAlert from "../actions"
+
+const middlewares = [thunk]
+const mockStore = configureStore(middlewares)
+
+jest.useFakeTimers()
+
+describe("Alert actions", () => {
+  it("creates alert/SET action", () => {
+    const store = mockStore()
+    const expectedActions = [
+      {
+        type: "alert/SET",
+        alert: { id: 0, message: "Test alert", type: "danger" }
+      }
+    ]
+    store.dispatch(actionsAlert.set({ message: "Test alert", type: "danger" }))
+    const actions = store.getActions()
+    expect(actions).toEqual(expectedActions)
+  })
+
+  it("creates alert/CLEAR action for non danger alerts", () => {
+    const store = mockStore()
+    const expectedActions = [
+      {
+        type: "alert/SET",
+        alert: { id: 1, message: "Test alert" }
+      },
+      {
+        type: "alert/CLEAR",
+        alert: { id: 1 }
+      }
+    ]
+    store.dispatch(actionsAlert.set({ message: "Test alert" }))
+    jest.runAllTimers()
+    const actions = store.getActions()
+    expect(actions).toEqual(expectedActions)
+  })
+
+  it("creates alert/CLEAR action directly", () => {
+    const store = mockStore()
+    const expectedActions = [
+      {
+        type: "alert/CLEAR"
+      }
+    ]
+    store.dispatch(actionsAlert.clear())
+    const actions = store.getActions()
+    expect(actions).toEqual(expectedActions)
+  })
+})

browser/app/js/alert/__tests___/reducer.test.js

@@ -0,0 +1,87 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import reducer from "../reducer"
+import * as actionsAlert from "../actions"
+
+describe("alert reducer", () => {
+  it("should return the initial state", () => {
+    expect(reducer(undefined, {})).toEqual({
+      show: false,
+      type: "danger"
+    })
+  })
+
+  it("should handle SET_ALERT", () => {
+    expect(
+      reducer(undefined, {
+        type: actionsAlert.SET,
+        alert: { id: 1, type: "danger", message: "Test message" }
+      })
+    ).toEqual({
+      show: true,
+      id: 1,
+      type: "danger",
+      message: "Test message"
+    })
+  })
+
+  it("should clear alert if id not passed", () => {
+    expect(
+      reducer(
+        { show: true, type: "danger", message: "Test message" },
+        {
+          type: actionsAlert.CLEAR
+        }
+      )
+    ).toEqual({
+      show: false,
+      type: "danger"
+    })
+  })
+
+  it("should clear alert if id is matching", () => {
+    expect(
+      reducer(
+        { show: true, id: 1, type: "danger", message: "Test message" },
+        {
+          type: actionsAlert.CLEAR,
+          alert: { id: 1 }
+        }
+      )
+    ).toEqual({
+      show: false,
+      type: "danger"
+    })
+  })
+
+  it("should not clear alert if id is not matching", () => {
+    expect(
+      reducer(
+        { show: true, id: 1, type: "danger", message: "Test message" },
+        {
+          type: actionsAlert.CLEAR,
+          alert: { id: 2 }
+        }
+      )
+    ).toEqual({
+      show: true,
+      id: 1,
+      type: "danger",
+      message: "Test message"
+    })
+  })
+})

browser/app/js/alert/actions.js

@@ -0,0 +1,46 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export const SET = "alert/SET"
+export const CLEAR = "alert/CLEAR"
+
+export let alertId = 0
+
+export const set = alert => {
+  const id = alertId++
+  return (dispatch, getState) => {
+    if (alert.type !== "danger") {
+      setTimeout(() => {
+        dispatch({
+          type: CLEAR,
+          alert: {
+            id
+          }
+        })
+      }, 5000)
+    }
+    dispatch({
+      type: SET,
+      alert: Object.assign({}, alert, {
+        id
+      })
+    })
+  }
+}
+
+export const clear = () => {
+  return { type: CLEAR }
+}

browser/app/js/alert/reducer.js

@@ -0,0 +1,41 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as actionsAlert from "./actions"
+
+const initialState = {
+  show: false,
+  type: "danger"
+}
+export default (state = initialState, action) => {
+  switch (action.type) {
+    case actionsAlert.SET:
+      return {
+        show: true,
+        id: action.alert.id,
+        type: action.alert.type,
+        message: action.alert.message
+      }
+    case actionsAlert.CLEAR:
+      if (action.alert && action.alert.id != state.id) {
+        return state
+      } else {
+        return initialState
+      }
+    default:
+      return state
+  }
+}

browser/app/js/browser/AboutModal.js

@@ -0,0 +1,64 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import { Modal } from "react-bootstrap"
+import logo from "../../img/logo.svg"
+
+export const AboutModal = ({ serverInfo, hideAbout }) => {
+  const { version, memory, platform, runtime } = serverInfo
+  return (
+    <Modal
+      className="modal-about modal-dark"
+      animation={false}
+      show={true}
+      onHide={hideAbout}
+    >
+      <button className="close" onClick={hideAbout}>
+        <span>×</span>
+      </button>
+      <div className="ma-inner">
+        <div className="mai-item hidden-xs">
+          <a href="https://minio.io" target="_blank">
+            <img className="maii-logo" src={logo} alt="" />
+          </a>
+        </div>
+        <div className="mai-item">
+          <ul className="maii-list">
+            <li>
+              <div>Version</div>
+              <small>{version}</small>
+            </li>
+            <li>
+              <div>Memory</div>
+              <small>{memory}</small>
+            </li>
+            <li>
+              <div>Platform</div>
+              <small>{platform}</small>
+            </li>
+            <li>
+              <div>Runtime</div>
+              <small>{runtime}</small>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </Modal>
+  )
+}
+
+export default AboutModal

browser/app/js/browser/Browser.js

@@ -0,0 +1,40 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import classNames from "classnames"
+import { connect } from "react-redux"
+import SideBar from "./SideBar"
+import MainContent from "./MainContent"
+import AlertContainer from "../alert/AlertContainer"
+
+class Browser extends React.Component {
+  render() {
+    return (
+      <div
+        className={classNames({
+          "file-explorer": true
+        })}
+      >
+        <SideBar />
+        <MainContent />
+        <AlertContainer />
+      </div>
+    )
+  }
+}
+
+export default connect(state => state)(Browser)

browser/app/js/browser/BrowserDropdown.js

@@ -0,0 +1,156 @@
+/*
+ * Minio Cloud Storage (C) 2016, 2017, 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import { connect } from "react-redux"
+import { Dropdown } from "react-bootstrap"
+import * as browserActions from "./actions"
+import web from "../web"
+import history from "../history"
+import AboutModal from "./AboutModal"
+import ChangePasswordModal from "./ChangePasswordModal"
+
+export class BrowserDropdown extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      showAboutModal: false,
+      showChangePasswordModal: false
+    }
+  }
+  showAbout(e) {
+    e.preventDefault()
+    this.setState({
+      showAboutModal: true
+    })
+  }
+  hideAbout() {
+    this.setState({
+      showAboutModal: false
+    })
+  }
+  showChangePassword(e) {
+    e.preventDefault()
+    this.setState({
+      showChangePasswordModal: true
+    })
+  }
+  hideChangePassword() {
+    this.setState({
+      showChangePasswordModal: false
+    })
+  }
+  componentDidMount() {
+    const { fetchServerInfo } = this.props
+    fetchServerInfo()
+  }
+  fullScreen(e) {
+    e.preventDefault()
+    let el = document.documentElement
+    if (el.requestFullscreen) {
+      el.requestFullscreen()
+    }
+    if (el.mozRequestFullScreen) {
+      el.mozRequestFullScreen()
+    }
+    if (el.webkitRequestFullscreen) {
+      el.webkitRequestFullscreen()
+    }
+    if (el.msRequestFullscreen) {
+      el.msRequestFullscreen()
+    }
+  }
+  logout(e) {
+    e.preventDefault()
+    web.Logout()
+    history.replace("/login")
+  }
+  render() {
+    const { serverInfo } = this.props
+    return (
+      <li>
+        <Dropdown pullRight id="top-right-menu">
+          <Dropdown.Toggle noCaret>
+            <i className="fa fa-reorder" />
+          </Dropdown.Toggle>
+          <Dropdown.Menu className="dropdown-menu-right">
+            <li>
+              <a target="_blank" href="https://github.com/minio/minio">
+                Github <i className="fa fa-github" />
+              </a>
+            </li>
+            <li>
+              <a href="" onClick={this.fullScreen}>
+                Fullscreen <i className="fa fa-expand" />
+              </a>
+            </li>
+            <li>
+              <a target="_blank" href="https://docs.minio.io/">
+                Documentation <i className="fa fa-book" />
+              </a>
+            </li>
+            <li>
+              <a target="_blank" href="https://slack.minio.io">
+                Ask for help <i className="fa fa-question-circle" />
+              </a>
+            </li>
+            <li>
+              <a href="" id="show-about" onClick={this.showAbout.bind(this)}>
+                About <i className="fa fa-info-circle" />
+              </a>
+              {this.state.showAboutModal && (
+                <AboutModal
+                  serverInfo={serverInfo}
+                  hideAbout={this.hideAbout.bind(this)}
+                />
+              )}
+            </li>
+            <li>
+              <a href="" onClick={this.showChangePassword.bind(this)}>
+                Change Password <i className="fa fa-cog" />
+              </a>
+              {this.state.showChangePasswordModal && (
+                <ChangePasswordModal
+                  serverInfo={serverInfo}
+                  hideChangePassword={this.hideChangePassword.bind(this)}
+                />
+              )}
+            </li>
+            <li>
+              <a href="" id="logout" onClick={this.logout}>
+                Sign Out <i className="fa fa-sign-out" />
+              </a>
+            </li>
+          </Dropdown.Menu>
+        </Dropdown>
+      </li>
+    )
+  }
+}
+
+const mapStateToProps = state => {
+  return {
+    serverInfo: state.browser.serverInfo
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    fetchServerInfo: () => dispatch(browserActions.fetchServerInfo())
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(BrowserDropdown)

browser/app/js/browser/ChangePasswordModal.js

@@ -0,0 +1,201 @@
+/*
+ * Minio Cloud Storage (C) 2016, 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import { connect } from "react-redux"
+import web from "../web"
+import * as alertActions from "../alert/actions"
+
+import {
+  Tooltip,
+  Modal,
+  ModalBody,
+  ModalHeader,
+  OverlayTrigger
+} from "react-bootstrap"
+import InputGroup from "./InputGroup"
+
+export class ChangePasswordModal extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      accessKey: "",
+      secretKey: "",
+      keysReadOnly: false
+    }
+  }
+  // When its shown, it loads the access key and secret key.
+  componentWillMount() {
+    const { serverInfo } = this.props
+
+    // Check environment variables first.
+    if (serverInfo.info.isEnvCreds) {
+      this.setState({
+        accessKey: "xxxxxxxxx",
+        secretKey: "xxxxxxxxx",
+        keysReadOnly: true
+      })
+    } else {
+      web.GetAuth().then(data => {
+        this.setState({
+          accessKey: data.accessKey,
+          secretKey: data.secretKey
+        })
+      })
+    }
+  }
+
+  // Handle field changes from inside the modal.
+  accessKeyChange(e) {
+    this.setState({
+      accessKey: e.target.value
+    })
+  }
+
+  secretKeyChange(e) {
+    this.setState({
+      secretKey: e.target.value
+    })
+  }
+
+  secretKeyVisible(secretKeyVisible) {
+    this.setState({
+      secretKeyVisible
+    })
+  }
+
+  // Save the auth params and set them.
+  setAuth(e) {
+    const { showAlert } = this.props
+    const accessKey = this.state.accessKey
+    const secretKey = this.state.secretKey
+    web
+      .SetAuth({
+        accessKey,
+        secretKey
+      })
+      .then(data => {
+        showAlert({
+          type: "success",
+          message: "Changed credentials"
+        })
+      })
+      .catch(err => {
+        showAlert({
+          type: "danger",
+          message: err.message
+        })
+      })
+  }
+
+  generateAuth(e) {
+    web.GenerateAuth().then(data => {
+      this.setState({
+        accessKey: data.accessKey,
+        secretKey: data.secretKey,
+        secretKeyVisible: true
+      })
+    })
+  }
+
+  render() {
+    const { hideChangePassword } = this.props
+    return (
+      <Modal bsSize="sm" animation={false} show={true}>
+        <ModalHeader>Change Password</ModalHeader>
+        <ModalBody className="m-t-20">
+          <InputGroup
+            value={this.state.accessKey}
+            onChange={this.accessKeyChange.bind(this)}
+            id="accessKey"
+            label="Access Key"
+            name="accesskey"
+            type="text"
+            spellCheck="false"
+            required="required"
+            autoComplete="false"
+            align="ig-left"
+            readonly={this.state.keysReadOnly}
+          />
+          <i
+            onClick={this.secretKeyVisible.bind(
+              this,
+              !this.state.secretKeyVisible
+            )}
+            className={
+              "toggle-password fa fa-eye " +
+              (this.state.secretKeyVisible ? "toggled" : "")
+            }
+          />
+          <InputGroup
+            value={this.state.secretKey}
+            onChange={this.secretKeyChange.bind(this)}
+            id="secretKey"
+            label="Secret Key"
+            name="accesskey"
+            type={this.state.secretKeyVisible ? "text" : "password"}
+            spellCheck="false"
+            required="required"
+            autoComplete="false"
+            align="ig-left"
+            readonly={this.state.keysReadOnly}
+          />
+        </ModalBody>
+        <div className="modal-footer">
+          <button
+            id="generate-keys"
+            className={
+              "btn btn-primary " + (this.state.keysReadOnly ? "hidden" : "")
+            }
+            onClick={this.generateAuth.bind(this)}
+          >
+            Generate
+          </button>
+          <button
+            id="update-keys"
+            className={
+              "btn btn-success " + (this.state.keysReadOnly ? "hidden" : "")
+            }
+            onClick={this.setAuth.bind(this)}
+          >
+            Update
+          </button>
+          <button
+            id="cancel-change-password"
+            className="btn btn-link"
+            onClick={hideChangePassword}
+          >
+            Cancel
+          </button>
+        </div>
+      </Modal>
+    )
+  }
+}
+
+const mapStateToProps = state => {
+  return {
+    serverInfo: state.browser.serverInfo
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    showAlert: alert => dispatch(alertActions.set(alert))
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(ChangePasswordModal)

browser/app/js/browser/ConfirmModal.js

@@ -1,5 +1,5 @@
 /*
- * Minio Cloud Storage (C) 2016 Minio, Inc.
+ * Minio Cloud Storage (C) 2016, 2018 Minio, Inc.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -14,33 +14,40 @@
  * limitations under the License.
  */
 
-import React from 'react'
-import Modal from 'react-bootstrap/lib/Modal'
-import ModalBody from 'react-bootstrap/lib/ModalBody'
+import React from "react"
+import { Modal, ModalBody } from "react-bootstrap"
 
-let ConfirmModal = ({baseClass, icon, text, sub, okText, cancelText, okHandler, cancelHandler, show}) => {
+let ConfirmModal = ({
+  baseClass,
+  icon,
+  text,
+  sub,
+  okText,
+  cancelText,
+  okHandler,
+  cancelHandler,
+  show
+}) => {
   return (
-    <Modal bsSize="small"
-      animation={ false }
-      show={ show }
-      className={ "modal-confirm " + (baseClass || '') }>
+    <Modal
+      bsSize="small"
+      animation={false}
+      show={show}
+      className={"modal-confirm " + (baseClass || "")}
+    >
       <ModalBody>
         <div className="mc-icon">
-          <i className={ icon }></i>
-        </div>
-        <div className="mc-text">
-          { text }
-        </div>
-        <div className="mc-sub">
-          { sub }
+          <i className={icon} />
         </div>
+        <div className="mc-text">{text}</div>
+        <div className="mc-sub">{sub}</div>
       </ModalBody>
       <div className="modal-footer">
-        <button className="btn btn-danger" onClick={ okHandler }>
-          { okText }
+        <button className="btn btn-danger" onClick={okHandler}>
+          {okText}
         </button>
-        <button className="btn btn-link" onClick={ cancelHandler }>
-          { cancelText }
+        <button className="btn btn-link" onClick={cancelHandler}>
+          {cancelText}
         </button>
       </div>
     </Modal>

browser/app/js/browser/Header.js

@@ -0,0 +1,43 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import Path from "../objects/Path"
+import StorageInfo from "./StorageInfo"
+import BrowserDropdown from "./BrowserDropdown"
+import web from "../web"
+import { minioBrowserPrefix } from "../constants"
+
+export const Header = () => {
+  const loggedIn = web.LoggedIn()
+  return (
+    <header className="fe-header">
+      <Path />
+      {loggedIn && <StorageInfo />}
+      <ul className="feh-actions">
+        {loggedIn ? (
+          <BrowserDropdown />
+        ) : (
+          <a className="btn btn-danger" href={minioBrowserPrefix + "/login"}>
+            Login
+          </a>
+        )}
+      </ul>
+    </header>
+  )
+}
+
+export default Header

browser/app/js/browser/Host.js

@@ -0,0 +1,26 @@
+/*
+ * Minio Cloud Storage (C) 2016, 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+
+export const Host = () => (
+  <div className="fes-host">
+    <i className="fa fa-globe" />
+    <a href="/">{window.location.host}</a>
+  </div>
+)
+
+export default Host

browser/app/js/browser/InputGroup.js

@@ -0,0 +1,70 @@
+/*
+ * Minio Cloud Storage (C) 2016, 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+
+let InputGroup = ({
+  label,
+  id,
+  name,
+  value,
+  onChange,
+  type,
+  spellCheck,
+  required,
+  readonly,
+  autoComplete,
+  align,
+  className
+}) => {
+  var input = (
+    <input
+      id={id}
+      name={name}
+      value={value}
+      onChange={onChange}
+      className="ig-text"
+      type={type}
+      spellCheck={spellCheck}
+      required={required}
+      autoComplete={autoComplete}
+    />
+  )
+  if (readonly)
+    input = (
+      <input
+        id={id}
+        name={name}
+        value={value}
+        onChange={onChange}
+        className="ig-text"
+        type={type}
+        spellCheck={spellCheck}
+        required={required}
+        autoComplete={autoComplete}
+        disabled
+      />
+    )
+  return (
+    <div className={"input-group " + align + " " + className}>
+      {input}
+      <i className="ig-helpers" />
+      <label className="ig-label">{label}</label>
+    </div>
+  )
+}
+
+export default InputGroup

browser/app/js/browser/Login.js

@@ -0,0 +1,123 @@
+/*
+ * Minio Cloud Storage (C) 2016, 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import { connect } from "react-redux"
+import classNames from "classnames"
+import logo from "../../img/logo.svg"
+import Alert from "../alert/Alert"
+import * as actionsAlert from "../alert/actions"
+import InputGroup from "./InputGroup"
+import web from "../web"
+import { Redirect } from "react-router-dom"
+
+export class Login extends React.Component {
+  handleSubmit(event) {
+    event.preventDefault()
+    const { showAlert, history } = this.props
+    let message = ""
+    if (!document.getElementById("accessKey").value) {
+      message = "Access Key cannot be empty"
+    }
+    if (!document.getElementById("secretKey").value) {
+      message = "Secret Key cannot be empty"
+    }
+    if (message) {
+      showAlert("danger", message)
+      return
+    }
+    web
+      .Login({
+        username: document.getElementById("accessKey").value,
+        password: document.getElementById("secretKey").value
+      })
+      .then(res => {
+        history.push("/")
+      })
+      .catch(e => {
+        showAlert("danger", e.message)
+      })
+  }
+
+  componentWillMount() {
+    const { clearAlert } = this.props
+    // Clear out any stale message in the alert of previous page
+    clearAlert()
+    document.body.classList.add("is-guest")
+  }
+
+  componentWillUnmount() {
+    document.body.classList.remove("is-guest")
+  }
+
+  render() {
+    const { clearAlert, alert } = this.props
+    if (web.LoggedIn()) {
+      return <Redirect to={"/"} />
+    }
+    let alertBox = <Alert {...alert} onDismiss={clearAlert} />
+    // Make sure you don't show a fading out alert box on the initial web-page load.
+    if (!alert.message) alertBox = ""
+    return (
+      <div className="login">
+        {alertBox}
+        <div className="l-wrap">
+          <form onSubmit={this.handleSubmit.bind(this)}>
+            <InputGroup
+              className="ig-dark"
+              label="Access Key"
+              id="accessKey"
+              name="username"
+              type="text"
+              spellCheck="false"
+              required="required"
+              autoComplete="username"
+            />
+            <InputGroup
+              className="ig-dark"
+              label="Secret Key"
+              id="secretKey"
+              name="password"
+              type="password"
+              spellCheck="false"
+              required="required"
+              autoComplete="new-password"
+            />
+            <button className="lw-btn" type="submit">
+              <i className="fa fa-sign-in" />
+            </button>
+          </form>
+        </div>
+        <div className="l-footer">
+          <a className="lf-logo" href="">
+            <img src={logo} alt="" />
+          </a>
+          <div className="lf-server">{window.location.host}</div>
+        </div>
+      </div>
+    )
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    showAlert: (type, message) =>
+      dispatch(actionsAlert.set({ type: type, message: message })),
+    clearAlert: () => dispatch(actionsAlert.clear())
+  }
+}
+
+export default connect(state => state, mapDispatchToProps)(Login)

browser/app/js/browser/MainActions.js

@@ -0,0 +1,101 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import { connect } from "react-redux"
+import { Dropdown, OverlayTrigger, Tooltip } from "react-bootstrap"
+import web from "../web"
+import * as actionsBuckets from "../buckets/actions"
+import * as uploadsActions from "../uploads/actions"
+import { getPrefixWritable } from "../objects/selectors"
+
+export const MainActions = ({
+  prefixWritable,
+  uploadFile,
+  showMakeBucketModal
+}) => {
+  const uploadTooltip = <Tooltip id="tt-upload-file">Upload file</Tooltip>
+  const makeBucketTooltip = (
+    <Tooltip id="tt-create-bucket">Create bucket</Tooltip>
+  )
+  const onFileUpload = e => {
+    e.preventDefault()
+    uploadFile(e.target.files[0])
+    e.target.value = null
+  }
+
+  const loggedIn = web.LoggedIn()
+
+  if (loggedIn || prefixWritable) {
+    return (
+      <Dropdown dropup className="feb-actions" id="fe-action-toggle">
+        <Dropdown.Toggle noCaret className="feba-toggle">
+          <span>
+            <i className="fa fa-plus" />
+          </span>
+        </Dropdown.Toggle>
+        <Dropdown.Menu>
+          <OverlayTrigger placement="left" overlay={uploadTooltip}>
+            <a href="#" className="feba-btn feba-upload">
+              <input
+                type="file"
+                onChange={onFileUpload}
+                style={{ display: "none" }}
+                id="file-input"
+              />
+              <label htmlFor="file-input">
+                {" "}
+                <i className="fa fa-cloud-upload" />{" "}
+              </label>
+            </a>
+          </OverlayTrigger>
+          {loggedIn && (
+            <OverlayTrigger placement="left" overlay={makeBucketTooltip}>
+              <a
+                href="#"
+                id="show-make-bucket"
+                className="feba-btn feba-bucket"
+                onClick={e => {
+                  e.preventDefault()
+                  showMakeBucketModal()
+                }}
+              >
+                <i className="fa fa-hdd-o" />
+              </a>
+            </OverlayTrigger>
+          )}
+        </Dropdown.Menu>
+      </Dropdown>
+    )
+  } else {
+    return <noscript />
+  }
+}
+
+const mapStateToProps = state => {
+  return {
+    prefixWritable: getPrefixWritable(state)
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    uploadFile: file => dispatch(uploadsActions.uploadFile(file)),
+    showMakeBucketModal: () => dispatch(actionsBuckets.showMakeBucketModal())
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(MainActions)

browser/app/js/browser/MainContent.js

@@ -0,0 +1,43 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import MobileHeader from "./MobileHeader"
+import Header from "./Header"
+import ObjectsSection from "../objects/ObjectsSection"
+import MainActions from "./MainActions"
+import BucketPolicyModal from "../buckets/BucketPolicyModal"
+import MakeBucketModal from "../buckets/MakeBucketModal"
+import UploadModal from "../uploads/UploadModal"
+import ObjectsBulkActions from "../objects/ObjectsBulkActions"
+import Dropzone from "../uploads/Dropzone"
+
+export const MainContent = () => (
+  <div className="fe-body">
+    <ObjectsBulkActions />
+    <MobileHeader />
+    <Dropzone>
+      <Header />
+      <ObjectsSection />
+    </Dropzone>
+    <MainActions />
+    <BucketPolicyModal />
+    <MakeBucketModal />
+    <UploadModal />
+  </div>
+)
+
+export default MainContent

browser/app/js/browser/MobileHeader.js

@@ -0,0 +1,60 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import classNames from "classnames"
+import { connect } from "react-redux"
+import logo from "../../img/logo.svg"
+import * as actionsCommon from "./actions"
+
+export const MobileHeader = ({ sidebarOpen, toggleSidebar }) => (
+  <header className="fe-header-mobile hidden-lg hidden-md">
+    <div
+      id="sidebar-toggle"
+      className={
+        "feh-trigger " +
+        classNames({
+          "feht-toggled": sidebarOpen
+        })
+      }
+      onClick={e => {
+        e.stopPropagation()
+        toggleSidebar()
+      }}
+    >
+      <div className="feht-lines">
+        <div className="top" />
+        <div className="center" />
+        <div className="bottom" />
+      </div>
+    </div>
+    <img className="mh-logo" src={logo} alt="" />
+  </header>
+)
+
+const mapStateToProps = state => {
+  return {
+    sidebarOpen: state.browser.sidebarOpen
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    toggleSidebar: () => dispatch(actionsCommon.toggleSidebar())
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(MobileHeader)

browser/app/js/browser/SideBar.js

@@ -0,0 +1,65 @@
+/*
+ * Minio Cloud Storage (C) 2016, 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import classNames from "classnames"
+import ClickOutHandler from "react-onclickout"
+import { connect } from "react-redux"
+
+import logo from "../../img/logo.svg"
+import Dropdown from "react-bootstrap/lib/Dropdown"
+import BucketSearch from "../buckets/BucketSearch"
+import BucketList from "../buckets/BucketList"
+import Host from "./Host"
+import * as actionsCommon from "./actions"
+import web from "../web"
+
+export const SideBar = ({ sidebarOpen, clickOutside }) => {
+  return (
+    <ClickOutHandler onClickOut={clickOutside}>
+      <div
+        className={classNames({
+          "fe-sidebar": true,
+          toggled: sidebarOpen
+        })}
+      >
+        <div className="fes-header clearfix hidden-sm hidden-xs">
+          <img src={logo} alt="" />
+          <h2>Minio Browser</h2>
+        </div>
+        <div className="fes-list">
+          {web.LoggedIn() && <BucketSearch />}
+          <BucketList />
+        </div>
+        <Host />
+      </div>
+    </ClickOutHandler>
+  )
+}
+
+const mapStateToProps = state => {
+  return {
+    sidebarOpen: state.browser.sidebarOpen
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    clickOutside: () => dispatch(actionsCommon.closeSidebar())
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(SideBar)

browser/app/js/browser/StorageInfo.js

@@ -0,0 +1,64 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import { connect } from "react-redux"
+import humanize from "humanize"
+import * as actionsCommon from "./actions"
+
+export class StorageInfo extends React.Component {
+  componentWillMount() {
+    const { fetchStorageInfo } = this.props
+    fetchStorageInfo()
+  }
+  render() {
+    const { total, free } = this.props.storageInfo
+    const used = total - free
+    const usedPercent = used / total * 100 + "%"
+    const freePercent = free * 100 / total
+    return (
+      <div className="feh-usage">
+        <div className="fehu-chart">
+          <div style={{ width: usedPercent }} />
+        </div>
+        <ul>
+          <li>
+            <span>Used: </span>
+            {humanize.filesize(total - free)}
+          </li>
+          <li className="pull-right">
+            <span>Free: </span>
+            {humanize.filesize(total - used)}
+          </li>
+        </ul>
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => {
+  return {
+    storageInfo: state.browser.storageInfo
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    fetchStorageInfo: () => dispatch(actionsCommon.fetchStorageInfo())
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(StorageInfo)

browser/app/js/browser/__tests__/AboutModal.test.js

@@ -0,0 +1,41 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import { shallow } from "enzyme"
+import { AboutModal } from "../AboutModal"
+
+describe("AboutModal", () => {
+  const serverInfo = {
+    version: "test",
+    memory: "test",
+    platform: "test",
+    runtime: "test"
+  }
+
+  it("should render without crashing", () => {
+    shallow(<AboutModal serverInfo={serverInfo} />)
+  })
+
+  it("should call hideAbout when close button is clicked", () => {
+    const hideAbout = jest.fn()
+    const wrapper = shallow(
+      <AboutModal serverInfo={serverInfo} hideAbout={hideAbout} />
+    )
+    wrapper.find("button").simulate("click")
+    expect(hideAbout).toHaveBeenCalled()
+  })
+})

browser/app/js/browser/__tests__/Browser.test.js

@@ -0,0 +1,29 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import { shallow } from "enzyme"
+import Browser from "../Browser"
+import configureStore from "redux-mock-store"
+
+const mockStore = configureStore()
+
+describe("Browser", () => {
+  it("should render without crashing", () => {
+    const store = mockStore()
+    shallow(<Browser store={store}/>)
+  })
+})

browser/app/js/browser/__tests__/BrowserDropdown.test.js

@@ -0,0 +1,63 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import { shallow } from "enzyme"
+import { BrowserDropdown } from "../BrowserDropdown"
+
+describe("BrowserDropdown", () => {
+  const serverInfo = {
+    version: "test",
+    memory: "test",
+    platform: "test",
+    runtime: "test"
+  }
+
+  it("should render without crashing", () => {
+    shallow(
+      <BrowserDropdown serverInfo={serverInfo} fetchServerInfo={jest.fn()} />
+    )
+  })
+
+  it("should call fetchServerInfo after its mounted", () => {
+    const fetchServerInfo = jest.fn()
+    const wrapper = shallow(
+      <BrowserDropdown
+        serverInfo={serverInfo}
+        fetchServerInfo={fetchServerInfo}
+      />
+    )
+    expect(fetchServerInfo).toHaveBeenCalled()
+  })
+
+  it("should show AboutModal when About link is clicked", () => {
+    const wrapper = shallow(
+      <BrowserDropdown serverInfo={serverInfo} fetchServerInfo={jest.fn()} />
+    )
+    wrapper.find("#show-about").simulate("click", { preventDefault: jest.fn() })
+    wrapper.update()
+    expect(wrapper.state("showAboutModal")).toBeTruthy()
+    expect(wrapper.find("AboutModal").length).toBe(1)
+  })
+
+  it("should logout and redirect to /login when logout is clicked", () => {
+    const wrapper = shallow(
+      <BrowserDropdown serverInfo={serverInfo} fetchServerInfo={jest.fn()} />
+    )
+    wrapper.find("#logout").simulate("click", { preventDefault: jest.fn() })
+    expect(window.location.pathname.endsWith("/login")).toBeTruthy()
+  })
+})

browser/app/js/browser/__tests__/ChangePasswordModal.test.js

@@ -0,0 +1,109 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import { shallow, mount } from "enzyme"
+import { ChangePasswordModal } from "../ChangePasswordModal"
+
+jest.mock("../../web", () => ({
+  GetAuth: jest.fn(() => {
+    return Promise.resolve({ accessKey: "test1", secretKey: "test2" })
+  }),
+  GenerateAuth: jest.fn(() => {
+    return Promise.resolve({ accessKey: "gen1", secretKey: "gen2" })
+  }),
+  SetAuth: jest.fn(({ accessKey, secretKey }) => {
+    if (accessKey == "test3" && secretKey == "test4") {
+      return Promise.resolve({})
+    } else {
+      return Promise.reject({ message: "Error" })
+    }
+  })
+}))
+
+describe("ChangePasswordModal", () => {
+  const serverInfo = {
+    version: "test",
+    memory: "test",
+    platform: "test",
+    runtime: "test",
+    info: { isEnvCreds: false }
+  }
+
+  it("should render without crashing", () => {
+    shallow(<ChangePasswordModal serverInfo={serverInfo} />)
+  })
+
+  it("should get the keys when its rendered", () => {
+    const wrapper = shallow(<ChangePasswordModal serverInfo={serverInfo} />)
+    setImmediate(() => {
+      expect(wrapper.state("accessKey")).toBe("test1")
+      expect(wrapper.state("secretKey")).toBe("test2")
+    })
+  })
+
+  it("should show readonly keys when isEnvCreds is true", () => {
+    const newServerInfo = { ...serverInfo, info: { isEnvCreds: true } }
+    const wrapper = shallow(<ChangePasswordModal serverInfo={newServerInfo} />)
+    expect(wrapper.state("accessKey")).toBe("xxxxxxxxx")
+    expect(wrapper.state("secretKey")).toBe("xxxxxxxxx")
+    expect(wrapper.find("#accessKey").prop("readonly")).toBeTruthy()
+    expect(wrapper.find("#secretKey").prop("readonly")).toBeTruthy()
+    expect(wrapper.find("#generate-keys").hasClass("hidden")).toBeTruthy()
+    expect(wrapper.find("#update-keys").hasClass("hidden")).toBeTruthy()
+  })
+
+  it("should generate accessKey and secretKey when Generate buttons is clicked", () => {
+    const wrapper = shallow(<ChangePasswordModal serverInfo={serverInfo} />)
+    wrapper.find("#generate-keys").simulate("click")
+    setImmediate(() => {
+      expect(wrapper.state("accessKey")).toBe("gen1")
+      expect(wrapper.state("secretKey")).toBe("gen2")
+    })
+  })
+
+  it("should update accessKey and secretKey when Update button is clicked", () => {
+    const showAlert = jest.fn()
+    const wrapper = shallow(
+      <ChangePasswordModal serverInfo={serverInfo} showAlert={showAlert} />
+    )
+    wrapper
+      .find("#accessKey")
+      .simulate("change", { target: { value: "test3" } })
+    wrapper
+      .find("#secretKey")
+      .simulate("change", { target: { value: "test4" } })
+    wrapper.find("#update-keys").simulate("click")
+    setImmediate(() => {
+      expect(showAlert).toHaveBeenCalledWith({
+        type: "success",
+        message: "Changed credentials"
+      })
+    })
+  })
+
+  it("should call hideChangePassword when Cancel button is clicked", () => {
+    const hideChangePassword = jest.fn()
+    const wrapper = shallow(
+      <ChangePasswordModal
+        serverInfo={serverInfo}
+        hideChangePassword={hideChangePassword}
+      />
+    )
+    wrapper.find("#cancel-change-password").simulate("click")
+    expect(hideChangePassword).toHaveBeenCalled()
+  })
+})

browser/app/js/browser/__tests__/Header.test.js

@@ -0,0 +1,42 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import { shallow } from "enzyme"
+import Header from "../Header"
+
+jest.mock("../../web", () => ({
+  LoggedIn: jest
+    .fn(() => true)
+    .mockReturnValueOnce(true)
+    .mockReturnValueOnce(false)
+}))
+describe("Header", () => {
+  it("should render without crashing", () => {
+    shallow(<Header />)
+  })
+
+  it("should render Login button when the user has not LoggedIn", () => {
+    const wrapper = shallow(<Header />)
+    expect(wrapper.find("a").text()).toBe("Login")
+  })
+
+  it("should render StorageInfo and BrowserDropdown when the user has LoggedIn", () => {
+    const wrapper = shallow(<Header />)
+    expect(wrapper.find("Connect(BrowserDropdown)").length).toBe(1)
+    expect(wrapper.find("Connect(StorageInfo)").length).toBe(1)
+  })
+})

browser/app/js/browser/__tests__/Host.test.js

@@ -0,0 +1,25 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import { shallow } from "enzyme"
+import Host from "../Host"
+
+describe("Host", () => {
+  it("should render without crashing", () => {
+    shallow(<Host />)
+  })
+})

browser/app/js/browser/__tests__/Login.test.js

@@ -0,0 +1,99 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import { shallow, mount } from "enzyme"
+import { Login } from "../Login"
+import web from "../../web"
+
+jest.mock('../../web', () => ({
+  Login: jest.fn(() => {
+    return Promise.resolve({ token: "test", uiVersion: "2018-02-01T01:17:47Z" })
+  }),
+  LoggedIn: jest.fn()
+}))
+
+describe("Login", () => {
+  const dispatchMock = jest.fn()
+  const showAlertMock = jest.fn()
+  const clearAlertMock = jest.fn()
+  
+  it("should render without crashing", () => {
+    shallow(<Login 
+      dispatch={dispatchMock} 
+      alert={{ show: false, type: "danger"}}
+      showAlert={showAlertMock}
+      clearAlert={clearAlertMock}
+    />)
+  })
+
+  it("should initially have the is-guest class", () => {
+    const wrapper = shallow(
+      <Login 
+        dispatch={dispatchMock} 
+        alert={{ show: false, type: "danger"}}
+        showAlert={showAlertMock}
+        clearAlert={clearAlertMock}
+      />,
+      { attachTo: document.body }
+    )
+    expect(document.body.classList.contains("is-guest")).toBeTruthy()
+  })
+
+  it("should throw an alert if the keys are empty in login form", () => {
+    const wrapper = mount(
+      <Login 
+        dispatch={dispatchMock} 
+        alert={{ show: false, type: "danger"}}
+        showAlert={showAlertMock}
+        clearAlert={clearAlertMock}
+      />,
+      { attachTo: document.body }
+    )
+    // case where both keys are empty - displays the second warning
+    wrapper.find("form").simulate("submit")
+    expect(showAlertMock).toHaveBeenCalledWith("danger", "Secret Key cannot be empty")
+
+    // case where access key is empty
+    document.getElementById("secretKey").value = "secretKey"
+    wrapper.find("form").simulate("submit")
+    expect(showAlertMock).toHaveBeenCalledWith("danger", "Access Key cannot be empty")
+
+    // case where secret key is empty
+    document.getElementById("accessKey").value = "accessKey"
+    wrapper.find("form").simulate("submit")
+    expect(showAlertMock).toHaveBeenCalledWith("danger", "Secret Key cannot be empty")
+  })
+
+  it("should call web.Login with correct arguments if both keys are entered", () => {
+    const wrapper = mount(
+      <Login 
+        dispatch={dispatchMock} 
+        alert={{ show: false, type: "danger"}}
+        showAlert={showAlertMock}
+        clearAlert={clearAlertMock}
+      />,
+      { attachTo: document.body }
+    )
+    document.getElementById("accessKey").value = "accessKey"
+    document.getElementById("secretKey").value = "secretKey"
+    wrapper.find("form").simulate("submit")
+    expect(web.Login).toHaveBeenCalledWith({
+      "username": "accessKey", 
+      "password": "secretKey"
+    })
+  })
+})

browser/app/js/browser/__tests__/MainActions.test.js

@@ -0,0 +1,73 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import { shallow, mount } from "enzyme"
+import { MainActions } from "../MainActions"
+
+jest.mock("../../web", () => ({
+  LoggedIn: jest
+    .fn(() => true)
+    .mockReturnValueOnce(true)
+    .mockReturnValueOnce(false)
+    .mockReturnValueOnce(false)
+}))
+
+describe("MainActions", () => {
+  it("should render without crashing", () => {
+    shallow(<MainActions />)
+  })
+
+  it("should not show any actions when user has not LoggedIn and prefixWritable is false", () => {
+    const wrapper = shallow(<MainActions />)
+    expect(wrapper.find("#show-make-bucket").length).toBe(0)
+    expect(wrapper.find("#file-input").length).toBe(0)
+  })
+
+  it("should show only file upload action when user has not LoggedIn and prefixWritable is true", () => {
+    const wrapper = shallow(<MainActions prefixWritable={true} />)
+    expect(wrapper.find("#show-make-bucket").length).toBe(0)
+    expect(wrapper.find("#file-input").length).toBe(1)
+  })
+
+  it("should show make bucket upload file actions when user has LoggedIn", () => {
+    const wrapper = shallow(<MainActions />)
+    expect(wrapper.find("#show-make-bucket").length).toBe(1)
+    expect(wrapper.find("#file-input").length).toBe(1)
+  })
+
+  it("should call showMakeBucketModal when create bucket icon is clicked", () => {
+    const showMakeBucketModal = jest.fn()
+    const wrapper = shallow(
+      <MainActions showMakeBucketModal={showMakeBucketModal} />
+    )
+    wrapper
+      .find("#show-make-bucket")
+      .simulate("click", { preventDefault: jest.fn() })
+    expect(showMakeBucketModal).toHaveBeenCalled()
+  })
+
+  it("should call uploadFile when a file is selected for upload", () => {
+    const uploadFile = jest.fn()
+    const wrapper = shallow(<MainActions uploadFile={uploadFile} />)
+    const file = new Blob(["file content"], { type: "text/plain" })
+    wrapper.find("#file-input").simulate("change", {
+      preventDefault: jest.fn(),
+      target: { files: [file] }
+    })
+    expect(uploadFile).toHaveBeenCalledWith(file)
+  })
+})

browser/app/js/browser/__tests__/MainContent.test.js

@@ -0,0 +1,25 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import { shallow } from "enzyme"
+import MainContent from "../MainContent"
+
+describe("MainContent", () => {
+  it("should render without crashing", () => {
+    shallow(<MainContent />)
+  })
+})

browser/app/js/browser/__tests__/MobileHeader.test.js

@@ -0,0 +1,36 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import { shallow } from "enzyme"
+import { MobileHeader } from "../MobileHeader"
+
+describe("Bucket", () => {
+  it("should render without crashing", () => {
+    shallow(<MobileHeader sidebarOpen={false} />)
+  })
+
+  it("should toggleSidebar when trigger is clicked", () => {
+    const toggleSidebar = jest.fn()
+    const wrapper = shallow(
+      <MobileHeader sidebarOpen={false} toggleSidebar={toggleSidebar} />
+    )
+    wrapper
+      .find("#sidebar-toggle")
+      .simulate("click", { stopPropagation: jest.fn() })
+    expect(toggleSidebar).toHaveBeenCalled()
+  })
+})

browser/app/js/browser/__tests__/SideBar.test.js

@@ -0,0 +1,41 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import { shallow } from "enzyme"
+import { SideBar } from "../SideBar"
+
+jest.mock("../../web", () => ({
+  LoggedIn: jest.fn(() => false).mockReturnValueOnce(true)
+}))
+
+describe("SideBar", () => {
+  it("should render without crashing", () => {
+    shallow(<SideBar />)
+  })
+
+  it("should not render BucketSearch for non LoggedIn users", () => {
+    const wrapper = shallow(<SideBar />)
+    expect(wrapper.find("Connect(BucketSearch)").length).toBe(0)
+  })
+
+  it("should call clickOutside when the user clicks outside the sidebar", () => {
+    const clickOutside = jest.fn()
+    const wrapper = shallow(<SideBar clickOutside={clickOutside} />)
+    wrapper.simulate("clickOut", { preventDefault: jest.fn() })
+    expect(clickOutside).toHaveBeenCalled()
+  })
+})

browser/app/js/browser/__tests__/StorageInfo.test.js

@@ -0,0 +1,41 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import { shallow } from "enzyme"
+import { StorageInfo } from "../StorageInfo"
+
+describe("StorageInfo", () => {
+  it("should render without crashing", () => {
+    shallow(
+      <StorageInfo
+        storageInfo={{ total: 100, free: 60 }}
+        fetchStorageInfo={jest.fn()}
+      />
+    )
+  })
+
+  it("should fetchStorageInfo before component is mounted", () => {
+    const fetchStorageInfo = jest.fn()
+    shallow(
+      <StorageInfo
+        storageInfo={{ total: 100, free: 60 }}
+        fetchStorageInfo={fetchStorageInfo}
+      />
+    )
+    expect(fetchStorageInfo).toHaveBeenCalled()
+  })
+})

browser/app/js/browser/__tests__/actions.test.js

@@ -0,0 +1,70 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import configureStore from "redux-mock-store"
+import thunk from "redux-thunk"
+import * as actionsCommon from "../actions"
+
+jest.mock("../../web", () => ({
+  StorageInfo: jest.fn(() => {
+    return Promise.resolve({ storageInfo: { Total: 100, Free: 60 } })
+  }),
+  ServerInfo: jest.fn(() => {
+    return Promise.resolve({
+      MinioVersion: "test",
+      MinioMemory: "test",
+      MinioPlatform: "test",
+      MinioRuntime: "test",
+      MinioGlobalInfo: "test"
+    })
+  })
+}))
+
+const middlewares = [thunk]
+const mockStore = configureStore(middlewares)
+
+describe("Common actions", () => {
+  it("creates common/SET_STORAGE_INFO after fetching the storage details ", () => {
+    const store = mockStore()
+    const expectedActions = [
+      { type: "common/SET_STORAGE_INFO", storageInfo: { total: 100, free: 60 } }
+    ]
+    return store.dispatch(actionsCommon.fetchStorageInfo()).then(() => {
+      const actions = store.getActions()
+      expect(actions).toEqual(expectedActions)
+    })
+  })
+
+  it("creates common/SET_SERVER_INFO after fetching the server details", () => {
+    const store = mockStore()
+    const expectedActions = [
+      {
+        type: "common/SET_SERVER_INFO",
+        serverInfo: {
+          version: "test",
+          memory: "test",
+          platform: "test",
+          runtime: "test",
+          info: "test"
+        }
+      }
+    ]
+    return store.dispatch(actionsCommon.fetchServerInfo()).then(() => {
+      const actions = store.getActions()
+      expect(actions).toEqual(expectedActions)
+    })
+  })
+})

browser/app/js/browser/__tests__/reducer.test.js

@@ -0,0 +1,92 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import reducer from "../reducer"
+import * as actionsCommon from "../actions"
+
+describe("common reducer", () => {
+  it("should return the initial state", () => {
+    expect(reducer(undefined, {})).toEqual({
+      sidebarOpen: false,
+      storageInfo: {
+        total: 0,
+        free: 0
+      },
+      serverInfo: {}
+    })
+  })
+
+  it("should handle TOGGLE_SIDEBAR", () => {
+    expect(
+      reducer(
+        { sidebarOpen: false },
+        {
+          type: actionsCommon.TOGGLE_SIDEBAR
+        }
+      )
+    ).toEqual({
+      sidebarOpen: true
+    })
+  })
+
+  it("should handle CLOSE_SIDEBAR", () => {
+    expect(
+      reducer(
+        { sidebarOpen: true },
+        {
+          type: actionsCommon.CLOSE_SIDEBAR
+        }
+      )
+    ).toEqual({
+      sidebarOpen: false
+    })
+  })
+
+  it("should handle SET_STORAGE_INFO", () => {
+    expect(
+      reducer(
+        {},
+        {
+          type: actionsCommon.SET_STORAGE_INFO,
+          storageInfo: { total: 100, free: 40 }
+        }
+      )
+    ).toEqual({
+      storageInfo: { total: 100, free: 40 }
+    })
+  })
+
+  it("should handle SET_SERVER_INFO", () => {
+    expect(
+      reducer(undefined, {
+        type: actionsCommon.SET_SERVER_INFO,
+        serverInfo: {
+          version: "test",
+          memory: "test",
+          platform: "test",
+          runtime: "test",
+          info: "test"
+        }
+      }).serverInfo
+    ).toEqual({
+      version: "test",
+      memory: "test",
+      platform: "test",
+      runtime: "test",
+      info: "test"
+    })
+  })
+})

browser/app/js/browser/actions.js

@@ -0,0 +1,67 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import web from "../web"
+
+export const TOGGLE_SIDEBAR = "common/TOGGLE_SIDEBAR"
+export const CLOSE_SIDEBAR = "common/CLOSE_SIDEBAR"
+export const SET_STORAGE_INFO = "common/SET_STORAGE_INFO"
+export const SET_SERVER_INFO = "common/SET_SERVER_INFO"
+
+export const toggleSidebar = () => ({
+  type: TOGGLE_SIDEBAR
+})
+
+export const closeSidebar = () => ({
+  type: CLOSE_SIDEBAR
+})
+
+export const fetchStorageInfo = () => {
+  return function(dispatch) {
+    return web.StorageInfo().then(res => {
+      const storageInfo = {
+        total: res.storageInfo.Total,
+        free: res.storageInfo.Free
+      }
+      dispatch(setStorageInfo(storageInfo))
+    })
+  }
+}
+
+export const setStorageInfo = storageInfo => ({
+  type: SET_STORAGE_INFO,
+  storageInfo
+})
+
+export const fetchServerInfo = () => {
+  return function(dispatch) {
+    return web.ServerInfo().then(res => {
+      const serverInfo = {
+        version: res.MinioVersion,
+        memory: res.MinioMemory,
+        platform: res.MinioPlatform,
+        runtime: res.MinioRuntime,
+        info: res.MinioGlobalInfo
+      }
+      dispatch(setServerInfo(serverInfo))
+    })
+  }
+}
+
+export const setServerInfo = serverInfo => ({
+  type: SET_SERVER_INFO,
+  serverInfo
+})

browser/app/js/browser/reducer.js

@@ -0,0 +1,45 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as actionsCommon from "./actions"
+
+export default (
+  state = {
+    sidebarOpen: false,
+    storageInfo: { total: 0, free: 0 },
+    serverInfo: {}
+  },
+  action
+) => {
+  switch (action.type) {
+    case actionsCommon.TOGGLE_SIDEBAR:
+      return Object.assign({}, state, {
+        sidebarOpen: !state.sidebarOpen
+      })
+    case actionsCommon.CLOSE_SIDEBAR:
+      return Object.assign({}, state, {
+        sidebarOpen: false
+      })
+    case actionsCommon.SET_STORAGE_INFO:
+      return Object.assign({}, state, {
+        storageInfo: action.storageInfo
+      })
+    case actionsCommon.SET_SERVER_INFO:
+      return { ...state, serverInfo: action.serverInfo }
+    default:
+      return state
+  }
+}

browser/app/js/buckets/Bucket.js

@@ -0,0 +1,45 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import classNames from "classnames"
+import BucketDropdown from "./BucketDropdown"
+
+export const Bucket = ({ bucket, isActive, selectBucket }) => {
+  return (
+    <li
+      className={classNames({
+        active: isActive
+      })}
+      onClick={e => {
+        e.preventDefault()
+        selectBucket(bucket)
+      }}
+    >
+      <a
+        href=""
+        className={classNames({
+          "fesli-loading": false
+        })}
+      >
+        {bucket}
+      </a>
+      <BucketDropdown bucket={bucket}/>
+    </li>
+  )
+}
+
+export default Bucket

browser/app/js/buckets/BucketContainer.js

@@ -0,0 +1,35 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import { connect } from "react-redux"
+import * as actionsBuckets from "./actions"
+import { getCurrentBucket } from "./selectors"
+import Bucket from "./Bucket"
+
+const mapStateToProps = (state, ownProps) => {
+  return {
+    isActive: getCurrentBucket(state) === ownProps.bucket
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    selectBucket: bucket => dispatch(actionsBuckets.selectBucket(bucket))
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Bucket)

browser/app/js/buckets/BucketDropdown.js

@@ -0,0 +1,92 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import classNames from "classnames"
+import { connect } from "react-redux"
+import * as actionsBuckets from "./actions"
+import { getCurrentBucket } from "./selectors"
+import Dropdown from "react-bootstrap/lib/Dropdown"
+
+export class BucketDropdown extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      showBucketDropdown: false
+    }
+  }
+
+  toggleDropdown() {
+    if (this.state.showBucketDropdown) {
+      this.setState({
+        showBucketDropdown: false
+      })
+    } else {
+      this.setState({
+        showBucketDropdown: true
+      })
+    }
+  }
+
+  render() {
+    const { bucket, showBucketPolicy, deleteBucket, currentBucket } = this.props
+    return (
+      <Dropdown 
+        open = {this.state.showBucketDropdown}
+        onToggle = {this.toggleDropdown.bind(this)}
+        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={e => {
+                e.stopPropagation()
+                this.toggleDropdown()
+                showBucketPolicy()
+              }}
+            >
+              Edit policy
+            </a>
+          </li>
+          <li>
+            <a 
+              onClick={e => {
+                e.stopPropagation()
+                this.toggleDropdown()
+                deleteBucket(bucket)
+              }}
+            >
+              Delete
+            </a>
+          </li>
+        </Dropdown.Menu>
+      </Dropdown>
+    )
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    deleteBucket: bucket => dispatch(actionsBuckets.deleteBucket(bucket)),
+    showBucketPolicy: () => dispatch(actionsBuckets.showBucketPolicy())
+  }
+}
+
+export default connect(state => state, mapDispatchToProps)(BucketDropdown)

browser/app/js/buckets/BucketList.js

@@ -0,0 +1,74 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import { connect } from "react-redux"
+import { Scrollbars } from "react-custom-scrollbars"
+import * as actionsBuckets from "./actions"
+import { getVisibleBuckets } from "./selectors"
+import BucketContainer from "./BucketContainer"
+import web from "../web"
+import history from "../history"
+import { pathSlice } from "../utils"
+
+export class BucketList extends React.Component {
+  componentWillMount() {
+    const { fetchBuckets, setBucketList, selectBucket } = this.props
+    if (web.LoggedIn()) {
+      fetchBuckets()
+    } else {
+      const { bucket, prefix } = pathSlice(history.location.pathname)
+      if (bucket) {
+        setBucketList([bucket])
+        selectBucket(bucket, prefix)
+      } else {
+        history.replace("/login")
+      }
+    }
+  }
+  render() {
+    const { visibleBuckets } = this.props
+    return (
+      <div className="fesl-inner">
+        <Scrollbars
+          renderTrackVertical={props => <div className="scrollbar-vertical" />}
+        >
+          <ul>
+            {visibleBuckets.map(bucket => (
+              <BucketContainer key={bucket} bucket={bucket} />
+            ))}
+          </ul>
+        </Scrollbars>
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => {
+  return {
+    visibleBuckets: getVisibleBuckets(state)
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    fetchBuckets: () => dispatch(actionsBuckets.fetchBuckets()),
+    setBucketList: buckets => dispatch(actionsBuckets.setList(buckets)),
+    selectBucket: bucket => dispatch(actionsBuckets.selectBucket(bucket))
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(BucketList)

browser/app/js/buckets/BucketPolicyModal.js

@@ -0,0 +1,61 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import { connect } from "react-redux"
+import { Modal, ModalHeader } from "react-bootstrap"
+import * as actionsBuckets from "./actions"
+import PolicyInput from "./PolicyInput"
+import Policy from "./Policy"
+
+export const BucketPolicyModal = ({ showBucketPolicy, currentBucket, hideBucketPolicy, policies }) => {
+  return (
+    <Modal className="modal-policy"
+            animation={ false }
+            show={ showBucketPolicy }
+            onHide={ hideBucketPolicy }
+    >
+      <ModalHeader>
+        Bucket Policy (
+        { currentBucket })
+        <button className="close close-alt" onClick={ hideBucketPolicy }>
+          <span>×</span>
+        </button>
+      </ModalHeader>
+      <div className="pm-body">
+        <PolicyInput />
+        { policies.map((policy, i) => <Policy key={ i } prefix={ policy.prefix } policy={ policy.policy } />
+          ) }
+      </div>
+    </Modal>
+  )
+}
+
+const mapStateToProps = state => {
+  return {
+    currentBucket: state.buckets.currentBucket,
+    showBucketPolicy: state.buckets.showBucketPolicy,
+    policies: state.buckets.policies
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    hideBucketPolicy: () => dispatch(actionsBuckets.hideBucketPolicy())
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(BucketPolicyModal)

browser/app/js/buckets/BucketSearch.js

@@ -0,0 +1,44 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import { connect } from "react-redux"
+import * as actionsBuckets from "./actions"
+
+export const BucketSearch = ({ onChange }) => (
+  <div
+    className="input-group ig-dark ig-left ig-search"
+    style={{ display: "block" }}
+  >
+    <input
+      className="ig-text"
+      type="text"
+      onChange={e => onChange(e.target.value)}
+      placeholder="Search Buckets..."
+    />
+    <i className="ig-helpers" />
+  </div>
+)
+
+const mapDispatchToProps = dispatch => {
+  return {
+    onChange: filter => {
+      dispatch(actionsBuckets.setFilter(filter))
+    }
+  }
+}
+
+export default connect(undefined, mapDispatchToProps)(BucketSearch)

browser/app/js/buckets/MakeBucketModal.js

@@ -0,0 +1,90 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import { connect } from "react-redux"
+import { Modal, ModalBody } from "react-bootstrap"
+import * as actionsBuckets from "./actions"
+
+export class MakeBucketModal extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      bucketName: ""
+    }
+  }
+  onSubmit(e) {
+    e.preventDefault()
+    const { makeBucket } = this.props
+    const bucket = this.state.bucketName
+    if (bucket) {
+      makeBucket(bucket)
+      this.hideModal()
+    }
+  }
+  hideModal() {
+    this.setState({
+      bucketName: ""
+    })
+    this.props.hideMakeBucketModal()
+  }
+  render() {
+    const { showMakeBucketModal } = this.props
+    return (
+      <Modal
+        className="modal-create-bucket"
+        bsSize="small"
+        animation={false}
+        show={showMakeBucketModal}
+        onHide={this.hideModal.bind(this)}
+      >
+        <button className="close close-alt" onClick={this.hideModal.bind(this)}>
+          <span>×</span>
+        </button>
+        <ModalBody>
+          <form onSubmit={this.onSubmit.bind(this)}>
+            <div className="input-group">
+              <input
+                className="ig-text"
+                type="text"
+                placeholder="Bucket Name"
+                value={this.state.bucketName}
+                onChange={e => this.setState({ bucketName: e.target.value })}
+                autoFocus
+              />
+              <i className="ig-helpers" />
+            </div>
+          </form>
+        </ModalBody>
+      </Modal>
+    )
+  }
+}
+
+const mapStateToProps = state => {
+  return {
+    showMakeBucketModal: state.buckets.showMakeBucketModal
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    makeBucket: bucket => dispatch(actionsBuckets.makeBucket(bucket)),
+    hideMakeBucketModal: () => dispatch(actionsBuckets.hideMakeBucketModal())
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(MakeBucketModal)

browser/app/js/buckets/Policy.js

@@ -0,0 +1,93 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { READ_ONLY, WRITE_ONLY, READ_WRITE } from '../constants'
+
+import React from "react"
+import { connect } from "react-redux"
+import classnames from "classnames"
+import * as actionsBuckets from "./actions"
+import * as actionsAlert from "../alert/actions"
+import web from "../web"
+
+export class Policy extends React.Component {
+  removePolicy(e) {
+    e.preventDefault()
+    const {currentBucket, prefix, fetchPolicies, showAlert} = this.props
+    web.
+      SetBucketPolicy({
+        bucketName: currentBucket,
+        prefix: prefix,
+        policy: 'none'
+      })
+      .then(() => {
+        fetchPolicies(currentBucket)
+      })
+      .catch(e => showAlert('danger', e.message))
+  }
+
+  render() {
+    const {policy, prefix} = this.props
+    let newPrefix = prefix
+
+    if (newPrefix === '')
+      newPrefix = '*'
+
+    return (
+      <div className="pmb-list">
+        <div className="pmbl-item">
+          { newPrefix }
+        </div>
+        <div className="pmbl-item">
+          <select className="form-control"
+            disabled
+            value={ policy }>
+            <option value={ READ_ONLY }>
+              Read Only
+            </option>
+            <option value={ WRITE_ONLY }>
+              Write Only
+            </option>
+            <option value={ READ_WRITE }>
+              Read and Write
+            </option>
+          </select>
+        </div>
+        <div className="pmbl-item">
+          <button className="btn btn-block btn-danger" onClick={ this.removePolicy.bind(this) }>
+            Remove
+          </button>
+        </div>
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => {
+  return {
+    currentBucket: state.buckets.currentBucket
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    fetchPolicies: bucket => dispatch(actionsBuckets.fetchPolicies(bucket)),
+    showAlert: (type, message) =>
+      dispatch(actionsAlert.set({ type: type, message: message }))
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Policy)

browser/app/js/buckets/PolicyInput.js

@@ -0,0 +1,115 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { READ_ONLY, WRITE_ONLY, READ_WRITE } from '../constants'
+
+import React from "react"
+import { connect } from "react-redux"
+import classnames from "classnames"
+import * as actionsBuckets from "./actions"
+import * as actionsAlert from "../alert/actions"
+import web from "../web"
+
+export class PolicyInput extends React.Component {
+  componentDidMount() {
+    const { currentBucket, fetchPolicies } = this.props
+    fetchPolicies(currentBucket)
+  }
+
+  componentWillUnmount() {
+    const { setPolicies } = this.props
+    setPolicies([])
+  }
+
+  handlePolicySubmit(e) {
+    e.preventDefault()
+    const { currentBucket, fetchPolicies, showAlert } = this.props
+    
+    if (this.prefix.value === "*")
+      this.prefix.value = ""
+    
+    let policyAlreadyExists = this.props.policies.some(
+      elem => this.prefix.value === elem.prefix && this.policy.value === elem.policy
+    )
+    if (policyAlreadyExists) {
+      showAlert("danger", "Policy for this prefix already exists.")
+      return
+    }
+    
+    web.
+      SetBucketPolicy({
+        bucketName: currentBucket,
+        prefix: this.prefix.value,
+        policy: this.policy.value
+      })
+      .then(() => {
+        fetchPolicies(currentBucket)
+        this.prefix.value = ''
+      })
+      .catch(e => showAlert("danger", e.message))
+  }
+
+  render() {
+    return (
+      <header className="pmb-list">
+        <div className="pmbl-item">
+          <input 
+            type="text"
+            ref={ prefix => this.prefix = prefix }
+            className="form-control"
+            placeholder="Prefix"
+          />
+        </div>
+        <div className="pmbl-item">
+          <select ref={ policy => this.policy = policy } className="form-control">
+            <option value={ READ_ONLY }>
+              Read Only
+            </option>
+            <option value={ WRITE_ONLY }>
+              Write Only
+            </option>
+            <option value={ READ_WRITE }>
+              Read and Write
+            </option>
+          </select>
+        </div>
+        <div className="pmbl-item">
+          <button className="btn btn-block btn-primary" onClick={ this.handlePolicySubmit.bind(this) }>
+            Add
+          </button>
+        </div>
+      </header>
+    )
+  }
+}
+
+const mapStateToProps = state => {
+  return {
+    currentBucket: state.buckets.currentBucket,
+    policies: state.buckets.policies
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    fetchPolicies: bucket => dispatch(actionsBuckets.fetchPolicies(bucket)),
+    setPolicies: policies => dispatch(actionsBuckets.setPolicies(policies)),
+    showAlert: (type, message) =>
+      dispatch(actionsAlert.set({ type: type, message: message }))
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(PolicyInput)

browser/app/js/buckets/__tests__/Bucket.test.js

@@ -0,0 +1,39 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import { shallow } from "enzyme"
+import { Bucket } from "../Bucket"
+
+describe("Bucket", () => {
+  it("should render without crashing", () => {
+    shallow(<Bucket />)
+  })
+
+  it("should call selectBucket when clicked", () => {
+    const selectBucket = jest.fn()
+    const wrapper = shallow(
+      <Bucket bucket={"test"} selectBucket={selectBucket} />
+    )
+    wrapper.find("li").simulate("click", { preventDefault: jest.fn() })
+    expect(selectBucket).toHaveBeenCalledWith("test")
+  })
+
+  it("should highlight the selected bucket", () => {
+    const wrapper = shallow(<Bucket bucket={"test"} isActive={true} />)
+    expect(wrapper.find("li").hasClass("active")).toBeTruthy()
+  })
+})

browser/app/js/buckets/__tests__/BucketContainer.test.js

@@ -0,0 +1,52 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import { shallow } from "enzyme"
+import BucketContainer from "../BucketContainer"
+import configureStore from "redux-mock-store"
+
+const mockStore = configureStore()
+
+describe("BucketContainer", () => {
+  let store
+  beforeEach(() => {
+    store = mockStore({
+      buckets: {
+        currentBucket: "Test"
+      }
+    })
+    store.dispatch = jest.fn()
+  })
+  
+  it("should render without crashing", () => {
+    shallow(<BucketContainer store={store}/>)
+  })
+
+  it('maps state and dispatch to props', () => {
+    const wrapper = shallow(<BucketContainer store={store}/>)
+    expect(wrapper.props()).toEqual(expect.objectContaining({
+      isActive: expect.any(Boolean),
+      selectBucket: expect.any(Function)
+    }))
+  })
+
+  it('maps selectBucket to dispatch action', () => {
+    const wrapper = shallow(<BucketContainer store={store}/>)
+    wrapper.props().selectBucket()
+    expect(store.dispatch).toHaveBeenCalled()
+  })
+})

browser/app/js/buckets/__tests__/BucketDropdown.test.js

@@ -0,0 +1,62 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import { shallow, mount } from "enzyme"
+import { BucketDropdown } from "../BucketDropdown"
+
+describe("BucketDropdown", () => {
+  it("should render without crashing", () => {
+    shallow(<BucketDropdown />)
+  })
+
+  it("should call toggleDropdown on dropdown toggle", () => {
+    const spy = jest.spyOn(BucketDropdown.prototype, 'toggleDropdown')
+    const wrapper = shallow(
+      <BucketDropdown />
+    )
+    wrapper
+      .find("Uncontrolled(Dropdown)")
+      .simulate("toggle")
+    expect(spy).toHaveBeenCalled()
+    spy.mockReset()
+    spy.mockRestore()
+  })
+
+  it("should call showBucketPolicy when Edit Policy link is clicked", () => {
+    const showBucketPolicy = jest.fn()
+    const wrapper = shallow(
+      <BucketDropdown showBucketPolicy={showBucketPolicy} />
+    )
+    wrapper
+      .find("li a")
+      .at(0)
+      .simulate("click", { stopPropagation: jest.fn() })
+    expect(showBucketPolicy).toHaveBeenCalled()
+  })
+
+  it("should call deleteBucket when Delete link is clicked", () => {
+    const deleteBucket = jest.fn()
+    const wrapper = shallow(
+      <BucketDropdown bucket={"test"} deleteBucket={deleteBucket} />
+    )
+    wrapper
+      .find("li a")
+      .at(1)
+      .simulate("click", { stopPropagation: jest.fn() })
+    expect(deleteBucket).toHaveBeenCalledWith("test")
+  })
+})

browser/app/js/buckets/__tests__/BucketList.test.js

@@ -0,0 +1,57 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import { shallow } from "enzyme"
+import history from "../../history"
+import { BucketList } from "../BucketList"
+
+jest.mock("../../web", () => ({
+  LoggedIn: jest
+    .fn(() => false)
+    .mockReturnValueOnce(true)
+    .mockReturnValueOnce(true)
+}))
+
+describe("BucketList", () => {
+  it("should render without crashing", () => {
+    const fetchBuckets = jest.fn()
+    shallow(<BucketList visibleBuckets={[]} fetchBuckets={fetchBuckets} />)
+  })
+
+  it("should call fetchBuckets before component is mounted", () => {
+    const fetchBuckets = jest.fn()
+    const wrapper = shallow(
+      <BucketList visibleBuckets={[]} fetchBuckets={fetchBuckets} />
+    )
+    expect(fetchBuckets).toHaveBeenCalled()
+  })
+
+  it("should call setBucketList and selectBucket before component is mounted when the user has not loggedIn", () => {
+    const setBucketList = jest.fn()
+    const selectBucket = jest.fn()
+    history.push("/bk1/pre1")
+    const wrapper = shallow(
+      <BucketList
+        visibleBuckets={[]}
+        setBucketList={setBucketList}
+        selectBucket={selectBucket}
+      />
+    )
+    expect(setBucketList).toHaveBeenCalledWith(["bk1"])
+    expect(selectBucket).toHaveBeenCalledWith("bk1", "pre1")
+  })
+})

browser/app/js/buckets/__tests__/BucketPolicyModal.test.js

@@ -0,0 +1,43 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import { shallow, mount } from "enzyme"
+import { BucketPolicyModal } from "../BucketPolicyModal"
+import { READ_ONLY, WRITE_ONLY, READ_WRITE } from "../../constants"
+
+describe("BucketPolicyModal", () => {
+  it("should render without crashing", () => {
+    shallow(<BucketPolicyModal policies={[]}/>)
+  })
+
+  it("should call hideBucketPolicy when close button is clicked", () => {
+    const hideBucketPolicy = jest.fn()
+    const wrapper = shallow(
+      <BucketPolicyModal hideBucketPolicy={hideBucketPolicy} policies={[]} />
+    )
+    wrapper.find("button").simulate("click")
+    expect(hideBucketPolicy).toHaveBeenCalled()
+  })
+
+  it("should include the PolicyInput and Policy components when there are any policies", () => {
+    const wrapper = shallow(
+      <BucketPolicyModal policies={ [{prefix: "test", policy: READ_ONLY}] } />
+    )
+    expect(wrapper.find("Connect(PolicyInput)").length).toBe(1)
+    expect(wrapper.find("Connect(Policy)").length).toBe(1)
+  })
+})

browser/app/js/buckets/__tests__/BucketSearch.test.js

@@ -0,0 +1,32 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import { shallow } from "enzyme"
+import { BucketSearch } from "../BucketSearch"
+
+describe("BucketSearch", () => {
+  it("should render without crashing", () => {
+    shallow(<BucketSearch />)
+  })
+
+  it("should call onChange with search text", () => {
+    const onChange = jest.fn()
+    const wrapper = shallow(<BucketSearch onChange={onChange} />)
+    wrapper.find("input").simulate("change", { target: { value: "test" } })
+    expect(onChange).toHaveBeenCalledWith("test")
+  })
+})

browser/app/js/buckets/__tests__/MakeBucketModal.test.js

@@ -0,0 +1,80 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import { shallow, mount } from "enzyme"
+import { MakeBucketModal } from "../MakeBucketModal"
+
+describe("MakeBucketModal", () => {
+  it("should render without crashing", () => {
+    shallow(<MakeBucketModal />)
+  })
+
+  it("should call hideMakeBucketModal when close button is clicked", () => {
+    const hideMakeBucketModal = jest.fn()
+    const wrapper = shallow(
+      <MakeBucketModal hideMakeBucketModal={hideMakeBucketModal} />
+    )
+    wrapper.find("button").simulate("click")
+    expect(hideMakeBucketModal).toHaveBeenCalled()
+  })
+
+  it("bucketName should be cleared before hiding the modal", () => {
+    const hideMakeBucketModal = jest.fn()
+    const wrapper = shallow(
+      <MakeBucketModal hideMakeBucketModal={hideMakeBucketModal} />
+    )
+    wrapper.find("input").simulate("change", {
+      target: { value: "test" }
+    })
+    expect(wrapper.state("bucketName")).toBe("test")
+    wrapper.find("button").simulate("click")
+    expect(wrapper.state("bucketName")).toBe("")
+  })
+
+  it("should call makeBucket when the form is submitted", () => {
+    const makeBucket = jest.fn()
+    const hideMakeBucketModal = jest.fn()
+    const wrapper = shallow(
+      <MakeBucketModal
+        makeBucket={makeBucket}
+        hideMakeBucketModal={hideMakeBucketModal}
+      />
+    )
+    wrapper.find("input").simulate("change", {
+      target: { value: "test" }
+    })
+    wrapper.find("form").simulate("submit", { preventDefault: jest.fn() })
+    expect(makeBucket).toHaveBeenCalledWith("test")
+  })
+
+  it("should call hideMakeBucketModal and clear bucketName after the form is submited", () => {
+    const makeBucket = jest.fn()
+    const hideMakeBucketModal = jest.fn()
+    const wrapper = shallow(
+      <MakeBucketModal
+        makeBucket={makeBucket}
+        hideMakeBucketModal={hideMakeBucketModal}
+      />
+    )
+    wrapper.find("input").simulate("change", {
+      target: { value: "test" }
+    })
+    wrapper.find("form").simulate("submit", { preventDefault: jest.fn() })
+    expect(hideMakeBucketModal).toHaveBeenCalled()
+    expect(wrapper.state("bucketName")).toBe("")
+  })
+})

browser/app/js/buckets/__tests__/Policy.test.js

@@ -0,0 +1,63 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import { shallow, mount } from "enzyme"
+import { Policy } from "../Policy"
+import { READ_ONLY, WRITE_ONLY, READ_WRITE } from "../../constants"
+import web from "../../web"
+
+jest.mock("../../web", () => ({
+  SetBucketPolicy: jest.fn(() => {
+    return Promise.resolve()
+  })
+}))
+
+describe("Policy", () => {
+  it("should render without crashing", () => {
+    shallow(<Policy currentBucket={"bucket"} prefix={"foo"} policy={READ_ONLY} />)
+  })
+
+  it("should call web.setBucketPolicy and fetchPolicies on submit", () => {
+    const fetchPolicies = jest.fn()
+    const wrapper = shallow(
+      <Policy 
+        currentBucket={"bucket"}
+        prefix={"foo"}
+        policy={READ_ONLY}
+        fetchPolicies={fetchPolicies}
+      />
+    )
+    wrapper.find("button").simulate("click", { preventDefault: jest.fn() })
+
+    expect(web.SetBucketPolicy).toHaveBeenCalledWith({
+      bucketName: "bucket",
+      prefix: "foo",
+      policy: "none"
+    })
+    
+    setImmediate(() => {
+      expect(fetchPolicies).toHaveBeenCalledWith("bucket")
+    })
+  })
+
+  it("should change the empty string to '*' while displaying prefixes", () => {
+    const wrapper = shallow(
+      <Policy currentBucket={"bucket"} prefix={""} policy={READ_ONLY} />
+    )
+    expect(wrapper.find(".pmbl-item").at(0).text()).toEqual("*")
+  })
+})

browser/app/js/buckets/__tests__/PolicyInput.test.js

@@ -0,0 +1,77 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import { shallow, mount } from "enzyme"
+import { PolicyInput } from "../PolicyInput"
+import { READ_ONLY, WRITE_ONLY, READ_WRITE } from "../../constants"
+import web from "../../web"
+
+jest.mock("../../web", () => ({
+  SetBucketPolicy: jest.fn(() => {
+    return Promise.resolve()
+  })
+}))
+
+describe("PolicyInput", () => {
+  it("should render without crashing", () => {
+    const fetchPolicies = jest.fn()
+    shallow(<PolicyInput currentBucket={"bucket"} fetchPolicies={fetchPolicies}/>)
+  })
+
+  it("should call fetchPolicies after the component has mounted", () => {
+    const fetchPolicies = jest.fn()
+    const wrapper = shallow(
+      <PolicyInput currentBucket={"bucket"} fetchPolicies={fetchPolicies} />
+    )
+    setImmediate(() => {
+      expect(fetchPolicies).toHaveBeenCalled()
+    })
+  })
+
+  it("should call web.setBucketPolicy and fetchPolicies on submit", () => {
+    const fetchPolicies = jest.fn()
+    const wrapper = shallow(
+      <PolicyInput currentBucket={"bucket"} policies={[]} fetchPolicies={fetchPolicies}/>
+    )
+    wrapper.instance().prefix = { value: "baz" }
+    wrapper.instance().policy = { value: READ_ONLY }
+    wrapper.find("button").simulate("click", { preventDefault: jest.fn() })
+
+    expect(web.SetBucketPolicy).toHaveBeenCalledWith({
+      bucketName: "bucket",
+      prefix: "baz",
+      policy: READ_ONLY
+    })
+
+    setImmediate(() => {
+      expect(fetchPolicies).toHaveBeenCalledWith("bucket")
+    })
+  })
+
+  it("should change the prefix '*' to an empty string", () => {
+    const fetchPolicies = jest.fn()
+    const wrapper = shallow(
+      <PolicyInput currentBucket={"bucket"} policies={[]} fetchPolicies={fetchPolicies}/>
+    )
+    wrapper.instance().prefix = { value: "*" }
+    wrapper.instance().policy = { value: READ_ONLY }
+
+    wrapper.find("button").simulate("click", { preventDefault: jest.fn() })
+
+    expect(wrapper.instance().prefix).toEqual({ value: "" })
+  })
+})

browser/app/js/buckets/__tests__/actions.test.js

@@ -0,0 +1,185 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import configureStore from "redux-mock-store"
+import thunk from "redux-thunk"
+import * as actionsBuckets from "../actions"
+import * as objectActions from "../../objects/actions"
+import history from "../../history"
+
+jest.mock("../../web", () => ({
+  ListBuckets: jest.fn(() => {
+    return Promise.resolve({ buckets: [{ name: "test1" }, { name: "test2" }] })
+  }),
+  MakeBucket: jest.fn(() => {
+    return Promise.resolve()
+  }),
+  DeleteBucket: jest.fn(() => {
+    return Promise.resolve()
+  })
+}))
+
+jest.mock("../../objects/actions", () => ({
+  selectPrefix: () => dispatch => {}
+}))
+
+const middlewares = [thunk]
+const mockStore = configureStore(middlewares)
+
+describe("Buckets actions", () => {
+  it("creates buckets/SET_LIST and buckets/SET_CURRENT_BUCKET with first bucket after fetching the buckets", () => {
+    const store = mockStore()
+    const expectedActions = [
+      { type: "buckets/SET_LIST", buckets: ["test1", "test2"] },
+      { type: "buckets/SET_CURRENT_BUCKET", bucket: "test1" }
+    ]
+    return store.dispatch(actionsBuckets.fetchBuckets()).then(() => {
+      const actions = store.getActions()
+      expect(actions).toEqual(expectedActions)
+    })
+  })
+
+  it("creates buckets/SET_CURRENT_BUCKET with bucket name in the url after fetching buckets", () => {
+    history.push("/test2")
+    const store = mockStore()
+    const expectedActions = [
+      { type: "buckets/SET_LIST", buckets: ["test1", "test2"] },
+      { type: "buckets/SET_CURRENT_BUCKET", bucket: "test2" }
+    ]
+    window.location
+    return store.dispatch(actionsBuckets.fetchBuckets()).then(() => {
+      const actions = store.getActions()
+      expect(actions).toEqual(expectedActions)
+    })
+  })
+
+  it("creates buckets/SET_CURRENT_BUCKET with first bucket when the bucket in url is not exists after fetching buckets", () => {
+    history.push("/test3")
+    const store = mockStore()
+    const expectedActions = [
+      { type: "buckets/SET_LIST", buckets: ["test1", "test2"] },
+      { type: "buckets/SET_CURRENT_BUCKET", bucket: "test1" }
+    ]
+    window.location
+    return store.dispatch(actionsBuckets.fetchBuckets()).then(() => {
+      const actions = store.getActions()
+      expect(actions).toEqual(expectedActions)
+    })
+  })
+
+  it("creates buckets/SET_CURRENT_BUCKET action when selectBucket is called", () => {
+    const store = mockStore()
+    const expectedActions = [
+      { type: "buckets/SET_CURRENT_BUCKET", bucket: "test1" }
+    ]
+    store.dispatch(actionsBuckets.selectBucket("test1"))
+    const actions = store.getActions()
+    expect(actions).toEqual(expectedActions)
+  })
+
+  it("creates buckets/SHOW_MAKE_BUCKET_MODAL for showMakeBucketModal", () => {
+    const store = mockStore()
+    const expectedActions = [
+      { type: "buckets/SHOW_MAKE_BUCKET_MODAL", show: true }
+    ]
+    store.dispatch(actionsBuckets.showMakeBucketModal())
+    const actions = store.getActions()
+    expect(actions).toEqual(expectedActions)
+  })
+
+  it("creates buckets/SHOW_MAKE_BUCKET_MODAL for hideMakeBucketModal", () => {
+    const store = mockStore()
+    const expectedActions = [
+      { type: "buckets/SHOW_MAKE_BUCKET_MODAL", show: false }
+    ]
+    store.dispatch(actionsBuckets.hideMakeBucketModal())
+    const actions = store.getActions()
+    expect(actions).toEqual(expectedActions)
+  })
+
+  it("creates buckets/SHOW_BUCKET_POLICY for showBucketPolicy", () => {
+    const store = mockStore()
+    const expectedActions = [
+      { type: "buckets/SHOW_BUCKET_POLICY", show: true }
+    ]
+    store.dispatch(actionsBuckets.showBucketPolicy())
+    const actions = store.getActions()
+    expect(actions).toEqual(expectedActions)
+  })
+
+  it("creates buckets/SHOW_BUCKET_POLICY for hideBucketPolicy", () => {
+    const store = mockStore()
+    const expectedActions = [
+      { type: "buckets/SHOW_BUCKET_POLICY", show: false }
+    ]
+    store.dispatch(actionsBuckets.hideBucketPolicy())
+    const actions = store.getActions()
+    expect(actions).toEqual(expectedActions)
+  })
+
+  it("creates buckets/SET_POLICIES action", () => {
+    const store = mockStore()
+    const expectedActions = [
+      { type: "buckets/SET_POLICIES", policies: ["test1", "test2"] }
+    ]
+    store.dispatch(actionsBuckets.setPolicies(["test1", "test2"]))
+    const actions = store.getActions()
+    expect(actions).toEqual(expectedActions)
+  })
+
+  it("creates buckets/ADD action", () => {
+    const store = mockStore()
+    const expectedActions = [{ type: "buckets/ADD", bucket: "test" }]
+    store.dispatch(actionsBuckets.addBucket("test"))
+    const actions = store.getActions()
+    expect(actions).toEqual(expectedActions)
+  })
+
+  it("creates buckets/REMOVE action", () => {
+    const store = mockStore()
+    const expectedActions = [{ type: "buckets/REMOVE", bucket: "test" }]
+    store.dispatch(actionsBuckets.removeBucket("test"))
+    const actions = store.getActions()
+    expect(actions).toEqual(expectedActions)
+  })
+
+  it("creates buckets/ADD and buckets/SET_CURRENT_BUCKET after creating the bucket", () => {
+    const store = mockStore()
+    const expectedActions = [
+      { type: "buckets/ADD", bucket: "test1" },
+      { type: "buckets/SET_CURRENT_BUCKET", bucket: "test1" }
+    ]
+    return store.dispatch(actionsBuckets.makeBucket("test1")).then(() => {
+      const actions = store.getActions()
+      expect(actions).toEqual(expectedActions)
+    })
+  })
+
+  it("creates alert/SET, buckets/REMOVE, buckets/SET_LIST and buckets/SET_CURRENT_BUCKET " + 
+     "after deleting the bucket", () => {
+    const store = mockStore()
+    const expectedActions = [
+      { type: "alert/SET", alert: {id: 0, message: "Bucket 'test3' has been deleted.", type: "info"} },
+      { type: "buckets/REMOVE", bucket: "test3" },
+      { type: "buckets/SET_LIST", buckets: ["test1", "test2"] },
+      { type: "buckets/SET_CURRENT_BUCKET", bucket: "test1" }
+    ]
+    return store.dispatch(actionsBuckets.deleteBucket("test3")).then(() => {
+      const actions = store.getActions()
+      expect(actions).toEqual(expectedActions)
+    })
+  })
+})

browser/app/js/buckets/__tests__/reducer.test.js

@@ -0,0 +1,102 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import reducer from "../reducer"
+import * as actions from "../actions"
+
+describe("buckets reducer", () => {
+  it("should return the initial state", () => {
+    const initialState = reducer(undefined, {})
+    expect(initialState).toEqual({
+      list: [],
+      policies: [],
+      filter: "",
+      currentBucket: "",
+      showBucketPolicy: false,
+      showMakeBucketModal: false
+    })
+  })
+
+  it("should handle SET_LIST", () => {
+    const newState = reducer(undefined, {
+      type: actions.SET_LIST,
+      buckets: ["bk1", "bk2"]
+    })
+    expect(newState.list).toEqual(["bk1", "bk2"])
+  })
+
+  it("should handle ADD", () => {
+    const newState = reducer(
+      { list: ["test1", "test2"] },
+      {
+        type: actions.ADD,
+        bucket: "test3"
+      }
+    )
+    expect(newState.list).toEqual(["test3", "test1", "test2"])
+  })
+
+  it("should handle REMOVE", () => {
+    const newState = reducer(
+      { list: ["test1", "test2"] },
+      {
+        type: actions.REMOVE,
+        bucket: "test2"
+      }
+    )
+    expect(newState.list).toEqual(["test1"])
+  })
+
+  it("should handle SET_FILTER", () => {
+    const newState = reducer(undefined, {
+      type: actions.SET_FILTER,
+      filter: "test"
+    })
+    expect(newState.filter).toEqual("test")
+  })
+
+  it("should handle SET_CURRENT_BUCKET", () => {
+    const newState = reducer(undefined, {
+      type: actions.SET_CURRENT_BUCKET,
+      bucket: "test"
+    })
+    expect(newState.currentBucket).toEqual("test")
+  })
+
+  it("should handle SET_POLICIES", () => {
+    const newState = reducer(undefined, {
+      type: actions.SET_POLICIES,
+      policies: ["test1", "test2"]
+    })
+    expect(newState.policies).toEqual(["test1", "test2"])
+  })
+
+  it("should handle SHOW_BUCKET_POLICY", () => {
+    const newState = reducer(undefined, {
+      type: actions.SHOW_BUCKET_POLICY,
+      show: true
+    })
+    expect(newState.showBucketPolicy).toBeTruthy()
+  })
+  
+  it("should handle SHOW_MAKE_BUCKET_MODAL", () => {
+    const newState = reducer(undefined, {
+      type: actions.SHOW_MAKE_BUCKET_MODAL,
+      show: true
+    })
+    expect(newState.showMakeBucketModal).toBeTruthy()
+  })
+})

browser/app/js/buckets/__tests__/selectors.test.js

@@ -0,0 +1,38 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { getVisibleBuckets, getCurrentBucket } from "../selectors"
+
+describe("getVisibleBuckets", () => {
+  let state
+  beforeEach(() => {
+    state = {
+      buckets: {
+        list: ["test1", "test11", "test2"]
+      }
+    }
+  })
+
+  it("should return all buckets if no filter specified", () => {
+    state.buckets.filter = ""
+    expect(getVisibleBuckets(state)).toEqual(["test1", "test11", "test2"])
+  })
+
+  it("should return all matching buckets if filter is specified", () => {
+    state.buckets.filter = "test1"
+    expect(getVisibleBuckets(state)).toEqual(["test1", "test11"])
+  })
+})

browser/app/js/buckets/actions.js

@@ -0,0 +1,185 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import web from "../web"
+import history from "../history"
+import * as alertActions from "../alert/actions"
+import * as objectsActions from "../objects/actions"
+import { pathSlice } from "../utils"
+
+export const SET_LIST = "buckets/SET_LIST"
+export const ADD = "buckets/ADD"
+export const REMOVE = "buckets/REMOVE"
+export const SET_FILTER = "buckets/SET_FILTER"
+export const SET_CURRENT_BUCKET = "buckets/SET_CURRENT_BUCKET"
+export const SHOW_MAKE_BUCKET_MODAL = "buckets/SHOW_MAKE_BUCKET_MODAL"
+export const SHOW_BUCKET_POLICY = "buckets/SHOW_BUCKET_POLICY"
+export const SET_POLICIES = "buckets/SET_POLICIES"
+
+export const fetchBuckets = () => {
+  return function(dispatch) {
+    return web.ListBuckets().then(res => {
+      const buckets = res.buckets ? res.buckets.map(bucket => bucket.name) : []
+      dispatch(setList(buckets))
+      if (buckets.length > 0) {
+        const { bucket, prefix } = pathSlice(history.location.pathname)
+        if (bucket && buckets.indexOf(bucket) > -1) {
+          dispatch(selectBucket(bucket, prefix))
+        } else {
+          dispatch(selectBucket(buckets[0]))
+        }
+      } else {
+        dispatch(selectBucket(""))
+        history.replace("/")
+      }
+    })
+  }
+}
+
+export const setList = buckets => {
+  return {
+    type: SET_LIST,
+    buckets
+  }
+}
+
+export const setFilter = filter => {
+  return {
+    type: SET_FILTER,
+    filter
+  }
+}
+
+export const selectBucket = (bucket, prefix) => {
+  return function(dispatch) {
+    dispatch(setCurrentBucket(bucket))
+    dispatch(objectsActions.selectPrefix(prefix || ""))
+  }
+}
+
+export const setCurrentBucket = bucket => {
+  return {
+    type: SET_CURRENT_BUCKET,
+    bucket
+  }
+}
+
+export const makeBucket = bucket => {
+  return function(dispatch) {
+    return web
+      .MakeBucket({
+        bucketName: bucket
+      })
+      .then(() => {
+        dispatch(addBucket(bucket))
+        dispatch(selectBucket(bucket))
+      })
+      .catch(err =>
+        dispatch(
+          alertActions.set({
+            type: "danger",
+            message: err.message
+          })
+        )
+      )
+  }
+}
+
+export const deleteBucket = bucket => {
+  return function(dispatch) {
+    return web
+      .DeleteBucket({
+        bucketName: bucket
+      })
+      .then(() => {
+        dispatch(
+          alertActions.set({
+            type: "info",
+            message: "Bucket '" + bucket + "' has been deleted."
+          })
+        )
+        dispatch(removeBucket(bucket))
+        dispatch(fetchBuckets())
+      })
+      .catch(err => { 
+        dispatch(
+          alertActions.set({
+            type: "danger",
+            message: err.message
+          })
+        )
+      })
+  }
+}
+
+export const addBucket = bucket => ({
+  type: ADD,
+  bucket
+})
+
+export const removeBucket = bucket => ({
+  type: REMOVE,
+  bucket
+})
+
+export const showMakeBucketModal = () => ({
+  type: SHOW_MAKE_BUCKET_MODAL,
+  show: true
+})
+
+export const hideMakeBucketModal = () => ({
+  type: SHOW_MAKE_BUCKET_MODAL,
+  show: false
+})
+
+export const fetchPolicies = bucket => {
+  return function(dispatch) {
+    return web
+      .ListAllBucketPolicies({
+        bucketName: bucket
+      })
+      .then(res => {
+        let policies = res.policies
+        if(policies)
+          dispatch(setPolicies(policies))
+        else
+          dispatch(setPolicies([]))
+      })
+      .catch(err => {
+        dispatch(
+          alertActions.set({
+            type: "danger",
+            message: err.message
+          })
+        )
+      })
+  }
+}
+
+export const setPolicies = policies => ({
+  type: SET_POLICIES,
+  policies
+})
+
+export const showBucketPolicy = () => ({
+  type: SHOW_BUCKET_POLICY,
+  show: true
+})
+
+export const hideBucketPolicy = () => ({
+  type: SHOW_BUCKET_POLICY,
+  show: false
+})

browser/app/js/buckets/reducer.js

@@ -0,0 +1,82 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as actionsBuckets from "./actions"
+
+const removeBucket = (list, action) => {
+  const idx = list.findIndex(bucket => bucket === action.bucket)
+  if (idx == -1) {
+    return list
+  }
+  return [...list.slice(0, idx), ...list.slice(idx + 1)]
+}
+
+export default (
+  state = {
+    list: [],
+    filter: "",
+    currentBucket: "",
+    showMakeBucketModal: false,
+    policies: [],
+    showBucketPolicy: false
+  },
+  action
+) => {
+  switch (action.type) {
+    case actionsBuckets.SET_LIST:
+      return {
+        ...state,
+        list: action.buckets
+      }
+    case actionsBuckets.ADD:
+      return {
+        ...state,
+        list: [action.bucket, ...state.list]
+      }
+    case actionsBuckets.REMOVE:
+      return {
+        ...state,
+        list: removeBucket(state.list, action),
+      }
+    case actionsBuckets.SET_FILTER:
+      return {
+        ...state,
+        filter: action.filter
+      }
+    case actionsBuckets.SET_CURRENT_BUCKET:
+      return {
+        ...state,
+        currentBucket: action.bucket
+      }
+    case actionsBuckets.SHOW_MAKE_BUCKET_MODAL:
+      return {
+        ...state,
+        showMakeBucketModal: action.show
+      }
+    case actionsBuckets.SET_POLICIES:
+      return {
+        ...state,
+        policies: action.policies
+      }
+    case actionsBuckets.SHOW_BUCKET_POLICY:
+      return {
+        ...state,
+        showBucketPolicy: action.show
+      }
+    default:
+      return state
+  }
+}

browser/app/js/buckets/selectors.js

@@ -0,0 +1,28 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { createSelector } from "reselect"
+
+const bucketsSelector = state => state.buckets.list
+const bucketsFilterSelector = state => state.buckets.filter
+
+export const getVisibleBuckets = createSelector(
+  bucketsSelector,
+  bucketsFilterSelector,
+  (buckets, filter) => buckets.filter(bucket => bucket.indexOf(filter) > -1)
+)
+
+export const getCurrentBucket = state => state.buckets.currentBucket

browser/app/js/components/Browse.js

@@ -1,869 +0,0 @@
-/*
- * Minio Cloud Storage (C) 2016 Minio, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React from 'react'
-import classNames from 'classnames'
-import browserHistory from 'react-router/lib/browserHistory'
-import humanize from 'humanize'
-import Moment from 'moment'
-import Modal from 'react-bootstrap/lib/Modal'
-import ModalBody from 'react-bootstrap/lib/ModalBody'
-import ModalHeader from 'react-bootstrap/lib/ModalHeader'
-import Alert from 'react-bootstrap/lib/Alert'
-import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger'
-import Tooltip from 'react-bootstrap/lib/Tooltip'
-import Dropdown from 'react-bootstrap/lib/Dropdown'
-import MenuItem from 'react-bootstrap/lib/MenuItem'
-import InputGroup from '../components/InputGroup'
-import Dropzone from '../components/Dropzone'
-import ObjectsList from '../components/ObjectsList'
-import SideBar from '../components/SideBar'
-import Path from '../components/Path'
-import BrowserUpdate from '../components/BrowserUpdate'
-import UploadModal from '../components/UploadModal'
-import SettingsModal from '../components/SettingsModal'
-import PolicyInput from '../components/PolicyInput'
-import Policy from '../components/Policy'
-import BrowserDropdown from '../components/BrowserDropdown'
-import ConfirmModal from './ConfirmModal'
-import logo from '../../img/logo.svg'
-import * as actions from '../actions'
-import * as utils from '../utils'
-import * as mime from '../mime'
-import { minioBrowserPrefix } from '../constants'
-import CopyToClipboard from 'react-copy-to-clipboard'
-import storage from 'local-storage-fallback'
-import InfiniteScroll from 'react-infinite-scroller';
-
-export default class Browse extends React.Component {
-  componentDidMount() {
-    const {web, dispatch, currentBucket} = this.props
-    if (!web.LoggedIn()) return
-    web.StorageInfo()
-      .then(res => {
-        let storageInfo = Object.assign({}, {
-          total: res.storageInfo.Total,
-          free: res.storageInfo.Free
-        })
-        storageInfo.used = storageInfo.total - storageInfo.free
-        dispatch(actions.setStorageInfo(storageInfo))
-        return web.ServerInfo()
-      })
-      .then(res => {
-        let serverInfo = Object.assign({}, {
-          version: res.MinioVersion,
-          memory: res.MinioMemory,
-          platform: res.MinioPlatform,
-          runtime: res.MinioRuntime,
-          info: res.MinioGlobalInfo
-        })
-        dispatch(actions.setServerInfo(serverInfo))
-      })
-      .catch(err => {
-        dispatch(actions.showAlert({
-          type: 'danger',
-          message: err.message
-        }))
-      })
-  }
-
-  componentWillMount() {
-    const {dispatch} = this.props
-    // Clear out any stale message in the alert of Login page
-    dispatch(actions.showAlert({
-      type: 'danger',
-      message: ''
-    }))
-    if (web.LoggedIn()) {
-      web.ListBuckets()
-        .then(res => {
-          let buckets
-          if (!res.buckets)
-            buckets = []
-          else
-            buckets = res.buckets.map(bucket => bucket.name)
-          if (buckets.length) {
-            dispatch(actions.setBuckets(buckets))
-            dispatch(actions.setVisibleBuckets(buckets))
-            if (location.pathname === minioBrowserPrefix || location.pathname === minioBrowserPrefix + '/') {
-              browserHistory.push(utils.pathJoin(buckets[0]))
-            }
-          }
-        })
-    }
-    this.history = browserHistory.listen(({pathname}) => {
-      let decPathname = decodeURI(pathname)
-      if (decPathname === `${minioBrowserPrefix}/login`) return // FIXME: better organize routes and remove this
-      if (!decPathname.endsWith('/'))
-        decPathname += '/'
-      if (decPathname === minioBrowserPrefix + '/') {
-        return
-      }
-      let obj = utils.pathSlice(decPathname)
-      if (!web.LoggedIn()) {
-        dispatch(actions.setBuckets([obj.bucket]))
-        dispatch(actions.setVisibleBuckets([obj.bucket]))
-      }
-      dispatch(actions.selectBucket(obj.bucket, obj.prefix))
-    })
-  }
-
-  componentWillUnmount() {
-    this.history()
-  }
-
-  selectBucket(e, bucket) {
-    e.preventDefault()
-    if (bucket === this.props.currentBucket) return
-    browserHistory.push(utils.pathJoin(bucket))
-  }
-
-  searchBuckets(e) {
-    e.preventDefault()
-    let {buckets} = this.props
-    this.props.dispatch(actions.setVisibleBuckets(buckets.filter(bucket => bucket.indexOf(e.target.value) > -1)))
-  }
-
-  listObjects() {
-    const {dispatch} = this.props
-    dispatch(actions.listObjects())
-  }
-
-  selectPrefix(e, prefix) {
-    e.preventDefault()
-    const {dispatch, currentPath, web, currentBucket} = this.props
-    const encPrefix = encodeURI(prefix)
-    if (prefix.endsWith('/') || prefix === '') {
-      if (prefix === currentPath) return
-      browserHistory.push(utils.pathJoin(currentBucket, encPrefix))
-    } else {
-      if (!web.LoggedIn()) {
-        let url = `${window.location.origin}/minio/download/${currentBucket}/${encPrefix}?token=''`
-        window.location = url
-      } else {
-        // Download the selected file.
-        web.CreateURLToken()
-          .then(res => {
-            let url = `${window.location.origin}${minioBrowserPrefix}/download/${currentBucket}/${encPrefix}?token=${res.token}`
-            window.location = url
-          })
-          .catch(err => dispatch(actions.showAlert({
-            type: 'danger',
-            message: err.message
-          })))
-      }
-    }
-  }
-
-  makeBucket(e) {
-    e.preventDefault()
-    const bucketName = this.refs.makeBucketRef.value
-    this.refs.makeBucketRef.value = ''
-    const {web, dispatch} = this.props
-    this.hideMakeBucketModal()
-    web.MakeBucket({
-      bucketName
-    })
-      .then(() => {
-        dispatch(actions.addBucket(bucketName))
-        dispatch(actions.selectBucket(bucketName))
-      })
-      .catch(err => dispatch(actions.showAlert({
-        type: 'danger',
-        message: err.message
-      })))
-  }
-
-  hideMakeBucketModal() {
-    const {dispatch} = this.props
-    dispatch(actions.hideMakeBucketModal())
-  }
-
-  showMakeBucketModal(e) {
-    e.preventDefault()
-    const {dispatch} = this.props
-    dispatch(actions.showMakeBucketModal())
-  }
-
-  showAbout(e) {
-    e.preventDefault()
-    const {dispatch} = this.props
-    dispatch(actions.showAbout())
-  }
-
-  hideAbout(e) {
-    e.preventDefault()
-    const {dispatch} = this.props
-    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())
-  }
-
-  hideBucketPolicy(e) {
-    e.preventDefault()
-    const {dispatch} = this.props
-    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, currentBucket} = this.props
-    if (buckets.length === 0) {
-      dispatch(actions.showAlert({
-        type: 'danger',
-        message: "Bucket needs to be created before trying to upload files."
-      }))
-      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()
-    dispatch(actions.uploadFile(file, this.xhr))
-  }
-
-  removeObject() {
-    const {web, dispatch, currentPath, currentBucket, deleteConfirmation, checkedObjects} = this.props
-    let objects = []
-    if (checkedObjects.length > 0) {
-      objects = checkedObjects.map(obj => `${currentPath}${obj}`)
-    } else {
-      objects = [deleteConfirmation.object]
-    }
-
-    web.RemoveObject({
-      bucketname: currentBucket,
-      objects: objects
-    })
-      .then(() => {
-        this.hideDeleteConfirmation()
-        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
-      })))
-  }
-
-  hideAlert(e) {
-    e.preventDefault()
-    const {dispatch} = this.props
-    dispatch(actions.hideAlert())
-  }
-
-  showDeleteConfirmation(e, object) {
-    e.preventDefault()
-    const {dispatch} = this.props
-    dispatch(actions.showDeleteConfirmation(object))
-  }
-
-  hideDeleteConfirmation() {
-    const {dispatch} = this.props
-    dispatch(actions.hideDeleteConfirmation())
-  }
-
-  shareObject(e, object) {
-    e.preventDefault()
-    const {dispatch} = this.props
-    // let expiry = 5 * 24 * 60 * 60 // 5 days expiry by default
-    dispatch(actions.shareObject(object, 5, 0, 0))
-  }
-
-  hideShareObjectModal() {
-    const {dispatch} = this.props
-    dispatch(actions.hideShareObject())
-  }
-
-  dataType(name, contentType) {
-    return mime.getDataType(name, contentType)
-  }
-
-  sortObjectsByName(e) {
-    const {dispatch, objects, sortNameOrder} = this.props
-    dispatch(actions.setObjects(utils.sortObjectsByName(objects, !sortNameOrder)))
-    dispatch(actions.setSortNameOrder(!sortNameOrder))
-  }
-
-  sortObjectsBySize() {
-    const {dispatch, objects, sortSizeOrder} = this.props
-    dispatch(actions.setObjects(utils.sortObjectsBySize(objects, !sortSizeOrder)))
-    dispatch(actions.setSortSizeOrder(!sortSizeOrder))
-  }
-
-  sortObjectsByDate() {
-    const {dispatch, objects, sortDateOrder} = this.props
-    dispatch(actions.setObjects(utils.sortObjectsByDate(objects, !sortDateOrder)))
-    dispatch(actions.setSortDateOrder(!sortDateOrder))
-  }
-
-  logout(e) {
-    const {web} = this.props
-    e.preventDefault()
-    web.Logout()
-    browserHistory.push(`${minioBrowserPrefix}/login`)
-  }
-
-  fullScreen(e) {
-    e.preventDefault()
-    let el = document.documentElement
-    if (el.requestFullscreen) {
-      el.requestFullscreen()
-    }
-    if (el.mozRequestFullScreen) {
-      el.mozRequestFullScreen()
-    }
-    if (el.webkitRequestFullscreen) {
-      el.webkitRequestFullscreen()
-    }
-    if (el.msRequestFullscreen) {
-      el.msRequestFullscreen()
-    }
-  }
-
-  toggleSidebar(status) {
-    this.props.dispatch(actions.setSidebarStatus(status))
-  }
-
-  hideSidebar(event) {
-    let e = event || window.event;
-
-    // Support all browsers.
-    let target = e.srcElement || e.target;
-    if (target.nodeType === 3) // Safari support.
-      target = target.parentNode;
-
-    let targetID = target.id;
-    if (!(targetID === 'feh-trigger')) {
-      this.props.dispatch(actions.setSidebarStatus(false))
-    }
-  }
-
-  showSettings(e) {
-    e.preventDefault()
-
-    const {dispatch} = this.props
-    dispatch(actions.showSettings())
-  }
-
-  showMessage() {
-    const {dispatch} = this.props
-    dispatch(actions.showAlert({
-      type: 'success',
-      message: 'Link copied to clipboard!'
-    }))
-    this.hideShareObjectModal()
-  }
-
-  selectTexts() {
-    this.refs.copyTextInput.select()
-  }
-
-  handleExpireValue(targetInput, inc, object) {
-    let value = this.refs[targetInput].value
-    let maxValue = (targetInput == 'expireHours') ? 23 : (targetInput == 'expireMins') ? 59 : (targetInput == 'expireDays') ? 7 : 0
-    value = isNaN(value) ? 0 : value
-
-    // Use custom step count to support browser Edge
-    if((inc === -1)) {
-      if(value != 0) {
-        value--
-      }
-    }
-    else {
-      if(value != maxValue) {
-        value++
-      }
-    }
-    this.refs[targetInput].value = value
-
-    // Reset hours and mins when days reaches it's max value
-    if (this.refs.expireDays.value == 7) {
-      this.refs.expireHours.value = 0
-      this.refs.expireMins.value = 0
-    }
-    if (this.refs.expireDays.value + this.refs.expireHours.value + this.refs.expireMins.value == 0) {
-      this.refs.expireDays.value = 7
-    }
-
-    const {dispatch} = this.props
-    dispatch(actions.shareObject(object, this.refs.expireDays.value, this.refs.expireHours.value, this.refs.expireMins.value))
-  }
-
-  checkObject(e, objectName) {
-    const {dispatch} = this.props
-    e.target.checked ? dispatch(actions.checkedObjectsAdd(objectName)) : dispatch(actions.checkedObjectsRemove(objectName))
-  }
-
-  downloadSelected() {
-    const {dispatch, web} = this.props
-    let req = {
-      bucketName: this.props.currentBucket,
-      objects: this.props.checkedObjects,
-      prefix: this.props.currentPath
-    }
-    if (!web.LoggedIn()) {
-      let requestUrl = location.origin + "/minio/zip?token=''"
-      this.xhr = new XMLHttpRequest()
-      dispatch(actions.downloadSelected(requestUrl, req, this.xhr))
-    } else {
-      web.CreateURLToken()
-        .then(res => {
-          let requestUrl = location.origin + minioBrowserPrefix + "/zip?token=" + res.token
-          this.xhr = new XMLHttpRequest()
-          dispatch(actions.downloadSelected(requestUrl, req, this.xhr))
-        })
-        .catch(err => dispatch(actions.showAlert({
-          type: 'danger',
-          message: err.message
-        })))
-    }
-  }
-
-  clearSelected() {
-    const {dispatch} = this.props
-    dispatch(actions.checkedObjectsReset())
-  }
-
-  render() {
-    const {total, free} = this.props.storageInfo
-    const {showMakeBucketModal, alert, sortNameOrder, sortSizeOrder, sortDateOrder, showAbout, showBucketPolicy, checkedObjects} = this.props
-    const {version, memory, platform, runtime} = this.props.serverInfo
-    const {sidebarStatus} = this.props
-    const {showSettings} = this.props
-    const {policies, currentBucket, currentPath} = this.props
-    const {deleteConfirmation} = this.props
-    const {shareObject} = this.props
-    const {web, prefixWritable, istruncated} = this.props
-
-    // Don't always show the SettingsModal. This is done here instead of in
-    // SettingsModal.js so as to allow for #componentWillMount to handle
-    // the loading of the settings.
-    let settingsModal = showSettings ? <SettingsModal /> : <noscript></noscript>
-
-    let alertBox = <Alert className={ classNames({
-                     'alert': true,
-                     'animated': true,
-                     'fadeInDown': alert.show,
-                     'fadeOutUp': !alert.show
-                   }) } bsStyle={ alert.type } onDismiss={ this.hideAlert.bind(this) }>
-                     <div className='text-center'>
-                       { alert.message }
-                     </div>
-                   </Alert>
-    // Make sure you don't show a fading out alert box on the initial web-page load.
-    if (!alert.message)
-      alertBox = ''
-
-    let signoutTooltip = <Tooltip id="tt-sign-out">
-                           Sign out
-                         </Tooltip>
-    let uploadTooltip = <Tooltip id="tt-upload-file">
-                          Upload file
-                        </Tooltip>
-    let makeBucketTooltip = <Tooltip id="tt-create-bucket">
-                              Create bucket
-                            </Tooltip>
-    let loginButton = ''
-    let browserDropdownButton = ''
-    let storageUsageDetails = ''
-
-    let used = total - free
-    let usedPercent = (used / total) * 100 + '%'
-    let freePercent = free * 100 / total
-
-    if (web.LoggedIn()) {
-      browserDropdownButton = <BrowserDropdown fullScreenFunc={ this.fullScreen.bind(this) }
-                                aboutFunc={ this.showAbout.bind(this) }
-                                settingsFunc={ this.showSettings.bind(this) }
-                                logoutFunc={ this.logout.bind(this) } />
-    } else {
-      loginButton = <a className='btn btn-danger' href={minioBrowserPrefix+'/login'}>Login</a>
-    }
-
-    if (web.LoggedIn()) {
-      if (!(used === 0 && free === 0)) {
-        storageUsageDetails = <div className="feh-usage">
-          <div className="fehu-chart">
-            <div style={ { width: usedPercent } }></div>
-          </div>
-          <ul>
-            <li>
-              <span>Used: </span>
-              { humanize.filesize(total - free) }
-            </li>
-            <li className="pull-right">
-              <span>Free: </span>
-              { humanize.filesize(total - used) }
-            </li>
-          </ul>
-        </div>
-      }
-
-
-    }
-
-    let createButton = ''
-    if (web.LoggedIn()) {
-      createButton = <Dropdown dropup className="feb-actions" id="fe-action-toggle">
-                       <Dropdown.Toggle noCaret className="feba-toggle">
-                         <span><i className="fa fa-plus"></i></span>
-                       </Dropdown.Toggle>
-                       <Dropdown.Menu>
-                         <OverlayTrigger placement="left" overlay={ uploadTooltip }>
-                           <a href="#" className="feba-btn feba-upload">
-                             <input type="file"
-                               onChange={ this.uploadFile.bind(this) }
-                               style={ { display: 'none' } }
-                               id="file-input"></input>
-                             <label htmlFor="file-input"> <i className="fa fa-cloud-upload"></i> </label>
-                           </a>
-                         </OverlayTrigger>
-                         <OverlayTrigger placement="left" overlay={ makeBucketTooltip }>
-                           <a href="#" className="feba-btn feba-bucket" onClick={ this.showMakeBucketModal.bind(this) }><i className="fa fa-hdd-o"></i></a>
-                         </OverlayTrigger>
-                       </Dropdown.Menu>
-                     </Dropdown>
-
-    } else {
-      if (prefixWritable)
-        createButton = <Dropdown dropup className="feb-actions" id="fe-action-toggle">
-                         <Dropdown.Toggle noCaret className="feba-toggle">
-                           <span><i className="fa fa-plus"></i></span>
-                         </Dropdown.Toggle>
-                         <Dropdown.Menu>
-                           <OverlayTrigger placement="left" overlay={ uploadTooltip }>
-                             <a href="#" className="feba-btn feba-upload">
-                               <input type="file"
-                                 onChange={ this.uploadFile.bind(this) }
-                                 style={ { display: 'none' } }
-                                 id="file-input"></input>
-                               <label htmlFor="file-input"> <i className="fa fa-cloud-upload"></i> </label>
-                             </a>
-                           </OverlayTrigger>
-                         </Dropdown.Menu>
-                       </Dropdown>
-    }
-
-    return (
-      <div className={ classNames({
-                   'file-explorer': true,
-                   'toggled': sidebarStatus
-                 }) }>
-        <SideBar searchBuckets={ this.searchBuckets.bind(this) }
-          selectBucket={ this.selectBucket.bind(this) }
-          clickOutside={ this.hideSidebar.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
-                           })) }>
-            <span className="la-label"><i className="fa fa-check-circle" /> { checkedObjects.length } Objects selected</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 }
-            <header className="fe-header-mobile hidden-lg hidden-md">
-              <div id="feh-trigger" className={ 'feh-trigger ' + (classNames({
-                                                  'feht-toggled': sidebarStatus
-                                                })) } onClick={ this.toggleSidebar.bind(this, !sidebarStatus) }>
-                <div className="feht-lines">
-                  <div className="top"></div>
-                  <div className="center"></div>
-                  <div className="bottom"></div>
-                </div>
-              </div>
-              <img className="mh-logo" src={ logo } alt="" />
-            </header>
-            <header className="fe-header">
-              <Path selectPrefix={ this.selectPrefix.bind(this) } />
-              { storageUsageDetails }
-              <ul className="feh-actions">
-                <BrowserUpdate />
-                { loginButton }
-                { browserDropdownButton }
-              </ul>
-            </header>
-            <div className="feb-container">
-              <header className="fesl-row" data-type="folder">
-                <div className="fesl-item fesl-item-icon"></div>
-                <div className="fesl-item fesl-item-name" onClick={ this.sortObjectsByName.bind(this) } data-sort="name">
-                  Name
-                  <i className={ classNames({
-                                   'fesli-sort': true,
-                                   'fa': true,
-                                   'fa-sort-alpha-desc': sortNameOrder,
-                                   'fa-sort-alpha-asc': !sortNameOrder
-                                 }) } />
-                </div>
-                <div className="fesl-item fesl-item-size" onClick={ this.sortObjectsBySize.bind(this) } data-sort="size">
-                  Size
-                  <i className={ classNames({
-                                   'fesli-sort': true,
-                                   'fa': true,
-                                   'fa-sort-amount-desc': sortSizeOrder,
-                                   'fa-sort-amount-asc': !sortSizeOrder
-                                 }) } />
-                </div>
-                <div className="fesl-item fesl-item-modified" onClick={ this.sortObjectsByDate.bind(this) } data-sort="last-modified">
-                  Last Modified
-                  <i className={ classNames({
-                                   'fesli-sort': true,
-                                   'fa': true,
-                                   'fa-sort-numeric-desc': sortDateOrder,
-                                   'fa-sort-numeric-asc': !sortDateOrder
-                                 }) } />
-                </div>
-                <div className="fesl-item fesl-item-actions"></div>
-              </header>
-            </div>
-            <div className="feb-container">
-              <InfiniteScroll loadMore={ this.listObjects.bind(this) }
-                hasMore={ istruncated }
-                useWindow={ true }
-                initialLoad={ false }>
-                <ObjectsList dataType={ this.dataType.bind(this) }
-                  selectPrefix={ this.selectPrefix.bind(this) }
-                  showDeleteConfirmation={ this.showDeleteConfirmation.bind(this) }
-                  shareObject={ this.shareObject.bind(this) }
-                  checkObject={ this.checkObject.bind(this) }
-                  checkedObjectsArray={ checkedObjects } />
-              </InfiniteScroll>
-              <div className="text-center" style={ { display: (istruncated && currentBucket) ? 'block' : 'none' } }>
-                <span>Loading...</span>
-              </div>
-            </div>
-            <UploadModal />
-            { createButton }
-            <Modal className="modal-create-bucket"
-              bsSize="small"
-              animation={ false }
-              show={ showMakeBucketModal }
-              onHide={ this.hideMakeBucketModal.bind(this) }>
-              <button className="close close-alt" onClick={ this.hideMakeBucketModal.bind(this) }>
-                <span>×</span>
-              </button>
-              <ModalBody>
-                <form onSubmit={ this.makeBucket.bind(this) }>
-                  <div className="input-group">
-                    <input className="ig-text"
-                      type="text"
-                      ref="makeBucketRef"
-                      placeholder="Bucket Name"
-                      autoFocus/>
-                    <i className="ig-helpers"></i>
-                  </div>
-                </form>
-              </ModalBody>
-            </Modal>
-            <Modal className="modal-about modal-dark"
-              animation={ false }
-              show={ showAbout }
-              onHide={ this.hideAbout.bind(this) }>
-              <button className="close" onClick={ this.hideAbout.bind(this) }>
-                <span>×</span>
-              </button>
-              <div className="ma-inner">
-                <div className="mai-item hidden-xs">
-                  <a href="https://minio.io" target="_blank"><img className="maii-logo" src={ logo } alt="" /></a>
-                </div>
-                <div className="mai-item">
-                  <ul className="maii-list">
-                    <li>
-                      <div>
-                        Version
-                      </div>
-                      <small>{ version }</small>
-                    </li>
-                    <li>
-                      <div>
-                        Memory
-                      </div>
-                      <small>{ memory }</small>
-                    </li>
-                    <li>
-                      <div>
-                        Platform
-                      </div>
-                      <small>{ platform }</small>
-                    </li>
-                    <li>
-                      <div>
-                        Runtime
-                      </div>
-                      <small>{ runtime }</small>
-                    </li>
-                  </ul>
-                </div>
-              </div>
-            </Modal>
-            <Modal className="modal-policy"
-              animation={ false }
-              show={ showBucketPolicy }
-              onHide={ this.hideBucketPolicy.bind(this) }>
-              <ModalHeader>
-                Bucket Policy (
-                { currentBucket })
-                <button className="close close-alt" onClick={ this.hideBucketPolicy.bind(this) }>
-                  <span>×</span>
-                </button>
-              </ModalHeader>
-              <div className="pm-body">
-                <PolicyInput bucket={ currentBucket } />
-                { policies.map((policy, i) => <Policy key={ i } prefix={ policy.prefix } policy={ policy.policy } />
-                  ) }
-              </div>
-            </Modal>
-            <ConfirmModal show={ deleteConfirmation.show }
-              icon='fa fa-exclamation-triangle mci-red'
-              text='Are you sure you want to delete?'
-              sub='This cannot be undone!'
-              okText='Delete'
-              cancelText='Cancel'
-              okHandler={ this.removeObject.bind(this) }
-              cancelHandler={ this.hideDeleteConfirmation.bind(this) }>
-            </ConfirmModal>
-            <Modal show={ shareObject.show }
-              animation={ false }
-              onHide={ this.hideShareObjectModal.bind(this) }
-              bsSize="small">
-              <ModalHeader>
-                Share Object
-              </ModalHeader>
-              <ModalBody>
-                <div className="input-group copy-text">
-                  <label>
-                    Shareable Link
-                  </label>
-                  <input type="text"
-                    ref="copyTextInput"
-                    readOnly="readOnly"
-                    value={ window.location.protocol + '//' + shareObject.url }
-                    onClick={ this.selectTexts.bind(this) } />
-                </div>
-                <div className="input-group" style={ { display: web.LoggedIn() ? 'block' : 'none' } }>
-                  <label>
-                    Expires in (Max 7 days)
-                  </label>
-                  <div className="set-expire">
-                    <div className="set-expire-item">
-                      <i className="set-expire-increase" onClick={ this.handleExpireValue.bind(this, 'expireDays', 1, shareObject.object) } />
-                      <div className="set-expire-title">
-                        Days
-                      </div>
-                      <div className="set-expire-value">
-                        <input ref="expireDays"
-                          type="number"
-                          min={ 0 }
-                          max={ 7 }
-                          defaultValue={ 5 }
-                          readOnly="readOnly"
-                        />
-                      </div>
-                      <i className="set-expire-decrease" onClick={ this.handleExpireValue.bind(this, 'expireDays', -1, shareObject.object) } />
-                    </div>
-                    <div className="set-expire-item">
-                      <i className="set-expire-increase" onClick={ this.handleExpireValue.bind(this, 'expireHours', 1, shareObject.object) } />
-                      <div className="set-expire-title">
-                        Hours
-                      </div>
-                      <div className="set-expire-value">
-                        <input ref="expireHours"
-                          type="number"
-                          min={ 0 }
-                          max={ 23 }
-                          defaultValue={ 0 }
-                          readOnly="readOnly"
-                        />
-                      </div>
-                      <i className="set-expire-decrease" onClick={ this.handleExpireValue.bind(this, 'expireHours', -1, shareObject.object) } />
-                    </div>
-                    <div className="set-expire-item">
-                      <i className="set-expire-increase" onClick={ this.handleExpireValue.bind(this, 'expireMins', 1, shareObject.object) } />
-                      <div className="set-expire-title">
-                        Minutes
-                      </div>
-                      <div className="set-expire-value">
-                        <input ref="expireMins"
-                          type="number"
-                          min={ 0 }
-                          max={ 59 }
-                          defaultValue={ 0 }
-                          readOnly="readOnly"
-                        />
-                      </div>
-                      <i className="set-expire-decrease" onClick={ this.handleExpireValue.bind(this, 'expireMins', -1, shareObject.object) } />
-                    </div>
-                  </div>
-                </div>
-              </ModalBody>
-              <div className="modal-footer">
-                <CopyToClipboard text={ window.location.protocol + '//' + shareObject.url } onCopy={ this.showMessage.bind(this) }>
-                  <button className="btn btn-success">
-                    Copy Link
-                  </button>
-                </CopyToClipboard>
-                <button className="btn btn-link" onClick={ this.hideShareObjectModal.bind(this) }>
-                  Cancel
-                </button>
-              </div>
-            </Modal>
-            { settingsModal }
-          </Dropzone>
-        </div>
-      </div>
-    )
-  }
-}

browser/app/js/components/BrowserDropdown.js

@@ -1,56 +0,0 @@
-/*
- * Minio Cloud Storage (C) 2016, 2017 Minio, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React from 'react'
-import connect from 'react-redux/lib/components/connect'
-import Dropdown from 'react-bootstrap/lib/Dropdown'
-
-let BrowserDropdown = ({fullScreenFunc, aboutFunc, settingsFunc, logoutFunc}) => {
-  return (
-    <li>
-      <Dropdown pullRight id="top-right-menu">
-        <Dropdown.Toggle noCaret>
-          <i className="fa fa-reorder"></i>
-        </Dropdown.Toggle>
-        <Dropdown.Menu className="dropdown-menu-right">
-          <li>
-            <a target="_blank" href="https://github.com/minio/minio">Github <i className="fa fa-github"></i></a>
-          </li>
-          <li>
-            <a href="" onClick={ fullScreenFunc }>Fullscreen <i className="fa fa-expand"></i></a>
-          </li>
-          <li>
-            <a target="_blank" href="https://docs.minio.io/">Documentation <i className="fa fa-book"></i></a>
-          </li>
-          <li>
-            <a target="_blank" href="https://slack.minio.io">Ask for help <i className="fa fa-question-circle"></i></a>
-          </li>
-          <li>
-            <a href="" onClick={ aboutFunc }>About <i className="fa fa-info-circle"></i></a>
-          </li>
-          <li>
-            <a href="" onClick={ settingsFunc }>Settings <i className="fa fa-cog"></i></a>
-          </li>
-          <li>
-            <a href="" onClick={ logoutFunc }>Sign Out <i className="fa fa-sign-out"></i></a>
-          </li>
-        </Dropdown.Menu>
-      </Dropdown>
-    </li>
-  )
-}
-
-export default connect(state => state)(BrowserDropdown)

browser/app/js/components/InputGroup.js

@@ -1,49 +0,0 @@
-/*
- * Minio Cloud Storage (C) 2016 Minio, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React from 'react'
-
-let InputGroup = ({label, id, name, value, onChange, type, spellCheck, required, readonly, autoComplete, align, className}) => {
-  var input = <input id={ id }
-                name={ name }
-                value={ value }
-                onChange={ onChange }
-                className="ig-text"
-                type={ type }
-                spellCheck={ spellCheck }
-                required={ required }
-                autoComplete={ autoComplete } />
-  if (readonly)
-    input = <input id={ id }
-              name={ name }
-              value={ value }
-              onChange={ onChange }
-              className="ig-text"
-              type={ type }
-              spellCheck={ spellCheck }
-              required={ required }
-              autoComplete={ autoComplete }
-              disabled />
-  return <div className={ "input-group " + align + ' ' + className }>
-           { input }
-           <i className="ig-helpers"></i>
-           <label className="ig-label">
-             { label }
-           </label>
-         </div>
-}
-
-export default InputGroup

browser/app/js/components/Login.js

@@ -1,128 +0,0 @@
-/*
- * Minio Cloud Storage (C) 2016 Minio, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React from 'react'
-import classNames from 'classnames'
-import logo from '../../img/logo.svg'
-import Alert from 'react-bootstrap/lib/Alert'
-import * as actions from '../actions'
-import InputGroup from '../components/InputGroup'
-
-export default class Login extends React.Component {
-  handleSubmit(event) {
-    event.preventDefault()
-    const {web, dispatch, loginRedirectPath} = this.props
-    let message = ''
-    if (!document.getElementById('accessKey').value) {
-      message = 'Secret Key cannot be empty'
-    }
-    if (!document.getElementById('secretKey').value) {
-      message = 'Access Key cannot be empty'
-    }
-    if (message) {
-      dispatch(actions.showAlert({
-        type: 'danger',
-        message
-      }))
-      return
-    }
-    web.Login({
-      username: document.getElementById('accessKey').value,
-      password: document.getElementById('secretKey').value
-    })
-      .then((res) => {
-        this.context.router.push(loginRedirectPath)
-      })
-      .catch(e => {
-        dispatch(actions.setLoginError())
-        dispatch(actions.showAlert({
-          type: 'danger',
-          message: e.message
-        }))
-      })
-  }
-
-  componentWillMount() {
-    const {dispatch} = this.props
-    // Clear out any stale message in the alert of previous page
-    dispatch(actions.showAlert({
-      type: 'danger',
-      message: ''
-    }))
-    document.body.classList.add('is-guest')
-  }
-
-  componentWillUnmount() {
-    document.body.classList.remove('is-guest')
-  }
-
-  hideAlert() {
-    const {dispatch} = this.props
-    dispatch(actions.hideAlert())
-  }
-
-  render() {
-    const {alert} = this.props
-    let alertBox = <Alert className={ 'alert animated ' + (alert.show ? 'fadeInDown' : 'fadeOutUp') } bsStyle={ alert.type } onDismiss={ this.hideAlert.bind(this) }>
-                     <div className='text-center'>
-                       { alert.message }
-                     </div>
-                   </Alert>
-    // Make sure you don't show a fading out alert box on the initial web-page load.
-    if (!alert.message)
-      alertBox = ''
-    return (
-      <div className="login">
-        { alertBox }
-        <div className="l-wrap">
-          <form onSubmit={ this.handleSubmit.bind(this) }>
-            <InputGroup className="ig-dark"
-              label="Access Key"
-              id="accessKey"
-              name="username"
-              type="text"
-              spellCheck="false"
-              required="required"
-              autoComplete="username">
-            </InputGroup>
-            <InputGroup className="ig-dark"
-              label="Secret Key"
-              id="secretKey"
-              name="password"
-              type="password"
-              spellCheck="false"
-              required="required"
-              autoComplete="new-password">
-            </InputGroup>
-            <button className="lw-btn" type="submit">
-              <i className="fa fa-sign-in"></i>
-            </button>
-          </form>
-        </div>
-        <div className="l-footer">
-          <a className="lf-logo" href=""><img src={ logo } alt="" /></a>
-          <div className="lf-server">
-            { window.location.host }
-          </div>
-        </div>
-      </div>
-    )
-  }
-}
-
-Login.contextTypes = {
-  router: React.PropTypes.object.isRequired
-}

browser/app/js/components/ObjectsList.js

@@ -1,96 +0,0 @@
-/*
- * Minio Cloud Storage (C) 2016 Minio, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React from 'react'
-import Moment from 'moment'
-import humanize from 'humanize'
-import connect from 'react-redux/lib/components/connect'
-import Dropdown from 'react-bootstrap/lib/Dropdown'
-
-let ObjectsList = ({objects, currentPath, selectPrefix, dataType, showDeleteConfirmation, shareObject, loadPath, checkObject, checkedObjectsArray}) => {
-  const list = objects.map((object, i) => {
-    let size = object.name.endsWith('/') ? '-' : humanize.filesize(object.size)
-    let lastModified = object.name.endsWith('/') ? '-' : Moment(object.lastModified).format('lll')
-    let loadingClass = loadPath === `${currentPath}${object.name}` ? 'fesl-loading' : ''
-    let actionButtons = ''
-    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 (!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 = ''
-    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 }
-              checked={ isChecked }
-              onChange={ (e) => checkObject(e, object.name) } />
-            <i className="fis-icon"></i>
-            <i className="fis-helper"></i>
-          </div>
-        </div>
-        <div className="fesl-item fesl-item-name">
-          <a href="" onClick={ (e) => selectPrefix(e, `${currentPath}${object.name}`) }>
-            { object.name }
-          </a>
-        </div>
-        <div className="fesl-item fesl-item-size">
-          { size }
-        </div>
-        <div className="fesl-item fesl-item-modified">
-          { lastModified }
-        </div>
-        <div className="fesl-item fesl-item-actions">
-          { actionButtons }
-        </div>
-      </div>
-    )
-  })
-  return (
-    <div>
-      { list }
-    </div>
-  )
-}
-
-// Subscribe it to state changes.
-export default connect(state => {
-  return {
-    objects: state.objects,
-    currentPath: state.currentPath,
-    loadPath: state.loadPath
-  }
-})(ObjectsList)

browser/app/js/components/Path.js

@@ -1,41 +0,0 @@
-/*
- * Minio Cloud Storage (C) 2016 Minio, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React from 'react'
-import connect from 'react-redux/lib/components/connect'
-
-let Path = ({currentBucket, currentPath, selectPrefix}) => {
-  let dirPath = []
-  let path = ''
-  if (currentPath) {
-    path = currentPath.split('/').map((dir, i) => {
-      dirPath.push(dir)
-      let dirPath_ = dirPath.join('/') + '/'
-      return <span key={ i }><a href="" onClick={ (e) => selectPrefix(e, dirPath_) }>{ dir }</a></span>
-    })
-  }
-
-  return (
-    <h2><span className="main"><a onClick={ (e) => selectPrefix(e, '') } href="">{ currentBucket }</a></span>{ path }</h2>
-  )
-}
-
-export default connect(state => {
-  return {
-    currentBucket: state.currentBucket,
-    currentPath: state.currentPath
-  }
-})(Path)

browser/app/js/components/Policy.js

@@ -1,80 +0,0 @@
-import { READ_ONLY, WRITE_ONLY, READ_WRITE } from '../constants'
-
-import React, { Component, PropTypes } from 'react'
-import connect from 'react-redux/lib/components/connect'
-import classnames from 'classnames'
-import * as actions from '../actions'
-
-class Policy extends Component {
-  constructor(props, context) {
-    super(props, context)
-    this.state = {}
-  }
-
-  handlePolicyChange(e) {
-    this.setState({
-      policy: {
-        policy: e.target.value
-      }
-    })
-  }
-
-  removePolicy(e) {
-    e.preventDefault()
-    const {dispatch, currentBucket, prefix} = this.props
-    let newPrefix = prefix.replace(currentBucket + '/', '')
-    newPrefix = newPrefix.replace('*', '')
-    web.SetBucketPolicy({
-      bucketName: currentBucket,
-      prefix: newPrefix,
-      policy: 'none'
-    })
-      .then(() => {
-        dispatch(actions.setPolicies(this.props.policies.filter(policy => policy.prefix != prefix)))
-      })
-      .catch(e => dispatch(actions.showAlert({
-        type: 'danger',
-        message: e.message,
-      })))
-  }
-
-  render() {
-    const {policy, prefix, currentBucket} = this.props
-    let newPrefix = prefix.replace(currentBucket + '/', '')
-    newPrefix = newPrefix.replace('*', '')
-
-    if (!newPrefix)
-      newPrefix = '*'
-
-    return (
-      <div className="pmb-list">
-        <div className="pmbl-item">
-          { newPrefix }
-        </div>
-        <div className="pmbl-item">
-          <select className="form-control"
-            disabled
-            value={ policy }
-            onChange={ this.handlePolicyChange.bind(this) }>
-            <option value={ READ_ONLY }>
-              Read Only
-            </option>
-            <option value={ WRITE_ONLY }>
-              Write Only
-            </option>
-            <option value={ READ_WRITE }>
-              Read and Write
-            </option>
-          </select>
-        </div>
-        <div className="pmbl-item">
-          <button className="btn btn-block btn-danger" onClick={ this.removePolicy.bind(this) }>
-            Remove
-          </button>
-        </div>
-      </div>
-    )
-  }
-}
-
-export default connect(state => state)(Policy)

browser/app/js/components/PolicyInput.js

@@ -1,98 +0,0 @@
-import { READ_ONLY, WRITE_ONLY, READ_WRITE } from '../constants'
-import React, { Component, PropTypes } from 'react'
-import connect from 'react-redux/lib/components/connect'
-import classnames from 'classnames'
-import * as actions from '../actions'
-
-class PolicyInput extends Component {
-  componentDidMount() {
-    const {web, dispatch} = this.props
-    this.prefix.focus()
-    web.ListAllBucketPolicies({
-      bucketName: this.props.currentBucket
-    }).then(res => {
-      let policies = res.policies
-      if (policies) dispatch(actions.setPolicies(policies))
-    }).catch(err => {
-      dispatch(actions.showAlert({
-        type: 'danger',
-        message: err.message
-      }))
-    })
-  }
-
-  componentWillUnmount() {
-    const {dispatch} = this.props
-    dispatch(actions.setPolicies([]))
-  }
-
-  handlePolicySubmit(e) {
-    e.preventDefault()
-    const {web, dispatch, currentBucket} = this.props
-
-    let prefix = currentBucket + '/' + this.prefix.value
-    let policy = this.policy.value
-
-    if (!prefix.endsWith('*')) prefix = prefix + '*'
- 
-    let prefixAlreadyExists = this.props.policies.some(elem => prefix === elem.prefix)
-
-    if (prefixAlreadyExists) {
-      dispatch(actions.showAlert({
-       type: 'danger',
-       message: "Policy for this prefix already exists."
-      }))
-      return
-    }
-    
-    web.SetBucketPolicy({
-      bucketName: this.props.currentBucket,
-      prefix: this.prefix.value,
-      policy: this.policy.value
-    })
-      .then(() => {
-        dispatch(actions.setPolicies([{
-          policy, prefix
-        }, ...this.props.policies]))
-        this.prefix.value = ''
-      })
-      .catch(e => dispatch(actions.showAlert({
-        type: 'danger',
-        message: e.message,
-      })))
-  }
-
-  render() {
-    return (
-      <header className="pmb-list">
-        <div className="pmbl-item">
-          <input type="text"
-            ref={ prefix => this.prefix = prefix }
-            className="form-control"
-            placeholder="Prefix"
-            editable={ true } />
-        </div>
-        <div className="pmbl-item">
-          <select ref={ policy => this.policy = policy } className="form-control">
-            <option value={ READ_ONLY }>
-              Read Only
-            </option>
-            <option value={ WRITE_ONLY }>
-              Write Only
-            </option>
-            <option value={ READ_WRITE }>
-              Read and Write
-            </option>
-          </select>
-        </div>
-        <div className="pmbl-item">
-          <button className="btn btn-block btn-primary" onClick={ this.handlePolicySubmit.bind(this) }>
-            Add
-          </button>
-        </div>
-      </header>
-    )
-  }
-}
-
-export default connect(state => state)(PolicyInput)

browser/app/js/components/SettingsModal.js

@@ -1,204 +0,0 @@
-/*
- * Minio Cloud Storage (C) 2016 Minio, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React from 'react'
-import connect from 'react-redux/lib/components/connect'
-import * as actions from '../actions'
-
-import Tooltip from 'react-bootstrap/lib/Tooltip'
-import Modal from 'react-bootstrap/lib/Modal'
-import ModalBody from 'react-bootstrap/lib/ModalBody'
-import ModalHeader from 'react-bootstrap/lib/ModalHeader'
-import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger'
-import InputGroup from './InputGroup'
-
-class SettingsModal extends React.Component {
-
-  // When the settings are shown, it loads the access key and secret key.
-  componentWillMount() {
-    const {web, dispatch} = this.props
-    const {serverInfo} = this.props
-
-    let accessKeyEnv = ''
-    let secretKeyEnv = ''
-    // Check environment variables first.
-    if (serverInfo.info.isEnvCreds) {
-      dispatch(actions.setSettings({
-          accessKey: 'xxxxxxxxx',
-          secretKey: 'xxxxxxxxx',
-          keysReadOnly: true
-      }))
-    } else {
-      web.GetAuth()
-        .then(data => {
-          dispatch(actions.setSettings({
-            accessKey: data.accessKey,
-            secretKey: data.secretKey
-          }))
-        })
-    }
-  }
-
-  // When they are re-hidden, the keys are unloaded from memory.
-  componentWillUnmount() {
-    const {dispatch} = this.props
-
-    dispatch(actions.setSettings({
-      accessKey: '',
-      secretKey: '',
-      secretKeyVisible: false
-    }))
-    dispatch(actions.hideSettings())
-  }
-
-  // Handle field changes from inside the modal.
-  accessKeyChange(e) {
-    const {dispatch} = this.props
-    dispatch(actions.setSettings({
-      accessKey: e.target.value
-    }))
-  }
-
-  secretKeyChange(e) {
-    const {dispatch} = this.props
-    dispatch(actions.setSettings({
-      secretKey: e.target.value
-    }))
-  }
-
-  secretKeyVisible(secretKeyVisible) {
-    const {dispatch} = this.props
-    dispatch(actions.setSettings({
-      secretKeyVisible
-    }))
-  }
-
-  // Save the auth params and set them.
-  setAuth(e) {
-    e.preventDefault()
-    const {web, dispatch} = this.props
-
-    let accessKey = document.getElementById('accessKey').value
-    let secretKey = document.getElementById('secretKey').value
-    web.SetAuth({
-      accessKey,
-      secretKey
-    })
-      .then(data => {
-        dispatch(actions.setSettings({
-          accessKey: '',
-          secretKey: '',
-          secretKeyVisible: false
-        }))
-        dispatch(actions.hideSettings())
-        dispatch(actions.showAlert({
-          type: 'success',
-          message: 'Changed credentials'
-        }))
-      })
-      .catch(err => {
-        dispatch(actions.setSettings({
-          accessKey: '',
-          secretKey: '',
-          secretKeyVisible: false
-        }))
-        dispatch(actions.hideSettings())
-        dispatch(actions.showAlert({
-          type: 'danger',
-          message: err.message
-        }))
-      })
-  }
-
-  generateAuth(e) {
-    e.preventDefault()
-    const {dispatch} = this.props
-
-    web.GenerateAuth()
-      .then(data => {
-        dispatch(actions.setSettings({
-          secretKeyVisible: true
-        }))
-        dispatch(actions.setSettings({
-          accessKey: data.accessKey,
-          secretKey: data.secretKey
-        }))
-      })
-  }
-
-  hideSettings(e) {
-    e.preventDefault()
-
-    const {dispatch} = this.props
-    dispatch(actions.hideSettings())
-  }
-
-  render() {
-    let {settings} = this.props
-
-    return (
-      <Modal bsSize="sm" animation={ false } show={ true }>
-        <ModalHeader>
-          Change Password
-        </ModalHeader>
-        <ModalBody className="m-t-20">
-          <InputGroup value={ settings.accessKey }
-            onChange={ this.accessKeyChange.bind(this) }
-            id="accessKey"
-            label="Access Key"
-            name="accesskey"
-            type="text"
-            spellCheck="false"
-            required="required"
-            autoComplete="false"
-            align="ig-left"
-            readonly={ settings.keysReadOnly }></InputGroup>
-          <i onClick={ this.secretKeyVisible.bind(this, !settings.secretKeyVisible) } className={ "toggle-password fa fa-eye " + (settings.secretKeyVisible ? "toggled" : "") } />
-          <InputGroup value={ settings.secretKey }
-            onChange={ this.secretKeyChange.bind(this) }
-            id="secretKey"
-            label="Secret Key"
-            name="accesskey"
-            type={ settings.secretKeyVisible ? "text" : "password" }
-            spellCheck="false"
-            required="required"
-            autoComplete="false"
-            align="ig-left"
-            readonly={ settings.keysReadOnly }></InputGroup>
-        </ModalBody>
-        <div className="modal-footer">
-          <button className={ "btn btn-primary " + (settings.keysReadOnly ? "hidden" : "") } onClick={ this.generateAuth.bind(this) }>
-            Generate
-          </button>
-          <button href="" className={ "btn btn-success " + (settings.keysReadOnly ? "hidden" : "") } onClick={ this.setAuth.bind(this) }>
-            Update
-          </button>
-          <button href="" className="btn btn-link" onClick={ this.hideSettings.bind(this) }>
-            Cancel
-          </button>
-        </div>
-      </Modal>
-    )
-  }
-}
-
-export default connect(state => {
-  return {
-    web: state.web,
-    settings: state.settings,
-    serverInfo: state.serverInfo
-  }
-})(SettingsModal)

browser/app/js/components/SideBar.js

@@ -1,99 +0,0 @@
-/*
- * Minio Cloud Storage (C) 2016 Minio, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React from 'react'
-import classNames from 'classnames'
-import ClickOutHandler from 'react-onclickout'
-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, deleteBucket, toggleBucketDropdown, showBucketDropdown}) => {
-
-  const list = visibleBuckets.map((bucket, i) => {
-    return <li className={ classNames({
-                  'active': bucket === currentBucket
-                }) } key={ i } onClick={ (e) => selectBucket(e, bucket) }>
-             <a href="" className={ classNames({
-                                      'fesli-loading': bucket === loadBucket
-                                    }) }>
-               { bucket }
-             </a>
-             <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>
-  })
-
-  return (
-    <ClickOutHandler onClickOut={ clickOutside }>
-      <div className={ classNames({
-                         'fe-sidebar': true,
-                         'toggled': sidebarStatus
-                       }) }>
-        <div className="fes-header clearfix hidden-sm hidden-xs">
-          <img src={ logo } alt="" />
-          <h2>Minio Browser</h2>
-        </div>
-        <div className="fes-list">
-          <div className="input-group ig-dark ig-left ig-search" style={ { display: web.LoggedIn() ? 'block' : 'none' } }>
-            <input className="ig-text"
-              type="text"
-              onChange={ searchBuckets }
-              placeholder="Search Buckets..." />
-            <i className="ig-helpers"></i>
-          </div>
-          <div className="fesl-inner">
-            <Scrollbars renderScrollbarVertical={ props => <div className="scrollbar-vertical" /> }>
-              <ul>
-                { list }
-              </ul>
-            </Scrollbars>
-          </div>
-        </div>
-        <div className="fes-host">
-          <i className="fa fa-globe"></i>
-          <a href="/">
-            { window.location.host }
-          </a>
-        </div>
-      </div>
-    </ClickOutHandler>
-  )
-}
-
-// Subscribe it to state changes that affect only the sidebar.
-export default connect(state => {
-  return {
-    visibleBuckets: state.visibleBuckets,
-    loadBucket: state.loadBucket,
-    currentBucket: state.currentBucket,
-    showBucketDropdown: state.showBucketDropdown,
-    sidebarStatus: state.sidebarStatus
-  }
-})(SideBar)

browser/app/js/components/UploadModal.js

@@ -1,141 +0,0 @@
-/*
- * Minio Cloud Storage (C) 2016 Minio, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React from 'react'
-import humanize from 'humanize'
-import classNames from 'classnames'
-import connect from 'react-redux/lib/components/connect'
-
-import ProgressBar from 'react-bootstrap/lib/ProgressBar'
-import ConfirmModal from './ConfirmModal'
-
-import * as actions from '../actions'
-
-// UploadModal is a modal that handles multiple file uploads.
-// During the upload, it displays a progress bar, and can transform into an
-// abort modal if the user decides to abort the uploads.
-class UploadModal extends React.Component {
-
-  // Abort all the current uploads.
-  abortUploads(e) {
-    e.preventDefault()
-    const {dispatch, uploads} = this.props
-
-    for (var slug in uploads) {
-      let upload = uploads[slug]
-      upload.xhr.abort()
-      dispatch(actions.stopUpload({
-        slug
-      }))
-    }
-
-    this.hideAbort(e)
-  }
-
-  // Show the abort modal instead of the progress modal.
-  showAbort(e) {
-    e.preventDefault()
-    const {dispatch} = this.props
-
-    dispatch(actions.setShowAbortModal(true))
-  }
-
-  // Show the progress modal instead of the abort modal.
-  hideAbort(e) {
-    e.preventDefault()
-    const {dispatch} = this.props
-
-    dispatch(actions.setShowAbortModal(false))
-  }
-
-  render() {
-    const {uploads, showAbortModal} = this.props
-
-    // Show the abort modal.
-    if (showAbortModal) {
-      let baseClass = classNames({
-        'abort-upload': true
-      })
-      let okIcon = classNames({
-        'fa': true,
-        'fa-times': true
-      })
-      let cancelIcon = classNames({
-        'fa': true,
-        'fa-cloud-upload': true
-      })
-
-      return (
-        <ConfirmModal show={ true }
-          baseClass={ baseClass }
-          text='Abort uploads in progress?'
-          icon='fa fa-info-circle mci-amber'
-          sub='This cannot be undone!'
-          okText='Abort'
-          okIcon={ okIcon }
-          cancelText='Upload'
-          cancelIcon={ cancelIcon }
-          okHandler={ this.abortUploads.bind(this) }
-          cancelHandler={ this.hideAbort.bind(this) }>
-        </ConfirmModal>
-      )
-    }
-
-    // If we don't have any files uploading, don't show anything.
-    let numberUploading = Object.keys(uploads).length
-    if (numberUploading == 0)
-      return ( <noscript></noscript> )
-
-    let totalLoaded = 0
-    let totalSize = 0
-
-    // Iterate over each upload, adding together the total size and that
-    // which has been uploaded.
-    for (var slug in uploads) {
-      let upload = uploads[slug]
-      totalLoaded += upload.loaded
-      totalSize += upload.size
-    }
-
-    let percent = (totalLoaded / totalSize) * 100
-
-    // If more than one: "Uploading files (5)..."
-    // If only one: "Uploading myfile.txt..."
-    let text = 'Uploading ' + (numberUploading == 1 ? `'${uploads[Object.keys(uploads)[0]].name}'` : `files (${numberUploading})`) + '...'
-
-    return (
-      <div className="alert alert-info progress animated fadeInUp ">
-        <button type="button" className="close" onClick={ this.showAbort.bind(this) }>
-          <span>×</span>
-        </button>
-        <div className="text-center">
-          <small>{ text }</small>
-        </div>
-        <ProgressBar now={ percent } />
-        <div className="text-center">
-          <small>{ humanize.filesize(totalLoaded) } ({ percent.toFixed(2) } %)</small>
-        </div>
-      </div>
-    )
-  }
-}
-
-export default connect(state => {
-  return {
-    uploads: state.uploads,
-    showAbortModal: state.showAbortModal
-  }
-})(UploadModal)

browser/app/js/components/__tests__/Login-test.js

@@ -1,54 +0,0 @@
-/*
- * Minio Cloud Storage (C) 2016 Minio, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/*
-import React from 'react'
-import ReactTestUtils, {renderIntoDocument} from 'react-addons-test-utils'
-
-import expect from 'expect'
-import Login from '../Login'
-
-describe('Login', () => {
-  it('it should have empty credentials', () => {
-    const alert = {
-      show: false
-    }
-    const dispatch = () => {}
-    let loginComponent = renderIntoDocument(<Login alert={alert} dispatch={dispatch} />)
-    const accessKey = document.getElementById('accessKey')
-    const secretKey = document.getElementById('secretKey')
-    // Validate default value.
-    expect(accessKey.value).toEqual('')
-    expect(secretKey.value).toEqual('')
-  })
-  it('it should set accessKey and secretKey', () => {
-    const alert = {
-      show: false
-    }
-    const dispatch = () => {}
-    let loginComponent = renderIntoDocument(<Login alert={alert} dispatch={dispatch} />)
-    let accessKey = loginComponent.refs.accessKey
-    let secretKey = loginComponent.refs.secretKey
-    accessKey.value = 'demo-username'
-    secretKey.value = 'demo-password'
-    ReactTestUtils.Simulate.change(accessKey)
-    ReactTestUtils.Simulate.change(secretKey)
-    // Validate if the change has occurred.
-    expect(loginComponent.refs.accessKey.value).toEqual('demo-username')
-    expect(loginComponent.refs.secretKey.value).toEqual('demo-password')
-  })
-});
-*/

browser/app/js/constants.js

@@ -20,6 +20,10 @@
 var p = window.location.pathname
 export const minioBrowserPrefix = p.slice(0, p.indexOf("/", 1))
 
-export const READ_ONLY = 'readonly'
-export const WRITE_ONLY = 'writeonly'
-export const READ_WRITE = 'readwrite'
+export const READ_ONLY = "readonly"
+export const WRITE_ONLY = "writeonly"
+export const READ_WRITE = "readwrite"
+
+export const SHARE_OBJECT_EXPIRY_DAYS = 5
+export const SHARE_OBJECT_EXPIRY_HOURS = 0
+export const SHARE_OBJECT_EXPIRY_MINUTES = 0

browser/app/js/history.js

@@ -0,0 +1,24 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import createHistory from "history/createBrowserHistory"
+import { minioBrowserPrefix } from "./constants"
+
+const history = createHistory({
+  basename: minioBrowserPrefix
+})
+
+export default history

browser/app/js/jest/__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

browser/app/js/jest/setup.js

@@ -0,0 +1,21 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import "jest-enzyme"
+import { configure } from "enzyme"
+import Adapter from "enzyme-adapter-react-16"
+
+configure({ adapter: new Adapter() })

browser/app/js/loader.js

@@ -0,0 +1,30 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+let delay = [0, 400]
+
+function handleLoader(i) {
+  if (i < 2) {
+    setTimeout(function() {
+      document.querySelector(".page-load").classList.add("pl-" + i)
+      handleLoader(i + 1)
+    }, delay[i])
+  }
+}
+
+const hideLoader = () => handleLoader(0)
+
+export default hideLoader

browser/app/js/objects/DeleteObjectConfirmModal.js

@@ -0,0 +1,36 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import ConfirmModal from "../browser/ConfirmModal"
+
+export const DeleteObjectConfirmModal = ({
+  deleteObject,
+  hideDeleteConfirmModal
+}) => (
+  <ConfirmModal
+    show={true}
+    icon="fa fa-exclamation-triangle mci-red"
+    text="Are you sure you want to delete?"
+    sub="This cannot be undone!"
+    okText="Delete"
+    cancelText="Cancel"
+    okHandler={deleteObject}
+    cancelHandler={hideDeleteConfirmModal}
+  />
+)
+
+export default DeleteObjectConfirmModal

browser/app/js/objects/ObjectActions.js

@@ -0,0 +1,107 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import { connect } from "react-redux"
+import { Dropdown } from "react-bootstrap"
+import ShareObjectModal from "./ShareObjectModal"
+import DeleteObjectConfirmModal from "./DeleteObjectConfirmModal"
+import * as objectsActions from "./actions"
+import {
+  SHARE_OBJECT_EXPIRY_DAYS,
+  SHARE_OBJECT_EXPIRY_HOURS,
+  SHARE_OBJECT_EXPIRY_MINUTES
+} from "../constants"
+
+export class ObjectActions extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      showDeleteConfirmation: false
+    }
+  }
+  shareObject(e) {
+    e.preventDefault()
+    const { object, shareObject } = this.props
+    shareObject(
+      object.name,
+      SHARE_OBJECT_EXPIRY_DAYS,
+      SHARE_OBJECT_EXPIRY_HOURS,
+      SHARE_OBJECT_EXPIRY_MINUTES
+    )
+  }
+  deleteObject() {
+    const { object, deleteObject } = this.props
+    deleteObject(object.name)
+  }
+  showDeleteConfirmModal(e) {
+    e.preventDefault()
+    this.setState({ showDeleteConfirmation: true })
+  }
+  hideDeleteConfirmModal() {
+    this.setState({
+      showDeleteConfirmation: false
+    })
+  }
+  render() {
+    const { object, showShareObjectModal } = this.props
+    return (
+      <Dropdown id={`obj-actions-${object.name}`}>
+        <Dropdown.Toggle noCaret className="fia-toggle" />
+        <Dropdown.Menu>
+          <a
+            href=""
+            className="fiad-action"
+            onClick={this.shareObject.bind(this)}
+          >
+            <i className="fa fa-copy" />
+          </a>
+          <a
+            href=""
+            className="fiad-action"
+            onClick={this.showDeleteConfirmModal.bind(this)}
+          >
+            <i className="fa fa-trash" />
+          </a>
+        </Dropdown.Menu>
+        {showShareObjectModal && <ShareObjectModal object={object} />}
+        {this.state.showDeleteConfirmation && (
+          <DeleteObjectConfirmModal
+            deleteObject={this.deleteObject.bind(this)}
+            hideDeleteConfirmModal={this.hideDeleteConfirmModal.bind(this)}
+          />
+        )}
+      </Dropdown>
+    )
+  }
+}
+
+const mapStateToProps = (state, ownProps) => {
+  return {
+    object: ownProps.object,
+    showShareObjectModal: state.objects.shareObject.show
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    shareObject: (object, days, hours, minutes) =>
+      dispatch(objectsActions.shareObject(object, days, hours, minutes)),
+    deleteObject: object => dispatch(objectsActions.deleteObject(object))
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(ObjectActions)

browser/app/js/objects/ObjectContainer.js

@@ -0,0 +1,55 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import { connect } from "react-redux"
+import humanize from "humanize"
+import Moment from "moment"
+import ObjectItem from "./ObjectItem"
+import ObjectActions from "./ObjectActions"
+import * as actionsObjects from "./actions"
+import { getCheckedList } from "./selectors"
+
+export const ObjectContainer = ({
+  object,
+  checkedObjectsCount,
+  downloadObject
+}) => {
+  let props = {
+    name: object.name,
+    contentType: object.contentType,
+    size: humanize.filesize(object.size),
+    lastModified: Moment(object.lastModified).format("lll")
+  }
+  if (checkedObjectsCount == 0) {
+    props.actionButtons = <ObjectActions object={object} />
+  }
+  return <ObjectItem {...props} onClick={() => downloadObject(object.name)} />
+}
+
+const mapStateToProps = state => {
+  return {
+    checkedObjectsCount: getCheckedList(state).length
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    downloadObject: object => dispatch(actionsObjects.downloadObject(object))
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(ObjectContainer)

browser/app/js/objects/ObjectItem.js

@@ -0,0 +1,83 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import { connect } from "react-redux"
+import humanize from "humanize"
+import Moment from "moment"
+import { getDataType } from "../mime"
+import * as actions from "./actions"
+import { getCheckedList } from "./selectors"
+
+export const ObjectItem = ({
+  name,
+  contentType,
+  size,
+  lastModified,
+  checked,
+  checkObject,
+  uncheckObject,
+  actionButtons,
+  onClick
+}) => {
+  return (
+    <div className={"fesl-row"} data-type={getDataType(name, contentType)}>
+      <div className="fesl-item fesl-item-icon">
+        <div className="fi-select">
+          <input
+            type="checkbox"
+            name={name}
+            checked={checked}
+            onChange={() => {
+              checked ? uncheckObject(name) : checkObject(name)
+            }}
+          />
+          <i className="fis-icon" />
+          <i className="fis-helper" />
+        </div>
+      </div>
+      <div className="fesl-item fesl-item-name">
+        <a
+          href="#"
+          onClick={e => {
+            e.preventDefault()
+            onClick()
+          }}
+        >
+          {name}
+        </a>
+      </div>
+      <div className="fesl-item fesl-item-size">{size}</div>
+      <div className="fesl-item fesl-item-modified">{lastModified}</div>
+      <div className="fesl-item fesl-item-actions">{actionButtons}</div>
+    </div>
+  )
+}
+
+const mapStateToProps = (state, ownProps) => {
+  return {
+    checked: getCheckedList(state).indexOf(ownProps.name) >= 0
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    checkObject: name => dispatch(actions.checkObject(name)),
+    uncheckObject: name => dispatch(actions.uncheckObject(name))
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(ObjectItem)

browser/app/js/objects/ObjectsBulkActions.js

@@ -0,0 +1,101 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import { connect } from "react-redux"
+import classNames from "classnames"
+import * as actions from "./actions"
+import { getCheckedList } from "./selectors"
+import DeleteObjectConfirmModal from "./DeleteObjectConfirmModal"
+
+export class ObjectsBulkActions extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      showDeleteConfirmation: false
+    }
+  }
+  deleteChecked() {
+    const { deleteChecked } = this.props
+    deleteChecked()
+    this.hideDeleteConfirmModal()
+  }
+  hideDeleteConfirmModal() {
+    this.setState({
+      showDeleteConfirmation: false
+    })
+  }
+  render() {
+    const { checkedObjectsCount, downloadChecked, clearChecked } = this.props
+    return (
+      <div
+        className={
+          "list-actions" +
+          classNames({
+            " list-actions-toggled": checkedObjectsCount > 0
+          })
+        }
+      >
+        <span className="la-label">
+          <i className="fa fa-check-circle" /> {checkedObjectsCount} Objects
+          selected
+        </span>
+        <span className="la-actions pull-right">
+          <button id="download-checked" onClick={downloadChecked}>
+            {" "}
+            Download all as zip{" "}
+          </button>
+        </span>
+        <span className="la-actions pull-right">
+          <button
+            id="delete-checked"
+            onClick={() => this.setState({ showDeleteConfirmation: true })}
+          >
+            {" "}
+            Delete selected{" "}
+          </button>
+        </span>
+        <i
+          className="la-close fa fa-times"
+          id="close-bulk-actions"
+          onClick={clearChecked}
+        />
+        {this.state.showDeleteConfirmation && (
+          <DeleteObjectConfirmModal
+            deleteObject={this.deleteChecked.bind(this)}
+            hideDeleteConfirmModal={this.hideDeleteConfirmModal.bind(this)}
+          />
+        )}
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => {
+  return {
+    checkedObjectsCount: getCheckedList(state).length
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    downloadChecked: () => dispatch(actions.downloadCheckedObjects()),
+    clearChecked: () => dispatch(actions.resetCheckedList()),
+    deleteChecked: () => dispatch(actions.deleteCheckedObjects())
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(ObjectsBulkActions)

browser/app/js/objects/ObjectsHeader.js

@@ -0,0 +1,99 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import classNames from "classnames"
+import { connect } from "react-redux"
+import * as actionsObjects from "./actions"
+
+export const ObjectsHeader = ({
+  sortNameOrder,
+  sortSizeOrder,
+  sortLastModifiedOrder,
+  sortObjects
+}) => (
+  <div className="feb-container">
+    <header className="fesl-row" data-type="folder">
+      <div className="fesl-item fesl-item-icon" />
+      <div
+        className="fesl-item fesl-item-name"
+        id="sort-by-name"
+        onClick={() => sortObjects("name")}
+        data-sort="name"
+      >
+        Name
+        <i
+          className={classNames({
+            "fesli-sort": true,
+            fa: true,
+            "fa-sort-alpha-desc": sortNameOrder,
+            "fa-sort-alpha-asc": !sortNameOrder
+          })}
+        />
+      </div>
+      <div
+        className="fesl-item fesl-item-size"
+        id="sort-by-size"
+        onClick={() => sortObjects("size")}
+        data-sort="size"
+      >
+        Size
+        <i
+          className={classNames({
+            "fesli-sort": true,
+            fa: true,
+            "fa-sort-amount-desc": sortSizeOrder,
+            "fa-sort-amount-asc": !sortSizeOrder
+          })}
+        />
+      </div>
+      <div
+        className="fesl-item fesl-item-modified"
+        id="sort-by-last-modified"
+        onClick={() => sortObjects("last-modified")}
+        data-sort="last-modified"
+      >
+        Last Modified
+        <i
+          className={classNames({
+            "fesli-sort": true,
+            fa: true,
+            "fa-sort-numeric-desc": sortLastModifiedOrder,
+            "fa-sort-numeric-asc": !sortLastModifiedOrder
+          })}
+        />
+      </div>
+      <div className="fesl-item fesl-item-actions" />
+    </header>
+  </div>
+)
+
+const mapStateToProps = state => {
+  return {
+    sortNameOrder: state.objects.sortBy == "name" && state.objects.sortOrder,
+    sortSizeOrder: state.objects.sortBy == "size" && state.objects.sortOrder,
+    sortLastModifiedOrder:
+      state.objects.sortBy == "last-modified" && state.objects.sortOrder
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    sortObjects: sortBy => dispatch(actionsObjects.sortObjects(sortBy))
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(ObjectsHeader)

browser/app/js/objects/ObjectsList.js

@@ -0,0 +1,32 @@
+/*
+ * Minio Cloud Storage (C) 2016, 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import ObjectContainer from "./ObjectContainer"
+import PrefixContainer from "./PrefixContainer"
+
+export const ObjectsList = ({ objects }) => {
+  const list = objects.map(object => {
+    if (object.name.endsWith("/")) {
+      return <PrefixContainer object={object} key={object.name} />
+    } else {
+      return <ObjectContainer object={object} key={object.name} />
+    }
+  })
+  return <div>{list}</div>
+}
+
+export default ObjectsList