Part of https://gitlab.com/groups/gitlab-org/-/work_items/23084. New flag: `vue3_migrate_web_ide` (beta, `default_enabled: false`, actor is the current user, `group::source code`). ## Entrypoints & apps | Entrypoint | Vue apps mounted | |---|---| | `pages/ide/index` (`app/assets/javascripts/pages/ide/index/index.js`, calls `startIde()` from `~/ide/index`, 61 modules, 2 Vue components) | `OAuthDomainMismatchErrorRoot` (error path only), `WebIdeErrorRoot` (error path only) | | `pages/ide/oauth_redirect` (`app/assets/javascripts/pages/ide/oauth_redirect/index.js`, calls `mountOAuthCallback()`, 51 modules, 0 Vue components) | `GlAlert` app via `createAlert`, error path only | Routes: `ide#index` serves many paths under the `/-/ide` scope. `ide#oauth_redirect` serves `/-/ide/oauth_redirect`. **The Web IDE itself is not Vue.** `startIde()` hands off to the `@gitlab/web-ide` package, which is self-contained and manages its own workbench. On the happy path, zero Vue apps mount on the Web IDE page at all. The Vue surface only exists on error paths, which makes this page a slightly unusual migration candidate: most manual verification has to intentionally trigger failure states rather than just load the page. ## Runtime verification matrix How to check what is actually mounted on a given page state (browser console): ```js // Vue 3 apps [...document.querySelectorAll('[data-gitlab-vue3-app]')].map((el) => el.dataset.gitlabVue3App); // Vue 2 apps - should be empty once the flag is on [...document.querySelectorAll('*')].filter((el) => el.__vue__ && el.__vue__.$root === el.__vue__) .map((el) => el.__vue__.$options.name); ``` Page states to cover: `ide/index` happy path (Web IDE loads, no Vue mounts), `ide/index` with a mismatched OAuth callback URL, `ide/index` with a forced `@gitlab/web-ide` start failure, `ide/oauth_redirect` happy path, `ide/oauth_redirect` with a forced `oauthCallback()` failure. ### Vue 2 today - main validation targets | App | Vue root name(s) | Mounts when | Manual checks | Automated coverage | |---|---|---|---|---| | `~/ide/oauth_callback_domain_mismatch_error` (`~/ide/components/oauth_domain_mismatch_error.vue`) | `OAuthDomainMismatchErrorRoot` | Configured OAuth callback URLs don't match the expected callback URL on `ide/index`. Already mounts through `initVueApp` (`~/lib/utils/vue3compat/init_vue_app`) | Force a callback URL mismatch, confirm the error component renders | `spec/frontend/ide/components/oauth_domain_mismatch_error_spec.js` | | `~/ide/render_web_ide_error` (`~/ide/components/web_ide_error.vue`) | `WebIdeErrorRoot` | `@gitlab/web-ide` fails to start, from the catch block in `init_gitlab_web_ide.js`. Also uses `initVueApp` | Force a Web IDE start failure, confirm the error component renders | `spec/frontend/ide/components/web_ide_error_spec.js`, `spec/frontend/ide/render_web_ide_error_spec.js` | | `mount_oauth_callback.js` (`~/ide/oauth_redirect`) | `GlAlert` via `createAlert` from `~/alert` | `oauthCallback()` throws on `ide/oauth_redirect` | Force an `oauthCallback()` failure, confirm the alert renders | `spec/frontend/ide/mount_oauth_callback_spec.js` | ### Not Vue - sanity check only, no migration risk - **`@gitlab/web-ide` workbench**: fully self-contained, not part of the Vue migration surface. - **`~/tracking`**: `handleTracking` and `Tracking.enabled()` reach Vue only through `~/alert` and pull in zero Vue components. This is not a dead dependency: `Tracking.enabled()` is called at `init_gitlab_web_ide.js:101` and `handleTracking` is passed into the Web IDE config. - `~/ide/index.js` calls `Vue.use(Translate)` at module scope, no root mounts from this alone. ### ⚠️ Apps shared with other entrypoints | App | Also mounted by | Implication | |---|---|---| | Web IDE button (`initWebIdeLink`, `~/pages/projects/shared/web_ide_link/init_web_ide_link`) | `pages/projects/show` | Out of scope here, covered by the separate `vue3_migrate_project_overview` flag. No cross-flag risk for this issue | ### Coverage gaps → prioritize in manual smoke test `spec/features/ide_spec.rb` is a `:js` spec but is currently quarantined (https://gitlab.com/gitlab-org/quality/test-failure-issues/-/issues/9500), so there's effectively no working feature-level coverage for this page. Jest coverage exists for every component (`spec/frontend/ide/components/oauth_domain_mismatch_error_spec.js`, `spec/frontend/ide/components/web_ide_error_spec.js`, `spec/frontend/ide/render_web_ide_error_spec.js`, `spec/frontend/ide/mount_oauth_callback_spec.js`, `spec/frontend/ide/index_spec.js`), but since the Vue surface only renders on error paths and the one feature spec is quarantined, the manual smoke test needs to deliberately force each error state rather than just load the page. ## Tasks / MRs - [ ] Runtime smoke test: verify all page states from the matrix above - [ ] Web IDE loads normally on `ide/index` and takes over the page, confirm zero Vue roots mount (the expected happy-path result) - [ ] OAuth redirect flow completes normally on `ide/oauth_redirect` - [ ] Force a callback URL mismatch, confirm `OAuthDomainMismatchErrorRoot` renders - [ ] Force a Web IDE start failure, confirm `WebIdeErrorRoot` renders - [ ] Run the console check from the runtime verification matrix on each state above - [ ] **MR 1**: add the `vue3_migrate_web_ide` feature flag definition and a `vue3_migration.yml` for both `pages/ide/index` and `pages/ide/oauth_redirect` - [ ] Cleanup MR (after 100%): ymls → `status: migrated`, remove flag ⚠️ A page's yml inherits the flag's current rollout state at merge. ## Rollout ``` enable gitlab-org (dogfood ~1 week) → 25% → 100% (compressed ramp) → default_enabled: true → cleanup MR ```