Revert "deprecate embedded browser (#12163)"

This reverts commit 736d8cbac4.

Bring contrib files for older contributions

browser/app/js/App.js

@@ -0,0 +1,34 @@
+/*
+ * MinIO Object Storage (c) 2021 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 OpenIDLogin from "./browser/OpenIDLogin"
+import web from "./web"
+
+export const App = () => {
+  return (
+    <Switch>
+      <Route path={"/login/openid"} component={OpenIDLogin} />
+      <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 Object Storage (c) 2021 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

@@ -0,0 +1,41 @@
+/*
+ * MinIO Object Storage (c) 2021 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 JSONrpc from "../jsonrpc"
+
+describe("jsonrpc", () => {
+  it("should fail with invalid endpoint", done => {
+    try {
+      let jsonRPC = new JSONrpc({
+        endpoint: "htt://localhost:9000",
+        namespace: "Test"
+      })
+    } catch (e) {
+      done()
+    }
+  })
+  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")
+  })
+})

browser/app/js/alert/Alert.js

@@ -0,0 +1,30 @@
+/*
+ * MinIO Object Storage (c) 2021 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 Object Storage (c) 2021 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 Object Storage (c) 2021 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 Object Storage (c) 2021 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 Object Storage (c) 2021 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 Object Storage (c) 2021 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 Object Storage (c) 2021 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" || alert.autoClear) {
+      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 Object Storage (c) 2021 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,60 @@
+/*
+ * MinIO Object Storage (c) 2021 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, 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://min.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>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 Object Storage (c) 2021 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,135 @@
+/*
+ * MinIO Object Storage (c) 2021 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()
+  }
+  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="fas fa-bars" />
+          </Dropdown.Toggle>
+          <Dropdown.Menu className="dropdown-menu-right">
+            <li>
+              <a href="" onClick={this.showChangePassword.bind(this)}>
+                Change Password <i className="fas fa-cog" />
+              </a>
+              {this.state.showChangePasswordModal && (
+                <ChangePasswordModal
+                  serverInfo={serverInfo}
+                  hideChangePassword={this.hideChangePassword.bind(this)}
+                />
+              )}
+            </li>
+            <li>
+              <a target="_blank" href="https://docs.min.io/?ref=ob">
+                Documentation <i className="fas fa-book" />
+              </a>
+            </li>
+            <li>
+              <a target="_blank" href="https://github.com/minio/minio">
+                GitHub <i className="fab fa-github" />
+              </a>
+            </li>
+            <li>
+              <a target="_blank" href="https://min.io/pricing?ref=ob">
+                Get Support <i className="fas fa-question-circle" />
+              </a>
+            </li>
+            <li>
+              <a href="" id="show-about" onClick={this.showAbout.bind(this)}>
+                About <i className="fas fa-info-circle" />
+              </a>
+              {this.state.showAboutModal && (
+                <AboutModal
+                  serverInfo={serverInfo}
+                  hideAbout={this.hideAbout.bind(this)}
+                />
+              )}
+            </li>
+            <li>
+              <a href="" id="logout" onClick={this.logout}>
+                Logout <i className="fas fa-sign-out-alt" />
+              </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,260 @@
+/*
+ * MinIO Object Storage (c) 2021 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 { getRandomAccessKey, getRandomSecretKey } from "../utils"
+import jwtDecode from "jwt-decode"
+import classNames from "classnames"
+
+import { Modal, ModalBody, ModalHeader } from "react-bootstrap"
+import InputGroup from "./InputGroup"
+import { ACCESS_KEY_MIN_LENGTH, SECRET_KEY_MIN_LENGTH } from "../constants"
+
+export class ChangePasswordModal extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      currentAccessKey: "",
+      currentSecretKey: "",
+      currentSecretKeyVisible: false,
+      newAccessKey: "",
+      newSecretKey: "",
+      newSecretKeyVisible: false
+    }
+  }
+  // When its shown, it loads the access key from JWT token
+  componentWillMount() {
+    const token = jwtDecode(web.GetToken())
+    this.setState({
+      currentAccessKey: token.sub,
+      newAccessKey: token.sub
+    })
+  }
+
+  // Save the auth params and set them.
+  setAuth(e) {
+    const { showAlert } = this.props
+
+    if (this.canUpdateCredentials()) {
+      const currentAccessKey = this.state.currentAccessKey
+      const currentSecretKey = this.state.currentSecretKey
+      const newAccessKey = this.state.newAccessKey
+      const newSecretKey = this.state.newSecretKey
+      web
+        .SetAuth({
+          currentAccessKey,
+          currentSecretKey,
+          newAccessKey,
+          newSecretKey
+        })
+        .then(data => {
+          showAlert({
+            type: "success",
+            message: "Credentials updated successfully."
+          })
+        })
+        .catch(err => {
+          showAlert({
+            type: "danger",
+            message: err.message
+          })
+        })
+    }
+  }
+
+  generateAuth(e) {
+    const { serverInfo } = this.props
+    this.setState({
+      newSecretKey: getRandomSecretKey(),
+      newSecretKeyVisible: true
+    })
+  }
+
+  canChangePassword() {
+    const { serverInfo } = this.props
+    // Password change is not allowed for temporary users(STS)
+    if(serverInfo.userInfo.isTempUser) {
+      return false
+    }
+
+    // Password change is only allowed for regular users
+    if (!serverInfo.userInfo.isIAMUser) {
+      return false
+    }
+
+    return true
+  }
+
+  canUpdateCredentials() {
+    return (
+      this.state.currentAccessKey.length > 0 &&
+      this.state.currentSecretKey.length > 0 &&
+      this.state.newAccessKey.length >= ACCESS_KEY_MIN_LENGTH &&
+      this.state.newSecretKey.length >= SECRET_KEY_MIN_LENGTH
+    )
+  }
+
+  render() {
+    const { hideChangePassword, serverInfo } = this.props
+    const allowChangePassword = this.canChangePassword()
+
+    if (!allowChangePassword) {
+      return (
+        <Modal bsSize="sm" animation={false} show={true}>
+          <ModalHeader>Change Password</ModalHeader>
+          <ModalBody>
+            Credentials of this user cannot be updated through MinIO Browser.
+          </ModalBody>
+          <div className="modal-footer">
+            <button
+              id="cancel-change-password"
+              className="btn btn-link"
+              onClick={hideChangePassword}
+            >
+              Close
+            </button>
+          </div>
+        </Modal>
+      )
+    }
+
+    return (
+      <Modal bsSize="sm" animation={false} show={true}>
+        <ModalHeader>Change Password</ModalHeader>
+        <ModalBody className="m-t-20">
+          <div className="has-toggle-password">
+            <InputGroup
+              value={this.state.currentAccessKey}
+              id="currentAccessKey"
+              label="Current Access Key"
+              name="currentAccesskey"
+              type="text"
+              spellCheck="false"
+              required="required"
+              autoComplete="false"
+              align="ig-left"
+              readonly={true}
+            />
+
+            <i
+              onClick={() => {
+                this.setState({
+                  currentSecretKeyVisible: !this.state.currentSecretKeyVisible
+                })
+              }}
+              className={
+                "toggle-password fas fa-eye " +
+                (this.state.currentSecretKeyVisible ? "toggled" : "")
+              }
+            />
+            <InputGroup
+              value={this.state.currentSecretKey}
+              onChange={e => {
+                this.setState({ currentSecretKey: e.target.value })
+              }}
+              id="currentSecretKey"
+              label="Current Secret Key"
+              name="currentSecretKey"
+              type={this.state.currentSecretKeyVisible ? "text" : "password"}
+              spellCheck="false"
+              required="required"
+              autoComplete="false"
+              align="ig-left"
+            />
+          </div>
+
+          <div className="has-toggle-password m-t-30">
+            <i
+              onClick={() => {
+                this.setState({
+                  newSecretKeyVisible: !this.state.newSecretKeyVisible
+                })
+              }}
+              className={
+                "toggle-password fas fa-eye " +
+                (this.state.newSecretKeyVisible ? "toggled" : "")
+              }
+            />
+            <InputGroup
+              value={this.state.newSecretKey}
+              onChange={e => {
+                this.setState({ newSecretKey: e.target.value })
+              }}
+              id="newSecretKey"
+              label="New Secret Key"
+              name="newSecretKey"
+              type={this.state.newSecretKeyVisible ? "text" : "password"}
+              spellCheck="false"
+              required="required"
+              autoComplete="false"
+              align="ig-left"
+              onChange={e => {
+                this.setState({ newSecretKey: e.target.value })
+              }}
+            />
+          </div>
+        </ModalBody>
+        <div className="modal-footer">
+          <button
+            id="generate-keys"
+            className={"btn btn-primary"}
+            onClick={this.generateAuth.bind(this)}
+          >
+            Generate
+          </button>
+          <button
+            id="update-keys"
+            className={classNames({
+              btn: true,
+              "btn-success": this.canUpdateCredentials()
+            })}
+            disabled={!this.canUpdateCredentials()}
+            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

@@ -0,0 +1,57 @@
+/*
+ * MinIO Object Storage (c) 2021 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, ModalBody } from "react-bootstrap"
+
+let ConfirmModal = ({
+  baseClass,
+  icon,
+  text,
+  sub,
+  okText,
+  cancelText,
+  okHandler,
+  cancelHandler,
+  show
+}) => {
+  return (
+    <Modal
+      bsSize="small"
+      animation={false}
+      show={show}
+      className={"modal-confirm " + (baseClass || "")}
+    >
+      <ModalBody>
+        <div className="mc-icon">
+          <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>
+        <button className="btn btn-link" onClick={cancelHandler}>
+          {cancelText}
+        </button>
+      </div>
+    </Modal>
+  )
+}
+
+export default ConfirmModal

browser/app/js/browser/Header.js

@@ -0,0 +1,45 @@
+/*
+ * MinIO Object Storage (c) 2021 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 ObjectsSearch from "../objects/ObjectsSearch"
+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 />}
+      {loggedIn && <ObjectsSearch />}
+      <ul className="feh-actions">
+        {loggedIn ? (
+          <BrowserDropdown />
+        ) : (
+          <a className="btn btn-danger" href={minioBrowserPrefix + "/login"}>
+            Login
+          </a>
+        )}
+      </ul>
+    </header>
+  )
+}
+
+export default Header

browser/app/js/browser/Host.js

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

browser/app/js/browser/InputGroup.js

@@ -0,0 +1,70 @@
+/*
+ * MinIO Object Storage (c) 2021 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,187 @@
+/*
+ * MinIO Object Storage (c) 2021 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 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, Link } from "react-router-dom"
+import OpenIDLoginButton from './OpenIDLoginButton'
+
+export class Login extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      accessKey: "",
+      secretKey: "",
+      discoveryDoc: {},
+      clientId: ""
+    }
+  }
+
+  // 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, clearAlert, 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 => {
+        // Clear alerts from previous login attempts
+        clearAlert()
+
+        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")
+  }
+
+  componentDidMount() {
+    web.GetDiscoveryDoc().then(({ DiscoveryDoc, clientId }) => {
+      this.setState({
+        clientId,
+        discoveryDoc: DiscoveryDoc
+      })
+    })
+  }
+
+  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 = ""
+
+    const showOpenID = Boolean(this.state.discoveryDoc && this.state.discoveryDoc.authorization_endpoint)
+    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"
+            />
+            <button className="lw-btn" type="submit">
+              <i className="fas fa-sign-in-alt" />
+            </button>
+          </form>
+          {showOpenID && (
+            <div className="openid-login">
+              <div className="or">or</div>
+              {
+                this.state.clientId ? (
+                  <OpenIDLoginButton
+                    className="btn openid-btn"
+                    clientId={this.state.clientId}
+                    authEp={this.state.discoveryDoc.authorization_endpoint}
+                    authScopes={this.state.discoveryDoc.scopes_supported}
+                  >
+                    Log in with OpenID
+                  </OpenIDLoginButton>
+                ) : (
+                  <Link to={"/login/openid"} className="btn openid-btn">
+                    Log in with OpenID
+                  </Link>
+                )
+              }
+            </div>
+          )}
+        </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 Object Storage (c) 2021 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="fas 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="fas fa-cloud-upload-alt" />{" "}
+              </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="far fa-hdd" />
+              </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 Object Storage (c) 2021 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 Object Storage (c) 2021 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/OpenIDLogin.js

@@ -0,0 +1,169 @@
+/*
+ * MinIO Object Storage (c) 2021 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 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"
+import qs from "query-string"
+import { getRandomString } from "../utils"
+import storage from "local-storage-fallback"
+import jwtDecode from "jwt-decode"
+import { buildOpenIDAuthURL, OPEN_ID_NONCE_KEY } from './utils'
+
+export class OpenIDLogin extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      clientID: "",
+      discoveryDoc: {}
+    }
+    this.clientIDChange = this.clientIDChange.bind(this)
+    this.handleSubmit = this.handleSubmit.bind(this)
+  }
+
+  clientIDChange(e) {
+    this.setState({
+      clientID: e.target.value
+    })
+  }
+
+  handleSubmit(event) {
+    event.preventDefault()
+    const { showAlert } = this.props
+    let message = ""
+    if (this.state.clientID === "") {
+      message = "Client ID cannot be empty"
+    }
+    if (message) {
+      showAlert("danger", message)
+      return
+    }
+
+    if (this.state.discoveryDoc && this.state.discoveryDoc.authorization_endpoint) {
+      const redirectURI = window.location.href.split("#")[0]
+
+      // Store nonce in localstorage to check again after the redirect
+      const nonce = getRandomString(16)
+      storage.setItem(OPEN_ID_NONCE_KEY, nonce)
+
+      const authURL = buildOpenIDAuthURL(
+        this.state.discoveryDoc.authorization_endpoint,
+        this.state.discoveryDoc.scopes_supported,
+        redirectURI,
+        this.state.clientID,
+        nonce
+      )
+      window.location = authURL
+    }
+  }
+
+  componentWillMount() {
+    const { clearAlert } = this.props
+    // Clear out any stale message in the alert of previous page
+    clearAlert()
+    document.body.classList.add("is-guest")
+
+    web.GetDiscoveryDoc().then(({ DiscoveryDoc }) => {
+      this.setState({
+        discoveryDoc: DiscoveryDoc
+      })
+    })
+  }
+
+  componentDidMount() {
+    const values = qs.parse(this.props.location.hash)
+    if (values.error) {
+      this.props.showAlert("danger", values.error_description)
+      return
+    }
+
+    if (values.id_token) {
+      // Check nonce on the token to prevent replay attacks
+      const tokenJSON = jwtDecode(values.id_token)
+      if (storage.getItem(OPEN_ID_NONCE_KEY) !== tokenJSON.nonce) {
+        this.props.showAlert("danger", "Invalid auth token")
+        return
+      }
+
+      web.LoginSTS({ token: values.id_token }).then(() => {
+        storage.removeItem(OPEN_ID_NONCE_KEY)
+        this.forceUpdate()
+        return
+      })
+    }
+  }
+
+  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}>
+            <InputGroup
+              value={this.state.clientID}
+              onChange={this.clientIDChange}
+              className="ig-dark"
+              label="Client ID"
+              id="clientID"
+              name="clientID"
+              type="text"
+              spellCheck="false"
+              required="required"
+            />
+            <button className="lw-btn" type="submit">
+              <i className="fas fa-sign-in-alt" />
+            </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
+)(OpenIDLogin)

browser/app/js/browser/OpenIDLoginButton.js

@@ -0,0 +1,57 @@
+/*
+ * MinIO Object Storage (c) 2021 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 { getRandomString } from "../utils"
+import storage from "local-storage-fallback"
+import { buildOpenIDAuthURL, OPEN_ID_NONCE_KEY } from './utils'
+
+export class OpenIDLoginButton extends React.Component {
+  constructor(props) {
+    super(props)
+    this.handleClick = this.handleClick.bind(this)
+  }
+
+  handleClick(event) {
+    event.stopPropagation()
+    const { authEp, authScopes, clientId } = this.props
+
+    let redirectURI = window.location.href.split("#")[0]
+    if (redirectURI.endsWith('/')) {
+      redirectURI += 'openid'
+    } else {
+      redirectURI += '/openid'
+    }
+
+    // Store nonce in localstorage to check again after the redirect
+    const nonce = getRandomString(16)
+    storage.setItem(OPEN_ID_NONCE_KEY, nonce)
+
+    const authURL = buildOpenIDAuthURL(authEp, authScopes, redirectURI, clientId, nonce)
+    window.location = authURL
+  }
+
+  render() {
+    const { children, className } = this.props
+    return (
+      <div onClick={this.handleClick} className={className}>
+        {children}
+      </div>
+    )
+  }
+}
+
+export default OpenIDLoginButton

browser/app/js/browser/SideBar.js

@@ -0,0 +1,73 @@
+/*
+ * MinIO Object Storage (c) 2021 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 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 }) => {
+  const onClickOut = e => {
+    if (e.target.classList.contains("feh-trigger")) {
+      return
+    }
+    clickOutside()
+  }
+  return (
+    <ClickOutHandler onClickOut={onClickOut}>
+      <div
+        className={classNames({
+          "fe-sidebar": true,
+          toggled: sidebarOpen
+        })}
+      >
+        <div className="fes-header clearfix hidden-sm hidden-xs">
+          <img src={logo} alt="" />
+          <h2>MinIO Browser</h2>
+        </div>
+        <div className="fes-list">
+          {web.LoggedIn() && <BucketSearch />}
+          <BucketList />
+        </div>
+        <Host />
+      </div>
+    </ClickOutHandler>
+  )
+}
+
+const mapStateToProps = state => {
+  return {
+    sidebarOpen: state.browser.sidebarOpen
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    clickOutside: () => dispatch(actionsCommon.closeSidebar())
+  }
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(SideBar)

browser/app/js/browser/StorageInfo.js

@@ -0,0 +1,64 @@
+/*
+ * MinIO Object Storage (c) 2021 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
+    if (!used || used == 0) {
+      return <noscript />
+    }
+
+    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,40 @@
+/*
+ * MinIO Object Storage (c) 2021 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",
+    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 Object Storage (c) 2021 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,62 @@
+/*
+ * MinIO Object Storage (c) 2021 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",
+    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,131 @@
+/*
+ * MinIO Object Storage (c) 2021 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"
+import jwtDecode from "jwt-decode"
+
+jest.mock("jwt-decode")
+
+jwtDecode.mockImplementation(() => ({ sub: "minio" }))
+
+jest.mock("../../web", () => ({
+  SetAuth: jest.fn(
+    ({ currentAccessKey, currentSecretKey, newAccessKey, newSecretKey }) => {
+      if (
+        currentAccessKey == "minio" &&
+        currentSecretKey == "minio123" &&
+        newAccessKey == "test" &&
+        newSecretKey == "test1234"
+      ) {
+        return Promise.resolve({})
+      } else {
+        return Promise.reject({
+          message: "Error"
+        })
+      }
+    }
+  ),
+  GetToken: jest.fn(() => "")
+}))
+
+jest.mock("../../utils", () => ({
+  getRandomAccessKey: () => "raccesskey",
+  getRandomSecretKey: () => "rsecretkey"
+}))
+
+describe("ChangePasswordModal", () => {
+  const serverInfo = {
+    version: "test",
+    platform: "test",
+    runtime: "test",
+    info: {},
+    userInfo: { isIAMUser: true }
+  }
+
+  it("should render without crashing", () => {
+    shallow(<ChangePasswordModal serverInfo={serverInfo} />)
+  })
+
+  it("should not allow changing password when not IAM user", () => {
+    const newServerInfo = {
+      ...serverInfo,
+      userInfo: { isIAMUser: false }
+    }
+    const wrapper = shallow(<ChangePasswordModal serverInfo={newServerInfo} />)
+    expect(
+      wrapper
+        .find("ModalBody")
+        .childAt(0)
+        .text()
+    ).toBe("Credentials of this user cannot be updated through MinIO Browser.")
+  })
+
+  it("should not allow changing password for STS user", () => {
+    const newServerInfo = {
+      ...serverInfo,
+      userInfo: { isTempUser: true }
+    }
+    const wrapper = shallow(<ChangePasswordModal serverInfo={newServerInfo} />)
+    expect(
+      wrapper
+        .find("ModalBody")
+        .childAt(0)
+        .text()
+    ).toBe("Credentials of this user cannot be updated through MinIO Browser.")
+  })
+
+  it("should not generate accessKey for IAM User", () => {
+    const wrapper = shallow(<ChangePasswordModal serverInfo={serverInfo} />)
+    wrapper.find("#generate-keys").simulate("click")
+    setImmediate(() => {
+      expect(wrapper.state("newAccessKey")).toBe("minio")
+      expect(wrapper.state("newSecretKey")).toBe("rsecretkey")
+    })
+  })
+
+  it("should not show new accessKey field for IAM User", () => {
+    const wrapper = shallow(<ChangePasswordModal serverInfo={serverInfo} />)
+    expect(wrapper.find("#newAccesskey").exists()).toBeFalsy()
+  })
+
+  it("should disable Update button for secretKey", () => {
+    const showAlert = jest.fn()
+    const wrapper = shallow(
+      <ChangePasswordModal serverInfo={serverInfo} showAlert={showAlert} />
+    )
+    wrapper
+      .find("#currentSecretKey")
+      .simulate("change", { target: { value: "minio123" } })
+    wrapper
+      .find("#newSecretKey")
+      .simulate("change", { target: { value: "t1" } })
+    expect(wrapper.find("#update-keys").prop("disabled")).toBeTruthy()
+  })
+
+  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 Object Storage (c) 2021 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 Object Storage (c) 2021 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,108 @@
+/*
+ * MinIO Object Storage (c) 2021 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(),
+  GetDiscoveryDoc: jest.fn(() => {
+    return Promise.resolve({ DiscoveryDoc: {"authorization_endpoint": "test"} })
+  })
+}))
+
+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 Object Storage (c) 2021 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 Object Storage (c) 2021 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 Object Storage (c) 2021 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,54 @@
+/*
+ * MinIO Object Storage (c) 2021 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(),
+      target: { classList: { contains: jest.fn(() => false) } }
+    })
+    expect(clickOutside).toHaveBeenCalled()
+  })
+
+  it("should not call clickOutside when user clicks on sidebar toggle", () => {
+    const clickOutside = jest.fn()
+    const wrapper = shallow(<SideBar clickOutside={clickOutside} />)
+    wrapper.simulate("clickOut", {
+      preventDefault: jest.fn(),
+      target: { classList: { contains: jest.fn(() => true) } }
+    })
+    expect(clickOutside).not.toHaveBeenCalled()
+  })
+})

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

@@ -0,0 +1,49 @@
+/*
+ * MinIO Object Storage (c) 2021 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()
+  })
+
+  it("should not render anything if used is null", () => {
+    const fetchStorageInfo = jest.fn()
+    const wrapper = shallow(
+      <StorageInfo
+      storageInfo={ {used: 0} }
+        fetchStorageInfo={fetchStorageInfo}
+      />
+    )
+    expect(wrapper.text()).toBe("")
+  })
+})

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

@@ -0,0 +1,70 @@
+/*
+ * MinIO Object Storage (c) 2021 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({
+      used: 60
+    })
+  }),
+  ServerInfo: jest.fn(() => {
+    return Promise.resolve({
+      MinioVersion: "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",
+          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,87 @@
+/*
+ * MinIO Object Storage (c) 2021 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: {used: 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: { }
+        }
+      )
+    ).toEqual({
+      storageInfo: { }
+    })
+  })
+
+  it("should handle SET_SERVER_INFO", () => {
+    expect(
+      reducer(undefined, {
+        type: actionsCommon.SET_SERVER_INFO,
+        serverInfo: {
+          version: "test",
+          platform: "test",
+          runtime: "test",
+          info: "test"
+        }
+      }).serverInfo
+    ).toEqual({
+      version: "test",
+      platform: "test",
+      runtime: "test",
+      info: "test"
+    })
+  })
+})

browser/app/js/browser/actions.js

@@ -0,0 +1,66 @@
+/*
+ * MinIO Object Storage (c) 2021 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 = {
+        used: res.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,
+        platform: res.MinioPlatform,
+        runtime: res.MinioRuntime,
+        info: res.MinioGlobalInfo,
+        userInfo: res.MinioUserInfo
+      }
+      dispatch(setServerInfo(serverInfo))
+    })
+  }
+}
+
+export const setServerInfo = serverInfo => ({
+  type: SET_SERVER_INFO,
+  serverInfo
+})

browser/app/js/browser/reducer.js

@@ -0,0 +1,45 @@
+/*
+ * MinIO Object Storage (c) 2021 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: {used: 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/browser/selectors.js

@@ -0,0 +1,24 @@
+/*
+ * MinIO Object Storage (c) 2021 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"
+
+export const getServerInfo = state => state.browser.serverInfo
+
+export const hasServerPublicDomain = createSelector(
+  getServerInfo,
+  serverInfo => Boolean(serverInfo.info && serverInfo.info.domains && serverInfo.info.domains.length),
+)

browser/app/js/browser/utils.js

@@ -0,0 +1,16 @@
+/*
+ * MinIO Object Storage (c) 2021 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.
+ */
+

