Ensure that setConfig uses latest functionality (#6302)

This package provide customizable TCP net.Listener with various
performance-related options:

 * SO_REUSEPORT. This option allows linear scaling server performance
   on multi-CPU servers.
   See https://www.nginx.com/blog/socket-sharding-nginx-release-1-9-1/ for details.
 * TCP_DEFER_ACCEPT. This option expects the server reads from the accepted
   connection before writing to them.
 * TCP_FASTOPEN. See https://lwn.net/Articles/508865/ for details.

.gitignore

@@ -17,10 +17,9 @@ release
 *.syso
 coverage.txt
 .vscode/
-.snap
 *.tar.bz2
 parts/
 prime/
-snap/.snapcraft/
 stage/
 .sia_temp/
+config.json

.travis.yml

@@ -8,22 +8,23 @@ dist: trusty
 
 language: go
 
-os:
-- linux
+matrix:
+  include:
+    - os: linux
+      env:
+        - ARCH=x86_64
+      go: 1.10.1
+      script:
+        - make
+        - diff -au <(gofmt -s -d cmd) <(printf "")
+        - diff -au <(gofmt -s -d pkg) <(printf "")
+        - make test GOFLAGS="-timeout 15m -race -v"
+        - make coverage
+        - node --version
+        - cd browser && yarn && yarn test && cd ..
 
-env:
-- ARCH=x86_64
-
-script:
-## Run all the tests
-- make
-- diff -au <(gofmt -d cmd) <(printf "")
-- diff -au <(gofmt -d pkg) <(printf "")
-- make test GOFLAGS="-timeout 15m -race -v"
-- make coverage
+before_install:
+- nvm install stable
 
 after_success:
 - bash <(curl -s https://codecov.io/bash)
-
-go:
-- 1.9.1

CONTRIBUTING.md

@@ -6,7 +6,7 @@
 
 Start by forking the Minio GitHub repository, make changes in a branch and then send a pull request. We encourage pull requests to discuss code changes. Here are the steps in details:
 
-### Setup your Minio Github Repository
+### Setup your Minio GitHub Repository
 Fork [Minio upstream](https://github.com/minio/minio/fork) source repository to your own personal repository. Copy the URL of your Minio fork (you will need it for the `git clone` command below).
 
 ```sh

Dockerfile

@@ -1,11 +1,13 @@
-FROM golang:1.9.1-alpine3.6
+FROM golang:1.10.1-alpine3.7
 
-MAINTAINER Minio Inc <dev@minio.io>
+LABEL maintainer="Minio Inc <dev@minio.io>"
 
 ENV GOPATH /go
 ENV PATH $PATH:$GOPATH/bin
 ENV CGO_ENABLED 0
 ENV MINIO_UPDATE off
+ENV MINIO_ACCESS_KEY_FILE=access_key \
+    MINIO_SECRET_KEY_FILE=secret_key
 
 WORKDIR /go/src/github.com/minio/
 
@@ -24,7 +26,7 @@ EXPOSE 9000
 
 ENTRYPOINT ["/usr/bin/docker-entrypoint.sh"]
 
-VOLUME ["/export"]
+VOLUME ["/data"]
 
 HEALTHCHECK --interval=30s --timeout=5s \
     CMD /usr/bin/healthcheck.sh

Dockerfile.dev

@@ -1,11 +1,13 @@
-FROM golang:1.9.1-alpine3.6
+FROM golang:1.10.1-alpine3.7
 
-MAINTAINER Minio Inc <dev@minio.io>
+LABEL maintainer="Minio Inc <dev@minio.io>"
 
 ENV GOPATH /go
 ENV PATH $PATH:$GOPATH/bin
 ENV CGO_ENABLED 0
 ENV MINIO_UPDATE off
+ENV MINIO_ACCESS_KEY_FILE=access_key \
+    MINIO_SECRET_KEY_FILE=secret_key
 
 WORKDIR /go/src/github.com/minio/
 
@@ -25,7 +27,7 @@ EXPOSE 9000
 
 ENTRYPOINT ["/usr/bin/docker-entrypoint.sh"]
 
-VOLUME ["/export"]
+VOLUME ["/data"]
 
 HEALTHCHECK --interval=30s --timeout=5s \
     CMD /usr/bin/healthcheck.sh

Dockerfile.release

@@ -1,10 +1,12 @@
-FROM alpine:3.6
+FROM alpine:3.7
+
+LABEL maintainer="Minio Inc <dev@minio.io>"
 
-MAINTAINER Minio Inc <dev@minio.io>
- 
 COPY dockerscripts/docker-entrypoint.sh dockerscripts/healthcheck.sh /usr/bin/
 
 ENV MINIO_UPDATE off
+ENV MINIO_ACCESS_KEY_FILE=access_key \
+    MINIO_SECRET_KEY_FILE=secret_key
 
 RUN \
      apk add --no-cache ca-certificates && \
@@ -19,10 +21,9 @@ EXPOSE 9000
 
 ENTRYPOINT ["/usr/bin/docker-entrypoint.sh"]
 
-VOLUME ["/export"]
+VOLUME ["/data"]
 
 HEALTHCHECK --interval=30s --timeout=5s \
     CMD /usr/bin/healthcheck.sh
 
 CMD ["minio"]
-

MAINTAINERS.md

@@ -1,6 +1,6 @@
 # For maintainers only
 
-### Setup your minio Github Repository
+### Setup your minio GitHub Repository
 
 Fork [minio upstream](https://github.com/minio/minio/fork) source repository to your own personal repository.
 ```bash

Makefile

@@ -7,12 +7,12 @@ BUILD_LDFLAGS := '$(LDFLAGS)'
 all: build
 
 checks:
-	@echo "Check deps"
+	@echo "Checking dependencies"
 	@(env bash $(PWD)/buildscripts/checkdeps.sh)
-	@echo "Checking project is in GOPATH"
+	@echo "Checking for project in GOPATH"
 	@(env bash $(PWD)/buildscripts/checkgopath.sh)
 
-getdeps: checks
+getdeps:
 	@echo "Installing golint" && go get -u github.com/golang/lint/golint
 	@echo "Installing gocyclo" && go get -u github.com/fzipp/gocyclo
 	@echo "Installing deadcode" && go get -u github.com/remyoudompheng/go-misc/deadcode
@@ -42,23 +42,25 @@ ineffassign:
 
 cyclo:
 	@echo "Running $@"
-	@${GOPATH}/bin/gocyclo -over 100 cmd
-	@${GOPATH}/bin/gocyclo -over 100 pkg
+	@${GOPATH}/bin/gocyclo -over 200 cmd
+	@${GOPATH}/bin/gocyclo -over 200 pkg
 
 deadcode:
 	@echo "Running $@"
 	@${GOPATH}/bin/deadcode -test $(shell go list ./...) || true
 
 spelling:
-	@${GOPATH}/bin/misspell -error `find cmd/`
-	@${GOPATH}/bin/misspell -error `find pkg/`
-	@${GOPATH}/bin/misspell -error `find docs/`
+	@${GOPATH}/bin/misspell -locale US -error `find cmd/`
+	@${GOPATH}/bin/misspell -locale US -error `find pkg/`
+	@${GOPATH}/bin/misspell -locale US -error `find docs/`
+	@${GOPATH}/bin/misspell -locale US -error `find buildscripts/`
+	@${GOPATH}/bin/misspell -locale US -error `find dockerscripts/`
 
 # Builds minio, runs the verifiers then runs the tests.
 check: test
 test: verifiers build
 	@echo "Running unit tests"
-	@go test $(GOFLAGS) ./...
+	@go test $(GOFLAGS) -tags kqueue ./...
 	@echo "Verifying build"
 	@(env bash $(PWD)/buildscripts/verify-build.sh)
 
@@ -67,9 +69,9 @@ coverage: build
 	@(env bash $(PWD)/buildscripts/go-coverage.sh)
 
 # Builds minio locally.
-build:
-	@echo "Building minio binary: $(PWD)/minio"
-	@CGO_ENABLED=0 go build --ldflags $(BUILD_LDFLAGS) -o $(PWD)/minio
+build: checks
+	@echo "Building minio binary to './minio'"
+	@CGO_ENABLED=0 go build -tags kqueue --ldflags $(BUILD_LDFLAGS) -o $(PWD)/minio
 
 pkg-add:
 	@echo "Adding new package $(PKG)"
@@ -88,12 +90,13 @@ pkg-list:
 
 # Builds minio and installs it to $GOPATH/bin.
 install: build
-	@echo "Installing minio binary: $(GOPATH)/bin/minio"
-	@cp $(PWD)/minio $(GOPATH)/bin/minio
-	@echo "\nInstallation successful. To learn more, try \"minio --help\"."
+	@echo "Installing minio binary to '$(GOPATH)/bin/minio'"
+	@mkdir -p $(GOPATH)/bin && cp $(PWD)/minio $(GOPATH)/bin/minio
+	@echo "Installation successful. To learn more, try \"minio --help\"."
 
 clean:
 	@echo "Cleaning up all the generated files"
 	@find . -name '*.test' | xargs rm -fv
-	@rm -rf build
-	@rm -rf release
+	@rm -rvf minio
+	@rm -rvf build
+	@rm -rvf release

README.md

@@ -1,5 +1,5 @@
 # Minio Quickstart Guide
-[![Slack](https://slack.minio.io/slack?type=svg)](https://slack.minio.io) [![Go Report Card](https://goreportcard.com/badge/minio/minio)](https://goreportcard.com/report/minio/minio) [![Docker Pulls](https://img.shields.io/docker/pulls/minio/minio.svg?maxAge=604800)](https://hub.docker.com/r/minio/minio/) [![codecov](https://codecov.io/gh/minio/minio/branch/master/graph/badge.svg)](https://codecov.io/gh/minio/minio) [![Snap Status](https://build.snapcraft.io/badge/minio/minio.svg)](https://build.snapcraft.io/user/minio/minio)
+[![Slack](https://slack.minio.io/slack?type=svg)](https://slack.minio.io) [![Go Report Card](https://goreportcard.com/badge/minio/minio)](https://goreportcard.com/report/minio/minio) [![Docker Pulls](https://img.shields.io/docker/pulls/minio/minio.svg?maxAge=604800)](https://hub.docker.com/r/minio/minio/) [![codecov](https://codecov.io/gh/minio/minio/branch/master/graph/badge.svg)](https://codecov.io/gh/minio/minio)
 
 Minio is an object storage server released under Apache License v2.0. It is compatible with Amazon S3 cloud storage service. It is best suited for storing unstructured data such as photos, videos, log files, backups and container / VM images. Size of an object can range from a few KBs to a maximum of 5TB.
 
@@ -48,22 +48,11 @@ chmod 755 minio
 | ----------| -------- | ------|
 |GNU/Linux|64-bit Intel|https://dl.minio.io/server/minio/release/linux-amd64/minio |
 ```sh
+wget https://dl.minio.io/server/minio/release/linux-amd64/minio
 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|
@@ -91,14 +80,74 @@ 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
+
+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
+```
+
+### firewall-cmd
+
+For hosts with firewall-cmd enabled (CentOS), you can use `firewall-cmd` command to allow traffic to specific ports. Use below commands to allow access to port 9000
+
+```sh
+firewall-cmd --get-active-zones
+```
+
+This command gets the active zone(s). Now, apply port rules to the relevant zones returned above. For example if the zone is `public`, use
+
+```sh
+firewall-cmd --zone=public --add-port=9000/tcp --permanent
+```
+
+Note that `permanent` makes sure the rules are persistent across firewall start, restart or reload. Finally reload the firewall for changes to take effect.
+
+```sh
+firewall-cmd --reload
+```
+
 ## 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.
 
-![Screenshot](https://github.com/minio/minio/blob/master/docs/screenshots/minio-browser.jpg?raw=true)
+![Screenshot](https://github.com/minio/minio/blob/master/docs/screenshots/minio-browser.png?raw=true)
 
 ## Test using Minio Client `mc`
 `mc` provides a modern alternative to UNIX commands like ls, cat, cp, mirror, diff etc. It supports filesystems and Amazon S3 compatible cloud storage services. Follow the Minio Client [Quickstart Guide](https://docs.minio.io/docs/minio-client-quickstart-guide) for further instructions.
 
+## Pre-existing data
+When deployed on a single drive, Minio server lets clients access any pre-existing data in the data directory. For example, if Minio is started with the command  `minio server /mnt/data`, any pre-existing data in the `/mnt/data` directory would be accessible to the clients.
+
+The above statement is also valid for all gateway backends.
+
 ## Explore Further
 - [Minio Erasure Code QuickStart Guide](https://docs.minio.io/docs/minio-erasure-code-quickstart-guide)
 - [Use `mc` with Minio Server](https://docs.minio.io/docs/minio-client-quickstart-guide)
@@ -109,3 +158,7 @@ Minio Server comes with an embedded web based object browser. Point your web bro
 
 ## Contribute to Minio Project
 Please follow Minio [Contributor's Guide](https://github.com/minio/minio/blob/master/CONTRIBUTING.md)
+
+
+## License
+[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fminio%2Fminio.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2Fminio%2Fminio?ref=badge_large)

README_ZH.md

@@ -1,197 +0,0 @@
-# Minio 快速入门 [![Slack](https://slack.minio.io/slack?type=svg)](https://slack.minio.io) [![Go Report Card](https://goreportcard.com/badge/minio/minio)](https://goreportcard.com/report/minio/minio) [![codecov](https://codecov.io/gh/minio/minio/branch/master/graph/badge.svg)](https://codecov.io/gh/minio/minio) [![Snap Status](https://build.snapcraft.io/badge/minio/minio.svg)](https://build.snapcraft.io/user/minio/minio)
-
-Minio是一个对象存储服务，基于Apache License v2.0协议. 它完全兼容亚马逊的S3云储存服务，非常适合于存储很多非结构化的数据，例如图片、视频、日志文件、备份数据和容器/虚拟机镜像等，而一个对象文件可以是任意大小，从几kb到最大5T不等。 
-
-##  1. 下载
-
-Minio是一个非常轻量的服务,可以很简单的和其他应用的结合，类似 NodeJS, Redis 或者 MySQL.
-
-| Platform| Architecture | URL|
-| ----------| -------- | ------|
-|GNU/Linux|64-bit Intel|https://dl.minio.io/server/minio/release/linux-amd64/minio|
-|Apple OS X|64-bit Intel|https://dl.minio.io/server/minio/release/darwin-amd64/minio|
-|Microsoft Windows|64-bit|https://dl.minio.io/server/minio/release/windows-amd64/minio.exe|
-|FreeBSD|64-bit|https://dl.minio.io/server/minio/release/freebsd-amd64/minio|
-
-### Homebrew 安装
-
-使用[Homebrew](http://brew.sh/) 来安装minio
- 
-```sh
-$ brew install minio
-$ minio --help
-```
-
-### 源码安装
-
-源码安装只针对开发者和一些高级用户，如果你还没有golang的环境，请安装golang官网安装[How to install Golang](https://docs.minio.io/docs/zh-CN/how-to-install-golang).
-
-```sh
-
-$ go get -u github.com/minio/minio
-
-
-```
-
-## 2. 运行Minio服务
-
-
-### GNU/Linux
-
- ```sh
-
-$ chmod +x minio
-$ ./minio --help
-$ ./minio server /data
-
-端点:  http://10.0.0.10:9000  http://127.0.0.1:9000  http://172.17.0.1:9000
-AccessKey: USWUXHGYZQYFYFFIT3RE
-SecretKey: MOJRH0mkL1IPauahWITSVvyDrQbEEIwljvmxdq03
-区域:    us-east-1
-
-浏览器访问入口:
-   http://10.0.0.10:9000  http://127.0.0.1:9000  http://172.17.0.1:9000
-
-命令行访问: https://docs.minio.io/docs/zh-CN/minio-client-quickstart-guide
-   $ mc config host add myminio http://10.0.0.10:9000 USWUXHGYZQYFYFFIT3RE MOJRH0mkL1IPauahWITSVvyDrQbEEIwljvmxdq03
-
-对象操作API (兼容Amazon S3):
-   Go:         https://docs.minio.io/docs/zh-CN/golang-client-quickstart-guide
-   Java:       https://docs.minio.io/docs/zh-CN/java-client-quickstart-guide
-   Python:     https://docs.minio.io/docs/zh-CN/python-client-quickstart-guide
-   JavaScript: https://docs.minio.io/docs/zh-CN/javascript-client-quickstart-guide
-
-```
-
-### OS X
-
-
- ```sh
-
-$ chmod 755 minio
-$ ./minio --help
-$ ./minio server /data
-
-端点:  http://10.0.0.10:9000  http://127.0.0.1:9000  http://172.17.0.1:9000
-AccessKey: USWUXHGYZQYFYFFIT3RE
-SecretKey: MOJRH0mkL1IPauahWITSVvyDrQbEEIwljvmxdq03
-区域:    us-east-1
-
-浏览器访问入口:
-   http://10.0.0.10:9000  http://127.0.0.1:9000  http://172.17.0.1:9000
-
-命令行访问: https://docs.minio.io/docs/zh-CN/minio-client-quickstart-guide
-   $ mc config host add myminio http://10.0.0.10:9000 USWUXHGYZQYFYFFIT3RE MOJRH0mkL1IPauahWITSVvyDrQbEEIwljvmxdq03
-
-对象操作API (兼容Amazon S3):
-   Go:         https://docs.minio.io/docs/zh-CN/golang-client-quickstart-guide
-   Java:       https://docs.minio.io/docs/zh-CN/java-client-quickstart-guide
-   Python:     https://docs.minio.io/docs/zh-CN/python-client-quickstart-guide
-   JavaScript: https://docs.minio.io/docs/zh-CN/javascript-client-quickstart-guide
-
-```
-
-### Microsoft Windows
-
-```sh
-
-C:\Users\Username\Downloads> minio.exe --help
-C:\Users\Username\Downloads> minio.exe server D:\Photos
-
-端点:  http://10.0.0.10:9000  http://127.0.0.1:9000  http://172.17.0.1:9000
-AccessKey: USWUXHGYZQYFYFFIT3RE
-SecretKey: MOJRH0mkL1IPauahWITSVvyDrQbEEIwljvmxdq03
-区域:    us-east-1
-
-浏览器访问入口:
-   http://10.0.0.10:9000  http://127.0.0.1:9000  http://172.17.0.1:9000
-
-命令行访问: https://docs.minio.io/docs/zh-CN/minio-client-quickstart-guide
-   $ mc.exe config host add myminio http://10.0.0.10:9000 USWUXHGYZQYFYFFIT3RE MOJRH0mkL1IPauahWITSVvyDrQbEEIwljvmxdq03
-
-对象操作API (兼容Amazon S3):
-   Go:         https://docs.minio.io/docs/zh-CN/golang-client-quickstart-guide
-   Java:       https://docs.minio.io/docs/zh-CN/java-client-quickstart-guide
-   Python:     https://docs.minio.io/docs/zh-CN/python-client-quickstart-guide
-   JavaScript: https://docs.minio.io/docs/zh-CN/javascript-client-quickstart-guide
-
-
-```
-
-### Docker
-
-```sh
-
-$ docker pull minio/minio
-$ docker run -p 9000:9000 minio/minio
-
-```
-访问minio的docker入门指南获得更多内容 [here](https://docs.minio.io/docs/zh-CN/minio-docker-quickstart-guide)
-
-### FreeBSD
-
-```sh
-
-$ chmod 755 minio
-$ ./minio --help
-$ ./minio server /data
-
-端点:  http://10.0.0.10:9000  http://127.0.0.1:9000  http://172.17.0.1:9000
-AccessKey: USWUXHGYZQYFYFFIT3RE
-SecretKey: MOJRH0mkL1IPauahWITSVvyDrQbEEIwljvmxdq03
-区域:    us-east-1
-
-浏览器访问入口:
-   http://10.0.0.10:9000  http://127.0.0.1:9000  http://172.17.0.1:9000
-
-命令行访问: https://docs.minio.io/docs/zh-CN/minio-client-quickstart-guide
-   $ mc config host add myminio http://10.0.0.10:9000 USWUXHGYZQYFYFFIT3RE MOJRH0mkL1IPauahWITSVvyDrQbEEIwljvmxdq03
-
-对象操作API (兼容Amazon S3):
-   Go:         https://docs.minio.io/docs/zh-CN/golang-client-quickstart-guide
-   Java:       https://docs.minio.io/docs/zh-CN/java-client-quickstart-guide
-   Python:     https://docs.minio.io/docs/zh-CN/python-client-quickstart-guide
-   JavaScript: https://docs.minio.io/docs/zh-CN/javascript-client-quickstart-guide
-
-
-```
-请访问FreeBSD的官网指南获取更多详细信息[here](https://www.freebsd.org/doc/handbook/zfs-quickstart.html)
-
-## 3. 使用浏览器测试minio服务
-
-打开浏览器并输入 http://127.0.0.1:9000 查看在minio服务器上面的所有bucket
-
-![Screenshot](https://github.com/minio/minio/blob/master/docs/screenshots/minio-browser.jpg?raw=true)
-
-
-## 4. 使用`mc`测试minio服务
-
-
-按照 [这个](https://docs.minio.io/docs/minio-client-quickstart-guide) 安装mc. 使用 `mc ls` 命令显示所有在minio服务上面的bucket.
-
-```sh
-
-$ mc ls myminio/
-[2015-08-05 08:13:22 IST]     0B andoria/
-[2015-08-05 06:14:26 IST]     0B deflector/
-[2015-08-05 08:13:11 IST]     0B ferenginar/
-[2016-03-08 14:56:35 IST]     0B jarjarbing/
-[2016-01-20 16:07:41 IST]     0B my.minio.io/
-
-```
-
-查看更多的例子请访问 [Minio Client Complete Guide](https://docs.minio.io/docs/zh-CN/minio-client-complete-guide).
-
-
-## 5. 更多内容
-
-- [Minio Erasure Code 快速入门](https://docs.minio.io/docs/zh-CN/minio-erasure-code-quickstart-guide)
-- [Minio Docker 快速入门](https://docs.minio.io/docs/zh-CN/minio-docker-quickstart-guide)
-- [使用`mc`测试 Minio Server](https://docs.minio.io/docs/zh-CN/minio-client-quickstart-guide)
-- [使用 `aws-cli` 测试 Minio Server](https://docs.minio.io/docs/zh-CN/aws-cli-with-minio)
-- [使用 `s3cmd` 测试 Minio Server](https://docs.minio.io/docs/zh-CN/s3cmd-with-minio)
-- [使用 `minio-go` SDK ce's测试 Minio Server](https://docs.minio.io/docs/zh-CN/golang-client-quickstart-guide)
-
-
-## 6. 给Minio项目贡献
-请按照Minio [贡献者指导手册](https://github.com/minio/minio/blob/master/CONTRIBUTING.md)

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架构 | 地址|
@@ -99,11 +84,16 @@ go get -u github.com/minio/minio
 ## 使用Minio浏览器进行验证
 安装后使用浏览器访问[http://127.0.0.1:9000](http://127.0.0.1:9000)，如果可以访问，则表示minio已经安装成功。
 
-![Screenshot](https://github.com/minio/minio/blob/master/docs/screenshots/minio-browser.jpg?raw=true)
+![Screenshot](https://github.com/minio/minio/blob/master/docs/screenshots/minio-browser.png?raw=true)
 
 ## 使用Minio客户端 `mc`进行验证
 `mc` 提供了一些UNIX常用命令的替代品，像ls, cat, cp, mirror, diff这些。 它支持文件系统和亚马逊S3云存储服务。 更多信息请参考 [mc快速入门](https://docs.minio.io/docs/minio-client-quickstart-guide) 。
 
+## 已经存在的数据
+当在单块磁盘上部署Minio server,Minio server允许客户端访问数据目录下已经存在的数据。比如，如果Minio使用`minio server /mnt/data`启动，那么所有已经在`/mnt/data`目录下的数据都可以被客户端访问到。
+
+上述描述对所有网关后端同样有效。
+
 ## 了解更多
 - [Minio纠删码入门](https://docs.minio.io/docs/minio-erasure-code-quickstart-guide)
 - [`mc`快速入门](https://docs.minio.io/docs/minio-client-quickstart-guide)

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(resetObjects())
-    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(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 || serverInfo.info.isWorm) {
+      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

@@ -1,7 +1,5 @@
-// +build !windows
-
 /*
- * Minio Cloud Storage, (C) 2016, 2017 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.
@@ -16,10 +14,13 @@
  * limitations under the License.
  */
 
-package cmd
+import React from "react"
 
-// isValidVolname verifies a volname name in accordance with object
-// layer requirements.
-func isValidVolname(volname string) bool {
-	return !(len(volname) < 3 || len(volname) > 63)
-}
+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,148 @@
+/*
+ * 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 {
+  constructor(props) {
+    super(props)
+    this.state = {
+      accessKey: "",
+      secretKey: ""
+    }
+  }
+
+  // Handle field changes
+  accessKeyChange(e) {
+    this.setState({
+      accessKey: e.target.value
+    })
+  }
+
+  secretKeyChange(e) {
+    this.setState({
+      secretKey: e.target.value
+    })
+  }
+
+  handleSubmit(event) {
+    event.preventDefault()
+    const { showAlert, history } = this.props
+    let message = ""
+    if (this.state.accessKey === "") {
+      message = "Access Key cannot be empty"
+    }
+    if (this.state.secretKey === "") {
+      message = "Secret Key cannot be empty"
+    }
+    if (message) {
+      showAlert("danger", message)
+      return
+    }
+    web
+      .Login({
+        username: this.state.accessKey,
+        password: this.state.secretKey
+      })
+      .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
+              value={this.state.accessKey}
+              onChange={this.accessKeyChange.bind(this)}
+              className="ig-dark"
+              label="Access Key"
+              id="accessKey"
+              name="username"
+              type="text"
+              spellCheck="false"
+              required="required"
+              autoComplete="username"
+            />
+            <InputGroup
+              value={this.state.secretKey}
+              onChange={this.secretKeyChange.bind(this)}
+              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,106 @@
+/*
+ * 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()
+    let files = e.target.files
+    let filesToUploadCount = files.length
+    for (let i = 0; i < filesToUploadCount; i++) {
+      uploadFile(files.item(i))
+    }
+    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"
+                multiple={true}
+              />
+              <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,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 { 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 { used } = this.props.storageInfo
+    return (
+      <div className="feh-used">
+        <div className="fehu-chart">
+          <div style={{ width: 0 }} />
+        </div>
+        <ul>
+          <li>
+            <span>Used: </span>
+            {humanize.filesize(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,105 @@
+/*
+ * 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}
+      />
+    )
+    // 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
+    wrapper.setState({
+      accessKey: "",
+      secretKey: "secretKey"
+    })
+    wrapper.find("form").simulate("submit")
+    expect(showAlertMock).toHaveBeenCalledWith("danger", "Access Key cannot be empty")
+
+    // case where secret key is empty
+    wrapper.setState({
+      accessKey: "accessKey",
+      secretKey: ""
+    })
+    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}
+      />
+    )
+    wrapper.setState({
+      accessKey: "accessKey",
+      secretKey: "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,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 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 files = [new Blob(["file content"], { type: "text/plain" })]
+    const input = wrapper.find("#file-input")
+    const event = {
+      preventDefault: jest.fn(),
+      target: {
+        files: {
+          length: files.length,
+          item: function(index) {
+            return files[index]
+          }
+        }
+      }
+    }
+    input.simulate("change", event)
+    expect(uploadFile).toHaveBeenCalledWith(files[0])
+  })
+})

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={{ used: 60 }}
+        fetchStorageInfo={jest.fn()}
+      />
+    )
+  })
+
+  it("should fetchStorageInfo before component is mounted", () => {
+    const fetchStorageInfo = jest.fn()
+    shallow(
+      <StorageInfo
+        storageInfo={{ used: 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: { Used: 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: { used: 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,
+        used:  res.storageInfo.Used
+      }
+      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