Rapid Diffs: replying to a diff discussion crashes under Vue 3 (@vue/compat) via placeholder note

Summary

In Rapid Diffs, replying to a diff discussion crashes when the app runs under @vue/compat (Vue 3). The reply is saved but never renders. This blocks the Vue 3 migration of the MR rapid diffs page (#611465); !252389 (merged) was merged and reverted (!255026 (merged)) because of it.

Root cause

When a reply is submitted, the notes store inserts an optimistic placeholder note (SHOW_PLACEHOLDER_NOTE) shaped as:

{ id, isPlaceholderNote: true, placeholderType, notes: [{ body }] }

It has no author, and its body lives at notes[0].body, not on the note itself.

The legacy app/assets/javascripts/notes/components/discussion_notes.vue handles this: componentName() renders placeholders with PlaceholderNote / PlaceholderSystemNote, and componentData() unwraps note.notes[0].

The Rapid Diffs copy app/assets/javascripts/rapid_diffs/app/discussions/discussion_notes.vue has no such branch. Its replies loop renders every non-system note as <noteable-note>. The placeholder falls through to noteable-note, whose note_author / note_header children read this.author.id and author.path, so it throws TypeError: Cannot read properties of undefined (reading 'id'), then Cannot set properties of null (setting '__vnode') in Vue's patchElement.

Vue 2 tolerated the undefined access; Vue 3 / @vue/compat does not.

Scope of fix

Add a placeholder-note branch to rapid_diffs/app/discussions/discussion_notes.vue mirroring the legacy component:

  • Render isPlaceholderNote replies (and a placeholder first note, if reachable) via the shared PlaceholderNote / PlaceholderSystemNote, not noteable-note.
  • Feed the placeholder its body from notes[0] (as legacy componentData does).
  • Use a placeholder-safe :key (the current :key="note.id" may be unstable for placeholders).

Note: shared vue_shared/components/notes/placeholder_note.vue reads the author from a getUserData store getter (currently ~/notes/store/legacy_notes). Confirm the store the Rapid Diffs app uses exposes the same author data, or supply it, so the placeholder renders the current user.

Verification

  • Manual: enable vue3_migrate_mr_rapid_diffs, open a MR Changes tab, comment on a diff line, reply to the thread. Reply should render with no console error.
  • Specs (already on master via !247832 (merged), which points spec/features/merge_request at Rapid Diffs): with the flag on these must pass -
    • spec/features/merge_request/user_sees_avatar_on_diff_notes_spec.rb ("adds avatar when commenting", "adds multiple comments")
    • spec/features/merge_request/user_comments_on_whitespace_hidden_diff_spec.rb ("allows replies to comments in the diff")

Because unpersisted feature flags default on in RSpec, a full rspec run serves the Vue 3 entrypoint to these specs; run migration work with pipeline:run-all-rspec.

Follow-up

Once this lands, re-apply the MR rapid diffs Vue 3 migration (#611465).