Part of &23084. Flag 3 of 7 — **destructive-action pages** (delete branch/tag modals, ref creation). Isolated so a regression here never forces rolling back read-only pages; deliberate soak. ## Entrypoints & apps | Entrypoint | Vue apps mounted | |---|---| | `projects/branches/index` | Divergence graph (`DivergenceGraphRoot`, one per branch), delete-branch modal (`DeleteBranchModalRoot`), delete-merged-branches modal (`DeleteMergedBranchesRoot`), branch more-actions dropdowns (`DeleteBranchButtonRoot`, one per branch), sort dropdown (`SortBranchesDropdownApp`), source-code archive dropdowns (`SourceCodeDropdown{N}`). Commit popovers use legacy `Vue.extend()` pattern — compat risk. | | `projects/branches/new` | New-branch ref selector (`RefSelectorRoot`). `NewBranchForm` is a plain JS class. | | `projects/tags/index` | Delete-tag modal (`DeleteTagModalRoot`), sort dropdown (`SortTagsDropdownApp`), source-code archive dropdowns (`SourceCodeDropdown{N}`). Commit popovers use legacy `Vue.extend()` pattern. | | `projects/tags/show` | Delete-tag modal (`DeleteTagModalRoot`). Commit popovers use legacy `Vue.extend()` pattern. | | `projects/tags/new` | New-tag ref selector (`RefSelectorRoot`). `ZenMode` and `GLForm` are plain JS classes. | ## 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 multiple branches (active + merged + protected), project with tags (protected + unprotected), new-branch form, new-tag form. ### Vue apps — main validation targets | App | Vue root name(s) | Mounts when | Manual checks | Automated coverage | |---|---|---|---|---| | Divergence graph (`~/branches/divergence_graph.js`, `.js-branch-divergence-graph`) | `DivergenceGraphRoot` | Branches page, after API response for each branch in list | Ahead/behind commit counts render; bar widths are proportional; no console errors | **manual only** — no feature spec found | | Sort branches dropdown (`~/branches/branch_sort_dropdown.js`, `#js-branches-sort-dropdown`) | `SortBranchesDropdownApp` | Branches index, always | Sort options render; selecting a sort option reloads with correct order | Feature: `spec/features/projects/branches/user_views_branches_spec.rb` | | Delete merged branches (`~/branches/init_delete_merged_branches.js`, `.js-delete-merged-branches`) | `DeleteMergedBranchesRoot` | Branches index, always (element may be hidden for users without permission) | Button opens confirmation modal; confirming triggers deletion; default branch is excluded | **manual only** — no feature spec found | | Branch more-actions (`.js-branch-more-actions`, one per branch) | `DeleteBranchButtonRoot` | Branches index, one per branch row | Dropdown renders compare/delete items; delete item is absent for protected/default branches; delete triggers global delete modal | Feature: `spec/features/projects/branches/user_views_branches_spec.rb` (checks `[data-testid="branch-more-actions"]` absence) | | Delete-branch modal (`.js-delete-branch-modal`) | `DeleteBranchModalRoot` | Branches index, always (global singleton triggered via event hub) | Modal opens on delete action; protected-branch warning shown; unprotected branch deletes and row is removed | Feature: `spec/features/projects/branches/user_deletes_branch_spec.rb` | | Source-code archive dropdowns (`.js-source-code-dropdown`, `~/vue_shared/components/download_dropdown`) | `SourceCodeDropdown1`, `SourceCodeDropdown2`, … | Branches index when archive links exist; tags index always | Dropdown lists zip/tar.gz links; clicking link initiates download | Feature: `spec/features/projects/branches/download_buttons_spec.rb`, `spec/features/projects/tags/download_buttons_spec.rb` | | New-branch ref selector (`.js-new-branch-ref-selector`) | `RefSelectorRoot` | branches/new, always | Ref selector populates with branches/tags; selecting a ref updates hidden input; form submits successfully | Feature: `spec/features/projects/branches/new_branch_ref_dropdown_spec.rb`, `user_creates_branch_spec.rb` | | Delete-tag modal (`.js-delete-tag-modal`) ⚠️ *shared* | `DeleteTagModalRoot` | tags/index and tags/show, always (global singleton) | Modal opens on delete; unprotected tag deletes; protected tag delete blocked with warning | Feature: `spec/features/projects/tags/user_edits_tags_spec.rb` (`:js`, covers tag show page) | | Sort tags dropdown (`#js-tags-sort-dropdown`) | `SortTagsDropdownApp` | tags/index, always | Sort options render; selecting sort reloads in correct order | Feature: `spec/features/projects/tags/user_views_tags_spec.rb` | | New-tag ref selector (`.js-new-tag-ref-selector`) | `RefSelectorRoot` | tags/new, always | Ref selector populates; selecting a ref updates form; new tag created successfully | (New-tag form covered indirectly via `user_edits_tags_spec.rb` which visits the show page after creation) | ### ⚠️ Apps shared with other entrypoints | App | Also mounted by | Implication | |---|---|---| | `DeleteTagModalRoot` | `pages/projects/tags/show/index.js` and `pages/projects/tags/index/index.js` | Both are within this flag — single flag boundary, no cross-flag risk | | `RefSelectorRoot` (component: `~/vue_shared/components/ref/components/ref_selector.vue`) | `pages/projects/graphs/charts/init_graphs_charts.js` (as `RefSelectorRoot`), `pages/projects/network/show/init_repository_graph.js` (as `NetworkRefSelectorRoot`), `pages/projects/find_file/show/init_find_file_ref_switcher.js` (as `FindFileRefSelectorRoot`) | Graphs and find-file pages belong to other flags in the 7-flag series or later; a runtime fix here benefits those clusters too | | `SourceCodeDropdown{N}` | `~/tags/index.js` module (re-exported to both `tags/index` and `tags/show` page entrypoints) | Both are within this flag — same boundary | | Commit popovers (`Vue.extend()` pattern, `~/issuable/popover/index.js`) | Many entrypoints across groups, projects, MRs, pipelines — this is a **global utility** | `Vue.extend()` is Vue 2 API removed in Vue 3 core; `@vue/compat` preserves it but emits a deprecation warning. Must verify no runtime errors when hovering commit SHA links on branches/tags pages | ### Not Vue — sanity check only, no migration risk `initDeprecatedRemoveRowBehavior` (jQuery row-removal animation, branches/index), `NewBranchForm` (plain JS validation class, branches/new), `ZenMode` (plain JS, tags/new), `GLForm` (plain JS form, tags/new). ### Coverage gaps → prioritize in manual smoke test 1. **Divergence graph** (`DivergenceGraphRoot`) — no feature spec; verify bars render and counts are correct. 2. **Delete merged branches modal** (`DeleteMergedBranchesRoot`) — no feature spec; trigger modal, confirm, verify merged branches removed. 3. **Commit popover `Vue.extend()` compat** — hover a commit SHA link on branches or tags index; verify popover renders without console errors (this is a cross-flag risk). 4. **Protected tag delete attempt** — no dedicated spec for the blocked-deletion warning path; verify warning modal shows correctly. 5. **New-tag creation form** — covered only indirectly; create a tag from the new-tag form and verify `RefSelectorRoot` selects the correct ref before submit. ## Tasks / MRs - [ ] **MR 1**: create `vue3_migrate_refs_management` flag (beta, `default_enabled: false`, actor-based) + `vue3_migration.yml` (`status: rollout`) in CE for `branches/index` + `branches/new` - [ ] **MR 2**: yml for `tags/index` + `tags/show` + `tags/new` - [ ] Runtime smoke test: run all pages under `VUE_VERSION=3` in GDK using the matrix above; fix any `@vue/compat` runtime issues found - `projects/branches/index` (project with 10+ branches, mix of merged/active/protected): - [ ] Divergence graph — ahead/behind counts render per branch, bar widths proportional, no console errors - [ ] Sort dropdown — options render; sort change reloads page in correct order - [ ] Branch more-actions — dropdown renders per row; protected branch has no delete item; default branch has no delete item - [ ] Delete-branch modal — click delete on non-protected branch → modal opens → confirm → row removed - [ ] Delete merged branches modal — button opens modal → confirm → only merged branches deleted, default branch untouched - [ ] Source-code archive dropdowns — zip/tar.gz links present and clickable - [ ] Commit popover — hover a commit SHA → popover renders correctly, no console errors (`Vue.extend()` compat) - [ ] Console check: no Vue 2 roots, no `@vue/compat` errors - `projects/branches/new`: - [ ] Ref selector populates with branches and tags - [ ] Select a non-default ref → hidden input updates → form submits → branch created from that ref - [ ] `NewBranchForm` validation still triggers for invalid branch names (plain JS sanity check) - `projects/tags/index` (project with tags, including a protected tag): - [ ] Sort dropdown renders and changes order on select - [ ] Source-code archive dropdowns present per tag - [ ] Delete-tag modal — click delete on unprotected tag → modal opens → confirm → tag removed - [ ] Delete protected tag — attempt delete → modal shows protected warning, delete blocked - [ ] Commit popover — hover commit SHA → popover renders, no console errors - `projects/tags/show` (visit a specific tag): - [ ] Delete-tag modal mounted — delete button opens modal → confirm → redirects to tags index - [ ] Protected tag — delete button shows warning, not deleted - [ ] Commit popover on tag's commit SHA link (if present) - `projects/tags/new`: - [ ] Ref selector populates; select a branch/tag ref → form submits → tag created at correct ref - [ ] ZenMode toggle on message textarea still works (plain JS sanity check) - [ ] Investigate `Vue.extend()` usage in `~/issuable/popover/index.js` — verify `@vue/compat` handles it without errors; open follow-up if it needs refactoring - [ ] Define Sentry alert query before ramping (flag yml switching has no runtime fallback) - [ ] **Cleanup MR** (after 100%): ymls → `status: migrated`, remove flag Shared-component note: the ref selector (`RefSelectorRoot`) is shared with graphs/charts and find-file pages under other flags in this series — runtime fixes made here benefit those clusters. ## Rollout ``` enable gitlab-org (dogfood ≥1 week, exercise deletion flows) → 10% → 50% → 100% with soak → default_enabled: true → cleanup MR ```