KPMP-4773: Preparing merge to master for mini-release

package.json

@@ -6,44 +6,44 @@
     "acorn": "7.2.0",
     "enzyme": "3.10.0",
     "enzyme-adapter-react-16": "1.15.1",
-    "sass": "1.63.6",
+    "node-sass": "8.0.0",
     "npm-run-all": "4.1.5",
-    "react-scripts": "5.0.1",
-    "@babel/plugin-proposal-private-property-in-object": "7.21.11"
+    "react-scripts": "3.4.4"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "1.2.25",
     "@fortawesome/free-brands-svg-icons": "5.11.2",
     "@fortawesome/free-regular-svg-icons": "5.11.2",
     "@fortawesome/free-solid-svg-icons": "5.11.2",
     "@fortawesome/react-fontawesome": "0.1.7",
-    "antd": "3.26.19",
+    "antd": "3.26.0",
     "axios": "0.21.2",
     "bootstrap-css-only": "4.3.1",
     "bowser": "2.7.0",
     "braces": "3.0.2",
     "dateformat": "3.0.3",
     "detect-browser": "4.8.0",
-    "eslint": "7.11.0",
+    "eslint": "6.7.2",
     "filesize": "6.0.1",
     "fine-uploader": "5.16.2",
     "js-polyfills": "0.1.42",
     "kpmp-common-components": "1.1.10",
     "moment": "2.29.4",
+    "node-sass": "8.0.0",
     "popper.js": "1.16.0",
     "prop-types": "15.7.2",
-    "react": "17.0.2",
+    "react": "16.12.0",
     "react-countdown": "2.3.2",
     "react-datetime": "2.16.3",
-    "react-dom": "17.0.2",
+    "react-dom": "16.12.0",
     "react-fine-uploader": "1.1.1",
     "react-ga": "2.7.0",
     "react-ga4": "^1.4.1",
     "react-redux": "7.1.3",
     "react-router-dom": "5.1.2",
     "react-switch": "5.0.1",
     "react-toastify": "5.4.1",
-    "reactstrap": "8.9.0",
+    "reactstrap": "8.1.1",
     "redux": "4.0.4",
     "redux-thunk": "2.3.0"
   },
@@ -52,21 +52,16 @@
     "start": "npm-run-all -p watch-css start-js",
     "build-js": "react-scripts build",
     "build": "npm-run-all build-css build-js",
-    "build-css": "sass -I ./src -I ./node_modules  src/:src/",
-    "watch-css": "npm run build-css && sass -I ./src -I ./node_modules src/:src/ --watch",
+    "build-css": "node-sass src/ -o src/",
+    "watch-css": "npm run build-css && node-sass src/ -o src/ --watch --recursive",
     "test": "react-scripts test --env=jsdom --verbose=false",
     "eject": "react-scripts eject"
   },
-  "overrides": {
-    "react-scripts": {
-      "@svgr/webpack": "6.0.0"
-    },
-    "semver": "7.5.2"
-  },
   "eslintConfig": {
     "env": {
       "browser": true,
-      "node": true
+      "node": true,
+      "cache": true
     }
   },
   "proxy": "http://localhost:3030",

src/components/Upload/Forms/DynamicForm.js

@@ -2,10 +2,13 @@ import React, { Component } from 'react';
 import { Form, Button } from 'antd';
 import { DynamicFormGenerator } from './DynamicFormGenerator';
 import { Row, Col } from 'reactstrap';
+import FileDropzone from './FileDropzone';
 import LargeFileModal from '../../Packages/LargeFileModal';
+import qq from 'fine-uploader/lib/core';
 import { uploader } from '../fineUploader';
 import { Link, Prompt } from 'react-router-dom';
 import PropTypes from 'prop-types';
+import Switch from "react-switch";
 
 class DynamicForm extends Component {
 
@@ -15,11 +18,52 @@ class DynamicForm extends Component {
 		this.state = {
 			filesAdded: 0,
 			submitClicked: false,
-			largeFilesChecked: true,
+			largeFilesChecked: false,
 		};
 
 		this.handleLargeFilesToggle = this.handleLargeFilesToggle.bind(this);
 		this.handleLargeFilesClick= this.handleLargeFilesClick.bind(this);
+
+		uploader.methods.reset();
+		uploader.params = { hostname: window.location.hostname }
+
+		uploader.on('submit', () => {
+			let newCount = this.state.filesAdded + 1;
+			this.setState( { filesAdded: newCount } );
+			this.isSubmitDisabled();
+			return true;
+		});
+
+		uploader.on('cancel', () => {
+			let newCount = this.state.filesAdded - 1;
+			this.setState( { filesAdded: newCount });
+			this.isSubmitDisabled();
+			return true;
+		});
+
+		uploader.on('submit', (id, name) => {
+			let files = uploader.methods.getUploads({
+			status: [ qq.status.SUBMITTED, qq.status.PAUSED ]});
+
+			// The new version of react-scripts sees fileIndex as an unused variable, 
+			// though it is...adding a comment to disable erroneous warning
+			// eslint-disable-next-line
+			for(let fileIndex in files) {
+				let existingName = files[fileIndex].name;
+				if (existingName === name) {
+					alert("You have already selected " + existingName + " to upload.");
+					return false;
+				}
+			}
+			return true;
+		});
+
+		uploader.on('validateBatch', () => {
+			if (this.state.submitClicked) {
+				return false;
+			}
+			return true;
+		})
 
 		let formGenerator = new DynamicFormGenerator();
 		this.renderSection = formGenerator.renderSection.bind(this);
@@ -166,6 +210,7 @@ class DynamicForm extends Component {
 				})
 			}
 		}
