phosphor-webui
phosphor-webui copied to clipboard
Errors on the network page aren't specific. Form validation will greatly improve usability by quickly bringing attention to fields where errors occurred.
FYI -- (work in progress) Translation of error messages will need to be vetted.
https://ibm.invisionapp.com/share/YSNTBXAJGUC#/318318933_Network_Error_States_Before_Saving Error instances BEFORE saving settings:
- All error fields can be validated after 10 sec user finishes typing.
- Each error field is accommodated with an error message, error icon, and red border for text field.
- Error fields validated for character format:
- Hostname
- Mac Address
- Default Gateway
- IPV4 address
- Gateway
- DNS Server
- Netmask Prefix Length error field can be validated for numeric value (stays between 0 - 32)
https://ibm.invisionapp.com/share/YSNTBXAJGUC#/318318931_Network_Leaving_Before_Saving
- Pop-up message appears when user tries to leave page without saving settings. Leaving without saving will undo changes made
https://ibm.invisionapp.com/share/YSNTBXAJGUC#/318318930_Network_Save_With_Errors https://ibm.invisionapp.com/share/YSNTBXAJGUC#/318323558_Network_Errors_To_Fix
Error instances trying to save settings with persisting errors
- Toast message appears noting user cannot save with persisting errors (empty fields) and/or settings with error(s) will not be saved
- Fields with "Invalid format" or empty fields will be highlighted as errors
- Field validation error messages go away 10 sec after user inputs valid formats and/or all fields are entered
- User will need to save settings to ensure fixes are updated
https://ibm.invisionapp.com/share/YSNTBXAJGUC#/318318926_Network_Error_Connection
Error instances AFTER saving settings
- Toast message appears noting saving changes was unsuccessful due to errors
- Fields with "Invalid IP address/DNS server or connection problem" will be highlighted as errors. Once inputting new valid addresses, user can save settings again
+1 I think this kind of validation and error handling will make the webui much more usable. One important thing that I'd like to stress is that I'd like to see this design principal pushed throughout the UI for consistency, not just the network page. I suspect that you're starting small, and taking things one at a time, but we need to make sure we have a plan to roll this out everywhere.
@edtanous Yes, we are looking at the whole GUI and looking for validation and notification improvements
@gtmills This feels like it is pretty granular and would be better specified as pattern in the style guide for the entire GUI. The InVision links referenced are in an archived project @jandraa. Is this issue something that we still need to track here?
This work is accounted for in #62. We will revisit this story and possibly pull GUI work out following the completion of #62.