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

2025-11-20 18:06:10 -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/uploads/AbortConfirmModal.js
+++ b/browser/app/js/uploads/AbortConfirmModal.js
@@ -30,15 +30,15 @@ export class AbortConfirmModal extends React.Component {
  render() {
    const { hideAbort } = this.props
    let baseClass = classNames({
-      "abort-upload": true
+      "abort-upload": true,
    })
    let okIcon = classNames({
      fa: true,
-      "fa-times": true
+      "fa-times": true,
    })
    let cancelIcon = classNames({
      fa: true,
-      "fa-cloud-upload": true
+      "fa-cloud-upload": true,
    })

    return (
@@ -61,14 +61,14 @@ export class AbortConfirmModal extends React.Component {

 const mapStateToProps = state => {
  return {
-    uploads: state.uploads.files
+    uploads: state.uploads.files,
  }
 }

 const mapDispatchToProps = dispatch => {
  return {
    abort: slug => dispatch(uploadsActions.abortUpload(slug)),
-    hideAbort: () => dispatch(uploadsActions.hideAbortModal())
+    hideAbort: () => dispatch(uploadsActions.hideAbortModal()),
  }
 }

--- a/browser/app/js/uploads/Dropzone.js
+++ b/browser/app/js/uploads/Dropzone.js
@@ -33,29 +33,13 @@ 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
-        style={style}
-        activeStyle={activeStyle}
-        rejectStyle={rejectStyle}
+        className="objects"
+        activeClassName="objects--active"
+        rejectClassName="objects--reject"
        disableClick={true}
        onDrop={this.onDrop.bind(this)}
      >
@@ -67,7 +51,7 @@ export class Dropzone extends React.Component {

 const mapDispatchToProps = dispatch => {
  return {
-    uploadFile: file => dispatch(actions.uploadFile(file))
+    uploadFile: file => dispatch(actions.uploadFile(file)),
  }
 }

--- a/browser/app/js/uploads/UploadModal.js
+++ b/browser/app/js/uploads/UploadModal.js
@@ -57,18 +57,15 @@ export class UploadModal extends React.Component {
      "..."

    return (
-      <div className="alert alert-info progress animated fadeInUp ">
+      <div className="alert alert-info alert--upload animated fadeInUp ">
        <button type="button" className="close" onClick={showAbortModal}>
          <span>×</span>
        </button>
-        <div className="text-center">
-          <small>{text}</small>
-        </div>
+        <div>{text}</div>
        <ProgressBar now={percent} />
-        <div className="text-center">
-          <small>
-            {humanize.filesize(totalLoaded)} ({percent.toFixed(2)} %)
-          </small>
+        <div>
+          {humanize.filesize(totalLoaded)} (
+          {percent.toFixed(2)} %)
        </div>
      </div>
    )
@@ -78,13 +75,13 @@ export class UploadModal extends React.Component {
 const mapStateToProps = state => {
  return {
    uploads: state.uploads.files,
-    showAbort: state.uploads.showAbortModal
+    showAbort: state.uploads.showAbortModal,
  }
 }

 const mapDispatchToProps = dispatch => {
  return {
-    showAbortModal: () => dispatch(uploadsActions.showAbortModal())
+    showAbortModal: () => dispatch(uploadsActions.showAbortModal()),
  }
 }

--- a/browser/app/js/uploads/tests/AbortConfirmModal.test.js
+++ b/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)
--- a/browser/app/js/uploads/tests/Dropzone.test.js
+++ b/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]])
  })
--- a/browser/app/js/uploads/tests/UploadModal.test.js
+++ b/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()
--- a/browser/app/js/uploads/tests/actions.test.js
+++ b/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()
--- a/browser/app/js/uploads/tests/reducer.test.js
+++ b/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()
  })
