UX bug: policy error message showing an YAML mode hint while user is editing in UI mode

Problem

While I am editing the UI and putting empty variables, the error message tells me that I need to go to Yaml mode to change something. It actually should highlight the UI mode and tell me that the variable key/value can't be empty

current	prefered

There is a similar problem for all required values (e.g. in the below picture, if a user hasn't selected a policy type for a scan result policy, they get several errors, which do not direct them to select a policy type)

This is related to Policy Creation: Show error when required appro... (#395545 - closed) (i.e. when the backend emits an error, the frontend should add an error border around the problem in rule mode and give a more meaningful error message).

Old approach

Similar to that issue, the backend needs to be updated to add additional information

Scenario	Screenshot
approver error message (making use of validationErrors)
invalid variables error message

Implementation

For variables

• backend update validate_policy_service.rb#L10 to return a more useful message and the variable key
• frontend similar to Update alert for not enough approvers (!123757 - merged)
  • update editor_component.vue to handle the errors like in the above MR
  • update ci_variable_selector.vue to display the error
• frontend rename create_scan_execution_policy.mutation.graphql to create_policy.mutation.graphql

For general case (e.g. variables, branches, branch_type, ...)

• backend update validate_policy_service.rb#L10 to systematically return validationError with the failed property for every error
• frontend use validationError for every error to add error focus on the appropriate component

Implementation

• frontend parse errors in editor_component and add red outline to the specific component that caused the error