Frontend: Add form validation to the CI Variables drawer

Summary

This is a follow-up to #410414 (closed).

The CI Variables drawer is being developed under the ci_variable_drawer feature flag, and aims to replace the modal for creating, editing, and deleting a CI Variable.

This issue will be for implementing validations on the form in the drawer. Actions such as submitting the form, creating/editing/deleting a variable, creating a new environment scope, and so on, will be tackled in another issue.

The code for the modal would benefit from a lot of refactoring, which we can implement directly in the drawer code instead.

Validation Rules

Based on the code from app/assets/javascripts/ci/ci_variable_list/components/ci_variable_modal.vue and spec/frontend/ci/ci_variable_list/components/ci_variable_modal_spec.js, these are the validation rules and behaviors to be implemented.

Drawer

• Update text based on mode. Title and confirm button text should be Add Variable or Edit Variable depending on the action the user wants to do.
• Validation errors are tracked.

Fields

Key

• Add pre-fill options for AWS tokens. (Implemented in !126197 (merged))

Variable Type

• Set ENV_VAR by default
• Inherit value from selectedVariable

Environment Scope Dropdown

• Inherit value from selectedVariable
• Pass environments list and selected environment scope
• Hide environment dropdown if hideEnvironmentScope is true
• Disable environment dropdown if areScopedVariablesAvailable is false

Tech Note: In the modal, we check if the entity (project/group) hasEnvScopeQuery (i.e. if the environment scopes are fetched via GraphQL). With !126718 (merged), all entities with an environment scope field already fetch them via GraphQL, so this prop is no longer necessary. We can just pass the environments as they are to the dropdown.

Value

• Value can be an empty string.
• If the variable is masked, it must meet the masking requirements. Otherwise, disable the submit button and show the warning help text: This variable value does not meet the masking requirements.
• If the variable is NOT expanded (will be evaluated as raw), show the help text Variable value will be evaluated as raw string.
• If the variable is expanded AND contains the $ character, show the the following tip: ![[Attachments/016aa3bb5781ffd9192a6dd84dbceea6_MD5.png]]

Tech Note: tokenValidationState and tokenValidationFeedback don't provide any value and can be removed from the code.

Flags

Protect

• Set value depending on isProtectedByDefault
• Inherit value from selectedVariable

Masked

• Set false by default
• Inherit value from selectedVariable

Expanded

A variable is expanded when variable.raw = false

• Set true by default
• Inherit value from selectedVariable
• Set variable.raw when value changes

Implementation Table

Iteration	MR
Setup drawer with feature flag	#410414 (closed)
Add form validations	👈 You are here!
Implement actions	#421263 (closed)
Feature flag rollout	#418005 (closed)