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.

  1. 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
  2. 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
  3. 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
  4. Enable the flag: Feature.enable(:vue3_migrate_mr_rapid_diffs) (rails console), or via the admin feature flags UI.
  5. Open a merge request's Changes tab. Confirm Vue 3 is active: the console logs [gitlab] [V] Using Vue.js 3 (with @vue/compat), and document.querySelectorAll('[data-gitlab-vue3-app]') returns app roots.
  6. 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.

Part of the Vue 3 migration (Code Review) epic, gitlab-org#23167.

Edited by Thomas Randolph

Merge request reports

Loading
Loading