Frontend (Variable drawer): Add "Masked and hidden" option to "Visibility" options

Problem to Solve

Today, we can have the values protected & avoid disclosure during pipeline execution. If someone has maintainer+ access they are able to access and reveal these variables. We should have an option to make the value permanently hidden so that anyone having maintainer+ access to that project, will not be able to see the value.

Proposal

Creating a variable

• Having visibility options:
  • visible
  • masked
  • masked and hidden: Once a variable is set and saved as this option, users cannot change the visibility settings.

Editing the variable

• Once the masked and hidden variable is created, the visibility option cannot be modified.
• To update the value, users need to reset the value.

Variable table

• Users can check the visibility type under the Options column.

• 🔗 Figma spec

While this could be a breaking change in some use cases, this is in line with product development directions. We could roll this out behind a feature flag, on gitlab.com first to see feedback, and enable it on self-managed if no contrary feedback arrives.

Technical proposal

🎏 All of the UI changes should be behind the ci_hidden_variables feature flag

File: ci_variable_drawer

• We'll add a masked and hidden option to the new Visibility section created in #455923 (closed)
• Once a variable is hidden, when it's shown in the drawer:
  • hide the value field
  • disable the visibility radio buttons
  • show the "This value is masked and hidden permanently." message and the Reset value button
  • show a blank value field when the Reset value button is clicked (should this replace the message/button or appear below it? 🤔)

File: ci_variable_shared.vue

• Accept a new prop (areHiddenVariablesAvailable?) that controls whether we show the masked and hidden visibility option in the drawer (so that we can pass in false for instance variables and the value of the ci_hidden_variables feature flag for group/project variables)

Files: API calls in ci_variable_list/graphql/settings.js

• Update callProjectEndpoint and callGroupEndpoint to get/set the new masked and hidden attribute
• Here's a curl request for reference: curl --request POST --header "PRIVATE-TOKEN: glpat-XXXXX" "http://gdk.test:3000/api/v4/projects/7/variables" --form "key=variable_one" --form "value=variable-value" --form "masked_and_hidden=true"
• On create, an error is thrown if you try to set hidden: true with masked: false

File: ci_variable_table

• Ensure the attribute masked and hidden shows up in the badges

File: ci/variables/_attributes.html.haml

• Add a masked and hidden bullet point to explain what this option means in the body of the settings section

Write specs

Updated the following spec files along with the related mock data.

• ci_variable_table_spec
• ci_variable_drawer_spec
• maybe more specs in spec/frontend/ci/ci_variable_list/

---

Implementation Table

Group	Issue Link
frontend iteration 1	#455923 (closed)
frontend iteration 2	👈 You are here
backend	#390305 (closed)

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.