Part of &23084. Flag 2 of 7 — **read-only pages**: worst case is display breakage. Fastest ramp; best agentic-development candidate. ## Entrypoints & apps | Entrypoint | Vue apps mounted | |---|---| | `projects/blame/show` (+EE overlay: re-exports CE) | `BlamePreferencesRoot` (`~/blame/preferences/init_blame_preferences`), plain-JS blob utilities (`initBlob`) | | `projects/blame/streaming` | Plain-JS streaming renderer (`renderBlamePageStreams`), plain-JS blob utilities (`initBlob`) — **no Vue** | | `projects/find_file/show` | `FindFileRefSelectorRoot` (`initFindFileRefSwitcher`); legacy `ProjectFindFile` class (jQuery, no Vue) | | `projects/network/show` | `NetworkRefSelectorRoot` + `RefSearchFormRoot` (`initRefSwitcher`, `initRefSearchForm`); Network graph (jQuery + Raphael — no Vue) | | `projects/compare/index` | `CompareAppRoot` (`~/projects/compare`) | | `projects/forks/new` | `ForkAppRoot` (`initForkApp`) | ## Runtime verification matrix How to check what is 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: blame page for a file, find-file page, network graph, compare revisions, fork creation. ### Vue 2 today — main validation targets | App | Vue root name(s) | Mounts when | Manual checks | Automated coverage | |---|---|---|---|---| | Blame preferences (`#js-blame-preferences`) | `BlamePreferencesRoot` | Any blame page (`/blame/`) | Blame preferences panel renders; toggling options (e.g. ignore whitespace, age indicators) applies immediately | Feature: `spec/features/projects/blobs/blame_spec.rb` (`:js`) | | Find-file ref switcher (`#js-blob-ref-switcher`) | `FindFileRefSelectorRoot` | Find-file page (`/find_file/`) | Ref selector dropdown opens; switching branch navigates find-file to that ref | Feature: `spec/features/projects/files/user_find_file_spec.rb`, `spec/features/projects/files/find_file_keyboard_spec.rb` | | Network ref switcher (`#js-graph-ref-switcher`) | `NetworkRefSelectorRoot` | Network graph page (`/network/`) | Ref dropdown opens; selecting a ref reloads the graph at that ref | Feature: `spec/features/projects/network_graph_spec.rb` (`:js`) | | Network ref-search form (`#js-ref-search-form`) | `RefSearchFormRoot` | Network graph page (`/network/`) | Search form filters rendered graph | Feature: `spec/features/projects/network_graph_spec.rb` (`:js`) | | Compare selector (`#js-compare-selector`) | `CompareAppRoot` | Compare index page (`/compare`) | Source/target branch pickers populate; "Compare" submits and shows diff; "Create MR" link appears | Feature: `spec/features/projects/compare_spec.rb` (`:js`) | | Fork creation app (`#fork-groups-mount-element`) | `ForkAppRoot` | Fork new page (`/forks/new`) | Namespace list renders; selecting a namespace and clicking "Fork" creates the fork and redirects | Feature: `spec/features/projects/fork_spec.rb` (`:js`); E2E: `qa/qa/specs/features/browser_ui/3_create/repository/move_project_create_fork_spec.rb`, `qa/qa/specs/features/browser_ui/3_create/merge_request/merge_merge_request_from_fork_spec.rb` | ### Not Vue — sanity check only, no migration risk - **`blame/streaming`** — `renderBlamePageStreams` is plain JS (fetch + ReadableStream); no Vue roots mounted. - **`initBlob`** (both blame entrypoints) — `LineHighlighter`, `BlobForkSuggestion`, keyboard shortcuts: all plain JS classes. - **`ProjectFindFile`** (find_file page) — jQuery class managing file-list filtering and keyboard navigation; carries no Vue compat risk. - **Network graph** — `Network` class + `BranchGraph` use jQuery and Raphael (canvas-based); no Vue involved. ### ⚠️ Apps shared with other entrypoints `RefSelector` component is used by both `FindFileRefSelectorRoot` and `NetworkRefSelectorRoot` here, and also by `pages/projects/branches/new`, `pages/projects/tags/new`, and `pages/projects/graphs/charts` from their own chunks. Those pages are not in this flag; each mounts an independent instance. No cross-flag regression risk — same component, independently bundled. `CompareAppRoot` is also mounted by `pages/projects/compare/show/index.js` (the compare *results* page), which calls the identical `initCompareSelector()`. That page belongs to **flag 7 (`vue3_migrate_commit_list`)** — fixes made here benefit it, but do not add its yml under this flag. | App | Also mounted by | Implication | |---|---|---| | `FindFileRefSelectorRoot` (wraps `RefSelector`) | `pages/projects/branches/new`, `pages/projects/tags/new`, `pages/projects/graphs/charts` | Independent instances; separate entrypoints not in this flag | | `NetworkRefSelectorRoot` / `RefSearchFormRoot` (wraps `RefSelector` / `RefSearchForm`) | Not shared with any other page entrypoint | Exclusive to network show | | `CompareAppRoot` | `pages/projects/compare/show/index.js` (same `initCompareSelector` import) | `compare/show` ships under flag 7 (`vue3_migrate_commit_list`); shared fixes land once here | ### Coverage gaps → prioritize in manual smoke test All six Vue apps have at least one feature spec. No apps are **manual only**. The streaming blame and jQuery surfaces carry zero Vue compat risk. The areas to verify most carefully during smoke test: - `BlamePreferencesRoot` — preferences toggle behaviour (feature spec uses `inline_blame: false` stub; confirm the Vue 3 app still mounts under the real flag path). - `ForkAppRoot` — Apollo + VueApollo bootstrap; confirm `VueApollo` initialises correctly under `@vue/compat`. - `CompareAppRoot` on both index and show pages — multi-prop `initVueApp` call; watch for prop-type warnings. ## Tasks / MRs - [ ] Runtime smoke test: run each page under `VUE_VERSION=3` in GDK using the matrix above; fix any `@vue/compat` runtime issues found - Blame page (`/blame/`): - [ ] Blame preferences panel renders; toggling options applies immediately - [ ] Streaming blame loads subsequent pages correctly (plain JS, sanity check) - [ ] `initBlob` line highlighting and permalink shortcircuit work (plain JS, sanity check) - [ ] Console check: exactly one `BlamePreferencesRoot` Vue 3 app, no Vue 2 roots, no compat warnings - Find-file page (`/find_file/`): - [ ] Ref selector dropdown opens and switching branch navigates correctly - [ ] `ProjectFindFile` fuzzy-search still filters and navigates (jQuery sanity check) - [ ] Keyboard shortcuts (`t` to open find-file, arrow navigation) work - [ ] Console check: one `FindFileRefSelectorRoot` Vue 3 app, no Vue 2 roots - Network graph (`/network/`): - [ ] Ref switcher dropdown opens; selecting a ref reloads graph - [ ] Ref search form filters graph - [ ] Raphael canvas graph renders (jQuery/Raphael sanity check) - [ ] Console check: `NetworkRefSelectorRoot` + `RefSearchFormRoot` Vue 3 apps, no Vue 2 roots - Compare index (`/compare`): - [ ] Source and target branch pickers open and populate with branches - [ ] "Compare" submits and renders diff page - [ ] "Create MR" link appears when branches differ - [ ] Console check: one `CompareAppRoot` Vue 3 app, no Vue 2 roots - Fork new (`/forks/new`): - [ ] Namespace list renders with Apollo data - [ ] Selecting a namespace and clicking "Fork project" creates fork and redirects - [ ] Console check: one `ForkAppRoot` Vue 3 app (VueApollo provider present), no Vue 2 roots - [ ] **MR 1**: create `vue3_migrate_repo_read_pages` flag (beta, `default_enabled: false`, actor-based) + `vue3_migration.yml` (`status: rollout`) in CE **and** EE `pages/projects/blame/show/` - [ ] **MR 2**: yml for `find_file/show` + `network/show` - [ ] **MR 3**: yml for `compare/index` + `forks/new` (`compare/show` stays in the flag-7 commit cluster) - [ ] Define Sentry alert query in this issue before ramping past gitlab-org - [ ] **Cleanup MR** (after 100%): ymls → `status: migrated`, remove flag ⚠️ A page's yml inherits the flag's current rollout state at merge — land all 3 MRs before ramping past gitlab-org. ## Rollout ``` enable gitlab-org (dogfood ~1 week) → 25% → 100% (compressed ramp, read-only) → default_enabled: true → cleanup MR ```