Make directory path in the header editable (#8018)

This change will allow users to navigate to their desired locations,
including buckets and directories that haven't been "created" yet

Fixes #7883

Add tests

Change tooltip wording

Migrate to Font Awesome 5 to use path icon

Fix sidebar not closing on mobile

browser/app/js/browser/BrowserDropdown.js

@@ -84,32 +84,32 @@ export class BrowserDropdown extends React.Component {
       <li>
         <Dropdown pullRight id="top-right-menu">
           <Dropdown.Toggle noCaret>
-            <i className="fa fa-reorder" />
+            <i className="fas fa-bars" />
           </Dropdown.Toggle>
           <Dropdown.Menu className="dropdown-menu-right">
             <li>
               <a target="_blank" href="https://github.com/minio/minio">
-                GitHub <i className="fa fa-github" />
+                GitHub <i className="fab fa-github" />
               </a>
             </li>
             <li>
               <a href="" onClick={this.fullScreen}>
-                Fullscreen <i className="fa fa-expand" />
+                Fullscreen <i className="fas fa-expand" />
               </a>
             </li>
             <li>
               <a target="_blank" href="https://docs.min.io/">
-                Documentation <i className="fa fa-book" />
+                Documentation <i className="fas fa-book" />
               </a>
             </li>
             <li>
               <a target="_blank" href="https://slack.min.io">
-                Ask for help <i className="fa fa-question-circle" />
+                Ask for help <i className="fas fa-question-circle" />
               </a>
             </li>
             <li>
               <a href="" id="show-about" onClick={this.showAbout.bind(this)}>
-                About <i className="fa fa-info-circle" />
+                About <i className="fas fa-info-circle" />
               </a>
               {this.state.showAboutModal && (
                 <AboutModal
@@ -120,7 +120,7 @@ export class BrowserDropdown extends React.Component {
             </li>
             <li>
               <a href="" onClick={this.showChangePassword.bind(this)}>
-                Change Password <i className="fa fa-cog" />
+                Change Password <i className="fas fa-cog" />
               </a>
               {this.state.showChangePasswordModal && (
                 <ChangePasswordModal
@@ -131,7 +131,7 @@ export class BrowserDropdown extends React.Component {
             </li>
             <li>
               <a href="" id="logout" onClick={this.logout}>
-                Sign Out <i className="fa fa-sign-out" />
+                Sign Out <i className="fas fa-sign-out-alt" />
               </a>
             </li>
           </Dropdown.Menu>

browser/app/js/browser/ChangePasswordModal.js

@@ -165,7 +165,7 @@ export class ChangePasswordModal extends React.Component {
                 })
               }}
               className={
-                "toggle-password fa fa-eye " +
+                "toggle-password fas fa-eye " +
                 (this.state.currentSecretKeyVisible ? "toggled" : "")
               }
             />
@@ -211,7 +211,7 @@ export class ChangePasswordModal extends React.Component {
                 })
               }}
               className={
-                "toggle-password fa fa-eye " +
+                "toggle-password fas fa-eye " +
                 (this.state.newSecretKeyVisible ? "toggled" : "")
               }
             />

browser/app/js/browser/Host.js

@@ -18,7 +18,7 @@ import React from "react"
 
 export const Host = () => (
   <div className="fes-host">
-    <i className="fa fa-globe" />
+    <i className="fas fa-globe-americas" />
     <a href="/">{window.location.host}</a>
   </div>
 )

browser/app/js/browser/Login.js

@@ -125,7 +125,7 @@ export class Login extends React.Component {
               autoComplete="new-password"
             />
             <button className="lw-btn" type="submit">
-              <i className="fa fa-sign-in" />
+              <i className="fas fa-sign-in-alt" />
             </button>
           </form>
         </div>

browser/app/js/browser/MainActions.js

@@ -48,7 +48,7 @@ export const MainActions = ({
       <Dropdown dropup className="feb-actions" id="fe-action-toggle">
         <Dropdown.Toggle noCaret className="feba-toggle">
           <span>
-            <i className="fa fa-plus" />
+            <i className="fas fa-plus" />
           </span>
         </Dropdown.Toggle>
         <Dropdown.Menu>
@@ -63,7 +63,7 @@ export const MainActions = ({
               />
               <label htmlFor="file-input">
                 {" "}
-                <i className="fa fa-cloud-upload" />{" "}
+                <i className="fas fa-cloud-upload-alt" />{" "}
               </label>
             </a>
           </OverlayTrigger>
@@ -78,7 +78,7 @@ export const MainActions = ({
                   showMakeBucketModal()
                 }}
               >
-                <i className="fa fa-hdd-o" />
+                <i className="far fa-hdd" />
               </a>
             </OverlayTrigger>
           )}

browser/app/js/browser/SideBar.js

@@ -20,7 +20,6 @@ import ClickOutHandler from "react-onclickout"
 import { connect } from "react-redux"
 
 import logo from "../../img/logo.svg"
-import Dropdown from "react-bootstrap/lib/Dropdown"
 import BucketSearch from "../buckets/BucketSearch"
 import BucketList from "../buckets/BucketList"
 import Host from "./Host"
@@ -28,8 +27,14 @@ import * as actionsCommon from "./actions"
 import web from "../web"
 
 export const SideBar = ({ sidebarOpen, clickOutside }) => {
+  const onClickOut = e => {
+    if (e.target.classList.contains("feh-trigger")) {
+      return
+    }
+    clickOutside()
+  }
   return (
-    <ClickOutHandler onClickOut={clickOutside}>
+    <ClickOutHandler onClickOut={onClickOut}>
       <div
         className={classNames({
           "fe-sidebar": true,
@@ -62,4 +67,7 @@ const mapDispatchToProps = dispatch => {
   }
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(SideBar)
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(SideBar)

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

@@ -35,7 +35,20 @@ describe("SideBar", () => {
   it("should call clickOutside when the user clicks outside the sidebar", () => {
     const clickOutside = jest.fn()
     const wrapper = shallow(<SideBar clickOutside={clickOutside} />)
-    wrapper.simulate("clickOut", { preventDefault: jest.fn() })
+    wrapper.simulate("clickOut", {
+      preventDefault: jest.fn(),
+      target: { classList: { contains: jest.fn(() => false) } }
+    })
     expect(clickOutside).toHaveBeenCalled()
   })
+
+  it("should not call clickOutside when user clicks on sidebar toggle", () => {
+    const clickOutside = jest.fn()
+    const wrapper = shallow(<SideBar clickOutside={clickOutside} />)
+    wrapper.simulate("clickOut", {
+      preventDefault: jest.fn(),
+      target: { classList: { contains: jest.fn(() => true) } }
+    })
+    expect(clickOutside).not.toHaveBeenCalled()
+  })
 })