Geo Sites Form - Migrate Namespace Dropdown
What does this MR do and why?
Closes #418028 (closed)
This change migrates the GlDropodown found in ee/app/assets/javascripts/geo_site_form/components/geo_site_form_namespaces.vue over to GlCollapsibleListbox as part of the Pajamas Migration Epic.
This change aims to add as little visual or functional changes as possible.
There are a few visual changes between the two components (loading state, gray default text color, checkboxes, and bg color on items, etc.). I've opted to leave the changes as aligned with the current component as possible as that is likely more aligned with GitLab UI than the current very old implementation.
Additionally, the event that is used to update the form data had to be updated as GlCollapsibleListbox passes the entire array of IDs rather than each individual ID when the @selected event is fired.
Screenshots or screen recordings
| Before | After |
|---|---|
| Before | After |
How to set up and validate locally
- Fetch and checkout this branch
- Setup Geo by following the 1-line installation in the Easy Installation section (How to setup Geo)
- Access your Primary GDK UI
- Navigate to the Geo Sites Page (ex.
http://127.0.0.1:3000/admin/geo/sites) - Click the Add site button in the top right
- Click the Selective synchronization dropdown and choose "Projects in certain groups"
- In the following dropdown, ensure you can select multiple items, search, deselect items, and ultimately save
- Once saved ensure the Site Card says Selective (groups)
- Edit the site
- Ensure the selected items are retained and can be updated
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.
Related to #418028 (closed)