Part of &23084. Flag 1 of 7 — **highest-traffic page in GitLab**; own kill switch, most cautious ramp. Depends on Phase 0 (retiring `vue3_migrate_repository`). ## Entrypoints & apps | Entrypoint | Vue apps mounted | |---|---| | `projects/show` (+EE `pages/projects/show/index.js`) | Tree list + blob viewer (`~/repository` — already Vue 3 via `?vue3` markers), header app (`~/repository/init_header_app`), compact code dropdown (`ee_else_ce/repository/components/code_dropdown`), home panel (`~/projects/home_panel`), web IDE link, empty project, ambiguous-ref modal, read-more, upload trigger, clusters deprecation alert, activities, user callout. **EE overlays**: vue_alerts, tier badge trigger, compliance info, duo OTEL info | Note: header app + code dropdown are `~/repository` components already battle-tested under Vue 3 on tree/blob pages. The new surface is home panel + small apps + EE overlays. Jest already passes under Vue 3 suite-wide; validation is **runtime**, not tests. ## 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: normal repo with README, empty project, archived project, EE license (+ SaaS-only apps where possible). ### Already Vue 3 via `?vue3` (behind `vue3_migrate_repository` — regression-check only) | App | Vue root name(s) | Mounts when | Manual checks | Automated coverage | |---|---|---|---|---| | Tree list (`ee_else_ce/repository`, `#js-tree-list`) | `RepositoryAppRoot` (+ `RepositoryBreadcrumbsRoot`, `RepositoryLastCommitRoot`, `ForkInfoRoot`) | Repo has files | File tree renders, row navigation works, last-commit column populates | Feature: `spec/features/projects/files/*` (e.g. `user_browses_files_spec.rb`). E2E: `qa/.../3_create/repository/*`, incl. `:smoke` `clone_spec.rb` | | Blob viewer / README (`.blob-viewer`) | — (legacy JS class; re-inits `RepositoryHeaderAreaRoot` with `isReadmeView: true`) | Project has a README | README renders as rich markdown, anchors and copy work | Feature: `spec/features/projects/show/content_display_spec.rb` | | Header app (`#js-repository-blob-header-app`, also re-inited with `isReadmeView: true`) ⚠️ *shared* | `RepositoryHeaderAreaRoot` | Repo has files | Ref selector switches refs, breadcrumbs, Code dropdown clone URLs + source download, find-file, add-to-tree | Feature: `spec/features/projects/show/repository_actions_spec.rb`, `download_buttons_spec.rb`. E2E: `:smoke` `clone_spec.rb` (uses `code-dropdown`) | ### Vue 2 today — main validation targets | App | Vue root name(s) | Mounts when | Manual checks | Automated coverage | |---|---|---|---|---| | Home panel (`#js-home-panel`) | `HomePanelRoot` | Always | Star/unstar updates count and survives reload; fork button navigates; notification level change persists (toast); project actions dropdown items match role (leave project / withdraw access request); archived project hides actions; topics + badges render; EE "mirrored from" shows for developer, hidden for guest | Feature: `spec/features/projects/show/user_interactions_spec.rb` (star, notifications, actions dropdown), `spec/features/projects/fork_spec.rb`, `ee/spec/features/projects/show_project_spec.rb` (mirror URL, seat-count alerts). E2E: `qa/qa/page/project/show.rb` views `_home_panel.html.haml` (used by ~46 specs) | | Web IDE link (`#js-tree-web-ide-link`) | `WebIdeButtonRoot` | Repo has files | Edit / Web IDE split button opens Web IDE; dropdown mode choice persists | Feature: `spec/features/projects/show/user_interactions_spec.rb`, `user_sees_setup_shortcut_buttons_spec.rb` (IDE-linked buttons) | | Compact code dropdown (`#js-project-show-empty-page #js-code-dropdown`) ⚠️ *shared* | `CompactCodeDropdownRoot` | Empty project only | Code dropdown shows SSH/HTTP URLs, copy works, no-SSH-key warning when user has no keys | Feature: `spec/features/projects/show/repository_actions_spec.rb` ("when project is empty" — code button, ssh key contexts) | | Upload file trigger (`.js-upload-file-trigger`) | `UploadButtonRoot` | Empty repo only | "Upload file" opens modal; upload commits and redirects | Feature: `spec/features/projects/show/repository_actions_spec.rb` ("Uploading files" shared examples) | | Ambiguous ref modal (`#js-ambiguous-ref-modal`) ⚠️ *shared* | `AmbiguousRefModalRoot` | Branch and tag share a name, no `ref_type` param | Create branch + tag with the same name, visit project at that ref → modal offers branch/tag choice | None (Jest only) — **manual only** | | Clusters deprecation alert (`.js-clusters-deprecation-alert`) | `ClustersDeprecationAlertRoot` | Project has certificate-based clusters | Alert renders with message | None (Jest only) — **manual only** | ### EE overlays | App | Vue root name(s) | Mounts when | Manual checks | Automated coverage | |---|---|---|---|---| | Vue alerts (`.js-vue-alert` → `DismissibleAlert`) ⚠️ *shared* | `DismissibleAlertRoot` (one per alert) | e.g. unconfirmed email (shared layout alert) | Alert renders, dismiss persists | None on this page (Jest only) | | Tier badge (`.js-tier-badge-trigger`) ⚠️ *shared* | `TierBadgeTriggerRoot` | SaaS, free tier | Badge renders; popover with trial CTA on click | Feature: `ee/spec/features/projects/show_project_spec.rb` (`:saas, :js` — "renders the tier badge and popover") | | Compliance info (`#js-compliance-info`) | `ComplianceInfoRoot` | Project has compliance frameworks | Framework badge/popover renders; link to compliance center when permitted | None (Jest only) — **manual only** | | Duo OTEL info (`#js-duo-otel-info`) | `DuoOtelInfoRoot` | Duo workflows available | Info block renders, links to workflow creation | None (Jest only) — **manual only** | ### ⚠️ Apps shared with other entrypoints These are not exclusive to `projects/show`; other pages mount the same app from their own chunks: | App | Also mounted by | Implication | |---|---|---| | Header app (`RepositoryHeaderAreaRoot`) | `~/repository/index.js` (tree pages, find-file) and `blob/show/show_blob_bundle.js` (blob pages) | Already runs Vue 3 there via `?vue3` under `vue3_migrate_repository` — runtime-proven, low risk | | Compact code dropdown (`CompactCodeDropdownRoot`) | Rendered inside `header_area.vue` on tree/blob pages | Same — already Vue 3 on those pages; only the direct empty-project mount is new | | Ambiguous ref modal (`AmbiguousRefModalRoot`) | `pages/projects/tree/show`, `pages/projects/commits/show` | Tree page is Vue 3 already; commits page ships under a later flag of the 7 | | Blob viewer (legacy class) | `pages/projects/artifacts/file`, blob pages | Not a Vue root; unaffected | | Vue alerts (`DismissibleAlertRoot`) | Many entrypoints (admin, sessions, groups show, pipelines, jobs, geo, …) | Simple render-function app; also exercised by other page flags | | Tier badge (`TierBadgeTriggerRoot`) | `pages/groups/show` | Also covered by the group overview flag in this series | | Activities (jQuery) | dashboard/group/user activity pages | Not Vue; unaffected | Exclusive to this entrypoint (only validated here): **home panel, web IDE link root, upload file trigger, clusters deprecation alert, compliance info, duo OTEL info, empty-project tabs**. ### Not Vue — sanity check only, no migration risk Activities feed (jQuery, shown with "Activity" overview preference), read-more trigger, user callout (Auto DevOps banner), empty-project tabs (`GlTabsBehavior`). ### Coverage gaps → prioritize in manual smoke test Ambiguous ref modal, clusters deprecation alert, compliance info, duo OTEL info, vue_alerts. Everything else has feature-spec or E2E coverage that runs under the flag once enabled in CI. ## Tasks / MRs - [ ] Runtime smoke test: run the page under `VUE_VERSION=3` in GDK using the matrix above; fix any `@vue/compat` runtime issues found - Normal repo with README: - [x] Tree list — renders, row navigation, last-commit column - [x] Blob viewer — README renders as rich markdown, anchors + copy - [x] Header app — ref selector, breadcrumbs, Code dropdown clone URLs + source download, find-file, add-to-tree - [x] Home panel — star/unstar count persists after reload, fork button navigates, notification level change persists (toast), project actions dropdown matches role, topics + badges render - [x] Web IDE link — Edit / Web IDE split button opens Web IDE, mode choice persists - [x] Ambiguous ref modal — branch + tag with same name → modal offers branch/tag choice *(no feature spec — manual only)* - [x] Clusters deprecation alert — renders with certificate-based cluster *(no feature spec — manual only)* - [x] Console check: no Vue 2 roots left, no `@vue/compat` warnings/errors - Empty project: - [x] Compact code dropdown — SSH/HTTP URLs, copy, no-SSH-key warning - [x] Upload file trigger — modal opens, upload commits and redirects - [x] Empty-project tabs still switch (plain JS, sanity only) - Archived project: - [x] Home panel hides actions - EE (+ SaaS where possible): - [ ] Vue alerts — dismissible alert renders, dismiss persists *(no feature spec on this page — manual only)* - [ ] Tier badge — badge renders, popover with trial CTA on click (SaaS free tier) - [x] Compliance info — framework badge/popover, compliance center link *(no feature spec — manual only)* - [x] Duo OTEL info — info block renders, links to workflow creation *(no feature spec — manual only)* - [x] Home panel — "mirrored from" shows for developer, hidden for guest - [x] **MR 1**: create `vue3_migrate_project_overview` flag (beta, `default_enabled: false`, actor-based) + identical `vue3_migration.yml` (`status: rollout`) in CE **and** EE `pages/projects/show/` - [ ] Define Sentry alert query in this issue before ramping (yml switching has no runtime fallback) - [ ] **Cleanup MR** (after 100%): yml → `status: migrated`, remove flag, strip the now-redundant `?vue3` markers from `index.js` ## Rollout Flag off → Vue 2 chunk, but `?vue3` markers keep tree/blob/header on Vue 3 — **no regression** for already-migrated apps during ramp. ``` enable gitlab-org (dogfood ≥1 week) → 10% → 50% → 100% of actors, with soak between steps → default_enabled: true → cleanup MR ```