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

  1. Enable the flag in the rails console:
    Feature.enable(:vue3_migrate_web_ide)
  2. Restart Vite so the new .vue3 entries are emitted: gdk restart vite
  3. Visit /<group>/<project>/-/ide/<branch>. The happy path hands off to @gitlab/web-ide; it mounts zero Vue apps, and that's expected.
  4. 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:3000 when only 127.0.0.1:3000 is registered).
  5. Force the oauthCallback() failure by visiting /-/ide/oauth_redirect directly with no OAuth params.
  6. Force the @gitlab/web-ide start failure with a temporary local throw added to ~/ide/init_gitlab_web_ide.js, then visit the IDE.
  7. 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)
  8. 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.

Edited by Kushal Pandya

Merge request reports

Loading
Loading