Use GlCollapsibleListbox in ci_environments_dropdown.vue
Resolves #384285 (closed)
What does this MR do and why?
This MR changes the Vue component used to select environment scope of CI environment variables from GlDropdown
to GlCollapsibleListbox
.
Screenshots or screen recordings
before | after | |
---|---|---|
Closed | ![]() |
![]() |
Open | ![]() |
![]() |
With selection | ![]() |
![]() |
With search query | ![]() |
![]() |
Difference in looks
The dropdown is not occupying the whole width like before. This is because GlCollapsibleList
doesn't (yet?) support specifying additional classes for the toggle button text (it only supports toggleClass
which goes to the button.gl-button-dropdown-toggle
).
Difference in behavior
The dropdown does not clear the search term when it is closed nor when a new environment is created. This is because GlCollapsibleList
does not support programmatically clearing the search input.
before | after |
---|---|
Screen_Recording_2022-12-26_at_4.58.01_PM | Screen_Recording_2022-12-26_at_5.15.04_PM |
How to set up and validate locally
- Go to the CI settings page of a project. For example:
http://localhost:3000/flightjs/Flight/-/settings/ci_cd
- Expand
Variables
section then click onAdd variable
- Validate that you can:
- Select an existing environment
- Search through existing environments
- Create a new environment with a search term that doesn't correspond to any existing environment
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.