Improve errors reporting in edit modal

[FidalMathew]

Summary

Description of the change(s) you made

The approach used to improve error reporting in the edit modal is by getting all the errors list. Mapping that errorsList with their names and reference objects. Using that reference object we'll be using scrollIntoView to allow the user to direct themselves to the required input left blank.

Manual verification steps performed

1. Click on a channel
2. Access and edit resources
3. The Edit details tab will open

Screenshots (if applicable)

Does this introduce any tech-debt items?

Some changes that needs to add to the current PR are:

• Some CSS properties need to be added to the list of errors such as hover cursor, and underlining.
• The scrollIntoView moves into view a bit below the actual input element.
• If there is only 1 issue then the scrollIntoView will scroll to that one target element.

Reference

The PR is in reference with issue: #2924

---

Reviewer guidance

How can a reviewer test these changes?

1. Click on a channel
2. Access and edit resources
3. The Edit details tab will open

Contributor's Checklist

PR process:

• If this is an important user-facing change, PR or related issue the CHANGELOG label been added to this PR. Note: items with this label will be added to the CHANGELOG at a later time
• If this includes an internal dependency change, a link to the diff is provided
• The docs label has been added if this introduces a change that needs to be updated in the user docs?
• If any Python requirements have changed, the updated requirements.txt files also included in this PR
• Opportunities for using Google Analytics here are noted
• Migrations are safe for a large db

Studio-specifc:

• All user-facing strings are translated properly
• The notranslate class been added to elements that shouldn't be translated by Google Chrome's automatic translation feature (e.g. icons, user-generated text)
• All UI components are LTR and RTL compliant
• Views are organized into pages, components, and layouts directories as described in the docs
• Users' storage used is recalculated properly on any changes to main tree files
• If there new ways this uses user data that needs to be factored into our Privacy Policy, it has been noted.

Testing:

• Code is clean and well-commented
• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included
• Critical user journeys are covered by Gherkin stories
• Any new interactions have been added to the QA Sheet
• Critical and brittle code paths are covered by unit tests

---

Reviewer's Checklist

This section is for reviewers to fill out.

• Automated test coverage is satisfactory
• PR is fully functional
• PR has been tested for accessibility regressions
• External dependency files were updated if necessary (yarn and pip)
• Documentation is updated
• Contributor is in AUTHORS.md

[FidalMathew]

@vkWeb @MisRob Could you take a look at the PR? It has some changes still left to go as mentioned above.

[AlexVelezLl]

Hi @FidalMathew! 👋

This is pretty exciting, we'll finally have more specific error messages in the edit view 🎉. The code overall looks good! I have left you some comments to take into account small details.

[FidalMathew]

@AlexVelezLl thank you for the review and quick response. I have made the changes, could you review them?

[AlexVelezLl]

Hi! @FidalMathew Thank you! Code looks good to me! And I think the scroll behavior is as expected.

[AlexVelezLl]

LGTM!