Adds validation to fix email addresses.

[wjames111]

Description

• Tools - Fix Email Address - Add validation for edited email addresses
• Ticket #8162

Checklist:

• I have given my PR a title with the format "MPDX-(JIRA#) (summary sentence max 80 chars)"
• I have applied the appropriate labels. (Add the label "On Staging" to get the branch automatically merged into staging.)
• I have requested a review from another person on the project

[wjames111]

This has a similar issue that fix commitment info tool has with the state and formik. Not 100% sure the best way to implement formik in this instance. I opted to just add to the mapped emails. The only real issue I found with this way is that the confirm button isn’t blocked when an illformed address is entered.

[canac]

The only real issue I found with this way is that the confirm button isn’t blocked when an illformed address is entered.

I saw a few times where typing an invalid email address and clicking Confirm sent the invalid email in the GraphQL mutation. But it appears that the server ignored it without returning an error. It's a little weird but probably OK.

It looks like we have a form inside of a form now. I'm not sure if that's bad or not, but if it needs to be changed, we can do that when we research performance. (EDIT: this is not true, I didn't read the code carefully).

[canac]

handleChange doesn't return a promise.

Suggested change

	onSubmit={async (values) => {
	await handleChange(id, index, values.newEmail);
	onSubmit={(values) => {
	handleChange(id, index, values.newEmail);

[canac]

Suggested change

	{errors.newEmail && errors.newEmail}
	{errors.newEmail}

[github-actions]

Preview branch generated at https://MPDX-8162-fix-email-address-validation.d3dytjb8adxkk5.amplifyapp.com

[github-actions]

Bundle sizes [mpdx-react]

Compared against 67614f0

No significant changes found

[wrandall22]

It looks like we have a form inside of a form now. I'm not sure if that's bad or not

Nested forms are not supported in HTML technically.

[wjames111]

@wrandall22 Good to know. I'll rework this.

[wjames111]

@canac I'm not seeing the nested form, am I missing something? I initially thought you were referring to the EmailValidationForm but it looks like that falls outside of the other form.

[canac]

I'm not seeing the nested form, am I missing something?

You're right, I wasn't reading carefully. I thought FixEmailAddresses was using Formik, but it's just using a simple useState (which I think is the right choice).

I have no issues with the code you have here. Sorry for slowing this down!

[wjames111]

@canac All good, thanks for looking it over!