Render placeholder notes in Rapid Diffs discussion replies
What does this MR do and why?
Replying to a diff discussion in Rapid Diffs crashes under @vue/compat (Vue 3). The optimistic reply placeholder carries no author, and Rapid Diffs' discussion_notes.vue rendered every reply through NoteableNote, which dereferences author.id and throws TypeError: Cannot read properties of undefined (reading 'id').
This adds a placeholder branch to the replies loop, rendering isPlaceholderNote replies through Rapid Diffs local PlaceholderNote / PlaceholderSystemNote components (fed notes[0]), matching how the legacy notes/components/discussion_notes.vue handles placeholders. The components mirror noteable_note.vue's layout so the placeholder is styled consistently; the current user is read from the notes store (useNotes().getUserData).
Only reply placeholders are handled. A first-note (non-reply) placeholder is a top-level discussion with no position, so discussion_position.js filters it out before it reaches discussion_notes.vue.
Unblocks the MR rapid diffs Vue 3 migration.
Closes #628791 (closed)
How to set up and validate locally
The vue3_migrate_mr_rapid_diffs flag and its vue3_migration.yml are not on master (they were reverted with the migration), so the Vue 3 path has to be recreated locally to exercise this fix.
- Create the migration YAML next to the page entrypoint:
# app/assets/javascripts/pages/projects/merge_requests/rapid_diffs/vue3_migration.yml status: rollout feature_flag: vue3_migrate_mr_rapid_diffs - Create the feature flag definition:
# config/feature_flags/beta/vue3_migrate_mr_rapid_diffs.yml name: vue3_migrate_mr_rapid_diffs feature_issue_url: https://gitlab.com/groups/gitlab-org/-/work_items/23167 rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/work_items/611465 milestone: '19.4' group: group::code review type: beta default_enabled: false - Re-run the Vue 3 infection scanner so the bundler picks up the new files, then restart Vite:
node scripts/frontend/infection_scanner/infection_scanner.mjs gdk restart vite rails-web - Enable the flag:
Feature.enable(:vue3_migrate_mr_rapid_diffs)(rails console), or via the admin feature flags UI. - Open a merge request's Changes tab. Confirm Vue 3 is active: the console logs
[gitlab] [V] Using Vue.js 3 (with @vue/compat), anddocument.querySelectorAll('[data-gitlab-vue3-app]')returns app roots. - Comment on a diff line, then reply to the thread. The reply's placeholder renders (avatar, name, body) and resolves to the saved note, with no console error.
To see the bug this fixes, repeat step 6 against master's discussion_notes.vue: the reply throws TypeError: Cannot read properties of undefined (reading 'id') and never renders.
The migrated feature specs (spec/features/merge_request/user_sees_avatar_on_diff_notes_spec.rb, user_comments_on_whitespace_hidden_diff_spec.rb) cover this once the flag path is exercised; unpersisted flags default on in RSpec, so a full run serves the Vue 3 entrypoint.
Related
Part of the Vue 3 migration (Code Review) epic, gitlab-org#23167.