Replace `window.confirm` with `GlModal` confirmation

When canceling a MR comment

Changelog: changed

app/assets/javascripts/diffs/components/diff_line_note_form.vue

@@ -2,6 +2,7 @@
 import { mapState, mapGetters, mapActions } from 'vuex';
 import { s__ } from '~/locale';
 import diffLineNoteFormMixin from '~/notes/mixins/diff_line_note_form';
+import { confirmAction } from '~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import MultilineCommentForm from '../../notes/components/multiline_comment_form.vue';
 import {
@@ -177,16 +178,16 @@ export default {
       'saveDiffDiscussion',
       'setSuggestPopoverDismissed',
     ]),
-    handleCancelCommentForm(shouldConfirm, isDirty) {
+    async handleCancelCommentForm(shouldConfirm, isDirty) {
       if (shouldConfirm && isDirty) {
         const msg = s__('Notes|Are you sure you want to cancel creating this comment?');
 
-        // eslint-disable-next-line no-alert
-        if (!window.confirm(msg)) {
+        const confirmed = await confirmAction(msg);
+
+        if (!confirmed) {
           return;
         }
       }
-
       this.cancelCommentForm({
         lineCode: this.line.line_code,
         fileHash: this.diffFileHash,

app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal.js

 import Vue from 'vue';
 
-export function confirmViaGlModal(message, element) {
+export function confirmAction(message, { primaryBtnVariant, primaryBtnText } = {}) {
   return new Promise((resolve) => {
     let confirmed = false;
 
-    const props = {};
-
-    const confirmBtnVariant = element.getAttribute('data-confirm-btn-variant');
-
-    if (confirmBtnVariant) {
-      props.primaryVariant = confirmBtnVariant;
-    }
-    const screenReaderText =
-      element.querySelector('.gl-sr-only')?.textContent ||
-      element.querySelector('.sr-only')?.textContent ||
-      element.getAttribute('aria-label');
-
-    if (screenReaderText) {
-      props.primaryText = screenReaderText;
-    }
-
     const component = new Vue({
       components: {
         ConfirmModal: () => import('./confirm_modal.vue'),
@@ -28,7 +12,10 @@ export function confirmViaGlModal(message, element) {
         return h(
           'confirm-modal',
           {
-            props,
+            props: {
+              primaryVariant: primaryBtnVariant,
+              primaryText: primaryBtnText,
+            },
             on: {
               confirmed() {
                 confirmed = true;
@@ -45,3 +32,24 @@ export function confirmViaGlModal(message, element) {
     }).$mount();
   });
 }
+
+export function confirmViaGlModal(message, element) {
+  const primaryBtnConfig = {};
+
+  const confirmBtnVariant = element.getAttribute('data-confirm-btn-variant');
+
+  if (confirmBtnVariant) {
+    primaryBtnConfig.primaryBtnVariant = confirmBtnVariant;
+  }
+
+  const screenReaderText =
+    element.querySelector('.gl-sr-only')?.textContent ||
+    element.querySelector('.sr-only')?.textContent ||
+    element.getAttribute('aria-label');
+
+  if (screenReaderText) {
+    primaryBtnConfig.primaryBtnText = screenReaderText;
+  }
+
+  return confirmAction(message, primaryBtnConfig);
+}

spec/features/merge_request/user_posts_diff_notes_spec.rb

@@ -238,8 +238,10 @@ RSpec.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
+
+    page.within('.modal') do
+      click_button 'OK'
     end
 
     assert_comment_dismissal(line_holder)

spec/frontend/diffs/components/diff_line_note_form_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import DiffLineNoteForm from '~/diffs/components/diff_line_note_form.vue';
 import { createStore } from '~/mr_notes/stores';
 import NoteForm from '~/notes/components/note_form.vue';
+import { confirmAction } from '~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal';
 import { noteableDataMock } from '../../notes/mock_data';
 import diffFileMockData from '../mock_data/diff_file';
 
+jest.mock('~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal', () => {
+  return {
+    confirmAction: jest.fn(),
+  };
+});
+
 describe('DiffLineNoteForm', () => {
   let wrapper;
   let diffFile;
@@ -36,49 +44,56 @@ describe('DiffLineNoteForm', () => {
     });
   };
 
+  const findNoteForm = () => wrapper.findComponent(NoteForm);
+
   describe('methods', () => {
     beforeEach(() => {
       wrapper = createComponent();
     });
 
     describe('handleCancelCommentForm', () => {
+      afterEach(() => {
+        confirmAction.mockReset();
+      });
+
       it('should ask for confirmation when shouldConfirm and isDirty passed as truthy', () => {
-        jest.spyOn(window, 'confirm').mockReturnValue(false);
+        confirmAction.mockResolvedValueOnce(false);
 
-        wrapper.vm.handleCancelCommentForm(true, true);
+        findNoteForm().vm.$emit('cancelForm', true, true);
 
-        expect(window.confirm).toHaveBeenCalled();
+        expect(confirmAction).toHaveBeenCalled();
       });
 
-      it('should ask for confirmation when one of the params false', () => {
-        jest.spyOn(window, 'confirm').mockReturnValue(false);
+      it('should not ask for confirmation when one of the params false', () => {
+        confirmAction.mockResolvedValueOnce(false);
 
-        wrapper.vm.handleCancelCommentForm(true, false);
+        findNoteForm().vm.$emit('cancelForm', true, false);
 
-        expect(window.confirm).not.toHaveBeenCalled();
+        expect(confirmAction).not.toHaveBeenCalled();
 
-        wrapper.vm.handleCancelCommentForm(false, true);
+        findNoteForm().vm.$emit('cancelForm', false, true);
 
-        expect(window.confirm).not.toHaveBeenCalled();
+        expect(confirmAction).not.toHaveBeenCalled();
       });
 
-      it('should call cancelCommentForm with lineCode', (done) => {
-        jest.spyOn(window, 'confirm').mockImplementation(() => {});
+      it('should call cancelCommentForm with lineCode', async () => {
+        confirmAction.mockResolvedValueOnce(true);
         jest.spyOn(wrapper.vm, 'cancelCommentForm').mockImplementation(() => {});
         jest.spyOn(wrapper.vm, 'resetAutoSave').mockImplementation(() => {});
-        wrapper.vm.handleCancelCommentForm();
 
-        expect(window.confirm).not.toHaveBeenCalled();
-        wrapper.vm.$nextTick(() => {
+        findNoteForm().vm.$emit('cancelForm', true, true);
+
+        await nextTick();
+
+        expect(confirmAction).toHaveBeenCalled();
+
+        await nextTick();
+
         expect(wrapper.vm.cancelCommentForm).toHaveBeenCalledWith({
           lineCode: diffLines[1].line_code,
           fileHash: wrapper.vm.diffFileHash,
         });
-
         expect(wrapper.vm.resetAutoSave).toHaveBeenCalled();
-
-          done();
-        });
       });
     });