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/browser/Login.js

@@ -21,7 +21,6 @@ import logo from "../../img/logo.svg"
 import Alert from "../alert/Alert"
 import * as actionsAlert from "../alert/actions"
 import InputGroup from "./InputGroup"
-import { minioBrowserPrefix } from "../constants"
 import web from "../web"
 import { Redirect } from "react-router-dom"
 
@@ -46,7 +45,7 @@ export class Login extends React.Component {
         password: document.getElementById("secretKey").value
       })
       .then(res => {
-        history.push(minioBrowserPrefix)
+        history.push("/")
       })
       .catch(e => {
         showAlert("danger", e.message)
@@ -67,7 +66,7 @@ export class Login extends React.Component {
   render() {
     const { clearAlert, alert } = this.props
     if (web.LoggedIn()) {
-      return <Redirect to={minioBrowserPrefix} />
+      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.

browser/app/js/browser/MainActions.js

@@ -17,10 +17,16 @@
 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 = ({ uploadFile, showMakeBucketModal }) => {
+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>
@@ -31,47 +37,59 @@ export const MainActions = ({ uploadFile, showMakeBucketModal }) => {
     e.target.value = null
   }
 
-  return (
-    <Dropdown dropup className="feb-actions" id="fe-action-toggle">
-      <Dropdown.Toggle noCaret className="feba-toggle">
-        <span>
-          <i className="fa fa-plus" />
-        </span>
-      </Dropdown.Toggle>
-      <Dropdown.Menu>
-        <OverlayTrigger placement="left" overlay={uploadTooltip}>
-          <a href="#" className="feba-btn feba-upload">
-            <input
-              type="file"
-              onChange={onFileUpload}
-              style={{ display: "none" }}
-              id="file-input"
-            />
-            <label htmlFor="file-input">
-              {" "}
-              <i className="fa fa-cloud-upload" />{" "}
-            </label>
-          </a>
-        </OverlayTrigger>
-        <OverlayTrigger placement="left" overlay={makeBucketTooltip}>
-          <a
-            href="#"
-            id="show-make-bucket"
-            className="feba-btn feba-bucket"
-            onClick={e => {
-              e.preventDefault()
-              showMakeBucketModal()
-            }}
-          >
-            <i className="fa fa-hdd-o" />
-          </a>
-        </OverlayTrigger>
-      </Dropdown.Menu>
-    </Dropdown>
-  )
+  const loggedIn = web.LoggedIn()
+
+  if (loggedIn || prefixWritable) {
+    return (
+      <Dropdown dropup className="feb-actions" id="fe-action-toggle">
+        <Dropdown.Toggle noCaret className="feba-toggle">
+          <span>
+            <i className="fa fa-plus" />
+          </span>
+        </Dropdown.Toggle>
+        <Dropdown.Menu>
+          <OverlayTrigger placement="left" overlay={uploadTooltip}>
+            <a href="#" className="feba-btn feba-upload">
+              <input
+                type="file"
+                onChange={onFileUpload}
+                style={{ display: "none" }}
+                id="file-input"
+              />
+              <label htmlFor="file-input">
+                {" "}
+                <i className="fa fa-cloud-upload" />{" "}
+              </label>
+            </a>
+          </OverlayTrigger>
+          {loggedIn && (
+            <OverlayTrigger placement="left" overlay={makeBucketTooltip}>
+              <a
+                href="#"
+                id="show-make-bucket"
+                className="feba-btn feba-bucket"
+                onClick={e => {
+                  e.preventDefault()
+                  showMakeBucketModal()
+                }}
+              >
+                <i className="fa fa-hdd-o" />
+              </a>
+            </OverlayTrigger>
+          )}
+        </Dropdown.Menu>
+      </Dropdown>
+    )
+  } else {
+    return <noscript />
+  }
 }
 
-const mapStateToProps = state => state
+const mapStateToProps = state => {
+  return {
+    prefixWritable: getPrefixWritable(state)
+  }
+}
 
 const mapDispatchToProps = dispatch => {
   return {

browser/app/js/browser/SideBar.js

@@ -25,6 +25,7 @@ import BucketSearch from "../buckets/BucketSearch"
 import BucketList from "../buckets/BucketList"
 import Host from "./Host"
 import * as actionsCommon from "./actions"
+import web from "../web"
 
 export const SideBar = ({ sidebarOpen, clickOutside }) => {
   return (
@@ -40,7 +41,7 @@ export const SideBar = ({ sidebarOpen, clickOutside }) => {
           <h2>Minio Browser</h2>
         </div>
         <div className="fes-list">
-          <BucketSearch />
+          {web.LoggedIn() && <BucketSearch />}
           <BucketList />
         </div>
         <Host />

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

@@ -18,11 +18,37 @@ 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(

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

@@ -18,11 +18,20 @@ 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} />)