browser/app/js/buckets/Bucket.js

@@ -0,0 +1,45 @@
+/*
+ * MinIO Object Storage (c) 2021 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 Object Storage (c) 2021 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 Object Storage (c) 2021 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,109 @@
+/*
+ * MinIO Object Storage (c) 2021 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 InfiniteScroll from "react-infinite-scroller"
+import * as actionsBuckets from "./actions"
+import { getFilteredBuckets } from "./selectors"
+import BucketContainer from "./BucketContainer"
+import web from "../web"
+import history from "../history"
+import { pathSlice } from "../utils"
+
+export class BucketList extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      page: 1
+    }
+    this.loadNextPage = this.loadNextPage.bind(this)
+  }
+  componentDidUpdate(prevProps) {
+    if (this.props.filter !== prevProps.filter) {
+      this.setState({
+        page: 1
+      })
+    }
+  }
+  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")
+      }
+    }
+  }
+  loadNextPage() {
+    this.setState({
+      page: this.state.page + 1
+    })
+  }
+  render() {
+    const { filteredBuckets } = this.props
+    const visibleBuckets = filteredBuckets.slice(0, this.state.page * 100)
+    return (
+      <div className="fesl-inner">
+        <Scrollbars
+          renderTrackVertical={props => <div className="scrollbar-vertical" />}
+        >
+          <InfiniteScroll
+            pageStart={0}
+            loadMore={this.loadNextPage}
+            hasMore={filteredBuckets.length > visibleBuckets.length}
+            useWindow={false}
+            element="div"
+            initialLoad={false}
+          >
+            <ul>
+              {visibleBuckets.map(bucket => (
+                <BucketContainer key={bucket} bucket={bucket} />
+              ))}
+            </ul>
+          </InfiniteScroll>
+        </Scrollbars>
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => {
+  return {
+    filteredBuckets: getFilteredBuckets(state),
+    filter: state.buckets.filter
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    fetchBuckets: () => dispatch(actionsBuckets.fetchBuckets()),
+    setBucketList: buckets => dispatch(actionsBuckets.setList(buckets)),
+    selectBucket: (bucket, prefix) =>
+      dispatch(actionsBuckets.selectBucket(bucket, prefix))
+  }
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(BucketList)

browser/app/js/buckets/BucketPolicyModal.js

@@ -0,0 +1,61 @@
+/*
+ * MinIO Object Storage (c) 2021 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 Object Storage (c) 2021 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 Object Storage (c) 2021 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,96 @@
+/*
+ * MinIO Object Storage (c) 2021 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, NONE } 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 = '*'
+
+    if (policy === NONE) {
+      return <noscript />
+    } else {
+      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 Object Storage (c) 2021 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 Object Storage (c) 2021 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 Object Storage (c) 2021 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 Object Storage (c) 2021 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 Object Storage (c) 2021 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 filteredBuckets={[]} fetchBuckets={fetchBuckets} />)
+  })
+
+  it("should call fetchBuckets before component is mounted", () => {
+    const fetchBuckets = jest.fn()
+    const wrapper = shallow(
+      <BucketList filteredBuckets={[]} 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
+        filteredBuckets={[]}
+        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 Object Storage (c) 2021 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 Object Storage (c) 2021 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 Object Storage (c) 2021 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,68 @@
+/*
+ * MinIO Object Storage (c) 2021 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, NONE } 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 not render when policy is listed as 'none'", () => {
+    const wrapper = shallow(<Policy currentBucket={"bucket"} prefix={"foo"} policy={NONE} />)
+    expect(wrapper.find(".pmb-list").length).toBe(0)
+  })
+
+  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 Object Storage (c) 2021 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 Object Storage (c) 2021 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 Object Storage (c) 2021 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 Object Storage (c) 2021 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 { getFilteredBuckets, getCurrentBucket } from "../selectors"
+
+describe("getFilteredBuckets", () => {
+  let state
+  beforeEach(() => {
+    state = {
+      buckets: {
+        list: ["test1", "test11", "test2"]
+      }
+    }
+  })
+
+  it("should return all buckets if no filter specified", () => {
+    state.buckets.filter = ""
+    expect(getFilteredBuckets(state)).toEqual(["test1", "test11", "test2"])
+  })
+
+  it("should return all matching buckets if filter is specified", () => {
+    state.buckets.filter = "test1"
+    expect(getFilteredBuckets(state)).toEqual(["test1", "test11"])
+  })
+})

browser/app/js/buckets/actions.js

@@ -0,0 +1,204 @@
+/*
+ * MinIO Object Storage (c) 2021 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) {
+    const { bucket, prefix } = pathSlice(history.location.pathname)
+    return web.ListBuckets().then(res => {
+      const buckets = res.buckets ? res.buckets.map(bucket => bucket.name) : []
+      if (buckets.length > 0) {
+        dispatch(setList(buckets))
+        if (bucket && buckets.indexOf(bucket) > -1) {
+          dispatch(selectBucket(bucket, prefix))
+        } else {
+          dispatch(selectBucket(buckets[0]))
+        }
+      } else {
+        if (bucket) {
+          dispatch(setList([bucket]))
+          dispatch(selectBucket(bucket, prefix))
+        } else {
+          dispatch(selectBucket(""))
+          history.replace("/")
+        }
+      }
+    })
+    .catch(err => {
+      if (bucket && err.message === "Access Denied." || err.message.indexOf('Prefix access is denied') > -1 ) {
+        dispatch(setList([bucket]))
+        dispatch(selectBucket(bucket, prefix))
+      } else {
+        dispatch(
+          alertActions.set({
+            type: "danger",
+            message: err.message,
+            autoClear: true,
+          })
+        )
+      }
+    })
+  }
+}
+
+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 Object Storage (c) 2021 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,29 @@
+/*
+ * MinIO Object Storage (c) 2021 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 getFilteredBuckets = createSelector(
+  bucketsSelector,
+  bucketsFilterSelector,
+  (buckets, filter) => buckets.filter(
+    bucket => bucket.toLowerCase().indexOf(filter.toLowerCase()) > -1)
+)
+
+export const getCurrentBucket = state => state.buckets.currentBucket

browser/app/js/components/BrowserUpdate.js

@@ -0,0 +1,42 @@
+/*
+ * MinIO Object Storage (c) 2021 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 Tooltip from 'react-bootstrap/lib/Tooltip'
+import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger'
+
+let BrowserUpdate = ({latestUiVersion}) => {
+  // Don't show an update if we're already updated!
+  if (latestUiVersion === currentUiVersion) return ( <noscript></noscript> )
+
+  return (
+    <li className="hidden-xs hidden-sm">
+      <a href="">
+        <OverlayTrigger placement="left" overlay={ <Tooltip id="tt-version-update">
+                                                     New update available. Click to refresh.
+                                                   </Tooltip> }> <i className="fas fa-sync"></i> </OverlayTrigger>
+      </a>
+    </li>
+  )
+}
+
+export default connect(state => {
+  return {
+    latestUiVersion: state.latestUiVersion
+  }
+})(BrowserUpdate)

browser/app/js/constants.js

@@ -0,0 +1,37 @@
+/*
+ * MinIO Object Storage (c) 2021 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.
+ */
+
+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 NONE = "none"
+
+export const SHARE_OBJECT_EXPIRY_DAYS = 5
+export const SHARE_OBJECT_EXPIRY_HOURS = 0
+export const SHARE_OBJECT_EXPIRY_MINUTES = 0
+
+export const ACCESS_KEY_MIN_LENGTH = 3
+export const SECRET_KEY_MIN_LENGTH = 8
+
+export const SORT_BY_NAME = "name"
+export const SORT_BY_SIZE = "size"
+export const SORT_BY_LAST_MODIFIED = "last-modified"
+
+export const SORT_ORDER_ASC = "asc"
+export const SORT_ORDER_DESC = "desc"

