Add vue3_migrate_blob_edit flag and migrate blob edit pages

Kushal Pandyarequested to merge
613675-add-vue3-migrate-blob-edit-flag into master

What does this MR do and why?

Adds the vue3_migrate_blob_edit feature flag and opts the projects/blob/edit and projects/blob/new entrypoints into the Vue 3 migration with status: rollout. Both pages keep serving Vue 2 until the flag is enabled.

Note

This MR also moves the mountFilepathForm import from FilepathFormMediator into EditBlob, which injects it into the mediator. The Vue 3 build decides what to convert by following imports out from the page entry and doesn't trace through the mediator, so FilepathFormRoot would otherwise stay on Vue 2 even at 100% rollout, and would still be on Vue 2 after we flip these ymls to status: migrated. Unlike the ymls, this part isn't gated by the flag and ships on merge. It's behavior preserving: the mount call stays where it was, and template select, switch, and undo were verified on both runtimes.

References

Screenshots or screen recordings

NA

How to set up and validate locally

  1. Enable the flag in the rails console: 
    Feature.enable(:vue3_migrate_blob_edit)
  2. Restart Vite so the new .vue3 entries are emitted: gdk restart vite
  3. Visit /<group>/<project>/-/edit/master/README.md. The console should log [V] Using Vue.js 3 for BlobEditHeaderRoot and [V] Using Vue.js 3 for FilepathFormRoot.
  4. Edit the file, click Commit changes, commit to a new branch, confirm the redirect.
  5. Visit /<group>/<project>/-/new/master, name the file .gitlab-ci.yml, apply a template, then Undo from the toast.
  6. Disable the flag and repeat steps 3 to 5. Both roots should report Vue 2 and behave identically.

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Kushal Pandya

Merge request reports