Skip to content

Migrate inherited CI variables table to vue

Mireya Andres requested to merge vueify-inherited-group-variables into master

What does this MR do and why?

For #222367 (closed). Depends on !119444 (merged).

The Inherited Group Variables table in the CI/CD settings is migrated to Vue for two reasons:

  • to make the UI consistent with the CI/CD Variable settings and show more information (like the Options column)
  • there are discussions to possibly consolidate both tables in the future, so this will lay the groundwork for that

This table is for information purposes only, so there will be no action buttons aside from the copy button. The value will remain hidden as well. In future MRs, we are planning to implement the edit and pagination buttons.

This is developed under a feature flag that is disabled by default. No changelog trailers added.

This MR looks big, but a lot of the file changes are just for setting up the new Vue component.

Screenshots or screen recordings

Before After
before after

If there are too many variables to fetch, we show an error message.

Screenshot_2023-05-22_at_13.30.01

How to set up and validate locally

  1. Enable the ci_vueify_inherited_group_variables feature flag.
  2. Create a project in a subgroup of a group.
  3. Go to Settings > CI/CD > Variables for both the subgroup and group and add some CI variables.
  4. Under the CI/CD Variables for the project, view the the Inherited Group Variables section.
  5. Verify the changes. The table should show the variable type, options column, and a link to the group or subgroup that owns that variable.

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