Make Geo Node Form Errors even more User Friendly

Problem

After the merging of the MVC for better error messages found here: !29079 (merged)

The errors now explain the situation but are not very easy to read:

Proposal

Use GlAlert

• Remove the use of Flash.Js and instead use the GlAlert component. This will allow for multi-line errors like mentioned here: !29079 (comment 319911391)

On Change Error Messages:

1. Where possible, do form validation on change, so the user get instant feedback
2. Lock the save button when an error is present

On Save Error Messages:

1. Since the API returns errors in relation to the field that caused them, after a failed save, have the field light up with its error
2. Revert the onSaveError Flash message to be something like "Error saving Geo node, see errors below."

Proposed design

• Sketch prototype

Form validation

• On change error, when users apply the change on the field but if it does not match with our rule, then we show errors on the form. (Instant validation)

Alerts

Error messages

Messages on the forms

Fields	Primary	Secondary
Node name	Node name can't be blank	Node name can't be blank
URL	URL can't be blank	URL can't be blank
URL	URL must be a valid URL	URL must be a valid URL
Capacity (number of jobs) related fields	The number should be between 1-999	The number should be between 1-999
Re-verification interval (in days)	-	The number should be between 1-999 🤓

Messages on the alert

Alert message	Primary	Secondary
Common	Error saving the node, see errors below.	Error saving the node, see errors below.

• Show the error message on clicking the save

Scope of the value on the fields

#213732 (closed)

References

• Disabled button
• Form validation - behavior