revert browser newux changes (#5714)

browser/app/js/uploads/AbortConfirmModal.js

@@ -50,7 +50,7 @@ export class AbortConfirmModal extends React.Component {
         sub="This cannot be undone!"
         okText="Abort"
         okIcon={okIcon}
-        cancelText="Continue"
+        cancelText="Upload"
         cancelIcon={cancelIcon}
         okHandler={this.abortUploads.bind(this)}
         cancelHandler={hideAbort}

browser/app/js/uploads/Dropzone.js

@@ -33,13 +33,29 @@ export class Dropzone extends React.Component {
   }
 
   render() {
+    // Overwrite the default styling from react-dropzone; otherwise it
+    // won't handle child elements correctly.
+    const style = {
+      height: "100%",
+      borderWidth: "0",
+      borderStyle: "dashed",
+      borderColor: "#fff"
+    }
+    const activeStyle = {
+      borderWidth: "2px",
+      borderColor: "#777"
+    }
+    const rejectStyle = {
+      backgroundColor: "#ffdddd"
+    }
+
     // disableClick means that it won't trigger a file upload box when
     // the user clicks on a file.
     return (
       <ReactDropzone
-        className="objects"
-        activeClassName="objects--active"
-        rejectClassName="objects--reject"
+        style={style}
+        activeStyle={activeStyle}
+        rejectStyle={rejectStyle}
         disableClick={true}
         onDrop={this.onDrop.bind(this)}
       >

browser/app/js/uploads/UploadModal.js

@@ -57,17 +57,18 @@ export class UploadModal extends React.Component {
       "..."
 
     return (
-      <div className="alert alert-info alert--upload animated fadeInUp ">
-        <button
-          type="button"
-          className="close close--alt"
-          onClick={showAbortModal}
-        />
-        <div>{text}</div>
+      <div className="alert alert-info progress animated fadeInUp ">
+        <button type="button" className="close" onClick={showAbortModal}>
+          <span>×</span>
+        </button>
+        <div className="text-center">
+          <small>{text}</small>
+        </div>
         <ProgressBar now={percent} />
-        <div>
-          {humanize.filesize(totalLoaded)} (
-          {percent.toFixed(2)} %)
+        <div className="text-center">
+          <small>
+            {humanize.filesize(totalLoaded)} ({percent.toFixed(2)} %)
+          </small>
         </div>
       </div>
     )

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

@@ -26,12 +26,8 @@ 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__/actions.test.js

@@ -85,9 +85,7 @@ describe("Uploads actions", () => {
 
     it("creates alerts/SET action when currentBucket is not present", () => {
       const store = mockStore({
-        buckets: {
-          currentBucket: ""
-        }
+        buckets: { currentBucket: "" }
       })
       const expectedActions = [
         {
@@ -99,9 +97,7 @@ describe("Uploads actions", () => {
           }
         }
       ]
-      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)
@@ -109,12 +105,8 @@ 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 = [
         {
@@ -142,12 +134,8 @@ describe("Uploads actions", () => {
       })
       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(

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

@@ -34,24 +34,14 @@ describe("uploads reducer", () => {
       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,
@@ -60,11 +50,7 @@ describe("uploads reducer", () => {
       }
     )
     expect(newState.files).toEqual({
-      "a-b-c": {
-        loaded: 50,
-        size: 100,
-        name: "test"
-      }
+      "a-b-c": { loaded: 50, size: 100, name: "test" }
     })
   })
 
@@ -72,16 +58,8 @@ 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" }
         }
       },
       {
@@ -90,11 +68,7 @@ describe("uploads reducer", () => {
       }
     )
     expect(newState.files).toEqual({
-      "x-y-z": {
-        loaded: 50,
-        size: 100,
-        name: "test2"
-      }
+      "x-y-z": { loaded: 50, size: 100, name: "test2" }
     })
   })
 

browser/app/js/uploads/reducer.js

@@ -39,13 +39,7 @@ const stop = (files, action) => {
   return newFiles
 }
 
-export default (
-  state = {
-    files: {},
-    showAbortModal: false
-  },
-  action
-) => {
+export default (state = { files: {}, showAbortModal: false }, action) => {
   switch (action.type) {
     case uploadsActions.ADD:
       return {