Loading
Add Vue 3 migration config for the dependency list
What does this MR do and why?
Adds the Vue 3 migration config for the project and group dependency list pages. This is a feature flag plus a vue3_migration.yml per entrypoint, following Option 1 of the Vue 3 migration guide.
It also fixes the Project token on the group page. Under Vue 3 it sent project names instead of IDs.
Checklist
- Add the feature flag file
- Add a
vue3_migration.ymlper entrypoint - Fix anything the specs or manual testing find
- Add the
pipeline:run-rspec-vue3label to the MR - Roll out the flag, then set the files to
status: migrated
References
- Closes Vue 3 migration: dependency list (#607915) • Samantha Ming • 19.6
- Parent epic: Vue 3 migration: Vulnerability Management and A... (gitlab-org#23064) • Lorenz van Herwaarden • 19.4
- Rollout issue: [FF] `vue3_migrate_dependency_list` (#631505) • Samantha Ming • 19.6
- Similar MRs: !255331 (merged) (security dashboard), !252094 (merged) (vulnerability report)
Screenshots or screen recordings
Summary
| Page | Flag disabled (Vue 2) | Flag enabled (Vue 3) |
|---|---|---|
| Group | 9/9 | 9/9 (after the Project token fix; 8/9 before) |
| Project | 10/10 | 10/10 |
Flag combinations
| # | Entrypoint | Page | Flag enabled (Vue 3) | Flag disabled (Vue 2) |
|---|---|---|---|---|
| 1 | groups/dependencies |
Group dependency list |  |
 |
| 2 | projects/dependencies/index |
Project dependency list |  |
 |
Group page
| # | Scenario | Flag disabled (Vue 2) | Flag enabled (Vue 3) | Result |
|---|---|---|---|---|
| G1 | Page loads |  |
 |
Same |
| G2 | Component token: add and clear |  |
 |
Same |
| G3 | Project token (before fix) |  |
 |
Vue 2 sends project_ids[]=23 (2,073 rows). Vue 3 sent the project name and returned no rows. |
| G3 (fix) | Project token after the fix |  |
 |
Both send project_ids[]=23 and return 2,073 rows. |
| G4 | License dropdown: scroll to the bottom, search, select (virtual scroller) |  |
 |
Same. All 740 licenses reachable, no blank gaps. |
| G5 | Sort and next page |  |
 |
Same |
| G6 | Location and project count dropdowns |  |
 |
Same |
| G7 | Dependency path drawer |  |
 |
Same |
| G8 | Malware token |  |
 |
Same |
| G9 | Export dropdown |  |
 |
Same |
Project page
| # | Scenario | Flag disabled (Vue 2) | Flag enabled (Vue 3) | Result |
|---|---|---|---|---|
| P1 | Page loads |  |
 |
Same |
| P2 | Component token |  |
 |
Same |
| P3 | Activity token |  |
 |
Same |
| P4 | Sort and next page |  |
 |
Same |
| P5 | Dependency path drawer |  |
 |
Same |
| P6 | License "+N more" modal |  |
 |
Same |
| P7 | Malware badge |  |
 |
Same |
| P8 | Export dropdown |  |
 |
Same |
| P9 | Row expand: loading spinner clears, row collapses |   |
  |
Same |
| P10 | Vulnerabilities popover |  |
 |
Same |
Console: no new errors under Vue 3.
Not covered
The Tracked ref token and the ref count column. Both need the project_dependency_tracked_ref feature flag, which is off.
How to set up and validate locally
- Enable the flag:
Feature.enable(:vue3_migrate_dependency_list) - Restart Vite:
gdk restart vite - Open the group and project dependency list pages.
- Check the console shows
[gitlab] [V] Using Vue.js 3 for DependenciesAppRoot. - On the group page, filter by a project and check the request sends a numeric
project_ids[]value.
MR acceptance checklist
Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
Edited by Samantha Ming