Part of &23084. Flag 6 of 7 — low-traffic config forms; homogeneous batch, good agentic-development candidate. ## Entrypoints & apps | Entrypoint | Vue apps mounted | |---|---| | `projects/settings/repository/show` (CE) | Mirror table (`MirrorTableRoot`), branch rules listing (`BranchRulesAppRoot`), default-branch selector (`DefaultBranchSelectorRoot`), repository maintenance — remove blobs (`RemoveBlobsRoot`) + redact text (`RedactTextRoot`), deploy keys (`DeployKeysAppRoot`) | | `projects/settings/repository/show` (EE overlay) | All CE apps plus web-based commit signing (`WebBasedCommitSigningSettings`); EE mirror (`EEMirrorRepos` — plain JS), EE protected branches/tags (plain JS classes) | | `projects/settings/branch_rules` | Branch rules detail app (`ViewRoot`) — CE+EE via `ee_else_ce` | | `admin/application_settings/repository` | Dormant-project deletion form (`DormantProjectDeletion`) | | EE `admin/application_settings/templates` | Group entity-select (`GroupSelectRoot`), project entity-select (`ProjectSelectRoot`) | | EE `admin/push_rules` | None — `initSettingsPanels()` only (plain JS); no Vue apps | | EE `projects/path_locks` | None — plain JS AJAX handler; zero Vue (confirmed) | ## Runtime verification matrix How to check what's actually mounted on a given page state (browser console): ```js // Vue 3 apps (incl. @vue/compat) [...document.querySelectorAll('[data-v-app]')].map((el) => el.__vue_app__?._component?.name); // 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: project with push/pull mirrors configured, project without mirrors (CE only), EE project with protected refs for users, admin instance with dormant-project deletion enabled, EE admin templates page. ### Vue apps — main validation targets | App | Vue root name(s) | Mounts when | Manual checks | Automated coverage | |---|---|---|---|---| | Mirror table (`#js-mirror-table`) | `MirrorTableRoot` | Project has mirrors configured (or mirror feature available) | Mirror list renders; add push/pull mirror and verify it appears in table; delete mirror removes row | Feature: `spec/features/projects/settings/repository_settings_spec.rb`, `ee/spec/features/projects/settings/repository_spec.rb`. E2E: `qa/.../3_create/repository/push_mirroring_over_http_spec.rb`, `push_mirroring_lfs_over_http_spec.rb`, `ee/.../pull_mirroring_over_http_spec.rb`, `pull_mirroring_over_ssh_with_key_spec.rb` | | Branch rules listing (`#js-branch-rules-listing`) | `BranchRulesAppRoot` | Always on settings/repository page | Branch rules list renders; clicking a rule opens detail; create rule from this view | Feature: `spec/features/projects/settings/branch_rules/branch_rules_listing_spec.rb`, `ee/spec/features/projects/settings/branch_rules/branch_rules_listing_spec.rb`. E2E: `qa/.../3_create/repository/add_new_branch_rule_spec.rb` | | Default-branch selector (`.js-select-default-branch`) | `DefaultBranchSelectorRoot` | Always | Change default branch and save; branch name persists after reload | Feature: `spec/features/projects/settings/repository_settings_spec.rb` | | Remove blobs (`.js-maintenance-remove-blobs`) | `RemoveBlobsRoot` | Always (repository maintenance section) | Input blob OIDs and submit removal; success/error state renders | None (Jest only) — **manual only** | | Redact text (`.js-maintenance-redact-text`) | `RedactTextRoot` | Always (repository maintenance section) | Enter text pattern and submit redaction; success/error state renders | None (Jest only) — **manual only** | | Deploy keys (`#js-deploy-keys`) | `DeployKeysAppRoot` | Always | Add deploy key, verify it appears enabled; disable/enable key; key appears in available-project keys list | Feature: `spec/features/projects/settings/repository_settings_spec.rb`. E2E: `qa/.../6_deploy/deploy_key/add_deploy_key_spec.rb`, `clone_using_deploy_key_spec.rb` | | Branch rules detail (`#js-branch-rules`) | `ViewRoot` | On `projects/settings/branch_rules` page | Create branch rule, configure protections; edit and delete rule; EE: approval rules and code owners display correctly | Feature: `spec/features/projects/settings/branch_rules/branch_rule_details_spec.rb`, `ee/spec/features/projects/settings/branch_rules/branch_rule_details_spec.rb`. E2E: `qa/.../3_create/repository/add_new_branch_rule_spec.rb` | | Dormant-project deletion (`.js-dormant-project-deletion-form`) | `DormantProjectDeletion` | On admin repository settings page | Toggle delete dormant projects on/off; adjust threshold months and size; save and verify values persist | Feature: `spec/features/admin/settings/repository_settings_spec.rb` | | Web-based commit signing (`#js-web-based-commit-signing-settings-project`) | `WebBasedCommitSigningSettings` | EE, project with signing feature | Toggle signing setting; save and reload; setting persists | None (Jest only) — **manual only** | | Group entity-select (EE templates page) | `GroupSelectRoot` | EE admin templates page, multiple instances | Select a group from dropdown; search works; selection saves | Feature: `ee/spec/features/admin/settings/templates_settings_spec.rb` | | Project entity-select (EE templates page) | `ProjectSelectRoot` | EE admin templates page, multiple instances | Select a project for custom templates; search works; selection saves | Feature: `ee/spec/features/admin/settings/templates_settings_spec.rb` | ### ⚠️ Apps shared with other entrypoints | App | Also mounted by | Implication | |---|---|---| | `GroupSelectRoot` (`initGroupSelects`) | `ee/pages/groups/settings/domain_verification` | Same shared component; validate on this page specifically | | `ProjectSelectRoot` (`initProjectSelects`) | `ee/pages/groups/settings/domain_verification`, `ee/pages/groups/settings/analytics/show` | Same shared component; validate on this page specifically | No other apps in this flag's entrypoints are shared with pages already migrated under `vue3_migrate_repository` (tree/blob/project-overview) or other flags in this series. ### Not Vue — sanity check only, no migration risk - `MirrorRepos` / `EEMirrorRepos` — plain JS classes (mirror form UI); no Vue - `ProtectedBranchCreate`, `ProtectedBranchEditList` (CE + EE), `ProtectedTagCreate`, `ProtectedTagEditList` — plain JS classes - `initSettingsPanels` — jQuery-based collapsible panels; no Vue - `initSearchSettings` — plain JS search within settings; no Vue - `UserCallout` — plain JS class - `initDatePicker` — plain JS / flatpickr - `fileUpload` — plain JS - `initDeprecatedRemoveRowBehavior` (path_locks) — plain JS AJAX - EE `admin/push_rules` — only `initSettingsPanels`; zero Vue roots ### Coverage gaps → prioritize in manual smoke test `RemoveBlobsRoot`, `RedactTextRoot`, `WebBasedCommitSigningSettings` have no feature/E2E specs — manual only. EE `admin/push_rules` has feature spec coverage (`ee/spec/features/admin/admin_interacts_with_push_rules_spec.rb`) but zero Vue to migrate. EE `projects/path_locks` has feature spec (`ee/spec/features/projects/path_locks_spec.rb`) but zero Vue — trivially safe. ## Tasks / MRs - [ ] **MR 1**: create `vue3_migrate_repo_settings` flag (beta, `default_enabled: false`, actor-based) + `vue3_migration.yml` (`status: rollout`) for `projects/settings/repository` CE+EE and `projects/settings/branch_rules` - [ ] **MR 2**: yml entries for `admin/application_settings/repository`, EE `admin/application_settings/templates`, EE `admin/push_rules` - [ ] **MR 3**: yml for EE `projects/path_locks` — zero Vue; candidate to go straight to `status: migrated`; confirm with maintainers - [ ] Runtime smoke test: run each page under `VUE_VERSION=3` in GDK using the matrix above; fix any `@vue/compat` runtime issues found - `projects/settings/repository/show` — project with mirrors: - [ ] Mirror table — list renders, add push mirror appears in table, delete removes row - [ ] Branch rules listing — list renders, click rule opens detail - [ ] Default-branch selector — change branch, save, reload verifies persistence - [ ] Deploy keys — add key, appears enabled; disable/re-enable - [ ] Remove blobs — input OIDs, submit; success/error state renders *(no feature spec — manual only)* - [ ] Redact text — enter pattern, submit; success/error state renders *(no feature spec — manual only)* - [ ] Console check: no Vue 2 roots left, no `@vue/compat` warnings/errors - `projects/settings/repository/show` — EE, protected-refs-for-users licensed: - [ ] EE protected branches/tags forms — create/edit/delete (plain JS, sanity only) - [ ] Web-based commit signing toggle — save persists *(no feature spec — manual only)* - `projects/settings/branch_rules`: - [ ] Create branch rule, configure protections, save - [ ] Edit existing rule; delete rule - [ ] EE: approval rules and code owners display - `admin/application_settings/repository`: - [ ] Dormant-project deletion toggle — on/off, adjust months/size, save and reload - EE `admin/application_settings/templates`: - [ ] Group select — dropdown opens, search, select, save - [ ] Project select — dropdown opens, search, select, save - EE `admin/push_rules` (no Vue; sanity only): - [ ] Settings panels expand/collapse (plain JS) - EE `projects/path_locks` (no Vue; sanity only): - [ ] Lock/unlock path row hides and shows empty state - [ ] Define Sentry alert query before ramping - [ ] **Cleanup MR** (after 100%): ymls → `status: migrated`, remove flag ## Rollout ``` enable gitlab-org (dogfood ~1 week) → 25% → 100% (low traffic, forms) → default_enabled: true → cleanup MR ```