+		let dropzoneHidden = this.state.largeFilesChecked?" hidden":"";
 		return (
 			<React.Fragment>
 				<Prompt
@@ -175,14 +220,39 @@ class DynamicForm extends Component {
 				<article id="largeFileSupport" className="upload-form-section container justify-content-center pt-4">
 					<section>
 						<h4>STEP 1: Determine the size of all files in this package</h4>
-						<p>It is important that you submit the metadata for your experiment using the most recent <a href='https://kpmp.org/metadata' target='_blank'>metadata template</a></p>
+						<p>Is the total size of all files you are uploading <strong>MORE THAN</strong> 15 gigabytes?</p>
+						<Row>
+							<Col md={12}>
+								<label>
+									<span className="largeFileSupportLabel">No</span>
+									<Switch
+										onChange={this.handleLargeFilesToggle}
+										checked={this.state.largeFilesChecked}
+										uncheckedIcon={false}
+										checkedIcon={false}
+										onColor="#08f"
+										height={25}
+										width={45}
+										className="react-switch"
+									/>
+									<span className="largeFileSupportLabel">Yes</span>
+								</label>
+							</Col>
+						</Row>
 					</section>
 				</article>
 				<article id="dynamicUploadForm" className="upload-form-section container justify-content-center pt-4">
 					<h4>STEP 2: Provide the dataset information</h4>
 					{this.renderSection(this.props.formDTD.standardFields, this.props.form, this.props.userInformation)}
 					{dynamicSections}
-          {(this.props.isUploading && this.state.largeFilesChecked) &&
+					{(!this.state.largeFilesChecked) && <h4>STEP 3: Add your files</h4>}
+                    <Row className={"dropzone btn-sm" + dropzoneHidden}>
+							<Col md={12}>
+								<FileDropzone uploader={uploader} isUploading={this.props.isUploading}/>
+							</Col>
+						</Row>
+
+					{(this.props.isUploading && this.state.largeFilesChecked) &&
 						<Row>
 							<Col xs={12}>
 								<div className="d-flex align-items-center text-center loading">
@@ -194,7 +264,7 @@ class DynamicForm extends Component {
 							</Col>
 						</Row>
 					}
-					<h4>STEP 3: Click upload and add your files with the upload instructions that follow</h4>
+					{(this.state.largeFilesChecked)?<h4>STEP 3: Click upload and add your files with the upload instructions that follow</h4>:<h4>STEP 4: Click upload</h4> }
 					<Row className="fixed-bottom pt-4" id="form-footer">
 						<div className="container justify-content-center">
 							<Row className="text-center">
@@ -223,7 +293,6 @@ DynamicForm.propTypes = {
 	userInformation: PropTypes.any,
 }
 
-
 const WrappedUniversalHeaderForm = Form.create({ name: 'universalHeader', validateMessage: "Required" })(DynamicForm);
 
 export default WrappedUniversalHeaderForm;

src/components/Upload/Forms/FileDropzone.js

@@ -0,0 +1,34 @@
+import React, { Component } from 'react';
+import Gallery from 'react-fine-uploader/gallery';
+import PropTypes from 'prop-types';
+
+class FileDropzone extends Component {
+
+	uploadFile(e) {
+		e.preventDefault();
+		document.getElementById("upload").click();
+	}
+
+	render() {
+		let cancelButtonClass = "react-fine-uploader-gallery-cancel-button";
+		if (this.props.isUploading) {
+			cancelButtonClass = cancelButtonClass + " cancel-disabled";
+		}
+		const children = <span className='react-fine-uploader-gallery-dropzone-content'>
+			Drop file(s) here
+
+			</span>;
+		const fileInputChildren = <span>Select file(s)</span>;
+		return(
+			<Gallery uploader={this.props.uploader} cancelButton-className={cancelButtonClass} fileInput-disabled={this.props.isUploading} fileInput-children={fileInputChildren} children={children}/>
+		);
+	}
+}
+
+FileDropzone.propTypes = {
+	uploader: PropTypes.object.isRequired,
+	isUploading: PropTypes.bool
+}
+
+export default FileDropzone;
+