browser/app/js/history.js

@@ -0,0 +1,24 @@
+/*
+ * MinIO Object Storage (c) 2021 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,17 @@
+/*
+ * MinIO Object Storage (c) 2021 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.
+ */
+
+module.exports = 'test-file-stub';

browser/app/js/jest/setup.js

@@ -0,0 +1,21 @@
+/*
+ * MinIO Object Storage (c) 2021 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/jsonrpc.js

@@ -0,0 +1,91 @@
+/*
+ * MinIO Object Storage (c) 2021 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 SuperAgent from 'superagent-es6-promise';
+import url from 'url'
+import Moment from 'moment'
+
+export default class JSONrpc {
+  constructor(params) {
+    this.endpoint = params.endpoint
+    this.namespace = params.namespace
+    this.version = '2.0';
+    const parsedUrl = url.parse(this.endpoint)
+    this.host = parsedUrl.hostname
+    this.path = parsedUrl.path
+    this.port = parsedUrl.port
+
+    switch (parsedUrl.protocol) {
+      case 'http:': {
+        this.scheme = 'http'
+        if (parsedUrl.port === 0) {
+          this.port = 80
+        }
+        break
+      }
+      case 'https:': {
+        this.scheme = 'https'
+        if (parsedUrl.port === 0) {
+          this.port = 443
+        }
+        break
+      }
+      default: {
+        throw new Error('Unknown protocol: ' + parsedUrl.protocol)
+      }
+    }
+  }
+  // call('Get', {id: NN, params: [...]}, function() {})
+  call(method, options, token) {
+    if (!options) {
+      options = {}
+    }
+    if (!options.id) {
+      options.id = 1;
+    }
+    if (!options.params) {
+      options.params = {};
+    }
+    const dataObj = {
+      id: options.id,
+      jsonrpc: this.version,
+      params: options.params ? options.params : {},
+      method: this.namespace ? this.namespace + '.' + method : method
+    }
+    let requestParams = {
+      host: this.host,
+      port: this.port,
+      path: this.path,
+      scheme: this.scheme,
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'x-amz-date': Moment().utc().format('YYYYMMDDTHHmmss') + 'Z'
+      }
+    }
+
+    if (token) {
+      requestParams.headers.Authorization = 'Bearer ' + token
+    }
+
+    let req = SuperAgent.post(this.endpoint)
+    for (let key in requestParams.headers) {
+      req.set(key, requestParams.headers[key])
+    }
+    // req.set('Access-Control-Allow-Origin', 'http://localhost:8080')
+    return req.send(JSON.stringify(dataObj)).then(res => res)
+  }
+}

browser/app/js/loader.js

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

browser/app/js/mime.js

@@ -0,0 +1,144 @@
+/*
+ * MinIO Object Storage (c) 2021 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 mimedb from "mime-types"
+
+const isFolder = (name, contentType) => {
+  if (name.endsWith("/")) return true
+  return false
+}
+
+const isPdf = (name, contentType) => {
+  if (contentType === "application/pdf") return true
+  return false
+}
+const isImage = (name, contentType) => {
+  if (
+    contentType === "image/jpeg" ||
+    contentType === "image/gif" ||
+    contentType === "image/x-icon" ||
+    contentType === "image/png" ||
+    contentType === "image/svg+xml" ||
+    contentType === "image/tiff" ||
+    contentType === "image/webp"
+  )
+    return true
+  return false
+}
+
+const isZip = (name, contentType) => {
+  if (!contentType || !contentType.includes("/")) return false
+  if (contentType.split("/")[1].includes("zip")) return true
+  return false
+}
+
+const isCode = (name, contentType) => {
+  const codeExt = [
+    "c",
+    "cpp",
+    "go",
+    "py",
+    "java",
+    "rb",
+    "js",
+    "pl",
+    "fs",
+    "php",
+    "css",
+    "less",
+    "scss",
+    "coffee",
+    "net",
+    "html",
+    "rs",
+    "exs",
+    "scala",
+    "hs",
+    "clj",
+    "el",
+    "scm",
+    "lisp",
+    "asp",
+    "aspx",
+  ]
+  const ext = name.split(".").reverse()[0]
+  for (var i in codeExt) {
+    if (ext === codeExt[i]) return true
+  }
+  return false
+}
+
+const isExcel = (name, contentType) => {
+  if (!contentType || !contentType.includes("/")) return false
+  const types = ["excel", "spreadsheet"]
+  const subType = contentType.split("/")[1]
+  for (var i in types) {
+    if (subType.includes(types[i])) return true
+  }
+  return false
+}
+
+const isDoc = (name, contentType) => {
+  if (!contentType || !contentType.includes("/")) return false
+  const types = ["word", ".document"]
+  const subType = contentType.split("/")[1]
+  for (var i in types) {
+    if (subType.includes(types[i])) return true
+  }
+  return false
+}
+
+const isPresentation = (name, contentType) => {
+  if (!contentType || !contentType.includes("/")) return false
+  var types = ["powerpoint", "presentation"]
+  const subType = contentType.split("/")[1]
+  for (var i in types) {
+    if (subType.includes(types[i])) return true
+  }
+  return false
+}
+
+const typeToIcon = (type) => {
+  return (name, contentType) => {
+    if (!contentType || !contentType.includes("/")) return false
+    if (contentType.split("/")[0] === type) return true
+    return false
+  }
+}
+
+export const getDataType = (name, contentType) => {
+  if (contentType === "") {
+    contentType = mimedb.lookup(name) || "application/octet-stream"
+  }
+  const check = [
+    ["folder", isFolder],
+    ["code", isCode],
+    ["audio", typeToIcon("audio")],
+    ["image", typeToIcon("image")],
+    ["video", typeToIcon("video")],
+    ["text", typeToIcon("text")],
+    ["pdf", isPdf],
+    ["image", isImage],
+    ["zip", isZip],
+    ["excel", isExcel],
+    ["doc", isDoc],
+    ["presentation", isPresentation],
+  ]
+  for (var i in check) {
+    if (check[i][1](name, contentType)) return check[i][0]
+  }
+  return "other"
+}

browser/app/js/objects/DeleteObjectConfirmModal.js

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

browser/app/js/objects/ObjectActions.js

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

browser/app/js/objects/ObjectContainer.js

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

browser/app/js/objects/ObjectItem.js

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

browser/app/js/objects/ObjectsBulkActions.js

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

browser/app/js/objects/ObjectsHeader.js

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

browser/app/js/objects/ObjectsList.js

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

browser/app/js/objects/ObjectsListContainer.js

@@ -0,0 +1,89 @@
+/*
+ * MinIO Object Storage (c) 2021 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 InfiniteScroll from "react-infinite-scroller"
+import ObjectsList from "./ObjectsList"
+import { getFilteredObjects } from "./selectors"
+
+export class ObjectsListContainer extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      page: 1
+    }
+    this.loadNextPage = this.loadNextPage.bind(this)
+  }
+  componentWillReceiveProps(nextProps) {
+    if (
+      nextProps.currentBucket !== this.props.currentBucket ||
+      nextProps.currentPrefix !== this.props.currentPrefix ||
+      nextProps.sortBy !== this.props.sortBy ||
+      nextProps.sortOrder !== this.props.sortOrder
+    ) {
+      this.setState({
+        page: 1
+      })
+    }
+  }
+  componentDidUpdate(prevProps) {
+    if (this.props.filter !== prevProps.filter) {
+      this.setState({
+        page: 1
+      })
+    }
+  }
+  loadNextPage() {
+    this.setState(state => {
+      return { page: state.page + 1 }
+    })
+  }
+  render() {
+    const { filteredObjects, listLoading } = this.props
+
+    const visibleObjects = filteredObjects.slice(0, this.state.page * 100)
+
+    return (
+      <div style={{ position: "relative" }}>
+        <InfiniteScroll
+          pageStart={0}
+          loadMore={this.loadNextPage}
+          hasMore={filteredObjects.length > visibleObjects.length}
+          useWindow={true}
+          initialLoad={false}
+        >
+          <ObjectsList objects={visibleObjects} />
+        </InfiniteScroll>
+        {listLoading && <div className="loading" />}
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => {
+  return {
+    currentBucket: state.buckets.currentBucket,
+    currentPrefix: state.objects.currentPrefix,
+    filteredObjects: getFilteredObjects(state),
+    filter: state.objects.filter,
+    sortBy: state.objects.sortBy,
+    sortOrder: state.objects.sortOrder,
+    listLoading: state.objects.listLoading
+  }
+}
+
+export default connect(mapStateToProps)(ObjectsListContainer)

browser/app/js/objects/ObjectsSearch.js

@@ -0,0 +1,43 @@
+/*
+ * MinIO Object Storage (c) 2021 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 actionsObjects from "./actions"
+
+export const ObjectsSearch = ({ onChange }) => (
+  <div
+    className="input-group ig-left ig-search-dark"
+    style={{ display: "block" }}
+  >
+    <input
+      className="ig-text"
+      type="input"
+      placeholder="Search Objects..."
+      onChange={e => onChange(e.target.value)}
+    />
+    <i className="ig-helpers" />
+  </div>
+)
+
+const mapDispatchToProps = dispatch => {
+  return {
+    onChange: filter =>
+      dispatch(actionsObjects.setFilter(filter))
+  }
+}
+
+export default connect(undefined, mapDispatchToProps)(ObjectsSearch)

browser/app/js/objects/ObjectsSection.js

@@ -0,0 +1,28 @@
+/*
+ * MinIO Object Storage (c) 2021 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 ObjectsHeader from "./ObjectsHeader"
+import ObjectsListContainer from "./ObjectsListContainer"
+
+export const ObjectsSection = () => (
+  <div>
+    <ObjectsHeader />
+    <ObjectsListContainer />
+  </div>
+)
+
+export default ObjectsSection

browser/app/js/objects/Path.js

@@ -0,0 +1,176 @@
+/*
+ * MinIO Object Storage (c) 2021 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 ClickOutHandler from "react-onclickout"
+import { OverlayTrigger, Tooltip } from "react-bootstrap"
+import { getCurrentBucket } from "../buckets/selectors"
+import * as actionsObjects from "./actions"
+import * as actionsBuckets from "../buckets/actions"
+
+export class Path extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      isEditing: false,
+      path: ""
+    }
+  }
+  stopEditing() {
+    this.setState({
+      isEditing: false
+    })
+  }
+  onPrefixClick(e, prefix) {
+    e.preventDefault()
+    const { selectPrefix } = this.props
+    selectPrefix(prefix)
+  }
+  onEditClick(e) {
+    e.preventDefault()
+    const { currentBucket, currentPrefix } = this.props
+    this.setState(
+      {
+        isEditing: true,
+        path: `${currentBucket}/${currentPrefix}`
+      },
+      () => {
+        // focus on input and move cursor to the end
+        this.pathInput.focus()
+        this.pathInput.setSelectionRange(
+          this.state.path.length,
+          this.state.path.length
+        )
+      }
+    )
+  }
+  onKeyDown(e) {
+    // When Esc key is pressed
+    if (e.keyCode === 27) {
+      this.stopEditing()
+    }
+  }
+  onInputClickOut() {
+    this.stopEditing()
+  }
+  bucketExists(bucketName) {
+    const { buckets } = this.props
+    return buckets.includes(bucketName)
+  }
+  async onSubmit(e) {
+    e.preventDefault()
+    const { makeBucket, selectBucket } = this.props
+    // all paths need to end in slash to display contents properly
+    let path = this.state.path
+    if (!path.endsWith("/")) {
+      path += "/"
+    }
+    const splittedPath = path.split("/")
+    if (splittedPath.length > 0) {
+      // prevent bucket name from being empty
+      if (splittedPath[0]) {
+        const bucketName = splittedPath[0]
+        const prefix = splittedPath.slice(1).join("/")
+        if (!this.bucketExists(bucketName)) {
+          await makeBucket(bucketName)
+        }
+        // check updated buckets and don't proceed on invalid inputs
+        if (this.bucketExists(bucketName)) {
+          // then select bucket with prefix
+          selectBucket(bucketName, prefix)
+        }
+        this.stopEditing()
+      }
+    }
+  }
+  render() {
+    const pathTooltip = <Tooltip id="tt-path">Choose or create new path</Tooltip>
+    const { currentBucket, currentPrefix } = this.props
+    let dirPath = []
+    let path = ""
+    if (currentPrefix) {
+      path = currentPrefix.split("/").map((dir, i) => {
+        if (dir) {
+          dirPath.push(dir)
+          let dirPath_ = dirPath.join("/") + "/"
+          return (
+            <span key={i}>
+              <a href="" onClick={e => this.onPrefixClick(e, dirPath_)}>
+                {dir}
+              </a>
+            </span>
+          )
+        }
+      })
+    }
+    return (
+      <h2>
+        {this.state.isEditing ? (
+          <ClickOutHandler onClickOut={() => this.onInputClickOut()}>
+            <form onSubmit={e => this.onSubmit(e)}>
+              <input
+                className="form-control form-control--path"
+                type="text"
+                placeholder="Choose or create new path"
+                ref={node => (this.pathInput = node)}
+                onKeyDown={e => this.onKeyDown(e)}
+                value={this.state.path}
+                onChange={e => this.setState({ path: e.target.value })}
+              />
+            </form>
+          </ClickOutHandler>
+        ) : (
+          <React.Fragment>
+            <span className="main">
+              <a href="" onClick={e => this.onPrefixClick(e, "")}>
+                {currentBucket}
+              </a>
+            </span>
+            {path}
+            <OverlayTrigger placement="bottom" overlay={pathTooltip}>
+              <a href="" onClick={e => this.onEditClick(e)} className="fe-edit">
+                <i className="fas fa-folder-plus" />
+              </a>
+            </OverlayTrigger>
+          </React.Fragment>
+        )}
+      </h2>
+    )
+  }
+}
+
+const mapStateToProps = state => {
+  return {
+    buckets: state.buckets.list,
+    currentBucket: getCurrentBucket(state),
+    currentPrefix: state.objects.currentPrefix
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    makeBucket: bucket => dispatch(actionsBuckets.makeBucket(bucket)),
+    selectBucket: (bucket, prefix) =>
+      dispatch(actionsBuckets.selectBucket(bucket, prefix)),
+    selectPrefix: prefix => dispatch(actionsObjects.selectPrefix(prefix))
+  }
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Path)

browser/app/js/objects/PrefixActions.js

@@ -0,0 +1,95 @@
+/*
+ * MinIO Object Storage (c) 2021 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 DeleteObjectConfirmModal from "./DeleteObjectConfirmModal"
+import * as actions from "./actions"
+
+export class PrefixActions extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      showDeleteConfirmation: false,
+    }
+  }
+  handleDownload(e) {
+    e.preventDefault()
+    const { object, downloadPrefix } = this.props
+    downloadPrefix(object.name)
+  }
+  deleteObject() {
+    const { object, deleteObject } = this.props
+    deleteObject(object.name)
+  }
+  showDeleteConfirmModal(e) {
+    e.preventDefault()
+    this.setState({ showDeleteConfirmation: true })
+  }
+  hideDeleteConfirmModal() {
+    this.setState({
+      showDeleteConfirmation: false,
+    })
+  }
+  render() {
+    const { object, showShareObjectModal, shareObjectName } = this.props
+    return (
+      <Dropdown id={`obj-actions-${object.name}`}>
+        <Dropdown.Toggle noCaret className="fia-toggle" />
+        <Dropdown.Menu>
+          <a
+            href=""
+            className="fiad-action"
+            title="Download as zip"
+            onClick={this.handleDownload.bind(this)}
+          >
+            <i className="fas fa-cloud-download-alt" />
+          </a>
+          <a
+            href=""
+            className="fiad-action"
+            title="Delete"
+            onClick={this.showDeleteConfirmModal.bind(this)}
+          >
+            <i className="fas fa-trash-alt" />
+          </a>
+        </Dropdown.Menu>
+        {this.state.showDeleteConfirmation && (
+          <DeleteObjectConfirmModal
+            deleteObject={this.deleteObject.bind(this)}
+            hideDeleteConfirmModal={this.hideDeleteConfirmModal.bind(this)}
+          />
+        )}
+      </Dropdown>
+    )
+  }
+}
+
+const mapStateToProps = (state, ownProps) => {
+  return {
+    object: ownProps.object,
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    downloadPrefix: object => dispatch(actions.downloadPrefix(object)),
+    deleteObject: (object) => dispatch(actions.deleteObject(object)),
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(PrefixActions)

browser/app/js/objects/PrefixContainer.js

@@ -0,0 +1,55 @@
+/*
+ * MinIO Object Storage (c) 2021 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 ObjectItem from "./ObjectItem"
+import PrefixActions from "./PrefixActions"
+import * as actionsObjects from "./actions"
+import { getCheckedList } from "./selectors"
+
+export const PrefixContainer = ({
+  object,
+  currentPrefix,
+  checkedObjectsCount,
+  selectPrefix
+}) => {
+  const props = {
+    name: object.name,
+    contentType: object.contentType,
+    onClick: () => selectPrefix(`${currentPrefix}${object.name}`)
+  }
+  if (checkedObjectsCount == 0) {
+    props.actionButtons = <PrefixActions object={object} />
+  }
+  return <ObjectItem {...props} />
+}
+
+const mapStateToProps = (state, ownProps) => {
+  return {
+    object: ownProps.object,
+    currentPrefix: state.objects.currentPrefix,
+    checkedObjectsCount: getCheckedList(state).length
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    selectPrefix: prefix => dispatch(actionsObjects.selectPrefix(prefix))
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(PrefixContainer)

browser/app/js/objects/PreviewObjectModal.js

@@ -0,0 +1,68 @@
+/*
+ * MinIO Object Storage (c) 2021 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, ModalHeader, ModalBody } from "react-bootstrap"
+
+class PreviewObjectModal extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      url: "",
+    }
+  }
+
+  componentDidMount() {
+    this.props.getObjectURL(this.props.object.name, (url) => {
+      this.setState({
+        url: url,
+      })
+    })
+  }
+
+  render() {
+    const { hidePreviewModal } = this.props
+    return (
+      <Modal
+        show={true}
+        animation={false}
+        onHide={hidePreviewModal}
+        bsSize="large"
+      >
+        <ModalHeader>Preview</ModalHeader>
+        <ModalBody>
+          <div className="input-group">
+            {this.state.url && (
+              <object data={this.state.url} style={{ display: "block", width: "100%" }}>
+                <h3 style={{ textAlign: "center", display: "block", width: "100%" }}>
+                  Do not have read permissions to preview "{this.props.object.name}"
+                </h3>
+              </object>
+            )}
+          </div>
+        </ModalBody>
+        <div className="modal-footer">
+          {
+            <button className="btn btn-link" onClick={hidePreviewModal}>
+              Cancel
+            </button>
+          }
+        </div>
+      </Modal>
+    )
+  }
+}
+export default PreviewObjectModal

browser/app/js/objects/ShareObjectModal.js

@@ -0,0 +1,216 @@
+/*
+ * MinIO Object Storage (c) 2021 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, ModalBody } from "react-bootstrap"
+import CopyToClipboard from "react-copy-to-clipboard"
+import web from "../web"
+import * as objectsActions from "./actions"
+import * as alertActions from "../alert/actions"
+import {
+  SHARE_OBJECT_EXPIRY_DAYS,
+  SHARE_OBJECT_EXPIRY_HOURS,
+  SHARE_OBJECT_EXPIRY_MINUTES
+} from "../constants"
+import QRCode from "react-qr-code";
+
+export class ShareObjectModal extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      expiry: {
+        days: SHARE_OBJECT_EXPIRY_DAYS,
+        hours: SHARE_OBJECT_EXPIRY_HOURS,
+        minutes: SHARE_OBJECT_EXPIRY_MINUTES
+      }
+    }
+    this.expiryRange = {
+      days: { min: 0, max: 7 },
+      hours: { min: 0, max: 23 },
+      minutes: { min: 0, max: 59 }
+    }
+  }
+  updateExpireValue(param, inc) {
+    let expiry = Object.assign({}, this.state.expiry)
+
+    // Not allowing any increments if days is already max
+    if (expiry.days == this.expiryRange["days"].max && inc > 0) {
+      return
+    }
+
+    const { min, max } = this.expiryRange[param]
+    expiry[param] = expiry[param] + inc
+    if (expiry[param] < min || expiry[param] > max) {
+      return
+    }
+
+    if (expiry.days == this.expiryRange["days"].max) {
+      expiry.hours = 0
+      expiry.minutes = 0
+    } else if (expiry.days + expiry.hours + expiry.minutes == 0) {
+      expiry.days = this.expiryRange["days"].max
+    }
+
+    this.setState({
+      expiry
+    })
+
+    const { object, shareObject } = this.props
+    shareObject(object.name, expiry.days, expiry.hours, expiry.minutes)
+  }
+  onUrlCopied() {
+    const { showCopyAlert, hideShareObject } = this.props
+    showCopyAlert("Link copied to clipboard!")
+    hideShareObject()
+  }
+  render() {
+    const { shareObjectDetails, hideShareObject } = this.props
+    const url = `${window.location.protocol}//${shareObjectDetails.url}`
+    return (
+      <Modal
+        show={true}
+        animation={false}
+        onHide={hideShareObject}
+        bsSize="small"
+      >
+        <ModalHeader>Share Object</ModalHeader>
+        <ModalBody>
+          <div className="input-group copy-text">
+            <QRCode value={url} size={128}/>
+            <label>Shareable Link</label>
+            <input
+              type="text"
+              ref={node => (this.copyTextInput = node)}
+              readOnly="readOnly"
+              value={url}
+              onClick={() => this.copyTextInput.select()}
+            />
+          </div>
+          {shareObjectDetails.showExpiryDate && (
+            <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
+                  id="increase-days"
+                  className="set-expire-increase"
+                  onClick={() => this.updateExpireValue("days", 1)}
+                />
+                <div className="set-expire-title">Days</div>
+                <div className="set-expire-value">
+                  <input
+                    ref="expireDays"
+                    type="number"
+                    min={0}
+                    max={7}
+                    value={this.state.expiry.days}
+                    readOnly="readOnly"
+                  />
+                </div>
+                <i
+                  id="decrease-days"
+                  className="set-expire-decrease"
+                  onClick={() => this.updateExpireValue("days", -1)}
+                />
+              </div>
+              <div className="set-expire-item">
+                <i
+                  id="increase-hours"
+                  className="set-expire-increase"
+                  onClick={() => this.updateExpireValue("hours", 1)}
+                />
+                <div className="set-expire-title">Hours</div>
+                <div className="set-expire-value">
+                  <input
+                    ref="expireHours"
+                    type="number"
+                    min={0}
+                    max={23}
+                    value={this.state.expiry.hours}
+                    readOnly="readOnly"
+                  />
+                </div>
+                <i
+                  className="set-expire-decrease"
+                  id="decrease-hours"
+                  onClick={() => this.updateExpireValue("hours", -1)}
+                />
+              </div>
+              <div className="set-expire-item">
+                <i
+                  id="increase-minutes"
+                  className="set-expire-increase"
+                  onClick={() => this.updateExpireValue("minutes", 1)}
+                />
+                <div className="set-expire-title">Minutes</div>
+                <div className="set-expire-value">
+                  <input
+                    ref="expireMins"
+                    type="number"
+                    min={0}
+                    max={59}
+                    value={this.state.expiry.minutes}
+                    readOnly="readOnly"
+                  />
+                </div>
+                <i
+                  id="decrease-minutes"
+                  className="set-expire-decrease"
+                  onClick={() => this.updateExpireValue("minutes", -1)}
+                />
+              </div>
+            </div>
+          </div>
+          )}
+        </ModalBody>
+        <div className="modal-footer">
+          <CopyToClipboard
+            text={url}
+            onCopy={this.onUrlCopied.bind(this)}
+          >
+            <button className="btn btn-success">Copy Link</button>
+          </CopyToClipboard>
+          <button className="btn btn-link" onClick={hideShareObject}>
+            Cancel
+          </button>
+        </div>
+      </Modal>
+    )
+  }
+}
+
+const mapStateToProps = (state, ownProps) => {
+  return {
+    object: ownProps.object,
+    shareObjectDetails: state.objects.shareObject
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    shareObject: (object, days, hours, minutes) =>
+      dispatch(objectsActions.shareObject(object, days, hours, minutes)),
+    hideShareObject: () => dispatch(objectsActions.hideShareObject()),
+    showCopyAlert: message =>
+      dispatch(alertActions.set({ type: "success", message: message }))
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(ShareObjectModal)

browser/app/js/objects/__tests__/DeleteObjectConfirmModal.test.js

@@ -0,0 +1,45 @@
+/*
+ * MinIO Object Storage (c) 2021 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 { DeleteObjectConfirmModal } from "../DeleteObjectConfirmModal"
+
+describe("DeleteObjectConfirmModal", () => {
+  it("should render without crashing", () => {
+    shallow(<DeleteObjectConfirmModal />)
+  })
+
+  it("should call deleteObject when Delete is clicked", () => {
+    const deleteObject = jest.fn()
+    const wrapper = shallow(
+      <DeleteObjectConfirmModal deleteObject={deleteObject} />
+    )
+    wrapper.find("ConfirmModal").prop("okHandler")()
+    expect(deleteObject).toHaveBeenCalled()
+  })
+
+  it("should call hideDeleteConfirmModal when Cancel is clicked", () => {
+    const hideDeleteConfirmModal = jest.fn()
+    const wrapper = shallow(
+      <DeleteObjectConfirmModal
+        hideDeleteConfirmModal={hideDeleteConfirmModal}
+      />
+    )
+    wrapper.find("ConfirmModal").prop("cancelHandler")()
+    expect(hideDeleteConfirmModal).toHaveBeenCalled()
+  })
+})

browser/app/js/objects/__tests__/ObjectActions.test.js

@@ -0,0 +1,165 @@
+/*
+ * MinIO Object Storage (c) 2021 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 { ObjectActions } from "../ObjectActions"
+
+describe("ObjectActions", () => {
+  it("should render without crashing", () => {
+    shallow(<ObjectActions object={{ name: "obj1" }} currentPrefix={"pre1/"} />)
+  })
+
+  it("should show DeleteObjectConfirmModal when delete action is clicked", () => {
+    const wrapper = shallow(
+      <ObjectActions object={{ name: "obj1" }} currentPrefix={"pre1/"} />
+    )
+    wrapper
+      .find("a")
+      .last()
+      .simulate("click", { preventDefault: jest.fn() })
+    expect(wrapper.state("showDeleteConfirmation")).toBeTruthy()
+    expect(wrapper.find("DeleteObjectConfirmModal").length).toBe(1)
+  })
+
+  it("should hide DeleteObjectConfirmModal when Cancel button is clicked", () => {
+    const wrapper = shallow(
+      <ObjectActions object={{ name: "obj1" }} currentPrefix={"pre1/"} />
+    )
+    wrapper
+      .find("a")
+      .last()
+      .simulate("click", { preventDefault: jest.fn() })
+    wrapper.find("DeleteObjectConfirmModal").prop("hideDeleteConfirmModal")()
+    wrapper.update()
+    expect(wrapper.state("showDeleteConfirmation")).toBeFalsy()
+    expect(wrapper.find("DeleteObjectConfirmModal").length).toBe(0)
+  })
+
+  it("should call deleteObject with object name", () => {
+    const deleteObject = jest.fn()
+    const wrapper = shallow(
+      <ObjectActions
+        object={{ name: "obj1" }}
+        currentPrefix={"pre1/"}
+        deleteObject={deleteObject}
+      />
+    )
+    wrapper
+      .find("a")
+      .last()
+      .simulate("click", { preventDefault: jest.fn() })
+    wrapper.find("DeleteObjectConfirmModal").prop("deleteObject")()
+    expect(deleteObject).toHaveBeenCalledWith("obj1")
+  })
+
+
+  it("should call downloadObject when single object is selected and download button is clicked", () => {
+    const downloadObject = jest.fn()
+    const wrapper = shallow(
+      <ObjectActions
+        object={{ name: "obj1" }}
+        currentPrefix={"pre1/"}
+        downloadObject={downloadObject} />
+    )
+    wrapper
+      .find("a")
+      .at(1)
+      .simulate("click", { preventDefault: jest.fn() })
+    expect(downloadObject).toHaveBeenCalled()
+  })
+
+
+  it("should show PreviewObjectModal when preview action is clicked", () => {
+    const wrapper = shallow(
+      <ObjectActions 
+      object={{ name: "obj1", contentType: "image/jpeg"}} 
+      currentPrefix={"pre1/"} />
+    )
+    wrapper
+      .find("a")
+      .at(1)
+      .simulate("click", { preventDefault: jest.fn() })
+    expect(wrapper.state("showPreview")).toBeTruthy()
+    expect(wrapper.find("PreviewObjectModal").length).toBe(1)
+  })
+
+  it("should hide PreviewObjectModal when cancel button is clicked", () => {
+    const wrapper = shallow(
+      <ObjectActions 
+        object={{ name: "obj1" , contentType: "image/jpeg"}}
+        currentPrefix={"pre1/"} />
+    )
+    wrapper
+      .find("a")
+      .at(1)
+      .simulate("click", { preventDefault: jest.fn() })
+    wrapper.find("PreviewObjectModal").prop("hidePreviewModal")()
+    wrapper.update()
+    expect(wrapper.state("showPreview")).toBeFalsy()
+    expect(wrapper.find("PreviewObjectModal").length).toBe(0)
+  })
+  it("should not show PreviewObjectModal when preview action is clicked if object is not an image", () => {
+    const wrapper = shallow(
+      <ObjectActions 
+      object={{ name: "obj1"}} 
+      currentPrefix={"pre1/"} />
+    )
+    expect(wrapper
+      .find("a")
+      .length).toBe(3) // find only the other 2
+  })
+
+  it("should call shareObject with object and expiry", () => {
+    const shareObject = jest.fn()
+    const wrapper = shallow(
+      <ObjectActions
+        object={{ name: "obj1" }}
+        currentPrefix={"pre1/"}
+        shareObject={shareObject}
+      />
+    )
+    wrapper
+      .find("a")
+      .first()
+      .simulate("click", { preventDefault: jest.fn() })
+    expect(shareObject).toHaveBeenCalledWith("obj1", 5, 0, 0)
+  })
+
+  it("should render ShareObjectModal when an object is shared", () => {
+    const wrapper = shallow(
+      <ObjectActions
+        object={{ name: "obj1" }}
+        currentPrefix={"pre1/"}
+        showShareObjectModal={true}
+        shareObjectName={"obj1"}
+      />
+    )
+    expect(wrapper.find("Connect(ShareObjectModal)").length).toBe(1)
+  })
+
+  it("shouldn't render ShareObjectModal when the names of the objects don't match", () => {
+    const wrapper = shallow(
+      <ObjectActions
+        object={{ name: "obj1" }}
+        currentPrefix={"pre1/"}
+        showShareObjectModal={true}
+        shareObjectName={"obj2"}
+      />
+    )
+    expect(wrapper.find("Connect(ShareObjectModal)").length).toBe(0)
+  })
+})

browser/app/js/objects/__tests__/ObjectContainer.test.js

@@ -0,0 +1,49 @@
+/*
+ * MinIO Object Storage (c) 2021 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 { ObjectContainer } from "../ObjectContainer"
+
+describe("ObjectContainer", () => {
+  it("should render without crashing", () => {
+    shallow(<ObjectContainer object={{ name: "test1.jpg" }} />)
+  })
+
+  it("should render ObjectItem with props", () => {
+    const wrapper = shallow(<ObjectContainer object={{ name: "test1.jpg" }} />)
+    expect(wrapper.find("Connect(ObjectItem)").length).toBe(1)
+    expect(wrapper.find("Connect(ObjectItem)").prop("name")).toBe("test1.jpg")
+  })
+
+  it("should pass actions to ObjectItem", () => {
+    const wrapper = shallow(
+      <ObjectContainer object={{ name: "test1.jpg" }} checkedObjectsCount={0} />
+    )
+    expect(wrapper.find("Connect(ObjectItem)").prop("actionButtons")).not.toBe(
+      undefined
+    )
+  })
+
+  it("should pass empty actions to ObjectItem when checkedObjectCount is more than 0", () => {
+    const wrapper = shallow(
+      <ObjectContainer object={{ name: "test1.jpg" }} checkedObjectsCount={1} />
+    )
+    expect(wrapper.find("Connect(ObjectItem)").prop("actionButtons")).toBe(
+      undefined
+    )
+  })
+})

browser/app/js/objects/__tests__/ObjectItem.test.js

@@ -0,0 +1,76 @@
+/*
+ * MinIO Object Storage (c) 2021 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 { ObjectItem } from "../ObjectItem"
+
+describe("ObjectItem", () => {
+  it("should render without crashing", () => {
+    shallow(<ObjectItem name={"test"} />)
+  })
+
+  it("should render with content type", () => {
+    const wrapper = shallow(<ObjectItem name={"test.jpg"} contentType={""} />)
+    expect(wrapper.prop("data-type")).toBe("image")
+  })
+
+  it("shouldn't call onClick when the object isclicked", () => {
+    const onClick = jest.fn()
+    const checkObject = jest.fn()
+    const wrapper = shallow(
+      <ObjectItem name={"test"} checkObject={checkObject} />
+    )
+    wrapper.find("a").simulate("click", { preventDefault: jest.fn() })
+    expect(onClick).not.toHaveBeenCalled()
+  })
+
+  it("should call onClick when the folder isclicked", () => {
+    const onClick = jest.fn()
+    const wrapper = shallow(<ObjectItem name={"test/"} onClick={onClick} />)
+    wrapper.find("a").simulate("click", { preventDefault: jest.fn() })
+    expect(onClick).toHaveBeenCalled()
+  })
+
+  it("should call checkObject when the object/prefix is checked", () => {
+    const checkObject = jest.fn()
+    const wrapper = shallow(
+      <ObjectItem name={"test"} checked={false} checkObject={checkObject} />
+    )
+    wrapper.find("input[type='checkbox']").simulate("change")
+    expect(checkObject).toHaveBeenCalledWith("test")
+  })
+
+  it("should render checked checkbox", () => {
+    const wrapper = shallow(<ObjectItem name={"test"} checked={true} />)
+    expect(wrapper.find("input[type='checkbox']").prop("checked")).toBeTruthy()
+  })
+
+  it("should call uncheckObject when the object/prefix is unchecked", () => {
+    const checkObject = jest.fn()
+    const uncheckObject = jest.fn()
+    const wrapper = shallow(
+      <ObjectItem
+        name={"test"}
+        checked={true}
+        checkObject={checkObject}
+        uncheckObject={uncheckObject}
+      />
+    )
+    wrapper.find("input[type='checkbox']").simulate("change")
+    expect(uncheckObject).toHaveBeenCalledWith("test")
+  })
+})

browser/app/js/objects/__tests__/ObjectsBulkActions.test.js

@@ -0,0 +1,100 @@
+/*
+ * MinIO Object Storage (c) 2021 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 { ObjectsBulkActions } from "../ObjectsBulkActions"
+
+describe("ObjectsBulkActions", () => {
+  it("should render without crashing", () => {
+    shallow(<ObjectsBulkActions checkedObjects={[]} />)
+  })
+
+  it("should show actions when checkObjectsCount is more than 0", () => {
+    const wrapper = shallow(<ObjectsBulkActions checkedObjects={["test"]} />)
+    expect(wrapper.hasClass("list-actions-toggled")).toBeTruthy()
+  })
+
+  it("should call downloadObject when single object is selected and download button is clicked", () => {
+    const downloadObject = jest.fn()
+    const clearChecked = jest.fn()
+    const wrapper = shallow(
+      <ObjectsBulkActions
+        checkedObjects={["test"]}
+        downloadObject={downloadObject}
+        clearChecked={clearChecked}
+      />
+    )
+    wrapper.find("#download-checked").simulate("click")
+    expect(downloadObject).toHaveBeenCalled()
+  })
+
+  it("should call downloadChecked when a folder is selected and download button is clicked", () => {
+    const downloadChecked = jest.fn()
+    const wrapper = shallow(
+      <ObjectsBulkActions
+        checkedObjects={["test/"]}
+        downloadChecked={downloadChecked}
+      />
+    )
+    wrapper.find("#download-checked").simulate("click")
+    expect(downloadChecked).toHaveBeenCalled()
+  })
+
+  it("should call downloadChecked when multiple objects are selected and download button is clicked", () => {
+    const downloadChecked = jest.fn()
+    const wrapper = shallow(
+      <ObjectsBulkActions
+        checkedObjects={["test1", "test2"]}
+        downloadChecked={downloadChecked}
+      />
+    )
+    wrapper.find("#download-checked").simulate("click")
+    expect(downloadChecked).toHaveBeenCalled()
+  })
+
+  it("should call clearChecked when close button is clicked", () => {
+    const clearChecked = jest.fn()
+    const wrapper = shallow(
+      <ObjectsBulkActions checkedObjects={["test"]} clearChecked={clearChecked} />
+    )
+    wrapper.find("#close-bulk-actions").simulate("click")
+    expect(clearChecked).toHaveBeenCalled()
+  })
+
+  it("shoud show DeleteObjectConfirmModal when delete-checked button is clicked", () => {
+    const wrapper = shallow(<ObjectsBulkActions checkedObjects={["test"]} />)
+    wrapper.find("#delete-checked").simulate("click")
+    wrapper.update()
+    expect(wrapper.find("DeleteObjectConfirmModal").length).toBe(1)
+  })
+
+  it("shoud call deleteChecked when Delete is clicked on confirmation modal", () => {
+    const deleteChecked = jest.fn()
+    const wrapper = shallow(
+      <ObjectsBulkActions
+        checkedObjects={["test"]}
+        deleteChecked={deleteChecked}
+      />
+    )
+    wrapper.find("#delete-checked").simulate("click")
+    wrapper.update()
+    wrapper.find("DeleteObjectConfirmModal").prop("deleteObject")()
+    expect(deleteChecked).toHaveBeenCalled()
+    wrapper.update()
+    expect(wrapper.find("DeleteObjectConfirmModal").length).toBe(0)
+  })
+})

browser/app/js/objects/__tests__/ObjectsHeader.test.js

@@ -0,0 +1,122 @@
+/*
+ * MinIO Object Storage (c) 2021 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 { ObjectsHeader } from "../ObjectsHeader"
+import { SORT_ORDER_ASC, SORT_ORDER_DESC } from "../../constants"
+
+describe("ObjectsHeader", () => {
+  it("should render without crashing", () => {
+    const sortObjects = jest.fn()
+    shallow(<ObjectsHeader sortObjects={sortObjects} />)
+  })
+
+  it("should render the name column with asc class when objects are sorted by name asc", () => {
+    const sortObjects = jest.fn()
+    const wrapper = shallow(
+      <ObjectsHeader
+        sortObjects={sortObjects}
+        sortedByName={true}
+        sortOrder={SORT_ORDER_ASC}
+      />
+    )
+    expect(
+      wrapper.find("#sort-by-name i").hasClass("fa-sort-alpha-down")
+    ).toBeTruthy()
+  })
+
+  it("should render the name column with desc class when objects are sorted by name desc", () => {
+    const sortObjects = jest.fn()
+    const wrapper = shallow(
+      <ObjectsHeader
+        sortObjects={sortObjects}
+        sortedByName={true}
+        sortOrder={SORT_ORDER_DESC}
+      />
+    )
+    expect(
+      wrapper.find("#sort-by-name i").hasClass("fa-sort-alpha-down-alt")
+    ).toBeTruthy()
+  })
+
+  it("should render the size column with asc class when objects are sorted by size asc", () => {
+    const sortObjects = jest.fn()
+    const wrapper = shallow(
+      <ObjectsHeader
+        sortObjects={sortObjects}
+        sortedBySize={true}
+        sortOrder={SORT_ORDER_ASC}
+      />
+    )
+    expect(
+      wrapper.find("#sort-by-size i").hasClass("fa-sort-amount-down-alt")
+    ).toBeTruthy()
+  })
+
+  it("should render the size column with desc class when objects are sorted by size desc", () => {
+    const sortObjects = jest.fn()
+    const wrapper = shallow(
+      <ObjectsHeader
+        sortObjects={sortObjects}
+        sortedBySize={true}
+        sortOrder={SORT_ORDER_DESC}
+      />
+    )
+    expect(
+      wrapper.find("#sort-by-size i").hasClass("fa-sort-amount-down")
+    ).toBeTruthy()
+  })
+
+  it("should render the date column with asc class when objects are sorted by date asc", () => {
+    const sortObjects = jest.fn()
+    const wrapper = shallow(
+      <ObjectsHeader
+        sortObjects={sortObjects}
+        sortedByLastModified={true}
+        sortOrder={SORT_ORDER_ASC}
+      />
+    )
+    expect(
+      wrapper.find("#sort-by-last-modified i").hasClass("fa-sort-numeric-down")
+    ).toBeTruthy()
+  })
+
+  it("should render the date column with desc class when objects are sorted by date desc", () => {
+    const sortObjects = jest.fn()
+    const wrapper = shallow(
+      <ObjectsHeader
+        sortObjects={sortObjects}
+        sortedByLastModified={true}
+        sortOrder={SORT_ORDER_DESC}
+      />
+    )
+    expect(
+      wrapper.find("#sort-by-last-modified i").hasClass("fa-sort-numeric-down-alt")
+    ).toBeTruthy()
+  })
+
+  it("should call sortObjects when a column is clicked", () => {
+    const sortObjects = jest.fn()
+    const wrapper = shallow(<ObjectsHeader sortObjects={sortObjects} />)
+    wrapper.find("#sort-by-name").simulate("click")
+    expect(sortObjects).toHaveBeenCalledWith("name")
+    wrapper.find("#sort-by-size").simulate("click")
+    expect(sortObjects).toHaveBeenCalledWith("size")
+    wrapper.find("#sort-by-last-modified").simulate("click")
+    expect(sortObjects).toHaveBeenCalledWith("last-modified")
+  })
+})

browser/app/js/objects/__tests__/ObjectsList.test.js

@@ -0,0 +1,39 @@
+/*
+ * MinIO Object Storage (c) 2021 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 { ObjectsList } from "../ObjectsList"
+
+describe("ObjectsList", () => {
+  it("should render without crashing", () => {
+    shallow(<ObjectsList objects={[]} />)
+  })
+
+  it("should render ObjectContainer for every object", () => {
+    const wrapper = shallow(
+      <ObjectsList objects={[{ name: "test1.jpg" }, { name: "test2.jpg" }]} />
+    )
+    expect(wrapper.find("Connect(ObjectContainer)").length).toBe(2)
+  })
+
+  it("should render PrefixContainer for every prefix", () => {
+    const wrapper = shallow(
+      <ObjectsList objects={[{ name: "abc/" }, { name: "xyz/" }]} />
+    )
+    expect(wrapper.find("Connect(PrefixContainer)").length).toBe(2)
+  })
+})

browser/app/js/objects/__tests__/ObjectsListContainer.test.js

@@ -0,0 +1,49 @@
+/*
+ * MinIO Object Storage (c) 2021 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 { ObjectsListContainer } from "../ObjectsListContainer"
+
+describe("ObjectsList", () => {
+  it("should render without crashing", () => {
+    shallow(<ObjectsListContainer filteredObjects={[]} />)
+  })
+
+  it("should render ObjectsList with objects", () => {
+    const wrapper = shallow(
+      <ObjectsListContainer
+        filteredObjects={[{ name: "test1.jpg" }, { name: "test2.jpg" }]}
+      />
+    )
+    expect(wrapper.find("ObjectsList").length).toBe(1)
+    expect(wrapper.find("ObjectsList").prop("objects")).toEqual([
+      { name: "test1.jpg" },
+      { name: "test2.jpg" }
+    ])
+  })
+
+  it("should show the loading indicator when the objects are being loaded", () => {
+    const wrapper = shallow(
+      <ObjectsListContainer
+        currentBucket="test1"
+        filteredObjects={[]}
+        listLoading={true}
+      />
+    )
+    expect(wrapper.find(".loading").exists()).toBeTruthy()
+  })
+})