bcgov / met-public

Modern Engagement Tool ops
Apache License 2.0
6 stars 19 forks source link

Improve validation for add user to group modals #1188

Open jadmsaadaot opened 1 year ago

jadmsaadaot commented 1 year ago

Options discussed:

A - We let user do whatever, when we submit we do backend validation. We send error object having error code, depending on the error code we highlight problematic field.

B - We do a fetch call when user is selected, we change the form to guide the user

C - We do a fetch call when the user is selected, we highlight problematic fields on submit

D - We show error message under the form just like now

option A:

Good: code wise easy to maintain, we just need one function to be called with the error object that is returned, it sets the error for one or multiple fields.

difficult: Needs a proper error handling pattern. What info should be returned in the error object that the UI should react to. Error code? Error data?

option B:

Good: User is guided and will be prevented from doing problematic operations like trying to make an admin an admin again, or adding a team member to an engagement where they are already a team member.

Difficult: The form has to change based on user selection, after user is fetched react hook form would have to update its validations (which fields are now required, which are not?) and the form will have to change. How many finite ways can the form change? If other fields are added or decided that they also can change the form, will it codewise become hard and harder to maintain? How many fields that have an effect on the form can be added until it is difficult to maintain

option C:

Good: It is option A without having to worry about the pattern where we change UI based on error coming from backend. It is a normal pattern.

Difficult: How to update react hook forms validations after the fetch is made? Or are the validations manual like on submit we do setError?

Option D:

Good: easy, grab error message and display it below the form

difficult: Form needs to be reset to clear the error message after form continues to change (how to do that with react hook form). Not consistent with the other validations that appear under the field

jadmsaadaot commented 1 year ago

image.png

jadmsaadaot commented 1 year ago

image.png