chore(deps): bump react-dropzone from 4.2.11 to 12.0.4 (#2921)

Closes #2914
Closes #2906

package.json

@@ -78,7 +78,7 @@
     "react-addons-css-transition-group": "^15.4.2",
     "react-dd-menu": "^2.0.0",
     "react-dom": "=17.0.2",
-    "react-dropzone": "4.2.11",
+    "react-dropzone": "^12.0.4",
     "react-file-download": "^0.3.2",
     "react-immutable-proptypes": "^2.1.0",
     "react-redux": "=7.2.6",
@@ -117,6 +117,7 @@
     "css-loader": "^5.0.2",
     "cssnano": "^5.0.6",
     "cypress": "=9.5.0",
+    "cypress-file-upload": "^5.0.8",
     "dedent": "^0.7.0",
     "deep-extend": "^0.6.0",
     "enzyme": "^3.3.0",

src/layout.jsx

@@ -1,80 +1,80 @@
-import React from "react"
+import React, { useCallback } from "react"
 import PropTypes from "prop-types"
-import Dropzone from "react-dropzone"
+import { useDropzone } from "react-dropzone"
 
-Dropzone.displayName = "Dropzone" // For testing
-
-export default class EditorLayout extends React.Component {
-
-  static propTypes = {
-    errSelectors: PropTypes.object.isRequired,
-    errActions: PropTypes.object.isRequired,
-    specActions: PropTypes.object.isRequired,
-    getComponent: PropTypes.func.isRequired,
-    layoutSelectors: PropTypes.object.isRequired,
-    layoutActions: PropTypes.object.isRequired
-  }
-
-  onChange = (newYaml, origin="editor") => {
-    this.props.specActions.updateSpec(newYaml, origin)
-  }
-
-  onDrop = (acceptedFiles, rejectedFiles) => {
+const Dropzone = ({ children, onDrop }) => {
+  const handleDrop = useCallback((acceptedFiles, rejectedFiles) => {
     const someFilesWereRejected = rejectedFiles && rejectedFiles.length > 0
     const thereIsExactlyOneAcceptedFile = acceptedFiles && acceptedFiles.length === 1
-    if ( someFilesWereRejected || !thereIsExactlyOneAcceptedFile) {
+
+    if (someFilesWereRejected || !thereIsExactlyOneAcceptedFile) {
       alert("Sorry, there was an error processing your file.\nPlease drag and drop exactly one .yaml or .json OpenAPI definition file.")
     } else {
       const file = acceptedFiles[0]
       const reader = new FileReader()
       reader.onloadend = () => {
         const spec = reader.result
-        this.onChange(spec, "fileDrop")
+        onDrop(spec, "fileDrop")
       }
-
       reader.readAsText(file, "utf-8")
     }
-  }
-
-  render() {
-    const { getComponent } = this.props
+  }, [])
+  const {getRootProps, getInputProps, isDragActive} = useDropzone({
+    onDrop: handleDrop,
+    accept: ".yaml,application/json",
+    multiple: false,
+    noClick: true,
+  })
 
-    const UIBaseLayout = getComponent("BaseLayout", true)
-    const EditorContainer = getComponent("EditorContainer", true)
-    const SplitPaneMode = getComponent("SplitPaneMode", true)
+  return (
+    <div className="dropzone" {...getRootProps()}>
+      <input data-cy="dropzone" {...getInputProps()} />
+      {isDragActive
+        ? (
+          <div className="dropzone__overlay">
+            Please drop a .yaml or .json OpenAPI spec.
+          </div>
+        )
+        : children
+      }
+    </div>
+  )
+}
+Dropzone.propTypes = {
+  children: PropTypes.node.isRequired,
+  onDrop: PropTypes.func.isRequired,
+}
 
-    const Container = getComponent("Container")
+const EditorLayout = ({ specActions, getComponent }) => {
+  const UIBaseLayout = getComponent("BaseLayout", true)
+  const EditorContainer = getComponent("EditorContainer", true)
+  const SplitPaneMode = getComponent("SplitPaneMode", true)
+  const Container = getComponent("Container")
 
-    return (
-      <div className="swagger-editor">
-        <Container className="container">
-          <Dropzone
-            className="dropzone"
-            accept=".yaml,application/json"
-            multiple={false}
-            onDrop={this.onDrop}
-            disablePreview
-            disableClick
-          >
-          {({ isDragActive }) => {
-            if (isDragActive) {
-              return (
-                <div className="dropzone__overlay">
-                  Please drop a .yaml or .json OpenAPI spec.
-                </div>
-              )
-            } else {
-              return (
-                <SplitPaneMode>
-                  <EditorContainer onChange={this.onChange} />
-                  <UIBaseLayout/>
-                </SplitPaneMode>
-              )
-            }
-          }}
-          </Dropzone>
-        </Container>
-      </div>
-    )
+  const handleChange = (newYaml, origin="editor") => {
+    specActions.updateSpec(newYaml, origin)
   }
+
+  return (
+    <div className="swagger-editor">
+      <Container className="container">
+        <Dropzone onDrop={handleChange}>
+          <SplitPaneMode>
+            <EditorContainer onChange={handleChange} />
+            <UIBaseLayout/>
+          </SplitPaneMode>
+        </Dropzone>
+      </Container>
+    </div>
+  )
 }
+EditorLayout.propTypes = {
+  errSelectors: PropTypes.object.isRequired,
+  errActions: PropTypes.object.isRequired,
+  specActions: PropTypes.object.isRequired,
+  getComponent: PropTypes.func.isRequired,
+  layoutSelectors: PropTypes.object.isRequired,
+  layoutActions: PropTypes.object.isRequired
+}
+
+export default EditorLayout

test/e2e/.eslintrc

@@ -6,4 +6,6 @@ globals:
 
 rules:
   "no-console": 0
-  "no-unused-vars": 0
+  "no-unused-vars": 0
+  "no-unused-expressions": 0
+