Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update react-dropzone version to 10.2.1 #1102

Merged
merged 2 commits into from Feb 6, 2020

Conversation

@mzazrivec
Copy link
Contributor

mzazrivec commented Feb 4, 2020

This is to resolve issue in conversion host wizard:

  1. select RHV
  2. proceed all the way to authentication tab
  3. observe the following error:
Warning: The prop `disableClick` of `Dropzone` is deprecated. Use onClick={evt => evt.preventDefault()} instead. This prop will be removed in the next major version. 
    in TextFileInput (created by FormField)
    in FormField (created by ConnectedField)
    in ConnectedField (created by ConnectFunction)
    in ConnectFunction (created by Connect(ConnectedField))
    in Connect(ConnectedField) (created by Field)
    in Field (created by Context.Consumer)
    in Context.Consumer (created by Hoc)
    in Hoc (created by Field)
    in Field (created by TextFileField)
    in TextFileField (created by ConversionHostWizardAuthenticationStep)
    in ConversionHostWizardAuthenticationStep (created by Form(ConversionHostWizardAuthenticationStep))
    in Form(ConversionHostWizardAuthenticationStep) (created by ConnectFunction)
    in ConnectFunction (created by Connect(Form(ConversionHostWizardAuthenticationStep)))
    in Connect(Form(ConversionHostWizardAuthenticationStep)) (created by ReduxForm)
    in ReduxForm (created by Context.Consumer)
    in Context.Consumer (created by Hoc)
    in Hoc (created by ReduxForm)
    in ReduxForm (created by ConnectFunction)
    in ConnectFunction (created by ModalWizardBody)
    in ModalWizardBody (created by ConversionHostWizardBody)
    in ConversionHostWizardBody (created by ConversionHostWizard)
    in ConversionHostWizard (created by ConnectFunction)
    in ConnectFunction (created by ConversionHostsSettings)
    in ConversionHostsSettings (created by ConnectFunction)
    in ConnectFunction (created by Settings)
    in Settings (created by ConnectFunction)
    in ConnectFunction (created by I18nProviderWrapper(Connect(Settings)))
    in I18nProviderWrapper(Connect(Settings)) (created by Route)
    in Route (created by Routes)
    in Routes (created by App)
    in App (created by ConnectFunction)
    in ConnectFunction

The problem will disappear with new version of react-dropzone.

This fixes #1089 (comment)

@mzazrivec mzazrivec added the bug label Feb 4, 2020
@mzazrivec mzazrivec requested a review from mturley Feb 4, 2020
@mzazrivec

This comment has been minimized.

Copy link
Contributor Author

mzazrivec commented Feb 4, 2020

It appears that also the problem described here #1089 (comment) goes away with this update.

Copy link
Contributor

mturley left a comment

Thanks for this @mzazrivec. I did notice one weird thing though: some change in react-dropzone since the old version has changed the behavior of the onClick handler. In our TextFileInput, we were using onClick={event => event.preventDefault()} to prevent the file browse dialog from opening when the user clicks in the textarea (so they can type/paste instead of browsing for a file). That doesn't seem to be working after this change. You can see that on the Authentication step of the wizard.

Playing around with it I got it to work properly again by using this solution (react-dropzone/react-dropzone#541 (comment)):

--- a/app/javascript/react/screens/App/common/forms/TextFileInput/TextFileInput.js
+++ b/app/javascript/react/screens/App/common/forms/TextFileInput/TextFileInput.js
@@ -20,9 +20,12 @@ const TextFileInput = ({ value: { filename, body }, onChange, onBlur, help, hide
   const clear = () => onChange({ filename: '', body: '' });

   return (
-    <Dropzone onDrop={onFileDrop} onClick={event => event.preventDefault()}>
+    <Dropzone onDrop={onFileDrop}>
       {({ getRootProps, getInputProps, isDragActive, open }) => (
-        <div {...getRootProps()} className={classNames('text-file-input__dropzone', { active: isDragActive })}>
+        <div
+          {...getRootProps({ onClick: event => event.stopPropagation() })}
+          className={classNames('text-file-input__dropzone', { active: isDragActive })}
+        >
           <input {...getInputProps()} />
           <Form.InputGroup>
             <Form.FormControl type="text" disabled value={filename} />

Would you mind including that change in this PR?

@miq-bot

This comment has been minimized.

Copy link
Member

miq-bot commented Feb 5, 2020

Checked commits mzazrivec/miq_v2v_ui_plugin@002c9d8~...c26a3a2 with ruby 2.5.5, rubocop 0.69.0, haml-lint 0.20.0, and yamllint 1.10.0
0 files checked, 0 offenses detected
Everything looks fine. 🍪

@mzazrivec

This comment has been minimized.

Copy link
Contributor Author

mzazrivec commented Feb 5, 2020

@mturley sure, added.

@mturley
mturley approved these changes Feb 6, 2020
Copy link
Contributor

mturley left a comment

Thanks @mzazrivec !

@mturley mturley merged commit e6ce232 into ManageIQ:master Feb 6, 2020
3 checks passed
3 checks passed
Hakiri No security warnings were found.
Details
codeclimate All good!
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details
@mzazrivec mzazrivec deleted the mzazrivec:upgrade_react-dropzone branch Feb 6, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

3 participants
You can’t perform that action at this time.