Add validation rules to CI variable value in drawer
What does this MR do and why?
Implements missing validation rules from #421262 (closed). Unchecked items from this issue are implemented in this MR.
Summary of changes:
- Add missing specs for key field
- Set disabled state for the confirm button
- Validate masking requirements for the value field
- Make sure the correct help texts are shown depending on the state of the masked and expanded flags
- Track validation errors with Snowplow. The event is sent only once after the drawer is opened (see !75255 (merged))
You can also refer to the screenshots or tests to see a summary of validation rules implemented here.
Note that selecting a new environment scope from the environment scope dropdown will not work at the moment; this will be implemented later in #421263 (closed).
This issue is part of larger effort to replace the modal form with the drawer for the CI Variables setting. The code for the modal will benefit from some refactoring, which is implemented here in the drawer code instead. This MR focuses more on implementing form validation rules.
Other functions will be implemented in future iterations. Refer to the roadmap below:
Iteration | MR |
---|---|
Setup drawer with feature flag | !126197 (merged) |
Add form validations |
|
Ensure that all mutations are working and update QA specs | |
Rollout | #418005 (closed) |
Screenshots or screen recordings
Expanded
Description | Screenshot |
---|---|
Help text when variable will be evaluated as raw (Expanded flag is not checked) | |
Warning when variable is expanded and contains $ character |
Value Field
Description | Screenshot |
---|---|
Value can be empty (no error messages shown) | |
Multiple validation rules together |
Confirm Button
Description | Screenshot |
---|---|
Submit button is disabled when key is empty. | |
Submit is enabled when key is provided and value is valid |
Tracking Validation Errors with Snowplow (Video)
Note: help text for masking requirements has been removed since the video was recorded. Screen_Recording_2023-09-05_at_23.05.39
How to set up and validate locally
Verify Validation Rules
- Enable the
ci_variable_drawer
feature flag. - Go to Settings > CI/CD > Variables.
- Click on the Add variable button or edit a variable.
- Verify that the checked validation rules from this checklist are implemented.
Verify Snowplow Tracking
Set up Snowplow Testing
- Make sure
Do Not Track
browser setting is disabled. Disable other anti-tracking plugins (e.g. uBlock, Ghostery, etc). - Enable Snowplow tracking on admin (Docs). We can use the following values in the form.
Hostname: your-snowplow-collector.net
App ID: gitlab
Cookie domain: .your-gitlab-instance.com
- Install the Snowplow Debugger or Snowplow Inspector plugin. Either works. Docs
-
Recommended/Optional: Set up Snowplow Micro. This will streamline the events being recorded.
- Make sure docker is running and gdk is configured to use it. To check if Snowplow Micro was set up correctly, visit http://localhost:9091/micro/all.
Verify Changes
- Open the Snowplow Debugger menu on the browser. Then go to Settings > CI/CD > Variables.
- If events are not being recorded, you may need to refresh the page with the menu open.
- Click on the Add variable button or edit a variable. Check the Mask variable flag then input an invalid value in the value field e.g.
unsupported|char
- Verify from the debugger menu that the events are tracked properly.
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.