## 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. - [:link: Figma spec](https://www.figma.com/file/8WqthzcG69lRQtG5Lusfdb/%F0%9F%92%9C-CI%2FCD-Variables?node-id=2893%3A21246&t=VeYWeFtCfJwyXr9G-1) 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 :flags: All of the UI changes should be behind [the `ci_hidden_variables` feature flag](https://gitlab.com/gitlab-org/gitlab/-/issues/451326) ### File: [ci_variable_drawer](https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_drawer.vue) - We'll add a `masked and hidden` option to the new `Visibility` section created in https://gitlab.com/gitlab-org/gitlab/-/issues/455923 - 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? :thinking:) ### File: [ci_variable_shared.vue](https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/javascripts/ci/ci_variable_list/components/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](https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/javascripts/ci/ci_variable_list/graphql/settings.js#L93-140) - 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](https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/models/concerns/ci/hidable_variable.rb#L19) if you try to set `hidden: true` with `masked: false` ### File: [ci_variable_table](https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_table.vue) - Ensure the attribute `masked and hidden` shows up in the badges ### File: [ci/variables/_attributes.html.haml](https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/views/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](https://gitlab.com/gitlab-org/gitlab/-/blob/master/spec/frontend/ci/ci_variable_list/components/ci_variable_table_spec.js) - [ci_variable_drawer_spec](https://gitlab.com/gitlab-org/gitlab/-/blob/master/spec/frontend/ci/ci_variable_list/components/ci_variable_drawer_spec.js) - maybe more specs in `spec/frontend/ci/ci_variable_list/` --- ## Implementation Table <!-- _NOTE: If the issue is not part of an epic, the implementation table can be removed. If it is part of an epic, make sure that the implementation table below mirrors the corresponding epic's implementation table content._ --> | Group | Issue Link | | ------ | ------ | | ~frontend iteration 1 | https://gitlab.com/gitlab-org/gitlab/-/issues/455923 | | ~frontend iteration 2 | :point_left: You are here | | ~backend | https://gitlab.com/gitlab-org/gitlab/-/issues/390305 | <!-- triage-serverless v3 PLEASE DO NOT REMOVE THIS SECTION --> *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.* <!-- triage-serverless v3 PLEASE DO NOT REMOVE THIS SECTION -->