revert browser newux changes (#5714)

browser/app/js/browser/__tests__/AboutModal.test.js

@@ -35,7 +35,7 @@ describe("AboutModal", () => {
     const wrapper = shallow(
       <AboutModal serverInfo={serverInfo} hideAbout={hideAbout} />
     )
-    wrapper.find("i").simulate("click")
+    wrapper.find("button").simulate("click")
     expect(hideAbout).toHaveBeenCalled()
   })
 })

browser/app/js/browser/__tests__/Browser.test.js

@@ -24,6 +24,6 @@ const mockStore = configureStore()
 describe("Browser", () => {
   it("should render without crashing", () => {
     const store = mockStore()
-    shallow(<Browser store={store} />)
+    shallow(<Browser store={store}/>)
   })
 })

browser/app/js/browser/__tests__/BrowserDropdown.test.js

@@ -47,9 +47,7 @@ describe("BrowserDropdown", () => {
     const wrapper = shallow(
       <BrowserDropdown serverInfo={serverInfo} fetchServerInfo={jest.fn()} />
     )
-    wrapper.find("#show-about").simulate("click", {
-      preventDefault: jest.fn()
-    })
+    wrapper.find("#show-about").simulate("click", { preventDefault: jest.fn() })
     wrapper.update()
     expect(wrapper.state("showAboutModal")).toBeTruthy()
     expect(wrapper.find("AboutModal").length).toBe(1)
@@ -59,9 +57,7 @@ describe("BrowserDropdown", () => {
     const wrapper = shallow(
       <BrowserDropdown serverInfo={serverInfo} fetchServerInfo={jest.fn()} />
     )
-    wrapper.find("#logout").simulate("click", {
-      preventDefault: jest.fn()
-    })
+    wrapper.find("#logout").simulate("click", { preventDefault: jest.fn() })
     expect(window.location.pathname.endsWith("/login")).toBeTruthy()
   })
 })

browser/app/js/browser/__tests__/ChangePasswordModal.test.js

@@ -20,24 +20,16 @@ import { ChangePasswordModal } from "../ChangePasswordModal"
 
 jest.mock("../../web", () => ({
   GetAuth: jest.fn(() => {
-    return Promise.resolve({
-      accessKey: "test1",
-      secretKey: "test2"
-    })
+    return Promise.resolve({ accessKey: "test1", secretKey: "test2" })
   }),
   GenerateAuth: jest.fn(() => {
-    return Promise.resolve({
-      accessKey: "gen1",
-      secretKey: "gen2"
-    })
+    return Promise.resolve({ accessKey: "gen1", secretKey: "gen2" })
   }),
   SetAuth: jest.fn(({ accessKey, secretKey }) => {
     if (accessKey == "test3" && secretKey == "test4") {
       return Promise.resolve({})
     } else {
-      return Promise.reject({
-        message: "Error"
-      })
+      return Promise.reject({ message: "Error" })
     }
   })
 }))
