[HOLD for payment 2023-04-03] [HOLD for payment 2023-03-22] [$1000] [Form Refactor] Show multiple error messages simultaneously using Form.js

[neil-marcellini]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Problem

Currently when using the Form component we only pass one error message for each input that is failing a validation, but we should show the user multiple errors for a given input if multiple validations fail. See here for an example of the problem.

Why it's important

As per our form guidelines the Form component "supports an infinite number of possible error messages per field and they are displayed simultaneously if multiple validations fail". Right now that's not the case and we should fix it so that it's possible to follow our own guidelines.

Solution

Update the Form component and make any other required changes so that we can show multiple error messages for each input. As part of the initial refactor, update the display name page to show multiple errors when multiple validations fail for a given input. We should create a follow up issue to refactor the validations on other forms.

From the validate function it should be possible to set set an array of errors on each input. The FormHelpMessage component could then be adapted to show multiple error messages under an input in a similar manner to the DotIndicatorMessage used by OfflineWithFeedback.

Or it may be better to replace FormHelpMessage with a new component designed specifically for showing multiple error messages passed in by a Form.

Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1676403131894039

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0177d2970af2ac9f24
• Upwork Job ID: 1630729816740864000
• Last Price Increase: 2023-03-01

[MelvinBot]

Triggered auto assignment to @stephanieelliott (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[MelvinBot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[neil-marcellini]

This is an engineering issue and an improvement, not a Bug. I wasn't sure what the best process was to create this issue. How can I assign it to an engineer for triage? I think this can be worked on externally, but it's lower priority and also more involved. cc @puneetlath in case you're interested.

[puneetlath]

@neil-marcellini I think there's some weird thing where if an engineer applies the Engineering label it doesn't do anything, but if a non-engineer does it works. So if @stephanieelliott applies it, it should assign another engineer.

[neil-marcellini]

Hahah ok that's weird. As you suggested in a DM, I let the callstack folks know that they could work on this as part of their other form work.

[MelvinBot]

Triggered auto assignment to @mountiny (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[JmillsExpensify]

Happened upon this issue. There ya go!

[josemak25]

Hi, I would like to take this and be assigned this task.

[MelvinBot]

Triggered auto assignment to @muttmuure (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[koko57]

Hello! Taking over the issue from Tomek :)

[MelvinBot]

📣 @koko57! 📣

Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
2. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
3. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.

Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[koko57]

@LLPeckham regarding this comment #15978 (comment) - I've proposed new text for romReservedNameError - here is my explanation #15978 (comment)

[LLPeckham]

Suggestion for copy:

As I understand it, if someone tried to name a room #announce, the current message is: Room names #admins and #announce are reserved names for this workspace

I think we should tailor the message for each room because it feels weird to say those are both in use when they only tried the one name. So:

• If someone tries to name a room #announce: #announce is already in use. Please try another room name.

• If someone tries to name a room #admins: #admins is already in use. Please try another room name.

• If we can’t tailor the message to the name entered — we could do something more generic like: This name is already in use for this workspace. Please try another room name.

[LLPeckham]

Please disregard my comment above -- got some more context from @koko57 here.

New suggestion:
If someone tries to use #Admins or #Announce, we could say:

• Using #announce as a room name is restricted. Please choose another name.
• Using #admins as a room name is restricted. Please choose another name.

[MelvinBot]

📣 @koko57 You have been assigned to this job by @mountiny!
Please apply to this job in Upwork and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[MelvinBot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[MelvinBot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.2.89-0 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Refactor the way of displaying errors in several forms #15978

If no regressions arise, payment will be issued on 2023-04-03. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• External issue reporter
• Contributor that fixed the issue
• Contributor+ that helped on the issue and/or PR

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

• Merged PR within 3 business days of assignment - 50% bonus
• Merged PR more than 9 business days after assignment - 50% penalty

[neil-marcellini]

@muttmuure I think this is ready for payment

[mollfpr]

Bump @muttmuure

[muttmuure]

Invited @mollfpr to https://www.upwork.com/ab/applicants/1646917160057724928/job-details

Thanks for waiting while I was OOO last week

[mollfpr]

@muttmuure No problem! I can't open the job 😅 Submitted!

[neil-marcellini]

Can we get this closed out soon?

[mollfpr]

Gently bump @muttmuure

[JmillsExpensify]

I'd reach out via New Expensify DM to get Matt's attention.

[muttmuure]

Thanks for the bump! @mollfpr please accept the contract and we'll get you paid

[mollfpr]

@muttmuure accepted, thank you!

[muttmuure]

All paid up