Frontend: Make it possible to set variables as non-expanded in CI/CD Settings > Variables

Release notes

Problem to solve

Currently majority of variables send by GitLab to Runner are subject to variable expansion and does not support special characters such as %. When users add a variable value with $ (which is very common for generated passwords), the value is treated as a variable reference, which isn't expected behavior.

Users find it surprising that the variable gets expanded by default when the value contains a $. Often times the value is machine generated and might contain a $ to make it more secure.

Note that UX here includes both within the web UI and .gitlab-ci.yml.

We should consider the following:

all our predefined variables as raw, as they are constant by design: https://docs.gitlab.com/ee/ci/variables/predefined_variables.html
all our masked variables as raw as we want to ensure that their content is never changed
allowing user to mark other variables as raw, considering that the raw should likely be by default

Intended users

UX definition of done

Click to expand

Problem Validation Phase

Problem is well understood and has been validated
JTBD is well understood and has been validated
[-] PM has communicated the opportunity canvas to stable counterparts and group stakeholders, including the Product Designer and Product Design Manager

Design Phase

Solution Validation Phase

Validate the solution to increase confidence in the proposed solution
Document the solution validation learnings
Product Designer has communicated the solution validation learnings to stable counterparts and group stakeholders, including the Product Design Manager
Update the MVC proposal with relevant insights from the solution validation
- Discuss the technical implications with Engineering
- Update issue/epic description to contain or link to the findings 👈 We're here

User experience goal

When adding variables for my project I want to be able to add a password with a $ in it and for the variable to not be expanded.

User stories

When adding a variable in the CI/CD settings I want to easily create a variable value that will process as a raw string.
When adding a variable in the CI/CD settings, I want to easily see what are my options to configure the variable.
When adding a variable in the CI/CD settings with a $ in its value, I want to know that there's two options available to me to either process it as is, or create a variable expansion using the $ sign.
When looking at my variables list I want to see which variables are set to expand and which don't.

Proposal

Based on the feedback we've been getting in issues and during solution validation research, "raw" variable type should likely be the default processing for variables. However, this would require changing the current product behavior. In order to start with a safer, smaller iteration we will add an optional setting to the variables in CI/CD settings to turn off variable expansion.

The scope of this issue is to only address the UI aspect of adding new variables in the project and group CI/CD variables settings.

MVC Scope

Add help text to the Value input field as in this design.
Add an option "Expand variable reference" to the new variable form in the CI/CD variables settings. This setting will be turned on by default for all existing and new variables. User can turn it off manually when creating a new variable or editing an existing variable.
When user adds a value with $, update the alert text as in this design.
When user unselects "Expand variable reference", update the Value input help text as described in this design.
The variables table should show if the variable is expanded or not. See designs

Setting behavior:

Expand variable reference = Checked -> variable expands (the current and default behavior)
Expand variable reference = Unchecked -> variable value is evaluated as raw string

👉 View the designs

🔗 Figma file

Links / references

Solution Validation Research issue
gitlab-runner#4696 (closed): Add support for raw variables (closed by gitlab-runner!1882 (merged))
#209670 (closed): GitLab CI/CD is replacing file variable content
gitlab-runner#1809 (closed): Use variable inside other variable
#17069 (closed): Cannot use $ character in build variables

Permissions and Security

Documentation

This feature needs to be documented in the Project and Group CI/CD settings docs.

Availability & Testing

Implementation Table

Group	Issues	Issue Link	Notes
frontend	Frontend: Migrate CI/CD Settings > Variables from VueX to GraphQL	#364375 (closed)	Blocks MVC
backend	Backend: Make it possible to set variables as non-expanded in CI/CD Settings > Variables	#361934 (closed)	MVC
backend	Backend: Make it possible to set a raw variable in our syntax	#353991 (closed)	MVC
frontend	Frontend: Make it possible to set variables as non-expanded in CI/CD Settings > Variables	👈 You are here	MVC
backend	Backend: Allow special characters to be used for raw variable types	#352657 (closed)	MVC
backend	Backend: Make it possible to set variables as non-expanded in Project->pipelines/new	#362539	TBD at a later date
backend	Backend: Make it possible to set variables as non-expanded in Manual Job->Play	#362548	TBD at a later date
backend	Backend: Make it possible to set variables as non-expanded in Project->pipeline_schedules/new	#362549	TBD at a later date

Available Tier

Feature Usage Metrics

What does success look like, and how can we measure that?

What is the type of buyer?

Is this a cross-stage feature?

This page may contain information related to upcoming products, features and functionality. It is important to note that the information presented is for informational purposes only, so please do not rely on the information for purchasing or planning purposes. Just like with all projects, the items mentioned on the page are subject to change or delay, and the development, release, and timing of any products, features, or functionality remain at the sole discretion of GitLab Inc.

Edited Jun 21, 2022 by Nadia Sotnikova