allow non-loggedin users to access public bucket (#5570)

* conditionally render main action buttons

- Make bucket action will be available only for loggedIn users
- File upload button will be avaialble for loggedIn users
  and non-loggedIn users if the prefix is writable

* select the bucket and prefix from the url

When the url contains bucket and prefix, it will be selected
by default instead of the first bucket from the list.

* show BucketSearch only for LoggedIn users

* allow non-LoggedIn users to access public bucket

* removed unused Router imports

* fix test case failures in BucketList.test.js

* remove dupicate minioBrowserPrefix from url

since history is already initialized with minioBrowserPrefix,
no need to use it in push or replace

* remove unused match from App component

* remove unused minioBrowserPrefix imports

browser/app/js/buckets/BucketList.js

@@ -20,11 +20,22 @@ import { Scrollbars } from "react-custom-scrollbars"
 import * as actionsBuckets from "./actions"
 import { getVisibleBuckets } from "./selectors"
 import BucketContainer from "./BucketContainer"
+import web from "../web"
+import history from "../history"
+import { pathSlice } from "../utils"
 
 export class BucketList extends React.Component {
   componentWillMount() {
-    const { fetchBuckets } = this.props
-    fetchBuckets()
+    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)
+      }
+    }
   }
   render() {
     const { visibleBuckets } = this.props
@@ -52,7 +63,9 @@ const mapStateToProps = state => {
 
 const mapDispatchToProps = dispatch => {
   return {
-    fetchBuckets: () => dispatch(actionsBuckets.fetchBuckets())
+    fetchBuckets: () => dispatch(actionsBuckets.fetchBuckets()),
+    setBucketList: buckets => dispatch(actionsBuckets.setList(buckets)),
+    selectBucket: bucket => dispatch(actionsBuckets.selectBucket(bucket))
   }
 }
 

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

@@ -16,8 +16,16 @@
 
 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()
@@ -31,4 +39,19 @@ describe("BucketList", () => {
     )
     expect(fetchBuckets).toHaveBeenCalled()
   })
+
+  it("should call setBucketList and selectBucket before component is mounted when the user has not loggedIn", () => {
+    const setBucketList = jest.fn()
+    const selectBucket = jest.fn()
+    history.push("/bk1/pre1")
+    const wrapper = shallow(
+      <BucketList
+        visibleBuckets={[]}
+        setBucketList={setBucketList}
+        selectBucket={selectBucket}
+      />
+    )
+    expect(setBucketList).toHaveBeenCalledWith(["bk1"])
+    expect(selectBucket).toHaveBeenCalledWith("bk1", "pre1")
+  })
 })

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

@@ -18,6 +18,7 @@ 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(() => {
@@ -36,7 +37,7 @@ const middlewares = [thunk]
 const mockStore = configureStore(middlewares)
 
 describe("Buckets actions", () => {
-  it("creates buckets/SET_LIST and buckets/SET_CURRENT_BUCKET after fetching the buckets", () => {
+  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"] },
@@ -48,7 +49,35 @@ describe("Buckets actions", () => {
     })
   })
 
-  it("should update browser url and creates buckets/SET_CURRENT_BUCKET action when selectBucket is called", () => {
+  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" }
@@ -56,7 +85,6 @@ describe("Buckets actions", () => {
     store.dispatch(actionsBuckets.selectBucket("test1"))
     const actions = store.getActions()
     expect(actions).toEqual(expectedActions)
-    expect(window.location.pathname).toBe("/test1")
   })
 
   it("creates buckets/SHOW_MAKE_BUCKET_MODAL for showMakeBucketModal", () => {

browser/app/js/buckets/actions.js

@@ -18,6 +18,7 @@ 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"
@@ -31,7 +32,12 @@ export const fetchBuckets = () => {
       const buckets = res.buckets ? res.buckets.map(bucket => bucket.name) : []
       dispatch(setList(buckets))
       if (buckets.length > 0) {
-        dispatch(selectBucket(buckets[0]))
+        const { bucket, prefix } = pathSlice(history.location.pathname)
+        if (bucket && buckets.indexOf(bucket) > -1) {
+          dispatch(selectBucket(bucket, prefix))
+        } else {
+          dispatch(selectBucket(buckets[0]))
+        }
       }
     })
   }
@@ -51,11 +57,10 @@ export const setFilter = filter => {
   }
 }
 
-export const selectBucket = bucket => {
+export const selectBucket = (bucket, prefix) => {
   return function(dispatch) {
     dispatch(setCurrentBucket(bucket))
-    dispatch(objectsActions.selectPrefix(""))
-    history.push(`/${bucket}`)
+    dispatch(objectsActions.selectPrefix(prefix || ""))
   }
 }