removed duplicate route components from browser (#5584)

All routes '/', '/:bucket/', '/:bucket/*' render the same
component. Instead we could just have a single route like following which
combines all the above routes

'/:bucket?/*'

bucket is optional here, so it can cover '/'

browser/app/js/App.js

@@ -19,28 +19,12 @@ import { Route, Switch, Redirect } from "react-router-dom"
 import Browser from "./browser/Browser"
 import Login from "./browser/Login"
 import web from "./web"
-import { minioBrowserPrefix } from "./constants"
-
-const AuthorizedRoute = ({ component: Component, ...rest }) => (
-  <Route
-    {...rest}
-    render={props =>
-      web.LoggedIn() ? (
-        <Component {...props} />
-      ) : (
-        <Redirect to={`${minioBrowserPrefix}/login`} />
-      )
-    }
-  />
-)
 
 export const App = () => {
   return (
     <Switch>
-      <AuthorizedRoute exact path={"/"} component={Browser} />
       <Route path={"/login"} component={Login} />
-      <Route path={"/:bucket/*"} component={Browser} />
+      <Route path={"/:bucket?/*"} component={Browser} />
-      <Route path={"/:bucket"} component={Browser} />
     </Switch>
   )
 }

browser/app/js/__tests__/App.test.js

@@ -15,11 +15,51 @@
  */
 
 import React from "react"
-import { shallow } from "enzyme"
+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 match={ {url: "/minio"} }/>)
+    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/buckets/BucketList.js

@@ -34,6 +34,8 @@ export class BucketList extends React.Component {
       if (bucket) {
         setBucketList([bucket])
         selectBucket(bucket, prefix)
+      } else {
+        history.replace("/login")
       }
     }
   }