Draft: Migrate MR rapid diffs page to Vue 3 (not meant to be merged)

What does this MR do and why?

Re-applies the Vue 3 migration of the merge request Rapid Diffs page.

The same migration merged in !252389 (merged) and was reverted in !255026 (merged). Replying to a diff discussion crashed under @vue/compat in the development build: the reply placeholder note has no author, noteable_note.vue throws TypeError: Cannot read properties of undefined (reading 'id'), Vue 3 in development rethrows, and the discussion list breaks. spec/features/merge_request/user_comments_on_whitespace_hidden_diff_spec.rb and user_sees_avatar_on_diff_notes_spec.rb failed on master after the merge. Issue: #628791 (closed).

This MR is stacked on !255205 (merged), which installs a non-production Vue 3 error handler. With it, the development build recovers from a component error the way production does: the failing component renders a comment node and the page keeps working. The Rapid Diffs specs pass under Vue 3.

The underlying bug is fixed separately in !255075 (merged). This MR does not depend on it.

Files:

• app/assets/javascripts/pages/projects/merge_requests/rapid_diffs/vue3_migration.yml: status: rollout, feature_flag: vue3_migrate_mr_rapid_diffs
• config/feature_flags/beta/vue3_migrate_mr_rapid_diffs.yml: type beta, default disabled, milestone 19.4, group::code review

Labels pipeline:run-all-rspec and pipeline:run-rspec-vue3 are set so the Rapid Diffs feature specs run against the Vue 3 bundle. Unpersisted feature flags default to enabled in RSpec.

Stacked on

!255205 (merged) (target branch vue3-compat-dev-error-handler). Merge order: that MR first, then this one. Retarget this MR to master after the base merges.

Verification, pipeline https://gitlab.com/gitlab-org/gitlab/-/pipelines/2843197576 of this MR: the four examples that failed on master after the original migration pass in every job that ran them, per the junit reports:

• rspec system pg17 3/32 (https://gitlab.com/gitlab-org/gitlab/-/jobs/16463272335): user_comments_on_whitespace_hidden_diff_spec.rb, both allows replies to comments in the diff examples
• rspec system pg17 17/32 (https://gitlab.com/gitlab-org/gitlab/-/jobs/16463272349): user_sees_avatar_on_diff_notes_spec.rb, adds avatar when commenting and adds multiple comments
• The same files also pass in rspec system pg17 vue3 9/32, vue3 17/32, single-redis 2/32 and single-redis 20/32

The only failed jobs were rspec unit clickhouse25 and clickhouse26, which fail on every pipeline today. An earlier run of the same combination is https://gitlab.com/gitlab-org/gitlab/-/pipelines/2843122054 (job https://gitlab.com/gitlab-org/gitlab/-/jobs/16462861924, 292 examples, 0 failures).

References

• Base MR (merge first): !255205 (merged)
• Original migration (merged, reverted): !252389 (merged)
• Revert: !255026 (merged)
• Crash issue: #628791 (closed)
• Fix for the crash (independent): !255075 (merged)
• Verification pipeline of the handler with these yml files: https://gitlab.com/gitlab-org/gitlab/-/pipelines/2843122054
• Rollout issue: #611465
• Vue 3 migration (Code Review) epic: gitlab-org#23167

Screenshots or screen recordings

No visual change intended. Vue 3 renders the same UI.

How to set up and validate locally

1. Check out this branch.
2. Run node scripts/frontend/infection_scanner/infection_scanner.mjs.
3. Restart Vite: gdk restart vite rails-web.
4. Enable the flag: Feature.enable(:vue3_migrate_mr_rapid_diffs).
5. Open a merge request's Changes tab. Confirm the console logs [gitlab] [V] Using Vue.js 3 (with @vue/compat).
6. Comment on a diff line. Reply to the thread. The reply renders when saved.
7. Check the console: one [Vue warn]: Error in render: "TypeError: ..." line, no __vnode errors.
8. Run bin/rspec spec/features/merge_request/user_comments_on_whitespace_hidden_diff_spec.rb:49. It passes.

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist.