Geo Settings Form - Validations and Save
What does this MR do?
This MR is work towards #216134 (closed)
This MR is an attempt at MVC to avoid the above massive MR going in all at once.
This MR is built behind the feature flag :enable_geo_settings_form_js
This MR sets up the Form Validations and the PUT actions for saving the form. This is the last of the required changes to replace the existing Rails/HAML form functionality. Following this change we have 1 more MR to open to delete all the legacy code and remove the feature flag.
Validations
The approach to validations this form takes was implemented the same way as the Geo Node Form. See MR: !32263 (merged).
We do not have a current guideline for form validations, however, there was a slack conversation found here: https://gitlab.slack.com/archives/C0GQHHPGW/p1592297656220300 (internal only).
As well as a follow up issue for the future of form validations at GitLab: gitlab-org/frontend/rfcs#69 (closed)
ipaddr.js
Currently we are validating the IP and CIDR ranges in the backend with the gem ipaddr
. An example can be found in this implementation: !10383 (merged).
As part of this effort, we would like to have onInput validations to help the user from running into errors when saving. After doing some research it seems the regex to capture all these requirements is intense: https://blog.markhatton.co.uk/2011/03/15/regular-expressions-for-ip-addresses-cidr-ranges-and-hostnames/
Doing some more digging, it seems there is a frontend package for ipaddr.js
: https://github.com/whitequark/ipaddr.js. Even more importantly, it is a deep dependency of some inter-workings of webpack
. With it already being in our code base I was hoping to bring ipaddr.js
up to a explicit package import. I opened a slack discussion about the process of adding new packages: https://gitlab.slack.com/archives/C0GQHHPGW/p1593466724448600 (internal-only).
Using ipaddr.js
we can match the backend checks with the frontend so there isn't the chance of something incorrectly getting sent to the server (which will reject it).
Breakdown of MRs
More information can be found here: #216134 (comment 354619867)
This is MR 4 of 5 to fully implement and replace the Geo Settings Form from HAML -> Vue
Screenshots
Form | |
---|---|
Empty Errors | |
Custom Errors | |
No Errors |
GIF
PUT Works:
Does this MR meet the acceptance criteria?
Conformity
- [-] Changelog entry
- [-] Documentation (if required)
-
Code review guidelines -
Merge request performance guidelines -
Style guides - [-] Database guides
-
Separation of EE specific content
Availability and Testing
-
Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process. -
Tested in all supported browsers - [-] Informed Infrastructure department of a default or new setting change, if applicable per definition of done
Security
If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:
- [-] Label as security and @ mention
@gitlab-com/gl-security/appsec
- [-] The MR includes necessary changes to maintain consistency between UI, API, email, or other methods
- [-] Security reports checked/validated by a reviewer from the AppSec team