Fix unresponsive reply button in discussions

Events listeners have been fixed to ensure UI interactions are
properly handled in discussion notes

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

@@ -105,8 +105,8 @@ export default {
           :commit="commit"
           :help-page-path="helpPagePath"
           :show-reply-button="userCanReply"
-          @handle-delete-note="$emit('deleteNote')"
-          @start-replying="$emit('startReplying')"
+          @handleDeleteNote="$emit('deleteNote')"
+          @startReplying="$emit('startReplying')"
         >
           <note-edited-text
             v-if="discussion.resolved"
@@ -132,7 +132,7 @@ export default {
             :note="componentData(note)"
             :help-page-path="helpPagePath"
             :line="line"
-            @handle-delete-note="$emit('deleteNote')"
+            @handleDeleteNote="$emit('deleteNote')"
           />
         </template>
       </template>
@@ -144,7 +144,7 @@ export default {
           :note="componentData(note)"
           :help-page-path="helpPagePath"
           :line="diffLine"
-          @handle-delete-note="$emit('deleteNote')"
+          @handleDeleteNote="$emit('deleteNote')"
         >
           <slot v-if="index === 0" slot="avatar-badge" name="avatar-badge"></slot>
         </component>

changelogs/unreleased/63200-reply-button-broken.yml

+---
+title: Fix unresponsive reply button in discussions
+merge_request: 29936
+author:
+type: fixed

spec/frontend/notes/components/discussion_notes_spec.js

@@ -112,6 +112,44 @@ describe('DiscussionNotes', () => {
     });
   });
 
+  describe('events', () => {
+    describe('with groupped notes and replies expanded', () => {
+      const findNoteAtIndex = index => wrapper.find(`.note:nth-of-type(${index + 1}`);
+
+      beforeEach(() => {
+        createComponent({ shouldGroupReplies: true, isExpanded: true });
+      });
+
+      it('emits deleteNote when first note emits handleDeleteNote', () => {
+        findNoteAtIndex(0).vm.$emit('handleDeleteNote');
+        expect(wrapper.emitted().deleteNote).toBeTruthy();
+      });
+
+      it('emits startReplying when first note emits startReplying', () => {
+        findNoteAtIndex(0).vm.$emit('startReplying');
+        expect(wrapper.emitted().startReplying).toBeTruthy();
+      });
+
+      it('emits deleteNote when second note emits handleDeleteNote', () => {
+        findNoteAtIndex(1).vm.$emit('handleDeleteNote');
+        expect(wrapper.emitted().deleteNote).toBeTruthy();
+      });
+    });
+
+    describe('with ungroupped notes', () => {
+      let note;
+      beforeEach(() => {
+        createComponent();
+        note = wrapper.find('.note');
+      });
+
+      it('emits deleteNote when first note emits handleDeleteNote', () => {
+        note.vm.$emit('handleDeleteNote');
+        expect(wrapper.emitted().deleteNote).toBeTruthy();
+      });
+    });
+  });
+
   describe('componentData', () => {
     beforeEach(() => {
       createComponent();