coralproject / talk

A better commenting experience from Vox Media
https://coralproject.net
Other
1.89k stars 355 forks source link

[CORL-2965]: Add DSA input fields max length validations #4466

Closed kabeaty closed 8 months ago

kabeaty commented 9 months ago

What does this PR do?

These changes add max length validations to all DSA input fields. The DSA "what law do you believe has been broken" field has a max of 500 characters, additional info a max of 1000 characters, and additional comment URLs a max of 100 characters. The first two of those now show a "remaining characters" countdown. If too many characters are entered in the fields, the Submit report button will remain disabled. If an additional comment URL is attempted to be added that is too long, the relevant error will be shown.

These changes will impact:

What changes to the GraphQL/Database Schema does this PR introduce?

none

Does this PR introduce any new environment variables or feature flags?

no

If any indexes were added, were they added to INDEXES.md?

n/a

How do I test this PR?

You can test this PR by enabling DSA and then going to a comment to report it and clicking the link to report illegal content.

Once on the DSA report form, you should now see info about how many characters are remaining for the first two input fields. Type in those fields and see that the remaining characters update. See that if you enter input in all required fields (law believed to be broken, additional info, and checkbox) below the max limits, the Submit report button is enabled. If you enter too many characters in one of the fields, it becomes disabled again.

If you attempt to add an additional comment URL that is beneath the max and valid, it is added as expected. If you attempt to add an additional comment URL over the max limit of 100 characters, you should see a relevant error.

Were any tests migrated to React Testing Library?

How do we deploy this PR?

netlify[bot] commented 9 months ago

Deploy Preview for gallant-galileo-14878c canceled.

Name Link
Latest commit d50aebbdfd45d594e2ccad8d6c05861fe1fc826f
Latest deploy log https://app.netlify.com/sites/gallant-galileo-14878c/deploys/65809d4f53b6050008e04f2c