Revert "deprecate embedded browser (#12163)"

This reverts commit 736d8cbac4.

Bring contrib files for older contributions

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