Add vue3_migrate_web_ide flag and migrate Web IDE pages
What does this MR do and why?
Adds the vue3_migrate_web_ide feature flag and opts the pages/ide/index and
pages/ide/oauth_redirect entrypoints into the Vue 3 migration with status: rollout.
Both pages keep serving Vue 2 until the flag is enabled.
The Web IDE itself isn't Vue: startIde() hands off to @gitlab/web-ide, which manages its
own workbench, so on the happy path zero Vue apps mount. The only Vue surface here is on
error paths (OAuth callback mismatch, @gitlab/web-ide start failure, and an oauthCallback()
failure alert).
Note
This MR adds a resolver in ~/ide/init_gitlab_web_ide.js and ~/ide/mount_oauth_callback.js
that loads the Vue 3 copy of the error app and the alert via a dynamic import('...?vue3').
It's needed because the Vue 3 build treats app roots as barriers, so the infection chain
stops at these two Vue-free modules, and the app roots below them would otherwise stay on
Vue 2 even after we flip these ymls to status: migrated. The fix is flag gated, so it
doesn't change anything for users until the flag is enabled. When the flag is later removed,
the ?vue3 suffixes on these two imports must stay; only the conditional gets removed.
References
Screenshots or screen recordings
NA
How to set up and validate locally
- Enable the flag in the rails console:
Feature.enable(:vue3_migrate_web_ide) - Restart Vite so the new
.vue3entries are emitted:gdk restart vite - Visit
/<group>/<project>/-/ide/<branch>. The happy path hands off to@gitlab/web-ide; it mounts zero Vue apps, and that's expected. - Force the OAuth mismatch error by visiting the IDE on a host that isn't registered as an
OAuth callback URL (for example
gdk.test:3000when only127.0.0.1:3000is registered). - Force the
oauthCallback()failure by visiting/-/ide/oauth_redirectdirectly with no OAuth params. - Force the
@gitlab/web-idestart failure with a temporary localthrowadded to~/ide/init_gitlab_web_ide.js, then visit the IDE. - For each error state, confirm the app root is on Vue 3 by running this in the console. It
returns the mounted app's name:
[...document.querySelectorAll('[data-gitlab-vue3-app]')].map((el) => el.dataset.gitlabVue3App) - Disable the flag and repeat steps 4 to 7. All three should report Vue 2 and behave identically.
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.