Extend Vue 3 runner rollout to group and project pages
What does this MR do and why?
Extends the existing vue3_migrate_admin_runners rollout from the admin runner
pages to the group and project runner pages. All of these entrypoints
mount the same ~/ci/runner/* apps that already run under Vue 3 for admin, so
they can share the flag rather than each waiting on a separate migration.
Two different mechanisms are used, per the migration guide:
Option 1 (vue3_migration.yml) — 9 standalone page entrypoints:
pages/groups/runners/{index,show,edit,new,register}pages/projects/runners/{show,edit,new,register}
Option 2 (?vue3 partial migration) — the project runner list.
It has no standalone entrypoint: Projects::RunnersController#index redirects to
the CI/CD settings page, where initProjectRunnersSettings() mounts alongside
about a dozen unrelated apps. A vue3_migration.yml there would flip all of
them, so only the runners app is moved, behind a gon.features check with a
Sentry-reported fallback to the Vue 2 build.
No new feature flag is introduced — this reuses vue3_migrate_admin_runners.
How to verify
- Enable the flag:
Feature.enable(:vue3_migrate_admin_runners) - Visit any group or project runner page, plus Settings > CI/CD > Runners.
- Confirm the console shows
[V] Using Vue.js 3 (with @vue/compat) for .... - Confirm
document.querySelectorAll('[data-gitlab-vue3-app]')returns the mounted runner app, and that on the CI/CD settings page only the runners app carries the marker.
The runners app on Settings > CI/CD, rendering under Vue 3:
![]() |
Verified locally on that page with a temporary assertion in
spec/features/projects/runners/maintainer_manages_project_runners_spec.rb:
document.querySelectorAll('[data-gitlab-vue3-app]')returns exactly one element —ProjectRunnersSettingsAppRoot. None of the other apps on the settings page are affected, which is the point of using Option 2 here.- The console logs
[V] Using Vue.js 3 (with @vue/compat) for ProjectRunnersSettingsAppRoot. - The full spec file passes (8 examples, 0 failures). Feature flags default to
enabled in the test environment, so every example in it already exercises the
page through the new
?vue3path. spec/lib/gitlab/vue3_migration_files_spec.rbpasses (162 examples), covering the 9 new YAML files.
References
- Feature issue: gitlab-org#20939
- Rollout issue: #594125
