Part of &23084. Flag 5 of 7 — same editor stack as `vue3_migrate_blob_edit` but a different feature and user population. Rides the flag-4 prep work; should ramp after flag 4's dogfood confirms the editor stack. ## Entrypoints & apps | Entrypoint | Vue apps mounted | |---|---| | `projects/snippets/show` | Snippet show app (`SnippetsRoot` / `SnippetsShow` at `#js-snippet-view`), Awards app (`AwardsListRoot` at `#js-vue-awards-block` — Vue 2, uses Vuex + `new Vue`), Report-abuse app (`ReportAbuseDropdownItemRoot`, `initVueApp`) | | `snippets/show` | Snippet show app (`SnippetsRoot` / `SnippetsShow` at `#js-snippet-view`), Report-abuse app; no Vue awards app (falls back to jQuery `.js-awards-block`) | | `projects/snippets/edit` | Snippet edit app (`SnippetsRoot` / `SnippetsEdit` at `#js-snippet-edit`) | | `projects/snippets/new` | Same edit app as above | | `snippets/edit` | Same edit app as above | | `snippets/new` | Same edit app as above | One shared `SnippetsRoot` factory (`~/snippets/index.js`) mounts across all 6 entrypoints — a single fix wave covers that path. The awards app on `projects/snippets/show` uses a plain `new Vue` + Vuex pattern — fine under `@vue/compat` (same pattern as `WebIdeButtonRoot` in flag 1), but worth extra runtime attention. ## 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 snippet (show/edit/new), personal snippet (show/edit/new), multi-file snippet, visibility levels (private/internal/public), signed-out view for public snippets. ### Vue apps — main validation targets | App | Vue root name(s) | Mounts when | Manual checks | Automated coverage | |---|---|---|---|---| | Snippet show (`#js-snippet-view`) | `SnippetsRoot` (root component `SnippetsShow`) | Any snippet show page | Blob viewer renders with syntax highlight; multi-file tabs switch; raw/copy/embed buttons work; snippet header shows title, author, timestamps; breadcrumbs correct | Feature: `spec/features/snippets/show_spec.rb`, `spec/features/projects/snippets/show_spec.rb`. E2E: `qa/qa/specs/features/browser_ui/3_create/snippet/copy_snippet_file_contents_spec.rb`, `share_snippet_spec.rb` | | Snippet edit/new (`#js-snippet-edit`) | `SnippetsRoot` (root component `SnippetsEdit`) | Edit or new snippet page | Create snippet with title + file + content; add/remove files; change visibility; save and redirect to show; edit existing snippet and update | Feature: `spec/features/snippets/user_creates_snippet_spec.rb`, `spec/features/snippets/user_edits_snippet_spec.rb`, `spec/features/projects/snippets/user_updates_snippet_spec.rb`. E2E: `qa/.../snippet/create_personal_snippet_with_multiple_files_spec.rb`, `create_project_snippet_with_multiple_files_spec.rb`, `add_file_to_snippet_spec.rb`, `delete_file_from_snippet_spec.rb` | | Awards app (`#js-vue-awards-block`) ⚠️ | `AwardsListRoot` | `projects/snippets/show` only (when `api_awards_path` provided) | Emoji reactions render; add/remove award updates count; thumbs-up/thumbs-down defaults shown | Feature: `spec/features/projects/snippets/show_spec.rb`. Uses `new Vue` + Vuex — works under `@vue/compat`, prioritize in runtime validation | | Report-abuse (`data-v-app` slot inside snippet header) | `ReportAbuseDropdownItemRoot` | Snippet show (when signed in and not author) | "Report abuse" option appears in snippet actions; dialog opens | None (Jest only) — **manual only** | ### ⚠️ Apps shared with other entrypoints | App | Also mounted by | Implication | |---|---|---| | Awards app (`AwardsListRoot`) | `pages/projects/merge_requests/init_merge_request_show.js` | MR page is under a different flag; both will need the Vue 2 `new Vue` / Vuex pattern updated | The `SnippetsRoot` factory is exclusive to the 6 snippet entrypoints — no cross-entrypoint sharing concern. ### Not Vue — sanity check only, no migration risk - `loadAwardsHandler()` — jQuery-based `AwardsHandler` class (used on `snippets/show` personal snippet page for `.js-awards-block` fallback) - `initDeprecatedNotes()` / `deprecated_notes.js` — Vue 2 components (`DeprecatedNotesCommentTypeDropdownRoot`, `DeprecatedNotesSkeletonLoaderRoot`) mounted for the notes/comments section on show pages. This is **shared infrastructure**, not gated by `vue3_migrate_snippets`; those Vue 2 roots will remain until a dedicated notes migration. - `ZenMode` — plain JS, no Vue - `GLForm` (in `pages/snippets/form.js`, not imported by any entrypoint above) — plain JS ### Coverage gaps → prioritize in manual smoke test - Awards emoji (`AwardsListRoot`) on project snippet show — `new Vue` + Vuex under `@vue/compat`; limited feature-spec coverage for Vue-specific behavior - Report-abuse dropdown — no feature/E2E spec, **manual only** - Multi-file snippet create/edit — covered by QA specs but not feature specs; run locally under flag - Snippet visibility level enforcement (internal/private) — `spec/features/snippets/internal_snippet_spec.rb`, `private_snippets_spec.rb` cover rendering; verify no compat warnings - Embed / copy / raw buttons in blob viewer — `copy_snippet_file_contents_spec.rb` covers copy; embed and raw are **manual only** - Signed-out view of public personal snippet — `spec/features/snippets/public_snippets_spec.rb`; check notes section does not break ## Tasks / MRs - [ ] **MR 1**: create `vue3_migrate_snippets` flag (beta, `default_enabled: false`, actor-based) + `vue3_migration.yml` (`status: rollout`) for all 6 entrypoints in CE (no EE overlays exist) - Verify both `pages/projects/snippets/{show,edit,new}` and `pages/snippets/{show,edit,new}` get identical ymls - [ ] Runtime smoke test: run each page under `VUE_VERSION=3` in GDK using the matrix above; fix any `@vue/compat` runtime issues - Project snippet show (`projects/snippets/show`): - [ ] Blob viewer renders with syntax highlighting and multi-file tabs switch correctly - [ ] Snippet header: title, author, timestamps, breadcrumbs - [ ] Awards emoji — thumbs-up/thumbs-down render, add/remove updates count, no Vuex compat errors in console *(critical — Vue 2 Vuex pattern)* - [ ] Raw, copy-to-clipboard, embed buttons in snippet actions work - [ ] Report-abuse option visible and dialog opens (signed in, not author) — **manual only** - [ ] Console check: no Vue 2 roots left, no `@vue/compat` warnings - Personal snippet show (`snippets/show`): - [ ] Same blob viewer + header checks as above - [ ] jQuery awards block (`.js-awards-block`) renders — not a Vue root, sanity only - [ ] Notes/comments section renders (deprecated_notes Vue 2 roots will still appear — expected) - Project snippet edit (`projects/snippets/edit`): - [ ] Load existing snippet in editor, update title/content, save → redirects to show with changes - [ ] Add a second file, save → both files visible in show - [ ] Visibility level dropdown renders and selection persists - Project snippet new (`projects/snippets/new`): - [ ] Create snippet with title, filename, content, public visibility → created successfully - [ ] Multi-file: add file, delete file before save - Personal snippet edit/new (`snippets/edit`, `snippets/new`): - [ ] Same editor checks as project snippet edit/new - [ ] Visibility includes "internal" option; select and save → enforced on reload - Public snippet (signed out): - [ ] Show page renders blob viewer; no Vue-owned elements crash - [ ] Define Sentry alert query in this issue before ramping - [ ] **Cleanup MR** (after 100%): ymls → `status: migrated`, remove flag ## Rollout ``` enable gitlab-org (dogfood ~1 week) → 25% → 100% → default_enabled: true → cleanup MR ```