Skip to content

Add description field in CI variable form

Mireya Andres requested to merge ci-vars-drawer-ux into master

What does this MR do and why?

Resolves #378938 (closed). Related to #418331 (closed) as part of our Beautifying our UI effort for CI Variables.

This allows the user to add/edit the description to their CI variable (from the project, group, or admin settings). The description will show up in the CI variables table, as well as the Inherited CI Variables table (which is only available for project settings).

Notes for the reviewers:

  • This looks like it touches a lot of files, but majority of them is just to update the GraphQL. I created new fragments so that if we need to update multiple queries and mutations in the future, we don't need to update 12 files 😄
  • ci_variable_drawer.vue is used for project, group, and admin settings. ci_variable_table.vue is used for the same three settings, plus the inherited CI variables table for the project settings.
  • variable_list_drawer_shared_examples.rb is shared in the specs for all three settings (e.g. project_variables_spec.rb, group_variables_spec.rb, admin_variables_spec.rb).

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Screen_Recording_2024-01-03_at_17.55.31

How to set up and validate locally

  1. Go to Settings > CI/CD > Variables.
  2. On the top right of the variables table, click Add variable and fill up the form.
    • Verify that the value field is resizable
    • Verify that you can optionally add a description.
  3. The description should show up in the variables table.
  4. If you're on the project page, descriptions from group variables inherited by the project should also show up in the inherited variables table.

This applies to the CI/CD settings for projects, groups, and admin.

Edited by Mireya Andres

Merge request reports