Skip to content

Make variable value listbox searchable

What does this MR do and why?

#⃣ for #425052 (closed)

Make variable value listbox searchable

There's a GlDropdown in the UI to select prefilled variable values when running a manual pipeline - this MR:

  • converts the GlDropdown to a GlCollapsibleListbox this was handled by !143733 (merged)
  • moves it into its own component (VariableValuesListbox)
  • makes it searchable so that values can be selected more easily using only the keyboard

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

Before After
Screen_Recording_2024-02-06_at_19.02.44 Screen_Recording_2024-02-06_at_18.57.53

How to set up and validate locally

  1. configure some prefilled variable values in a project's pipeline:
# .gitlab-ci.yml

# sets up a variable called FLAG that defaults to "test"
# with options "dev", "qa", "test", and "prod"

variables:
  FLAG:
    value: "test"
    options:
      - "dev"
      - "qa"
      - "test"
      - "prod"
    description: "Variable description" # a variable description is required for the values dropdown to appear
  1. navigate to the project, and in the sidebar choose Build => Pipelines
  2. click the Run pipeline button in the upper right
  3. the FLAG variable should show up as a row in the variables form, with a dropdown as the value field and the description below
Edited by Miranda Fluharty

Merge request reports