Skip to content

Geo Settings Form - Validations and Save

Zack Cuddy requested to merge 216134_04-geo-settings-form-actions into master

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 Can_t_Be_Empty
Custom Errors Custom_Validations
No Errors Gatsby_Green_Light

GIF

PUT Works:

API_PUT_Works

Does this MR meet the acceptance criteria?

Conformity

Availability and Testing

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
Edited by Justin Ho Tuan Duong

Merge request reports