Fix placeholder note rendering

app/assets/javascripts/notes/components/noteable_discussion.vue

@@ -191,6 +191,7 @@ export default {
         if (note.placeholderType === SYSTEM_NOTE) {
           return placeholderSystemNote;
         }
+
         return placeholderNote;
       }
 
@@ -201,7 +202,7 @@ export default {
       return noteableNote;
     },
     componentData(note) {
-      return note.isPlaceholderNote ? this.discussion.notes[0] : note;
+      return note.isPlaceholderNote ? note.notes[0] : note;
     },
     toggleDiscussionHandler() {
       this.toggleDiscussion({ discussionId: this.discussion.id });

changelogs/unreleased/_acet-fix-placeholder-note.yml

@@ -0,0 +1,5 @@
+---
+title: Fix rendering placeholder notes
+merge_request: 22078
+author:
+type: fixed

spec/javascripts/notes/components/noteable_discussion_spec.js

@@ -133,4 +133,29 @@ describe('noteable_discussion component', () => {
       });
     });
   });
+
+  describe('componentData', () => {
+    it('should return first note object for placeholder note', () => {
+      const data = {
+        isPlaceholderNote: true,
+        notes: [
+          { body: 'hello world!' },
+        ],
+      };
+
+      const note = vm.componentData(data);
+      expect(note).toEqual(data.notes[0]);
+    });
+
+    it('should return given note for nonplaceholder notes', () => {
+      const data = {
+        notes: [
+          { id: 12 },
+        ],
+      };
+
+      const note = vm.componentData(data);
+      expect(note).toEqual(data);
+    });
+  });
 });