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

browser/app/js/uploads/__tests__/AbortConfirmModal.test.js

@@ -29,10 +29,10 @@ describe("AbortConfirmModal", () => {
       <AbortConfirmModal
         uploads={{
           "a-b/-test1": { size: 100, loaded: 50, name: "test1" },
-          "a-b/-test2": { size: 100, loaded: 50, name: "test2" }
+          "a-b/-test2": { size: 100, loaded: 50, name: "test2" },
         }}
         abort={abort}
-      />
+      />,
     )
     wrapper.instance().abortUploads()
     expect(abort.mock.calls.length).toBe(2)

browser/app/js/uploads/__tests__/Dropzone.test.js

@@ -26,8 +26,12 @@ describe("Dropzone", () => {
   it("should call uploadFile with files", () => {
     const uploadFile = jest.fn()
     const wrapper = shallow(<Dropzone uploadFile={uploadFile} />)
-    const file1 = new Blob(["file content1"], { type: "text/plain" })
-    const file2 = new Blob(["file content2"], { type: "text/plain" })
+    const file1 = new Blob(["file content1"], {
+      type: "text/plain",
+    })
+    const file2 = new Blob(["file content2"], {
+      type: "text/plain",
+    })
     wrapper.first().prop("onDrop")([file1, file2])
     expect(uploadFile.mock.calls).toEqual([[file1], [file2]])
   })

browser/app/js/uploads/__tests__/UploadModal.test.js

@@ -37,7 +37,7 @@ describe("UploadModal", () => {
     const wrapper = shallow(
       <UploadModal
         uploads={{ "a-b/-test": { size: 100, loaded: 50, name: "test" } }}
-      />
+      />,
     )
     expect(wrapper.find("ProgressBar").length).toBe(1)
   })
@@ -48,7 +48,7 @@ describe("UploadModal", () => {
       <UploadModal
         uploads={{ "a-b/-test": { size: 100, loaded: 50, name: "test" } }}
         showAbortModal={showAbortModal}
-      />
+      />,
     )
     wrapper.find("button").simulate("click")
     expect(showAbortModal).toHaveBeenCalled()

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

@@ -29,8 +29,8 @@ describe("Uploads actions", () => {
         type: "uploads/ADD",
         slug: "a-b-c",
         size: 100,
-        name: "test"
-      }
+        name: "test",
+      },
     ]
     store.dispatch(uploadsActions.add("a-b-c", 100, "test"))
     const actions = store.getActions()
@@ -43,8 +43,8 @@ describe("Uploads actions", () => {
       {
         type: "uploads/UPDATE_PROGRESS",
         slug: "a-b-c",
-        loaded: 50
-      }
+        loaded: 50,
+      },
     ]
     store.dispatch(uploadsActions.updateProgress("a-b-c", 50))
     const actions = store.getActions()
@@ -56,8 +56,8 @@ describe("Uploads actions", () => {
     const expectedActions = [
       {
         type: "uploads/STOP",
-        slug: "a-b-c"
-      }
+        slug: "a-b-c",
+      },
     ]
     store.dispatch(uploadsActions.stop("a-b-c"))
     const actions = store.getActions()
@@ -69,8 +69,8 @@ describe("Uploads actions", () => {
     const expectedActions = [
       {
         type: "uploads/SHOW_ABORT_MODAL",
-        show: true
-      }
+        show: true,
+      },
     ]
     store.dispatch(uploadsActions.showAbortModal())
     const actions = store.getActions()
@@ -79,13 +79,15 @@ describe("Uploads actions", () => {
 
   describe("uploadFile", () => {
     const file = new Blob(["file content"], {
-      type: "text/plain"
+      type: "text/plain",
     })
     file.name = "file1"
 
     it("creates alerts/SET action when currentBucket is not present", () => {
       const store = mockStore({
-        buckets: { currentBucket: "" }
+        buckets: {
+          currentBucket: "",
+        },
       })
       const expectedActions = [
         {
@@ -93,11 +95,13 @@ describe("Uploads actions", () => {
           alert: {
             id: 0,
             type: "danger",
-            message: "Please choose a bucket before trying to upload files."
-          }
-        }
+            message: "Please choose a bucket before trying to upload files.",
+          },
+        },
       ]
-      const file = new Blob(["file content"], { type: "text/plain" })
+      const file = new Blob(["file content"], {
+        type: "text/plain",
+      })
       store.dispatch(uploadsActions.uploadFile(file))
       const actions = store.getActions()
       expect(actions).toEqual(expectedActions)
@@ -105,16 +109,20 @@ describe("Uploads actions", () => {
 
     it("creates uploads/ADD action before uploading the file", () => {
       const store = mockStore({
-        buckets: { currentBucket: "test1" },
-        objects: { currentPrefix: "pre1/" }
+        buckets: {
+          currentBucket: "test1",
+        },
+        objects: {
+          currentPrefix: "pre1/",
+        },
       })
       const expectedActions = [
         {
           type: "uploads/ADD",
           slug: "test1-pre1/-file1",
           size: file.size,
-          name: file.name
-        }
+          name: file.name,
+        },
       ]
       store.dispatch(uploadsActions.uploadFile(file))
       const actions = store.getActions()
@@ -129,19 +137,23 @@ describe("Uploads actions", () => {
         send: send,
         setRequestHeader: jest.fn(),
         upload: {
-          addEventListener: jest.fn()
-        }
+          addEventListener: jest.fn(),
+        },
       })
       window.XMLHttpRequest = jest.fn().mockImplementation(xhrMockClass)
       const store = mockStore({
-        buckets: { currentBucket: "test1" },
-        objects: { currentPrefix: "pre1/" }
+        buckets: {
+          currentBucket: "test1",
+        },
+        objects: {
+          currentPrefix: "pre1/",
+        },
       })
       store.dispatch(uploadsActions.uploadFile(file))
       expect(open).toHaveBeenCalledWith(
         "PUT",
         "https://localhost:8080/upload/test1/pre1/file1",
-        true
+        true,
       )
       expect(send).toHaveBeenCalledWith(file)
     })
@@ -152,12 +164,12 @@ describe("Uploads actions", () => {
     const expectedActions = [
       {
         type: "uploads/STOP",
-        slug: "a-b/-c"
+        slug: "a-b/-c",
       },
       {
         type: "uploads/SHOW_ABORT_MODAL",
-        show: false
-      }
+        show: false,
+      },
     ]
     store.dispatch(uploadsActions.abortUpload("a-b/-c"))
     const actions = store.getActions()

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

@@ -22,7 +22,7 @@ describe("uploads reducer", () => {
     const initialState = reducer(undefined, {})
     expect(initialState).toEqual({
       files: {},
-      showAbortModal: false
+      showAbortModal: false,
     })
   })
 
@@ -31,26 +31,40 @@ describe("uploads reducer", () => {
       type: actions.ADD,
       slug: "a-b-c",
       size: 100,
-      name: "test"
+      name: "test",
     })
     expect(newState.files).toEqual({
-      "a-b-c": { loaded: 0, size: 100, name: "test" }
+      "a-b-c": {
+        loaded: 0,
+        size: 100,
+        name: "test",
+      },
     })
   })
 
   it("should handle UPDATE_PROGRESS", () => {
     const newState = reducer(
       {
-        files: { "a-b-c": { loaded: 0, size: 100, name: "test" } }
+        files: {
+          "a-b-c": {
+            loaded: 0,
+            size: 100,
+            name: "test",
+          },
+        },
       },
       {
         type: actions.UPDATE_PROGRESS,
         slug: "a-b-c",
-        loaded: 50
-      }
+        loaded: 50,
+      },
     )
     expect(newState.files).toEqual({
-      "a-b-c": { loaded: 50, size: 100, name: "test" }
+      "a-b-c": {
+        loaded: 50,
+        size: 100,
+        name: "test",
+      },
     })
   })
 
@@ -58,29 +72,41 @@ describe("uploads reducer", () => {
     const newState = reducer(
       {
         files: {
-          "a-b-c": { loaded: 70, size: 100, name: "test1" },
-          "x-y-z": { loaded: 50, size: 100, name: "test2" }
-        }
+          "a-b-c": {
+            loaded: 70,
+            size: 100,
+            name: "test1",
+          },
+          "x-y-z": {
+            loaded: 50,
+            size: 100,
+            name: "test2",
+          },
+        },
       },
       {
         type: actions.STOP,
-        slug: "a-b-c"
-      }
+        slug: "a-b-c",
+      },
     )
     expect(newState.files).toEqual({
-      "x-y-z": { loaded: 50, size: 100, name: "test2" }
+      "x-y-z": {
+        loaded: 50,
+        size: 100,
+        name: "test2",
+      },
     })
   })
 
   it("should handle SHOW_ABORT_MODAL", () => {
     const newState = reducer(
       {
-        showAbortModal: false
+        showAbortModal: false,
       },
       {
         type: actions.SHOW_ABORT_MODAL,
-        show: true
-      }
+        show: true,
+      },
     )
     expect(newState.showAbortModal).toBeTruthy()
   })