Vue 3 migration: admin CI/CD settings

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

Part of &23285.

This page shows the admin CI/CD settings. One entry name, pages.admin.application_settings.ci_cd, exists in both the CE and the EE page root.

Entrypoints & apps

Entrypoint Vue apps mounted Page-specific components
app/assets/javascripts/pages/admin/application_settings/ci_cd/index.js (CE) ExpirationIntervals, mounted with initVueApp (app/assets/javascripts/admin/application_settings/runner_token_expiration/index.js:18) 4, mostly in admin/application_settings
ee/app/assets/javascripts/pages/admin/application_settings/ci_cd/index.js (EE) The CE app, plus the CI template dropdown from initCiTemplateDropdown Same 4. Both apps run.

Risks

  • The apps mount with initVueApp, so their root elements carry the data-gitlab-vue3-app marker. A silent fallback to Vue 2 is therefore detectable.
  • The EE file does not shadow the CE file. It imports it, then mounts one more app. So the EE page runs both apps, and the two vue3_migration.yml files must be byte-identical or the loader throws.
  • Two independent Vue apps mount here. Check both the runner token expiration intervals form and the CI template dropdown.

Tasks / MRs

  • MR 1: add the vue3_migrate_admin_ci_settings flag definition and two byte-identical vue3_migration.yml files, one under app/ and one under ee/.
  • Render the admin CI/CD settings page with the flag on.
  • Check the runner token expiration intervals form saves correctly.
  • Check the CI template dropdown opens and selects.
  • Write a Sentry query for this flag before ramping.
  • Ramp the flag as shown below.
  • Cleanup MR: move both ymls to status: migrated and remove the flag.

Rollout

enable for gitlab-org (dogfood)
→ 10% → 50% → 100%, with a soak between steps
→ default_enabled: true → cleanup MR

Notes

  • Restart the Vite dev server after you add a vue3_migration.yml. Otherwise the entry map stays stale, the apps never mount, and no console error appears.
  • Local GDK runs Vue 2. Stub the flag off to check rendering in feature specs.
Edited by 🤖 GitLab Bot 🤖