ui: file upload, fileTree, forms: RepoField, TagsInput

.gitignore

@@ -22,7 +22,6 @@ parts/
 sdist/
 var/
 ./src/
-src/
 *.egg-info/
 .installed.cfg
 *.egg

ui/package.json

@@ -37,6 +37,7 @@
     "@storybook/addon-knobs": "5.1.11",
     "cogo-toast": "4.1.1",
     "connected-react-router": "6.5.2",
+    "git-url-parse": "11.1.2",
     "grommet": "^1.0.0",
     "grommet-addons": "^0.6.0",
     "history": "^4.7.2",

ui/src/actions/files.js

@@ -6,7 +6,9 @@ export const BUCKET_ITEM_REQUEST = "BUCKET_ITEM_REQUEST";
 export const BUCKET_ITEM_SUCCESS = "BUCKET_ITEM_SUCCESS";
 export const BUCKET_ITEM_ERROR = "BUCKET_ITEM_ERROR";
 
+export const PATH_SELECTED = "PATH_SELECTED";
 export const UPLOAD_FILE_REQUEST = "UPLOAD_FILE_REQUEST";
+export const UPLOAD_FILE_PROGRESS = "UPLOAD_FILE_PROGRESS";
 export const UPLOAD_FILE_SUCCESS = "UPLOAD_FILE_SUCCESS";
 export const UPLOAD_ACTION_SUCCESS = "UPLOAD_ACTION_SUCCESS";
 export const UPLOAD_FILE_ERROR = "UPLOAD_FILE_ERROR";
@@ -74,9 +76,15 @@ export function getBucketByUri(uri = null) {
 }
 
 // File Item
+export function selectPath(path, path_type) {
+  return { type: PATH_SELECTED, path, path_type };
+}
 export function uploadFileRequest(filename) {
   return { type: UPLOAD_FILE_REQUEST, filename };
 }
+export function uploadFileProgress(filename, progress) {
+  return { type: UPLOAD_FILE_PROGRESS, filename, progress };
+}
 export function uploadFileSuccess(filename, data) {
   return { type: UPLOAD_FILE_SUCCESS, filename, data };
 }
@@ -87,22 +95,36 @@ export function uploadFileError(filename, error) {
   return { type: UPLOAD_FILE_ERROR, filename, error };
 }
 // Semi - working file upload
-export function uploadFile(bucket_link, file) {
+export function uploadFile(bucket_link, file, filename, tags) {
   return dispatch => {
-    dispatch(uploadFileRequest(file.name));
+    let _filename = filename ? filename : file.name;
+    dispatch(uploadFileRequest(_filename));
     let bucket_id = bucket_link.split("/files/")[1];
     bucket_link = "/api/files/" + bucket_id;
-    let uri = `${bucket_link}/${file.name}`;
+    let uri = `${bucket_link}/${_filename}`;
 
     let oReq = new XMLHttpRequest();
     oReq.open("PUT", uri, true);
+    if (tags) oReq.setRequestHeader("X-CAP-File-Tags", tags);
+
+    oReq.upload.addEventListener(
+      "progress",
+      function(evt) {
+        if (evt.lengthComputable) {
+          let percentComplete = evt.loaded / evt.total;
+          dispatch(uploadFileProgress(_filename, percentComplete));
+        }
+      },
+      false
+    );
+
     oReq.onload = function(oEvent) {
       try {
         let data = oEvent.target.response;
         data = JSON.parse(data);
-        dispatch(uploadFileSuccess(file.name, data));
+        dispatch(uploadFileSuccess(_filename, data));
       } catch (err) {
-        dispatch(uploadFileError(file.name, err.message));
+        dispatch(uploadFileError(_filename, err.message));
       }
     };
 
@@ -114,12 +136,13 @@ export function uploadFile(bucket_link, file) {
     };
 
     oReq.addEventListener("error", function() {
-      dispatch(uploadFileError(file.name, { message: "Error in uploading" }));
+      dispatch(uploadFileError(_filename, { message: "Error in uploading" }));
     });
 
     oReq.send(file);
   };
 }
+
 export function uploadViaUrl(draft_id, urlToGrab, type, download, webhook) {
   return dispatch => {
     let uri = `/api/deposits/${draft_id}/actions/upload`;
@@ -136,19 +159,43 @@ export function uploadViaUrl(draft_id, urlToGrab, type, download, webhook) {
     data.map(d => {
       let filename = d.url.split("/").pop();
       d.type == "repo" ? (filename = `${filename}.tar.gz`) : filename;
-      dispatch(uploadFileRequest(filename)),
-        axios
-          .post(uri, d)
-          .then(() => {
-            dispatch(uploadActionSuccess(filename));
-          })
-          .catch(error => {
-            dispatch(uploadFileError(d.url, error));
-          });
+      dispatch(uploadFileRequest(filename));
+      return axios
+        .post(uri, d)
+        .then(() => {
+          return dispatch(uploadActionSuccess(filename));
+        })
+        .catch(error => {
+          return dispatch(uploadFileError(d.url, error));
+        });
     });
   };
 }
 
+export function uploadViaRepoUrl(draft_id, urlToGrab, type, download, webhook) {
+  return () => {
+    let uri = `/api/deposits/${draft_id}/actions/upload`;
+    let data = {
+      url: urlToGrab,
+      type: type,
+      download: download,
+      webhook: webhook
+    };
+
+    let filename = data.url.split("/").pop();
+    data.type == "repo" ? (filename = `${filename}.tar.gz`) : filename;
+
+    return axios
+      .post(uri, data)
+      .then(resp => {
+        return { filename, data: resp.data };
+      })
+      .catch(error => {
+        throw { error };
+      });
+  };
+}
+
 export function deleteFileRequest(filename) {
   return { type: DELETE_FILE_REQUEST, filename };
 }

ui/src/components/cms/components/utils/fieldTypes.js

@@ -140,6 +140,19 @@ const advanced = {
         "ui:object": "accordionObjectField"
       }
     }
+  },
+  tags: {
+    title: "Tags Field",
+    description: "Add keywords, tags, etc",
+    child: {},
+    default: {
+      schema: {
+        type: "string"
+      },
+      uiSchema: {
+        "ui:widget": "tags"
+      }
+    }
   }
 };