--- a/browser/app/js/uploads/actions.js
+++ b/browser/app/js/uploads/actions.js
@@ -31,28 +31,28 @@ export const add = (slug, size, name) => ({
  type: ADD,
  slug,
  size,
-  name
+  name,
 })

 export const updateProgress = (slug, loaded) => ({
  type: UPDATE_PROGRESS,
  slug,
-  loaded
+  loaded,
 })

 export const stop = slug => ({
  type: STOP,
-  slug
+  slug,
 })

 export const showAbortModal = () => ({
  type: SHOW_ABORT_MODAL,
-  show: true
+  show: true,
 })

 export const hideAbortModal = () => ({
  type: SHOW_ABORT_MODAL,
-  show: false
+  show: false,
 })

 let requests = {}
@@ -83,8 +83,8 @@ export const uploadFile = file => {
      dispatch(
        alertActions.set({
          type: "danger",
-          message: "Please choose a bucket before trying to upload files."
-        })
+          message: "Please choose a bucket before trying to upload files.",
+        }),
      )
      return
    }
@@ -102,14 +102,14 @@ export const uploadFile = file => {
    if (token) {
      xhr.setRequestHeader(
        "Authorization",
-        "Bearer " + storage.getItem("token")
+        "Bearer " + storage.getItem("token"),
      )
    }
    xhr.setRequestHeader(
      "x-amz-date",
      Moment()
        .utc()
-        .format("YYYYMMDDTHHmmss") + "Z"
+        .format("YYYYMMDDTHHmmss") + "Z",
    )

    dispatch(addUpload(xhr, slug, file.size, file.name))
@@ -121,8 +121,8 @@ export const uploadFile = file => {
        dispatch(
          alertActions.set({
            type: "danger",
-            message: "Unauthorized request."
-          })
+            message: "Unauthorized request.",
+          }),
        )
      }
      if (xhr.status == 500) {
@@ -131,8 +131,8 @@ export const uploadFile = file => {
        dispatch(
          alertActions.set({
            type: "danger",
-            message: xhr.responseText
-          })
+            message: xhr.responseText,
+          }),
        )
      }
      if (xhr.status == 200) {
@@ -141,8 +141,8 @@ export const uploadFile = file => {
        dispatch(
          alertActions.set({
            type: "success",
-            message: "File '" + file.name + "' uploaded successfully."
-          })
+            message: "File '" + file.name + "' uploaded successfully.",
+          }),
        )
        dispatch(objectsActions.selectPrefix(currentPrefix))
      }
@@ -153,8 +153,8 @@ export const uploadFile = file => {
      dispatch(
        alertActions.set({
          type: "danger",
-          message: "Error occurred uploading '" + file.name + "'."
-        })
+          message: "Error occurred uploading '" + file.name + "'.",
+        }),
      )
    })

--- a/browser/app/js/uploads/reducer.js
+++ b/browser/app/js/uploads/reducer.js
@@ -21,16 +21,16 @@ const add = (files, action) => ({
  [action.slug]: {
    loaded: 0,
    size: action.size,
-    name: action.name
-  }
+    name: action.name,
+  },
 })

 const updateProgress = (files, action) => ({
  ...files,
  [action.slug]: {
    ...files[action.slug],
-    loaded: action.loaded
-  }
+    loaded: action.loaded,
+  },
 })

 const stop = (files, action) => {
@@ -39,27 +39,33 @@ 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 {
        ...state,
-        files: add(state.files, action)
+        files: add(state.files, action),
      }
    case uploadsActions.UPDATE_PROGRESS:
      return {
        ...state,
-        files: updateProgress(state.files, action)
+        files: updateProgress(state.files, action),
      }
    case uploadsActions.STOP:
      return {
        ...state,
-        files: stop(state.files, action)
+        files: stop(state.files, action),
      }
    case uploadsActions.SHOW_ABORT_MODAL:
      return {
        ...state,
-        showAbortModal: action.show
+        showAbortModal: action.show,
      }
    default:
      return state