upgrading react and refactoring components (#5409) (#5444)

- upgraded react from v16.2.0
- upgraded react-router to v4.2.0 and re-writen the routes
- using prettier to format the code
- added jest to unit test components/reducers/selectors

This provides a skeleton to start of with. Only basic unit test
cases are added, remaining needs to be added.

In terms of functionality, it provides login, listing and searching
buckets. Remaining functionalities will be added in upcoming patches.

browser/app/js/components/SideBar.js

@@ -1,5 +1,5 @@
 /*
- * Minio Cloud Storage (C) 2016 Minio, Inc.
+ * Minio Cloud Storage (C) 2016, 2018 Minio, Inc.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -14,86 +14,37 @@
  * limitations under the License.
  */
 
-import React from 'react'
-import classNames from 'classnames'
-import ClickOutHandler from 'react-onclickout'
-import Scrollbars from 'react-custom-scrollbars/lib/Scrollbars'
-import connect from 'react-redux/lib/components/connect'
+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 Dropdown from 'react-bootstrap/lib/Dropdown'
-
-let SideBar = ({visibleBuckets, loadBucket, currentBucket, selectBucket, searchBuckets, sidebarStatus, clickOutside, showPolicy, deleteBucket, toggleBucketDropdown, showBucketDropdown}) => {
-
-  const list = visibleBuckets.map((bucket, i) => {
-    return <li className={ classNames({
-                  'active': bucket === currentBucket
-                }) } key={ i } onClick={ (e) => selectBucket(e, bucket) }>
-             <a href="" className={ classNames({
-                                      'fesli-loading': bucket === loadBucket
-                                    }) }>
-               { bucket }
-             </a>
-             <Dropdown open={bucket === currentBucket && showBucketDropdown} onToggle={toggleBucketDropdown} 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={ showPolicy }>Edit policy</a>
-                 </li>
-                 <li>
-                   <a onClick={ (e) => deleteBucket(e, bucket) }>Delete</a>
-                 </li>
-               </Dropdown.Menu>
-             </Dropdown>
-           </li>
-  })
+import logo from "../../img/logo.svg"
+import Dropdown from "react-bootstrap/lib/Dropdown"
+import BucketSearch from "./BucketSearch"
+import BucketList from "./BucketList"
+import Host from "./Host"
 
+export const SideBar = () => {
   return (
-    <ClickOutHandler onClickOut={ clickOutside }>
-      <div className={ classNames({
-                         'fe-sidebar': true,
-                         'toggled': sidebarStatus
-                       }) }>
+    <ClickOutHandler>
+      <div
+        className={classNames({
+          "fe-sidebar": true
+        })}
+      >
         <div className="fes-header clearfix hidden-sm hidden-xs">
-          <img src={ logo } alt="" />
+          <img src={logo} alt="" />
           <h2>Minio Browser</h2>
         </div>
         <div className="fes-list">
-          <div className="input-group ig-dark ig-left ig-search" style={ { display: web.LoggedIn() ? 'block' : 'none' } }>
-            <input className="ig-text"
-              type="text"
-              onChange={ searchBuckets }
-              placeholder="Search Buckets..." />
-            <i className="ig-helpers"></i>
-          </div>
-          <div className="fesl-inner">
-            <Scrollbars renderScrollbarVertical={ props => <div className="scrollbar-vertical" /> }>
-              <ul>
-                { list }
-              </ul>
-            </Scrollbars>
-          </div>
-        </div>
-        <div className="fes-host">
-          <i className="fa fa-globe"></i>
-          <a href="/">
-            { window.location.host }
-          </a>
+          <BucketSearch />
+          <BucketList />
         </div>
+        <Host />
       </div>
     </ClickOutHandler>
   )
 }
 
-// Subscribe it to state changes that affect only the sidebar.
-export default connect(state => {
-  return {
-    visibleBuckets: state.visibleBuckets,
-    loadBucket: state.loadBucket,
-    currentBucket: state.currentBucket,
-    showBucketDropdown: state.showBucketDropdown,
-    sidebarStatus: state.sidebarStatus
-  }
-})(SideBar)
+export default connect(state => state)(SideBar)