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

Feature/338 form validation library #368

Conversation

g-saracca
Copy link
Contributor

@g-saracca g-saracca commented Apr 11, 2024

What this PR does / why we need it:

Adds form validation library (react-hook-form) to the create dataset form in order to create dynamic fields validation

Which issue(s) this PR closes:

Special notes for your reviewer:

This PR points to a sub-branch because before targeting the develop branch it will be combined with the issue #336 which is in this sub-branch and then a final pr with both issues combined will be made to develop. All this to be able to bring up something completely stable to beta environment.

Suggestions on how to test this:

  • Log in, click the create dataset button.
  • Submit the form without filling any required field, every required field should show te required error feedback, and the form should focus and scroll to the first input with an error.
  • Fill a date field with the wrong format, respective feedback error should be visible.
  • Fill an integer field with the wrong format (e.g.: 23.5), respective feedback error should be visible.
  • Fill a float field with the wrong format (e.g.: 'hi'), respective feedback error should be visible.
  • Fill an email field with a wrong format (e.g.: 'test@'), respective feedback error should be visible.
  • Fill an URL field with a worng format (e.g.: 'bad://something'), espective feedback error should be visible.
  • Submit the form filling al required fields with the correct format, a new dataset should be created.

Does this PR introduce a user interface change? If mockups are available, please link/include them here:

Yes.
spa_datasets_create(Desktop 1366)

Also I modified at spa level not design system level the styles for the checkbox group, I think if it is successful we could apply it to the design system directly in the future.
This checkbox group that allows to select multiple values is a temporary replacement of the select multiple not yet done.
Examples below: 👇👇
Screenshot 2024-04-11 at 14 01 29
Screenshot 2024-04-11 at 14 01 42
Screenshot 2024-04-11 at 14 01 51

Is there a release notes update needed for this change?:

Additional documentation:

I have refactored some form elements of the design system so that they can forward a react ref and pass it to the input itself. This was necessary so that the form validation library could focus and scroll to the first item encountered with a validation error.

@g-saracca g-saracca marked this pull request as ready for review April 11, 2024 17:19
@g-saracca g-saracca merged commit 60eeb53 into feature/sub-branch/dynamic-fields-and-validation Apr 11, 2024
8 of 13 checks passed
@g-saracca g-saracca added pm.GREI-d-2.6.1 NIH, yr2, aim6, task1: Test differentially private releases with NIH-funded datasets pm.GREI-d-2.6.2 NIH, yr2, aim6, task2: Design and implement MVP for DataTags levels SPA: Create Dataset Form labels Apr 11, 2024
jayanthkomarraju pushed a commit to jayanthkomarraju/dataverse-frontend that referenced this pull request May 31, 2024
…rary

Feature/338 form validation library
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
pm.GREI-d-2.6.1 NIH, yr2, aim6, task1: Test differentially private releases with NIH-funded datasets pm.GREI-d-2.6.2 NIH, yr2, aim6, task2: Design and implement MVP for DataTags levels SPA: Create Dataset Form
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant