Browser: Update UI with new components and elements (#5671)

2025-11-23 02:57:42 -05:00 · 2018-03-21 23:39:23 +05:30
parent 384b4fdf28
commit 1459c4be1e
199 changed files with 10549 additions and 4702 deletions
--- a/browser/app/js/browser/tests/AboutModal.test.js
+++ b/browser/app/js/browser/tests/AboutModal.test.js
@@ -23,7 +23,7 @@ describe("AboutModal", () => {
    version: "test",
    memory: "test",
    platform: "test",
-    runtime: "test"
+    runtime: "test",
  }

  it("should render without crashing", () => {
@@ -33,7 +33,7 @@ describe("AboutModal", () => {
  it("should call hideAbout when close button is clicked", () => {
    const hideAbout = jest.fn()
    const wrapper = shallow(
-      <AboutModal serverInfo={serverInfo} hideAbout={hideAbout} />
+      <AboutModal serverInfo={serverInfo} hideAbout={hideAbout} />,
    )
    wrapper.find("button").simulate("click")
    expect(hideAbout).toHaveBeenCalled()
--- a/browser/app/js/browser/tests/Browser.test.js
+++ b/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} />)
  })
 })
--- a/browser/app/js/browser/tests/BrowserDropdown.test.js
+++ b/browser/app/js/browser/tests/BrowserDropdown.test.js
@@ -23,12 +23,12 @@ describe("BrowserDropdown", () => {
    version: "test",
    memory: "test",
    platform: "test",
-    runtime: "test"
+    runtime: "test",
  }

  it("should render without crashing", () => {
    shallow(
-      <BrowserDropdown serverInfo={serverInfo} fetchServerInfo={jest.fn()} />
+      <BrowserDropdown serverInfo={serverInfo} fetchServerInfo={jest.fn()} />,
    )
  })

@@ -38,16 +38,18 @@ describe("BrowserDropdown", () => {
      <BrowserDropdown
        serverInfo={serverInfo}
        fetchServerInfo={fetchServerInfo}
-      />
+      />,
    )
    expect(fetchServerInfo).toHaveBeenCalled()
  })

  it("should show AboutModal when About link is clicked", () => {
    const wrapper = shallow(
-      <BrowserDropdown serverInfo={serverInfo} fetchServerInfo={jest.fn()} />
+      <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)
@@ -55,9 +57,11 @@ describe("BrowserDropdown", () => {

  it("should logout and redirect to /login when logout is clicked", () => {
    const wrapper = shallow(
-      <BrowserDropdown serverInfo={serverInfo} fetchServerInfo={jest.fn()} />
+      <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()
  })
 })
--- a/browser/app/js/browser/tests/ChangePasswordModal.test.js
+++ b/browser/app/js/browser/tests/ChangePasswordModal.test.js
@@ -20,18 +20,26 @@ 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",
+      })
    }
-  })
+  }),
 }))

 describe("ChangePasswordModal", () => {
@@ -40,7 +48,9 @@ describe("ChangePasswordModal", () => {
    memory: "test",
    platform: "test",
    runtime: "test",
-    info: { isEnvCreds: false }
+    info: {
+      isEnvCreds: false,
+    },
  }

  it("should render without crashing", () => {
@@ -56,7 +66,12 @@ 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")
@@ -78,19 +93,23 @@ describe("ChangePasswordModal", () => {
  it("should update accessKey and secretKey when Update button is clicked", () => {
    const showAlert = jest.fn()
    const wrapper = shallow(
-      <ChangePasswordModal serverInfo={serverInfo} showAlert={showAlert} />
+      <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({
        type: "success",
-        message: "Changed credentials"
+        message: "Changed credentials",
      })
    })
  })
@@ -101,7 +120,7 @@ describe("ChangePasswordModal", () => {
      <ChangePasswordModal
        serverInfo={serverInfo}
        hideChangePassword={hideChangePassword}
-      />
+      />,
    )
    wrapper.find("#cancel-change-password").simulate("click")
    expect(hideChangePassword).toHaveBeenCalled()
--- a/browser/app/js/browser/tests/Header.test.js
+++ b/browser/app/js/browser/tests/Header.test.js
@@ -22,7 +22,7 @@ jest.mock("../../web", () => ({
  LoggedIn: jest
    .fn(() => true)
    .mockReturnValueOnce(true)
-    .mockReturnValueOnce(false)
+    .mockReturnValueOnce(false),
 }))
 describe("Header", () => {
  it("should render without crashing", () => {
--- a/browser/app/js/browser/tests/Login.test.js
+++ b/browser/app/js/browser/tests/Login.test.js
@@ -19,81 +19,101 @@ 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()
+  LoggedIn: jest.fn(),
 }))

 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",
    })
  })
 })
--- a/browser/app/js/browser/tests/MainActions.test.js
+++ b/browser/app/js/browser/tests/MainActions.test.js
@@ -23,7 +23,7 @@ jest.mock("../../web", () => ({
    .fn(() => true)
    .mockReturnValueOnce(true)
    .mockReturnValueOnce(false)
-    .mockReturnValueOnce(false)
+    .mockReturnValueOnce(false),
 }))

 describe("MainActions", () => {
@@ -52,21 +52,25 @@ describe("MainActions", () => {
  it("should call showMakeBucketModal when create bucket icon is clicked", () => {
    const showMakeBucketModal = jest.fn()
    const wrapper = shallow(
-      <MainActions showMakeBucketModal={showMakeBucketModal} />
+      <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)
  })
--- a/browser/app/js/browser/tests/MobileHeader.test.js
+++ b/browser/app/js/browser/tests/MobileHeader.test.js
@@ -26,11 +26,11 @@ describe("Bucket", () => {
  it("should toggleSidebar when trigger is clicked", () => {
    const toggleSidebar = jest.fn()
    const wrapper = shallow(
-      <MobileHeader sidebarOpen={false} toggleSidebar={toggleSidebar} />
+      <MobileHeader sidebarOpen={false} toggleSidebar={toggleSidebar} />,
    )
-    wrapper
-      .find("#sidebar-toggle")
-      .simulate("click", { stopPropagation: jest.fn() })
+    wrapper.find("#sidebar-toggle").simulate("click", {
+      stopPropagation: jest.fn(),
+    })
    expect(toggleSidebar).toHaveBeenCalled()
  })
 })
--- a/browser/app/js/browser/tests/SideBar.test.js
+++ b/browser/app/js/browser/tests/SideBar.test.js
@@ -19,7 +19,7 @@ import { shallow } from "enzyme"
 import { SideBar } from "../SideBar"

 jest.mock("../../web", () => ({
-  LoggedIn: jest.fn(() => false).mockReturnValueOnce(true)
+  LoggedIn: jest.fn(() => false).mockReturnValueOnce(true),
 }))

 describe("SideBar", () => {
@@ -35,7 +35,9 @@ 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(),
+    })
    expect(clickOutside).toHaveBeenCalled()
  })
 })
--- a/browser/app/js/browser/tests/StorageInfo.test.js
+++ b/browser/app/js/browser/tests/StorageInfo.test.js
@@ -24,7 +24,7 @@ describe("StorageInfo", () => {
      <StorageInfo
        storageInfo={{ total: 100, free: 60 }}
        fetchStorageInfo={jest.fn()}
-      />
+      />,
    )
  })

@@ -34,7 +34,7 @@ describe("StorageInfo", () => {
      <StorageInfo
        storageInfo={{ total: 100, free: 60 }}
        fetchStorageInfo={fetchStorageInfo}
-      />
+      />,
    )
    expect(fetchStorageInfo).toHaveBeenCalled()
  })