@@ -48,9 +40,7 @@ describe("ChangePasswordModal", () => {
     memory: "test",
     platform: "test",
     runtime: "test",
-    info: {
-      isEnvCreds: false
-    }
+    info: { isEnvCreds: false }
   }
 
   it("should render without crashing", () => {
@@ -66,12 +56,7 @@ describe("ChangePasswordModal", () => {
   })
 
   it("should show readonly keys when isEnvCreds is true", () => {
-    const newServerInfo = {
-      ...serverInfo,
-      info: {
-        isEnvCreds: true
-      }
-    }
+    const newServerInfo = { ...serverInfo, info: { isEnvCreds: true } }
     const wrapper = shallow(<ChangePasswordModal serverInfo={newServerInfo} />)
     expect(wrapper.state("accessKey")).toBe("xxxxxxxxx")
     expect(wrapper.state("secretKey")).toBe("xxxxxxxxx")
@@ -95,16 +80,12 @@ describe("ChangePasswordModal", () => {
     const wrapper = shallow(
       <ChangePasswordModal serverInfo={serverInfo} showAlert={showAlert} />
     )
-    wrapper.find("#accessKey").simulate("change", {
-      target: {
-        value: "test3"
-      }
-    })
-    wrapper.find("#secretKey").simulate("change", {
-      target: {
-        value: "test4"
-      }
-    })
+    wrapper
+      .find("#accessKey")
+      .simulate("change", { target: { value: "test3" } })
+    wrapper
+      .find("#secretKey")
+      .simulate("change", { target: { value: "test4" } })
     wrapper.find("#update-keys").simulate("click")
     setImmediate(() => {
       expect(showAlert).toHaveBeenCalledWith({

browser/app/js/browser/__tests__/Header.test.js

@@ -18,8 +18,25 @@ import React from "react"
 import { shallow } from "enzyme"
 import Header from "../Header"
 
+jest.mock("../../web", () => ({
+  LoggedIn: jest
+    .fn(() => true)
+    .mockReturnValueOnce(true)
+    .mockReturnValueOnce(false)
+}))
 describe("Header", () => {
   it("should render without crashing", () => {
     shallow(<Header />)
   })
+
+  it("should render Login button when the user has not LoggedIn", () => {
+    const wrapper = shallow(<Header />)
+    expect(wrapper.find("a").text()).toBe("Login")
+  })
+
+  it("should render StorageInfo and BrowserDropdown when the user has LoggedIn", () => {
+    const wrapper = shallow(<Header />)
+    expect(wrapper.find("Connect(BrowserDropdown)").length).toBe(1)
+    expect(wrapper.find("Connect(StorageInfo)").length).toBe(1)
+  })
 })

browser/app/js/browser/__tests__/Login.test.js

@@ -19,12 +19,9 @@ import { shallow, mount } from "enzyme"
 import { Login } from "../Login"
 import web from "../../web"
 
-jest.mock("../../web", () => ({
+jest.mock('../../web', () => ({
   Login: jest.fn(() => {
-    return Promise.resolve({
-      token: "test",
-      uiVersion: "2018-02-01T01:17:47Z"
-    })
+    return Promise.resolve({ token: "test", uiVersion: "2018-02-01T01:17:47Z" })
   }),
   LoggedIn: jest.fn()
 }))
@@ -33,87 +30,70 @@ describe("Login", () => {
   const dispatchMock = jest.fn()
   const showAlertMock = jest.fn()
   const clearAlertMock = jest.fn()
-
+  
   it("should render without crashing", () => {
-    shallow(
-      <Login
-        dispatch={dispatchMock}
-        alert={{ show: false, type: "danger" }}
-        showAlert={showAlertMock}
-        clearAlert={clearAlertMock}
-      />
-    )
+    shallow(<Login 
+      dispatch={dispatchMock} 
+      alert={{ show: false, type: "danger"}}
+      showAlert={showAlertMock}
+      clearAlert={clearAlertMock}
+    />)
   })
 
   it("should initially have the is-guest class", () => {
     const wrapper = shallow(
-      <Login
-        dispatch={dispatchMock}
-        alert={{ show: false, type: "danger" }}
+      <Login 
+        dispatch={dispatchMock} 
+        alert={{ show: false, type: "danger"}}
         showAlert={showAlertMock}
         clearAlert={clearAlertMock}
       />,
-      {
-        attachTo: document.body
-      }
+      { attachTo: document.body }
     )
     expect(document.body.classList.contains("is-guest")).toBeTruthy()
   })
 
   it("should throw an alert if the keys are empty in login form", () => {
     const wrapper = mount(
-      <Login
-        dispatch={dispatchMock}
-        alert={{ show: false, type: "danger" }}
+      <Login 
+        dispatch={dispatchMock} 
+        alert={{ show: false, type: "danger"}}
         showAlert={showAlertMock}
         clearAlert={clearAlertMock}
       />,
-      {
-        attachTo: document.body
-      }
+      { attachTo: document.body }
     )
     // case where both keys are empty - displays the second warning
     wrapper.find("form").simulate("submit")
-    expect(showAlertMock).toHaveBeenCalledWith(
-      "danger",
-      "Secret Key cannot be empty"
-    )
+    expect(showAlertMock).toHaveBeenCalledWith("danger", "Secret Key cannot be empty")
 
     // case where access key is empty
     document.getElementById("secretKey").value = "secretKey"
     wrapper.find("form").simulate("submit")
-    expect(showAlertMock).toHaveBeenCalledWith(
-      "danger",
-      "Access Key cannot be empty"
-    )
+    expect(showAlertMock).toHaveBeenCalledWith("danger", "Access Key cannot be empty")
 
     // case where secret key is empty
     document.getElementById("accessKey").value = "accessKey"
     wrapper.find("form").simulate("submit")
-    expect(showAlertMock).toHaveBeenCalledWith(
-      "danger",
-      "Secret Key cannot be empty"
-    )
+    expect(showAlertMock).toHaveBeenCalledWith("danger", "Secret Key cannot be empty")
   })
 
   it("should call web.Login with correct arguments if both keys are entered", () => {
     const wrapper = mount(
-      <Login
-        dispatch={dispatchMock}
-        alert={{ show: false, type: "danger" }}
+      <Login 
+        dispatch={dispatchMock} 
+        alert={{ show: false, type: "danger"}}
         showAlert={showAlertMock}
         clearAlert={clearAlertMock}
       />,
-      {
-        attachTo: document.body
-      }
+      { attachTo: document.body }
     )
     document.getElementById("accessKey").value = "accessKey"
     document.getElementById("secretKey").value = "secretKey"
     wrapper.find("form").simulate("submit")
     expect(web.Login).toHaveBeenCalledWith({
-      username: "accessKey",
-      password: "secretKey"
+      "username": "accessKey", 
+      "password": "secretKey"
     })
   })
 })

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

@@ -54,23 +54,19 @@ describe("MainActions", () => {
     const wrapper = shallow(
       <MainActions showMakeBucketModal={showMakeBucketModal} />
     )
-    wrapper.find("#show-make-bucket").simulate("click", {
-      preventDefault: jest.fn()
-    })
+    wrapper
+      .find("#show-make-bucket")
+      .simulate("click", { preventDefault: jest.fn() })
     expect(showMakeBucketModal).toHaveBeenCalled()
   })
 
   it("should call uploadFile when a file is selected for upload", () => {
     const uploadFile = jest.fn()
     const wrapper = shallow(<MainActions uploadFile={uploadFile} />)
-    const file = new Blob(["file content"], {
-      type: "text/plain"
-    })
+    const file = new Blob(["file content"], { type: "text/plain" })
     wrapper.find("#file-input").simulate("change", {
       preventDefault: jest.fn(),
-      target: {
-        files: [file]
-      }
+      target: { files: [file] }
     })
     expect(uploadFile).toHaveBeenCalledWith(file)
   })

browser/app/js/browser/__tests__/MobileHeader.test.js

@@ -16,21 +16,21 @@
 
 import React from "react"
 import { shallow } from "enzyme"
-import { SidebarToggle } from "../SidebarToggle"
+import { MobileHeader } from "../MobileHeader"
 
-describe("SidebarToggle", () => {
+describe("Bucket", () => {
   it("should render without crashing", () => {
-    shallow(<SidebarToggle sidebarOpen={false} />)
+    shallow(<MobileHeader sidebarOpen={false} />)
   })
 
   it("should toggleSidebar when trigger is clicked", () => {
     const toggleSidebar = jest.fn()
     const wrapper = shallow(
-      <SidebarToggle sidebarOpen={false} toggleSidebar={toggleSidebar} />
+      <MobileHeader sidebarOpen={false} toggleSidebar={toggleSidebar} />
     )
-    wrapper.find("button").simulate("click", {
-      stopPropagation: jest.fn()
-    })
+    wrapper
+      .find("#sidebar-toggle")
+      .simulate("click", { stopPropagation: jest.fn() })
     expect(toggleSidebar).toHaveBeenCalled()
   })
 })

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

@@ -31,4 +31,11 @@ describe("SideBar", () => {
     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} />)
+    wrapper.simulate("clickOut", { preventDefault: jest.fn() })
+    expect(clickOutside).toHaveBeenCalled()
+  })
 })

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

@@ -20,12 +20,7 @@ import * as actionsCommon from "../actions"
 
 jest.mock("../../web", () => ({
   StorageInfo: jest.fn(() => {
-    return Promise.resolve({
-      storageInfo: {
-        Total: 100,
-        Free: 60
-      }
-    })
+    return Promise.resolve({ storageInfo: { Total: 100, Free: 60 } })
   }),
   ServerInfo: jest.fn(() => {
     return Promise.resolve({
@@ -45,13 +40,7 @@ describe("Common actions", () => {
   it("creates common/SET_STORAGE_INFO after fetching the storage details ", () => {
     const store = mockStore()
     const expectedActions = [
-      {
-        type: "common/SET_STORAGE_INFO",
-        storageInfo: {
-          total: 100,
-          free: 60
-        }
-      }
+      { type: "common/SET_STORAGE_INFO", storageInfo: { total: 100, free: 60 } }
     ]
     return store.dispatch(actionsCommon.fetchStorageInfo()).then(() => {
       const actions = store.getActions()

browser/app/js/browser/__tests__/reducer.test.js

@@ -32,9 +32,7 @@ describe("common reducer", () => {
   it("should handle TOGGLE_SIDEBAR", () => {
     expect(
       reducer(
-        {
-          sidebarOpen: false
-        },
+        { sidebarOpen: false },
         {
           type: actionsCommon.TOGGLE_SIDEBAR
         }
@@ -47,9 +45,7 @@ describe("common reducer", () => {
   it("should handle CLOSE_SIDEBAR", () => {
     expect(
       reducer(
-        {
-          sidebarOpen: true
-        },
+        { sidebarOpen: true },
         {
           type: actionsCommon.CLOSE_SIDEBAR
         }
@@ -65,17 +61,11 @@ describe("common reducer", () => {
         {},
         {
           type: actionsCommon.SET_STORAGE_INFO,
-          storageInfo: {
-            total: 100,
-            free: 40
-          }
+          storageInfo: { total: 100, free: 40 }
         }
       )
     ).toEqual({
-      storageInfo: {
-        total: 100,
-        free: 40
-      }
+      storageInfo: { total: 100, free: 40 }
     })
   })