Fix placeholder note rendering

3 files changed, 32 insertions, 1 deletions

diff --git a/app/assets/javascripts/notes/components/noteable_discussion.vue b/app/assets/javascripts/notes/components/noteable_discussion.vue
index 6ede7562edf..e9218723149 100644
--- a/app/assets/javascripts/notes/components/noteable_discussion.vue
+++ b/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 });
diff --git a/changelogs/unreleased/_acet-fix-placeholder-note.yml b/changelogs/unreleased/_acet-fix-placeholder-note.yml
new file mode 100644
index 00000000000..68f3d0085c9
--- /dev/null
+++ b/changelogs/unreleased/_acet-fix-placeholder-note.yml
@@ -0,0 +1,5 @@
+---
+title: Fix rendering placeholder notes
+merge_request: 22078
+author:
+type: fixed
diff --git a/spec/javascripts/notes/components/noteable_discussion_spec.js b/spec/javascripts/notes/components/noteable_discussion_spec.js
index 2a01bd85520..40b5f009ceb 100644
--- a/spec/javascripts/notes/components/noteable_discussion_spec.js
+++ b/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);
+    });
+  });
 });