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 beAdd Variable
orEdit 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 |
|
Implement actions | #421263 (closed) |
Feature flag rollout | #418005 (closed) |