--- a/browser/app/js/browser/tests/actions.test.js
+++ b/browser/app/js/browser/tests/actions.test.js
@@ -20,7 +20,12 @@ 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({
@@ -28,9 +33,9 @@ jest.mock("../../web", () => ({
      MinioMemory: "test",
      MinioPlatform: "test",
      MinioRuntime: "test",
-      MinioGlobalInfo: "test"
+      MinioGlobalInfo: "test",
    })
-  })
+  }),
 }))

 const middlewares = [thunk]
@@ -40,7 +45,13 @@ 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()
@@ -58,9 +69,9 @@ describe("Common actions", () => {
          memory: "test",
          platform: "test",
          runtime: "test",
-          info: "test"
-        }
-      }
+          info: "test",
+        },
+      },
    ]
    return store.dispatch(actionsCommon.fetchServerInfo()).then(() => {
      const actions = store.getActions()
--- a/browser/app/js/browser/tests/reducer.test.js
+++ b/browser/app/js/browser/tests/reducer.test.js
@@ -23,35 +23,39 @@ describe("common reducer", () => {
      sidebarOpen: false,
      storageInfo: {
        total: 0,
-        free: 0
+        free: 0,
      },
-      serverInfo: {}
+      serverInfo: {},
    })
  })

  it("should handle TOGGLE_SIDEBAR", () => {
    expect(
      reducer(
-        { sidebarOpen: false },
        {
-          type: actionsCommon.TOGGLE_SIDEBAR
-        }
-      )
+          sidebarOpen: false,
+        },
+        {
+          type: actionsCommon.TOGGLE_SIDEBAR,
+        },
+      ),
    ).toEqual({
-      sidebarOpen: true
+      sidebarOpen: true,
    })
  })

  it("should handle CLOSE_SIDEBAR", () => {
    expect(
      reducer(
-        { sidebarOpen: true },
        {
-          type: actionsCommon.CLOSE_SIDEBAR
-        }
-      )
+          sidebarOpen: true,
+        },
+        {
+          type: actionsCommon.CLOSE_SIDEBAR,
+        },
+      ),
    ).toEqual({
-      sidebarOpen: false
+      sidebarOpen: false,
    })
  })

@@ -61,11 +65,17 @@ 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,
+      },
    })
  })

@@ -78,15 +88,15 @@ describe("common reducer", () => {
          memory: "test",
          platform: "test",
          runtime: "test",
-          info: "test"
-        }
-      }).serverInfo
+          info: "test",
+        },
+      }).serverInfo,
    ).toEqual({
      version: "test",
      memory: "test",
      platform: "test",
      runtime: "test",
-      info: "test"
+      info: "test",
    })
  })
 })