Skip to content

Add validation rules to CI variable value in drawer

Mireya Andres requested to merge validate-ci-variable-value into master

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 👈 You are here! + !129349 (merged)
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) raw_string
Warning when variable is expanded and contains $ character expanded_with_reference
Masked

Error text when masking requirements are not met:

Screenshot_2023-09-08_at_16.34.44 |

Value Field
Description Screenshot
Value can be empty (no error messages shown) Screenshot_2023-09-08_at_16.35.57
Multiple validation rules together Screenshot_2023-09-08_at_16.36.54
Confirm Button
Description Screenshot
Submit button is disabled when key is empty. empty_key
Submit is enabled when key is provided and value is valid submit_enabled
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

  1. Enable the ci_variable_drawer feature flag.
  2. Go to Settings > CI/CD > Variables.
  3. Click on the Add variable button or edit a variable.
  4. Verify that the checked validation rules from this checklist are implemented.

Verify Snowplow Tracking

Set up Snowplow Testing

  1. Make sure Do Not Track browser setting is disabled. Disable other anti-tracking plugins (e.g. uBlock, Ghostery, etc).
  2. 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
  1. Install the Snowplow Debugger or Snowplow Inspector plugin. Either works. Docs
  2. Recommended/Optional: Set up Snowplow Micro. This will streamline the events being recorded.
    1. 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

  1. Open the Snowplow Debugger menu on the browser. Then go to Settings > CI/CD > Variables.
  2. If events are not being recorded, you may need to refresh the page with the menu open.
  3. 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
  4. 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.

Edited by Mireya Andres

Merge request reports