Manage Organization a11y fixes

[johanna-skylight]

FRONTEND PULL REQUEST

Related Issue

• Resolves [Manage Organization] Form does not use proper element tag and some inputs are missing inline error #5814

Changes Proposed

• Migrate the form to use react hook forms
• Add unit testing

Additional Information

Looking at the code it seems that an error message was already coded for the org name field but for some reason the logic to display was not working. I just migrated the form to react hook forms that takes care of validation, error display and focus.

I needed to add code to pass the error of the mutation to the form so it properly handles the isDirty checks.

Testing (code available in dev 4)

Go to settings page -> manage org tab
Try to submit the form with empty values.
Make updates to the form and verify that if there is no change in the form values the save button disables (isDirty check).

Screenshots / Demos

[BobanL]

Changes look good! Thanks!

[sonarqubecloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

87.5% Coverage
0.0% Duplication

[emyl3]

Worked as expected for me! Thank you for advocating for and modeling the use of the react-hook-form library!! :D