Part of https://gitlab.com/groups/gitlab-org/-/work_items/23084. New flag: `vue3_migrate_admin_applications` (beta, `default_enabled: false`, actor is the current user). **Ownership note**: `Admin::ApplicationsController` is `feature_category :system_access`, not `:web_ide`. Source Code owns the Web IDE OAuth callout on this page, but the page also carries the delete-application and OAuth-secret apps, which belong to the system access domain. Because `vue3_migration.yml` applies to a whole page entrypoint and can't be scoped to a single app, migrating this entrypoint moves all three apps together. Get a courtesy check with the owning group before ramping past `gitlab-org`, the same way Web IDE ownership itself was confirmed in the epic discussion. ## Entrypoints & apps | Entrypoint | Vue apps mounted | |---|---| | `pages/admin/applications` (`app/assets/javascripts/pages/admin/applications/index.js`, 36 modules, 6 Vue components, no risky dependency clusters: no Vuex, no vue-router, no VueApollo, no portal-vue) | `WebIdeOAuthApplicationCallout`, `delete_application.vue` app, `oauth_secret.vue` app | ## 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: admin application edit page (Web IDE OAuth callout visible), reset application settings modal open, application delete flow, OAuth secret copy and visibility toggle. ### Vue 2 today - main validation targets | App | Vue root name(s) | Mounts when | Manual checks | Automated coverage | |---|---|---|---|---| | `initWebIdeOAuthApplicationCallout()` (`~/ide/oauth_application_callout`, `~/ide/components/oauth_application_callout.vue` plus `~/ide/components/reset_application_settings_modal.vue`) | `WebIdeOAuthApplicationCallout` | Mounts on `#web_ide_oauth_application_callout`, rendered by `app/views/admin/applications/_web_ide_oauth_application_callout.html.haml` on the admin application edit page | Confirm the callout renders, open the reset application settings modal and confirm it | `spec/frontend/ide/components/oauth_application_callout_spec.js`, `spec/frontend/ide/components/reset_application_settings_modal_spec.js` | | `initApplicationDeleteButtons()` (`~/admin/applications`, `~/admin/applications/components/delete_application.vue`) | delete application root | Mounts on the same admin application page | Delete an application, confirm the flow works | `spec/frontend/admin/applications/components/delete_application_spec.js` | | `initOAuthApplicationSecret()` (`~/oauth_application`, `~/oauth_application/components/oauth_secret.vue`, reaching `~/vue_shared/components/input_copy_toggle_visibility/input_copy_toggle_visibility.vue` and `~/vue_shared/components/simple_copy_button.vue`) | OAuth secret root | Mounts on the same admin application page | Confirm the copy button and visibility toggle both work | `spec/frontend/oauth_application/components/oauth_secret_spec.js` | ### Not Vue - sanity check only, no migration risk None identified for this entrypoint, all three mounted apps are Vue. ### ⚠️ Apps shared with other entrypoints None identified, all three apps are specific to this entrypoint. The Web IDE OAuth callout is the only app here that Source Code owns, see the ownership note above. ### Coverage gaps → prioritize in manual smoke test `spec/features/admin/admin_manage_applications_spec.rb` exists but is not a `:js` spec, so it never exercises any of the Vue apps on this page. Jest coverage exists per component (`spec/frontend/ide/components/oauth_application_callout_spec.js`, `spec/frontend/ide/components/reset_application_settings_modal_spec.js`, `spec/frontend/admin/applications/components/delete_application_spec.js`, `spec/frontend/oauth_application/components/oauth_secret_spec.js`), but with no `:js` feature spec covering the page end to end, the whole page needs manual smoke testing, including the two non-Web-IDE apps. ## Tasks / MRs - [ ] Runtime smoke test: verify all page states from the matrix above - [ ] Web IDE OAuth callout renders on the admin application edit page - [ ] Reset application settings modal opens and confirms - [ ] Deleting an application works end to end - [ ] OAuth secret copy and visibility toggle both work - [ ] Run the console check from the runtime verification matrix on each state above - [ ] **MR 1**: add the `vue3_migrate_admin_applications` feature flag definition and a `vue3_migration.yml` for `pages/admin/applications` - [ ] 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 ```