Add vue3_migrate_commit_list flag and migrate commit pages

What does this MR do and why?

Adds the vue3_migrate_commit_list flag and opts the commit pages into the Vue 3 rollout. This is flag 7 of 7 in the epic, the commit cluster, and nothing changes for users yet because the flag is default_enabled: false.

It adds config/feature_flags/beta/vue3_migrate_commit_list.yml (beta, default_enabled: false, milestone 19.4, group group::source code) and four vue3_migration.yml files with status: rollout, following "Option 1" in doc/development/fe_guide/vue3_migration.md, for pages/projects/commits/show, pages/projects/commit/show, pages/projects/commit/rapid_diffs, and pages/projects/compare/show.

The rollout issue's matrix only lists projects/commit/show, but rapid_diffs_on_commit_show is default_enabled: true, so Projects::CommitController#show actually renders the commit/rapid_diffs entrypoint today. A yml for commit/show alone would leave the page users actually see stuck on Vue 2, so both entrypoints get one. None of the four have EE counterparts, so we skip ee/ ymls.

This stacks on the compat fixes MR because spec/lib/gitlab/vue3_migration_files_spec.rb requires every feature_flag in a vue3_migration.yml to resolve to a real definition, and because those fixes are what make these pages work once we start ramping.

References

Screenshots or screen recordings

NA

How to set up and validate locally

  1. Check out this branch.
  2. Run node scripts/frontend/infection_scanner/infection_scanner.mjs. The scanner caches its import graph, so it won't pick up the new vue3_migration.yml files otherwise.
  3. Run gdk restart vite rails-web. Vite builds its page entry map at startup, and Gitlab::Vue3Migration.definitions is memoized per process.
  4. In the Rails console, run Feature.enable(:vue3_migrate_commit_list).
  5. Visit a commits list, a single commit page, and a compare page.
  6. In the browser console, run [...document.querySelectorAll('[data-gitlab-vue3-app]')].map((el) => el.dataset.gitlabVue3App) and confirm the expected apps are listed.
  7. Run [...document.querySelectorAll('*')].filter((el) => el.__vue__ && el.__vue__.$root === el.__vue__).map((el) => el.__vue__.$options.name) and confirm only the global singletons are left on Vue 2.
  8. Confirm there are no console errors.

I tested the commits list (both the project_commits_refactor path and the legacy jQuery path), a single commit with diffs and notes, the ambiguous-ref modal, and compare in both wide and narrow layouts. spec/lib/gitlab/vue3_migration_files_spec.rb passes with 803 examples and 0 failures.

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.

Merge request reports

Loading
Loading