Part of &23084. Flag 7 of 7 — the **commit cluster**: highest-risk pages, quarantined behind one flag so their schedule and regressions touch nothing else. Ramp last. ## Entrypoints & apps | Entrypoint | Vue apps mounted | |---|---| | `projects/commits/show` | Commit list app (`CommitListAppRoot`, `#js-commit-list`; only when `.js-project-commits-show` is absent), author dropdown (`AuthorSelectAppRoot`, `#js-author-dropdown`), date-range select (`DateRangeSelectRoot`, `#js-date-range-select`), ref switcher (`RefSelectorRoot`, `#js-project-commits-ref-switcher`), ambiguous-ref modal (`AmbiguousRefModalRoot`, `#js-ambiguous-ref-modal`); legacy `CommitsList` class (jQuery; when `.js-project-commits-show` present), GPG badges (plain JS, non-Vue) | | `projects/commit/show` | Diff stats dropdown (`DiffStatsDropdownRoot`, `.js-diff-stats-dropdown`), diff stats per-file (`DiffStatsRoot`, `#js-diff-stats`), commit options dropdown (`CommitOptionsDropdownRoot`, `#js-commit-options-dropdown`), cherry-pick modal (`CommitFormModalRoot`, `.js-cherry-pick-commit-modal`), revert modal (`CommitFormModalRoot`, `.js-revert-commit-modal`), pipeline summary (`PipelineSummaryRoot`, `#js-commit-box-pipeline-summary`), commit branches/tags (`CommitBranchesRoot`, `#js-commit-branches-and-tags`); deprecated Notes class (jQuery/`deprecated_notes.js`, Vuex-adjacent), legacy `new Diff()` (jQuery DOM, reaches `~/diffs`), awards handler (jQuery init), GPG badges (plain JS) | | `projects/compare/show` | Compare revision selector (`CompareAppRoot`, `#js-compare-selector`), rapid diffs view-settings (`DiffAppControlsRoot`, `[data-view-settings]`), file browser drawer toggle (`FileBrowserDrawerToggleRoot`, `#js-page-breadcrumbs-extra`), file browser toggle (`FileBrowserToggleRoot`, `[data-file-browser-toggle]`), file browser (`FileBrowserRoot`, `[data-file-browser]`); GPG badges (plain JS) | ## 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: commits list (normal branch, tag, file-tree path), single commit with diffs + notes, compare with large diff, empty/no-diffs compare. ### commits/show — main validation targets | App | Vue root name(s) | Mounts when | Manual checks | Automated coverage | |---|---|---|---|---| | Commit list app | `CommitListAppRoot` | `#js-commit-list` present (modern rendering path, `.js-project-commits-show` absent) | Commit list loads, author/date filters update list, pagination works | `spec/features/projects/commits/user_views_commits_spec.rb`, `user_browses_commits_spec.rb` | | Author dropdown | `AuthorSelectAppRoot` | `#js-author-dropdown` present | Select author → commit list filters | `spec/features/projects/commits/user_browses_commits_spec.rb` | | Date-range select | `DateRangeSelectRoot` | `#js-date-range-select` present | Select date range → commit list filters | `spec/features/projects/commits/user_browses_commits_spec.rb` | | Ref switcher | `RefSelectorRoot` | `#js-project-commits-ref-switcher` present | Switch branch/tag → list refreshes at correct ref | `spec/features/projects/commits/user_browses_commits_spec.rb` | | Ambiguous ref modal ⚠️ *shared* | `AmbiguousRefModalRoot` | `#js-ambiguous-ref-modal` present AND `data-ambiguous` true AND no `ref_type` param | Create branch + tag with same name, visit commits at that ref → modal prompts branch/tag choice | None (Jest only) — **manual only** | ### commit/show — main validation targets (highest risk) | App | Vue root name(s) | Mounts when | Manual checks | Automated coverage | |---|---|---|---|---| | Diff stats dropdown | `DiffStatsDropdownRoot` | `.js-diff-stats-dropdown` present | Diff stats summary renders with correct counts | None confirmed — **manual only** | | Per-file diff stats | `DiffStatsRoot` | `#js-diff-stats` elements present (after async batch load) | Per-file +/- line counts render in diff view | None confirmed — **manual only** | | Commit options dropdown | `CommitOptionsDropdownRoot` | `#js-commit-options-dropdown` present | "Options" dropdown shows email patches, plain diff, tag actions per role | None confirmed — **manual only** | | Cherry-pick modal | `CommitFormModalRoot` | `.js-cherry-pick-commit-modal` present (maintainer+) | Cherry-pick modal opens, branch selector works, confirms cherry-pick | `spec/features/projects/commit/cherry_pick_spec.rb` | | Revert modal | `CommitFormModalRoot` | `.js-revert-commit-modal` present (maintainer+) | Revert modal opens, branch selector works, confirms revert | `spec/features/projects/commit/user_reverts_commit_spec.rb` | | Pipeline summary | `PipelineSummaryRoot` | `#js-commit-box-pipeline-summary` present | Pipeline status badge renders, links to pipeline | `spec/features/projects/commit/mini_pipeline_graph_spec.rb`, `builds_spec.rb`, `user_sees_pipelines_tab_spec.rb` | | Commit branches/tags | `CommitBranchesRoot` | `#js-commit-branches-and-tags` present | Branches and tags containing this commit render | None confirmed — **manual only** | ### compare/show — main validation targets | App | Vue root name(s) | Mounts when | Manual checks | Automated coverage | |---|---|---|---|---| | Compare revision selector | `CompareAppRoot` | `#js-compare-selector` present | Source/target project + ref pickers update diff, "Create MR" button appears when diverged | Feature: `spec/features/projects/compare_spec.rb` (`:js` — branches, tags) | | Diff view-settings | `DiffAppControlsRoot` | `[data-view-settings]` present (rapid diffs) | Inline/side-by-side toggle, whitespace toggle, file-by-file mode, expand/collapse all | Feature: `compare_spec.rb` → shared `'Rapid Diffs application'` examples (`spec/support/shared_examples/features/rapid_diffs_shared_examples.rb`); same components also exercised by `spec/features/merge_request/rapid_diffs/*` | | File browser drawer toggle | `FileBrowserDrawerToggleRoot` | Compact layout AND `appVisible` | File browser toggle button appears in breadcrumbs on narrow viewport | None confirmed — **manual only** | | File browser toggle | `FileBrowserToggleRoot` | Not compact layout | File browser toggle visible in header; click hides/shows panel | None confirmed — **manual only** | | File browser (drawer/sidebar) | `FileBrowserRoot` | `[data-file-browser]` present, after async data load | File list renders all changed files; clicking a file scrolls/navigates to it; drawer opens/closes; `FileBrowserDrawer` (uses portal-vue `MountingPortal`) opens in narrow layout | Partial — rapid-diffs shared examples cover diff rendering/expansion; the **drawer (portal-vue) path is manual only** | ### ⚠️ Apps shared with other entrypoints | App | Also mounted by | Implication | |---|---|---| | `AmbiguousRefModalRoot` | `pages/projects/show/index.js` (flag: `vue3_migrate_project_overview`), `pages/projects/tree/show/index.js` (already Vue 3 under `vue3_migrate_repository`), `blob/show/show_blob_bundle.js` | Tree/blob pages already running Vue 3; project show ships under a different flag in this 7-flag series; commit list is flag 7 — validates same component in a new context | | `CommitFormModalRoot` (reuse of same component for cherry-pick + revert) | `pages/projects/commit/show/index.js` only within this cluster; same component class used twice on the same page | Two concurrent instances of `CommitFormModalRoot` on a single page — must confirm no Pinia store collision between cherry-pick and revert modal states | | `FileBrowserRoot` / `FileBrowserToggleRoot` / `FileBrowserDrawerToggleRoot` / `DiffAppControlsRoot` | `pages/projects/merge_requests/page.js`, `pages/projects/merge_requests/creations/new/index.js`, `pages/projects/commit/rapid_diffs/index.js` (alternate commit rapid-diffs entrypoint) | Rapid diffs file browser used on MR pages; any compat issue here likely also affects MR diffs | | `DiffStatsRoot` (`DiffStats.vue`) | `pages/projects/wikis/diff/index.js` | Wiki diffs share the same per-file stats component | | `PipelineSummaryRoot` | `pages/projects/commit/pipelines/index.js` | Pipeline summary also embedded on commit pipelines tab | Exclusive to this cluster (only validated here): **CommitListAppRoot, AuthorSelectAppRoot, DateRangeSelectRoot, RefSelectorRoot (commit context), DiffStatsDropdownRoot, CommitOptionsDropdownRoot, CommitBranchesRoot, CompareAppRoot**. ### Not Vue — sanity check only, no migration risk - `CommitsList` class (`~/commits`) — legacy jQuery class that handles Ajax-paginated commit list via DOM manipulation. Mounts when `.js-project-commits-show` is present (older rendering path). No Vue compat risk but DOM interop with Vue-rendered siblings must be verified. - `new Diff()` (`~/diff`) — jQuery class that initialises legacy diff syntax highlighting and inline expand controls. Invoked after async batch load on `commit/show`. DOM interop with `@vue/compat` rendering must be verified at runtime. - `deprecated_notes.js` (`~/deprecated_notes`) — jQuery/class-based notes handler with some internal Vue micro-components (`CommentTypeDropdown`). Registers against `~/notes` Vuex store indirectly. Confirm no Vuex+Pinia teardown conflicts. - `loadAwardsHandler()` — jQuery emoji awards; attaches event listeners to server-rendered DOM. Verify emoji reactions still add/remove after flag enabled. - `GpgBadges.fetch()` — plain JS XHR, replaces server-rendered placeholders. No Vue surface. - `ShortcutsNavigation` — plain JS keyboard shortcuts. - `ZenMode` — plain JS. ### Coverage gaps → prioritize in manual smoke test Manual-only surfaces: ambiguous-ref modal (commits context), diff stats dropdown, per-file diff stats, commit options dropdown, commit branches/tags, and the file browser **drawer** (portal-vue `MountingPortal`, narrow layout — the shared rapid-diffs examples don't exercise it). The deprecated notes + jQuery `new Diff()` + awards handler DOM interop are runtime-only risks with no automated Vue-specific coverage. `compare/show` diff rendering itself is covered by `compare_spec.rb` + rapid-diffs shared examples. ## Tasks / MRs - [ ] **De-risking spike (do first, no MR)**: run all 3 pages under `VUE_VERSION=3` in GDK. Key unknowns are runtime-only: - `CommitsList` jQuery class DOM interop with Vue-rendered siblings - `new Diff()` jQuery DOM interop after async batch load - `deprecated_notes.js` internal Vue micro-components under `@vue/compat` - `portal-vue` `MountingPortal` in `file_browser_drawer.vue` (no Vue 3 compatible portal-vue v2; may need replacement with Vue 3 `<Teleport>` or `@vue/compat` shim workaround) - Two simultaneous `CommitFormModalRoot` instances (cherry-pick + revert) — Pinia store isolation - [ ] **Prep MRs (from spike findings)**: e.g. `CommitsList` refactor, `new Diff()` interop fixes, portal-vue → Teleport-compat migration in `file_browser_drawer.vue`, deprecated notes compat fixes - [ ] **MR 1**: create `vue3_migrate_commit_list` flag (beta, `default_enabled: false`, actor-based) + `vue3_migration.yml` (`status: rollout`) for `commits/show` - [ ] **MR 2**: yml for `commit/show` + `compare/show` (⚠️ inherits flag rollout state at merge — land before ramping past gitlab-org) - [ ] Runtime smoke test: run all pages under `VUE_VERSION=3` in GDK using the matrix above; fix any `@vue/compat` runtime issues found - **projects/commits/show** (normal branch): - [ ] Commit list app (`CommitListAppRoot`) — list renders, pagination works - [ ] Author dropdown (`AuthorSelectAppRoot`) — filter by author updates list - [ ] Date-range select (`DateRangeSelectRoot`) — date filter updates list - [ ] Ref switcher (`RefSelectorRoot`) — switch branch/tag, list refreshes at correct ref - [ ] Legacy `CommitsList` path (`.js-project-commits-show` present) — Ajax pagination still works *(sanity check)* - [ ] GPG badges — signed-commit badges render - [ ] Ambiguous ref modal — branch + tag with same name → modal prompts choice *(no feature spec — manual only)* - [ ] Console check: no Vue 2 roots left, no `@vue/compat` warnings - **projects/commit/show**: - [ ] Diff stats dropdown (`DiffStatsDropdownRoot`) — renders correct file/+/- counts *(manual only)* - [ ] Per-file diff stats (`DiffStatsRoot`) — per-file counts visible after batch load *(manual only)* - [ ] Commit options dropdown (`CommitOptionsDropdownRoot`) — dropdown opens, items match role *(manual only)* - [ ] Cherry-pick modal (`CommitFormModalRoot`) — modal opens, branch selector works, cherry-pick succeeds - [ ] Revert modal (`CommitFormModalRoot`) — modal opens, branch selector works, revert succeeds; confirm no Pinia store collision between cherry-pick and revert stores - [ ] Pipeline summary (`PipelineSummaryRoot`) — pipeline status badge renders, links to pipeline - [ ] Commit branches/tags (`CommitBranchesRoot`) — branches and tags containing commit render *(manual only)* - [ ] Inline note + awards: add a comment on a diff line; add emoji reaction; both survive page reload - [ ] `new Diff()` DOM interop — diff expanders, syntax highlighting work after async batch load *(sanity check)* - [ ] `deprecated_notes.js` — inline comment form renders, submit works - [ ] Console check: no Vue 2 roots, no `@vue/compat` warnings - **projects/compare/show**: - [ ] Compare selector (`CompareAppRoot`) — source/target ref pickers work, diff updates, "Create MR" button appears when diverged - [ ] View-settings (`DiffAppControlsRoot`) — inline/side-by-side toggle, whitespace toggle, file-by-file mode - [ ] File browser sidebar (`FileBrowserToggleRoot` + `FileBrowserRoot`) — wide layout: toggle shows/hides file list; clicking file scrolls to it - [ ] File browser drawer (`FileBrowserDrawerToggleRoot` + `FileBrowserRoot` with `FileBrowserDrawer`) — narrow layout: toggle in breadcrumbs opens drawer; portal-vue `MountingPortal` renders correctly under `@vue/compat` *(highest-risk — manual only)* - [ ] Large diff compare (50+ files) — file browser loads all files, no performance regressions - [ ] Console check: no Vue 2 roots, no `@vue/compat` warnings - [ ] Confirm `compare/show` / rapid_diffs ownership with ~"group::code review" (the &6252 scanner attributes rapid_diffs elsewhere) - [ ] Define Sentry alert query before ramping (yml switching has no runtime fallback) - [ ] **Cleanup MR** (after 100%): ymls → `status: migrated`, remove flag ## Rollout ``` enable gitlab-org (dogfood ≥1–2 weeks — diff/notes surfaces get heavy internal use) → 10% → 50% → 100% with soak between steps → default_enabled: true → cleanup MR ```