Skip to content

Make environments dropdown reusable

Mireya Andres requested to merge ci/ma-move-env-dropdown-to-common into master

What does this MR do and why?

Resolves #424458 (comment 1664773807).

As part of the effort to create the form for adding and editing secrets, the page will reuse the existing environment scope dropdown in the CI Variables form (found in Settings > CI/CD > Variables for projects and groups). The only difference is that the environments dropdown in the secrets form will:

Thus, this MR implements the following changes:

  • Add the allowNoEnvironments prop, which toggles the Not applicable option in the dropdown. This option is not available by default.
  • Add the canCreateWildcard prop, which determines if the button for creating a wildcard scope will be rendered or not. The button is rendered by default.
  • Move all code relating to the environment scope dropdown from ~/ci/ci_variable_list to ~/ci/ci_environments_dropdown. This includes utils, GraphQL queries, Vue components, etc.

This is how the file tree currently looks like. The environments dropdown code lives in /ci/ci_variable_list alongside the rest of the components for CI Variables.

app/assets/javascripts/ci/ci_variable_list
├── components
│   ├── ci_environments_dropdown.vue
│   └── ...
├── constants.js # includes all constants for CI Variables
├── graphql
│   ├── fragments
│   ├── mutations
│   ├── queries
│   │   ├── group_environments.query.graphql
│   │   ├── project_environments.query.graphql
│   │   └── ...
└── utils.js

When this MR is merged, all the related environments dropdown code will be moved to /ci/ci_environments_dropdown.

app/assets/javascripts/ci/ci_environments_dropdown
├── ci_environments_dropdown.vue
├── constants.js # includes constants relating to the environments dropdown only
├── graphql
│   └── queries
│       ├── group_environments.query.graphql
│       └── project_environments.query.graphql
└── utils.js

The intention is for the dropdown to be reusable. It is currently being used in the CI Variables form in the CI/CD settings, and will be used in the future for the secrets form in !137872 (closed).

~/ci/common/private/ci_environments_dropdown.js is our wrapper that exports the reusable component, queries, and utils.

Here is the implementation breakdown for the Secrets Management form:

Iteration MR
Make environments dropdown reusable 👈 You are here!
Create base form with key, value, description, environment, expiration, and rotation fields !137872 (closed)
Add access permission dropdowns, with user search ⌛
Integrate apollo and add form submission ⌛

Screenshots or screen recordings

Screen_Recording_2023-12-19_at_21.56.54

The new props aren't being used yet in any component, so we just have to make sure the CI Variables form works like before and that our existing tests pass (pipeline is green).

How to set up and validate locally

  1. Go to Settings > CI/CD > Variables and try to add or edit a CI variable.
  2. Verify that the environment scope dropdown works as expected. By default, it can search (a maximum of 30) environments and create a wildcard scope if there are no search results.
  3. Use the Vue devtools to modify the props.
    • When allowNoEnvironments is true, an additional Not applicable options should be available.
    • When canCreateWildcard is false, you cannot create a wildcard scope when the search results are empty.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Mireya Andres

Merge request reports