Fixes confirm box not showing when users cancelling reply form

Closes https://gitlab.com/gitlab-org/gitlab/-/issues/33586

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

@@ -328,7 +328,8 @@ export default {
             <button
               class="btn note-edit-cancel js-close-discussion-note-form"
               type="button"
-              @click="cancelHandler()"
+              data-testid="cancelBatchCommentsEnabled"
+              @click="cancelHandler(true)"
             >
               {{ __('Cancel') }}
             </button>
@@ -353,7 +354,8 @@ export default {
           <button
             class="btn btn-cancel note-edit-cancel js-close-discussion-note-form"
             type="button"
-            @click="cancelHandler()"
+            data-testid="cancel"
+            @click="cancelHandler(true)"
           >
             {{ __('Cancel') }}
           </button>

changelogs/unreleased/ph-33586-confirmCancelReply.yml

+---
+title: Fixed cancel reply button not alerting the user
+merge_request:
+author:
+type: fixed

ee/spec/frontend/notes/components/note_form_spec.js

@@ -67,6 +67,17 @@ describe('issue_note_form component', () => {
       return store.dispatch('batchComments/enableBatchComments').then(vm.$nextTick);
     });
 
+    it('should be possible to cancel', () => {
+      jest.spyOn(vm, 'cancelHandler');
+
+      return vm.$nextTick().then(() => {
+        const cancelButton = vm.$el.querySelector('[data-testid="cancelBatchCommentsEnabled"]');
+        cancelButton.click();
+
+        expect(vm.cancelHandler).toHaveBeenCalledWith(true);
+      });
+    });
+
     it('shows resolve checkbox', () => {
       expect(
         vm.$el.querySelector('[data-qa-selector="resolve_review_discussion_checkbox"]'),

spec/features/merge_request/user_posts_diff_notes_spec.rb

@@ -235,7 +235,9 @@ describe 'Merge request > User posts diff notes', :js do
   def should_allow_dismissing_a_comment(line_holder, diff_side = nil)
     write_comment_on_line(line_holder, diff_side)
 
+    accept_confirm do
       find('.js-close-discussion-note-form').click
+    end
 
     assert_comment_dismissal(line_holder)
   end

spec/features/merge_request/user_posts_notes_spec.rb

@@ -147,8 +147,11 @@ describe 'Merge request > User posts notes', :js do
       it 'resets the edit note form textarea with the original content of the note if cancelled' do
         within('.current-note-edit-form') do
           fill_in 'note[note]', with: 'Some new content'
+
+          accept_confirm do
             find('.btn-cancel').click
           end
+        end
         expect(find('.js-note-text').text).to eq ''
       end
 

spec/frontend/notes/components/note_form_spec.js

@@ -161,18 +161,18 @@ describe('issue_note_form component', () => {
 
     describe('actions', () => {
       it('should be possible to cancel', () => {
-        // TODO: do not spy on vm
-        jest.spyOn(wrapper.vm, 'cancelHandler');
+        const cancelHandler = jest.fn();
         wrapper.setProps({
           ...props,
           isEditing: true,
         });
+        wrapper.setMethods({ cancelHandler });
 
         return wrapper.vm.$nextTick().then(() => {
-          const cancelButton = wrapper.find('.note-edit-cancel');
+          const cancelButton = wrapper.find('[data-testid="cancel"]');
           cancelButton.trigger('click');
 
-          expect(wrapper.vm.cancelHandler).toHaveBeenCalled();
+          expect(cancelHandler).toHaveBeenCalledWith(true);
         });
       });