Merge pull request #387 from KPMP/develop

Release v4.0 (take 2)

.github/workflows/node.js.yml

@@ -16,7 +16,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [14.x]
+        node-version: [20.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:
@@ -26,7 +26,7 @@ jobs:
       with:
         node-version: ${{ matrix.node-version }}
         cache: 'npm'
-    - run: npm install 
-    - run: npm ci 
+    - run: npm install --legacy-peer-deps
+    - run: npm ci --legacy-peer-deps
     - run: npm run build --if-present
-    - run: TZ=America/Detroit npm test
+    - run: TZ=America/Detroit npm test

package.json

@@ -6,44 +6,44 @@
     "acorn": "7.2.0",
     "enzyme": "3.10.0",
     "enzyme-adapter-react-16": "1.15.1",
-    "node-sass": "8.0.0",
+    "sass": "1.63.6",
     "npm-run-all": "4.1.5",
-    "react-scripts": "3.4.4"
+    "react-scripts": "5.0.1",
+    "@babel/plugin-proposal-private-property-in-object": "7.21.11"
   },
   "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.0",
+    "antd": "3.26.19",
     "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": "6.7.2",
+    "eslint": "7.11.0",
     "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": "16.12.0",
+    "react": "17.0.2",
     "react-countdown": "2.3.2",
     "react-datetime": "2.16.3",
-    "react-dom": "16.12.0",
+    "react-dom": "17.0.2",
     "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.1.1",
+    "reactstrap": "8.9.0",
     "redux": "4.0.4",
     "redux-thunk": "2.3.0"
   },
@@ -52,16 +52,21 @@
     "start": "npm-run-all -p watch-css start-js",
     "build-js": "react-scripts build",
     "build": "npm-run-all build-css build-js",
-    "build-css": "node-sass src/ -o src/",
-    "watch-css": "npm run build-css && node-sass src/ -o src/ --watch --recursive",
+    "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",
     "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,
-      "cache": true
+      "node": true
     }
   },
   "proxy": "http://localhost:3030",

src/components/Upload/Forms/DynamicForm.js

@@ -2,9 +2,7 @@ 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';
@@ -17,52 +15,11 @@ class DynamicForm extends Component {
 		this.state = {
 			filesAdded: 0,
 			submitClicked: false,
-			largeFilesChecked: false,
+			largeFilesChecked: true,
 		};
 
 		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);
@@ -209,7 +166,6 @@ class DynamicForm extends Component {
 				})
 			}
 		}
-		let dropzoneHidden = this.state.largeFilesChecked?" hidden":"";
 		return (
 			<React.Fragment>
 				<Prompt
@@ -228,14 +184,7 @@ class DynamicForm extends Component {
 					<h4>STEP 2: Provide the dataset information</h4>
 					{this.renderSection(this.props.formDTD.standardFields, this.props.form, this.props.userInformation)}
 					{dynamicSections}
-					{(!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) &&
+          {(this.props.isUploading && this.state.largeFilesChecked) &&
 						<Row>
 							<Col xs={12}>
 								<div className="d-flex align-items-center text-center loading">
@@ -247,7 +196,7 @@ class DynamicForm extends Component {
 							</Col>
 						</Row>
 					}
-					{(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> }
+					<h4>STEP 3: Click upload and add your files with the upload instructions that follow</h4>
 					<Row className="fixed-bottom pt-4" id="form-footer">
 						<div className="container justify-content-center">
 							<Row className="text-center">
@@ -276,6 +225,7 @@ DynamicForm.propTypes = {
 	userInformation: PropTypes.any,
 }
 
+
 const WrappedUniversalHeaderForm = Form.create({ name: 'universalHeader', validateMessage: "Required" })(DynamicForm);
 
 export default WrappedUniversalHeaderForm;