Part of &23084. Flag 4 of 7 — **user data-loss risk**: editor breakage eats uncommitted work; this is the UI write path for commits. Separate from snippets so a snippets bug never disables file editing (or vice versa). ## Entrypoints & apps | Entrypoint | Vue apps mounted | |---|---| | `projects/blob/edit` | `BlobEditHeaderRoot` (`.js-blob-edit-header`), `FilepathFormRoot` (`#js-template-selectors-menu`) | | `projects/blob/new` | Same stack — both entrypoints call `initBlobBundle()` which calls `initBlobEditHeader` + `FilepathFormMediator` → `mountFilepathForm` | No EE-specific counterpart exists for `pages/projects/blob/edit` or `pages/projects/blob/new` under `ee/app/assets/javascripts/pages/projects/blob/`. ## 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: edit existing file, create new file, markdown file edit, edit on a forked project (suggest-changes flow), file template selection (`.gitlab-ci.yml`, `Dockerfile`, `.gitignore`, `LICENSE`). ### Vue apps — main validation targets | App | Vue root name(s) | Mounts when | Manual checks | Automated coverage | |---|---|---|---|---| | Blob edit header (`BlobEditHeader`, `.js-blob-edit-header`) | `BlobEditHeader` (component `name:`), mounted as `BlobEditHeaderRoot` (initVueApp `name:`) | Always on `blob/edit` and `blob/new` | (1) Type content → click Cancel → browser "leave page?" warning fires. (2) Edit file → click "Commit changes" → `CommitChangesModal` opens, fill branch/message → submit → redirected to file view. Fork flow: non-maintainer edits → modal offers "Start a new merge request" → redirect to fork MR. | Feature: `spec/features/projects/blobs/edit_spec.rb` (commit, preview, toolbar), `spec/features/projects/files/user_edits_files_spec.rb`, `spec/features/projects/files/user_replaces_files_spec.rb`, `spec/features/projects/files/user_creates_files_spec.rb` | | Filepath/template-selector form (`FilepathForm`, `#js-template-selectors-menu`) | `FilepathFormRoot` | When template data attribute present (always on `blob/new`; on `blob/edit` for known template file names) | (1) Create new file named `.gitlab-ci.yml` → template dropdown appears → select "Julia" template → editor fills with template content. (2) Undo template selection restores blank editor. | Feature: `spec/features/projects/files/gitlab_ci_yml_dropdown_spec.rb`, `spec/features/projects/files/gitignore_dropdown_spec.rb`, `spec/features/projects/files/dockerfile_dropdown_spec.rb`, `spec/features/projects/files/template_selector_menu_spec.rb`, `spec/features/projects/files/undo_template_spec.rb`. E2E: `qa/qa/specs/features/browser_ui/3_create/repository/add_file_template_spec.rb` | ### ⚠️ Apps shared with other entrypoints | App | Also mounted by | Implication | |---|---|---| | `BlobEditHeader` / `CommitChangesModal` (inner component) | `blob/edit` and `blob/new` only | Exclusive to these two entrypoints — both are gated by this flag together | | `FilepathFormRoot` | `blob/edit` and `blob/new` only (via `filepath_form/index.js`) | Exclusive to these entrypoints | Neither app is shared with tree/blob-show pages. The blob-show entrypoint (`pages/projects/blob/show`) uses a different bundle (`show_blob_bundle.js`) and is gated under `vue3_migrate_repository` (already migrated). ### Not Vue — sanity check only, no migration risk | What | Notes | |---|---| | `EditBlob` class (`blob_edit/edit_blob.js`) | Plain JS class wrapping Monaco (`SourceEditor`). Not a Vue root. Owns the editor instance, markdown preview toggling (jQuery `$editModeLinks`), soft-wrap toggle, and form submit handler (axios POST). No compat risk. | | Unsaved-changes guard | Plain `window.onbeforeunload` set/cleared in `blob_bundle.js`. Not Vue. | | `FilepathFormMediator` (`blob/filepath_form_mediator.js`) | Plain JS mediator class that bridges `FilepathFormRoot` events to the `EditBlob` editor. Not a Vue root itself. | | `GLForm` | **Not used** in blob edit — `GLForm` does not appear in `blob_edit/` or `blob_edit_header.js`. The current description's mention of "GLForm (legacy class)" is inaccurate — the commit form is entirely inside `CommitChangesModal.vue` (a Vue component within `BlobEditHeader`). | | GFM markdown preview (non-markdown files) | jQuery-driven `editModeLinkClickHandler` in `EditBlob` posts to preview URL and renders with `renderGFM`. Not a Vue root. | ### Coverage gaps → prioritize in manual smoke test - **Unsaved-changes warning**: `window.onbeforeunload` behavior — type in editor → click away → browser dialog fires. No feature spec covers this directly. **Manual only.** - **Fork / suggest-changes flow**: edit as non-maintainer → `CommitChangesModal` fork path → redirect to fork MR. No feature spec. **Manual only.** - **Markdown live preview** (Editor markdown extension): switch to Preview tab on a `.md` file → live preview renders correctly. Covered partially by `spec/features/projects/files/source_editor_markdown_preview_spec.rb` — verify it still passes under flag. - **Security policy file** (`.gitlab/security-policies/policy.yml`): `SecurityPolicySchemaExtension` loads — schema validation works. No feature spec. **Manual only** (EE). - **Soft-wrap toggle**: button toggles word wrap in Monaco. Covered by `spec/features/projects/files/edit_file_soft_wrap_spec.rb`. ## Tasks / MRs - [ ] Runtime smoke test: run both pages under `VUE_VERSION=3` in GDK using the matrix above; fix any `@vue/compat` runtime issues found - Edit existing file (`blob/edit`): - [ ] Page loads — `BlobEditHeaderRoot` mounts, editor displays file content - [ ] Type in editor → navigate away → browser "leave page?" warning fires (unsaved-changes guard) *(no feature spec — manual only)* - [ ] Click Cancel → `window.onbeforeunload` cleared → navigate away without warning - [ ] "Commit changes" button → `CommitChangesModal` opens → fill commit message + branch → submit → redirect to file view - [ ] Edit protected-branch file → modal offers new branch / MR flow - [ ] Console check: no Vue 2 roots left, no `@vue/compat` warnings or errors - Create new file (`blob/new`): - [ ] Page loads — `BlobEditHeaderRoot` + `FilepathFormRoot` mount - [ ] Name file `.gitlab-ci.yml` → template dropdown appears → select template → editor fills - [ ] Select `.gitignore` template → content loads - [ ] Select `Dockerfile` template → content loads - [ ] Undo template → editor clears *(covered by `undo_template_spec.rb`)* - [ ] Commit new file → redirected to new file view - Markdown file: - [ ] Edit `.md` file → click Preview tab → live markdown preview renders correctly - [ ] Switch back to Edit tab → editor re-focuses - Fork / suggest-changes flow (non-maintainer): - [ ] Edit file as user without push access → commit modal offers fork branch → redirect to fork MR *(no feature spec — manual only)* - Security policy (EE): - [ ] Edit `.gitlab/security-policies/policy.yml` → schema validation active (no Monaco errors on valid YAML) *(no feature spec — manual only)* - [ ] **Prep MR (0–1)**: only if the smoke test surfaces GLForm/source-editor compat work - [ ] **MR 1**: create `vue3_migrate_blob_edit` flag (beta, `default_enabled: false`, actor-based) + `vue3_migration.yml` (`status: rollout`) in `pages/projects/blob/edit/` **and** `pages/projects/blob/new/` - [ ] Define Sentry alert query in this issue before ramping (yml switching has no runtime fallback) - [ ] **Cleanup MR** (after 100%): ymls → `status: migrated`, remove flag ## Rollout ``` enable gitlab-org (dogfood ≥1 week of real editing) → 10% → 50% → 100% with soak → default_enabled: true → cleanup MR ```