Frontend (Variable drawer): Convert "Mask variable" checkbox to "Visibility" radio button group

Problem to solve

We want to add a "Masked and hidden" option when configuring variables, but adding another checkbox for it doesn't make much sense. Now that we're adding more visibility options, it would be clearer if they were shown separately from the "flags".

Proposal

Replace the Mask variable checkbox in the Flags section of the variable drawer with a new section called Visibility. There should be two options: Visible (default) and Masked (selected if the old Mask variable checkbox was checked).

before	after

Technical proposal

File: ci_variable_drawer

• We'll separate out the Masked checkbox from the rest of the Flags checkboxes
• We'll create a new Visibility section with two options (visible and masked)
  • Make these options a GlFormRadioGroup so that only one can be selected at a time

Write specs

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

• ci_variable_drawer_spec

Implementation Table

Group	Issue Link
frontend iteration 1	👈 You are here
frontend iteration 2	#29674 (closed)
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.