Replace window.confirm with GlModal for noteable notes delete and edit

This commit replaces the window.confirm dialog with
a GlModal when deleting or canceling an edit of
a comment in a noteable note.

Changelog: changed

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

@@ -3,6 +3,7 @@ import { GlSprintf, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
 import $ from 'jquery';
 import { escape, isEmpty } from 'lodash';
 import { mapGetters, mapActions } from 'vuex';
+import { confirmAction } from '~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal';
 import { INLINE_DIFF_LINES_KEY } from '~/diffs/constants';
 import createFlash from '~/flash';
 import httpStatusCodes from '~/lib/utils/http_status';
@@ -243,14 +244,18 @@ export default {
       this.setSelectedCommentPositionHover();
       this.$emit('handleEdit');
     },
-    deleteHandler() {
+    async deleteHandler() {
       const typeOfComment = this.note.isDraft ? __('pending comment') : __('comment');
-      if (
-        // eslint-disable-next-line no-alert
-        window.confirm(
-          sprintf(__('Are you sure you want to delete this %{typeOfComment}?'), { typeOfComment }),
-        )
-      ) {
+
+      const msg = sprintf(__('Are you sure you want to delete this %{typeOfComment}?'), {
+        typeOfComment,
+      });
+      const confirmed = await confirmAction(msg, {
+        primaryBtnVariant: 'danger',
+        primaryBtnText: __('Delete Comment'),
+      });
+
+      if (confirmed) {
         this.isDeleting = true;
         this.$emit('handleDeleteNote', this.note);
 
@@ -345,10 +350,11 @@ export default {
         parent: this.$el,
       });
     },
-    formCancelHandler({ shouldConfirm, isDirty }) {
+    async formCancelHandler({ shouldConfirm, isDirty }) {
       if (shouldConfirm && isDirty) {
-        // eslint-disable-next-line no-alert
-        if (!window.confirm(__('Are you sure you want to cancel editing this comment?'))) return;
+        const msg = __('Are you sure you want to cancel editing this comment?');
+        const confirmed = await confirmAction(msg);
+        if (!confirmed) return;
       }
       this.$refs.noteBody.resetAutoSave();
       if (this.oldContent) {

spec/features/merge_request/batch_comments_spec.rb

@@ -64,7 +64,11 @@ RSpec.describe 'Merge request > Batch comments', :js do
     it 'deletes draft note' do
       write_diff_comment
 
-      accept_alert { find('.js-note-delete').click }
+      find('.js-note-delete').click
+
+      page.within('.modal') do
+        click_button('Delete Comment', match: :first)
+      end
 
       wait_for_requests
 

spec/features/merge_request/user_comments_on_diff_spec.rb

@@ -238,8 +238,11 @@ RSpec.describe 'User comments on a diff', :js do
       page.within('.diff-file:nth-of-type(1) .discussion .note') do
         find('.more-actions').click
         find('.more-actions .dropdown-menu li', match: :first)
+        find('.js-note-delete').click
+      end
 
-        accept_confirm { find('.js-note-delete').click }
+      page.within('.modal') do
+        click_button('Delete Comment', match: :first)
       end
 
       page.within('.merge-request-tabs') do

spec/features/merge_request/user_posts_diff_notes_spec.rb

@@ -103,7 +103,7 @@ RSpec.describe 'Merge request > User posts diff notes', :js do
       it 'allows commenting' do
         should_allow_commenting(find('[id="2f6fcd96b88b36ce98c38da085c795a27d92a3dd_10_9"]'))
 
-        accept_confirm do
+        accept_gl_confirm(button_text: 'Delete Comment') do
           first('button.more-actions-toggle').click
           first('.js-note-delete').click
         end

spec/features/merge_request/user_posts_notes_spec.rb

@@ -165,11 +165,13 @@ RSpec.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'
+          find('[data-testid="cancel"]').click
+        end
 
-          accept_confirm do
-            find('[data-testid="cancel"]').click
-          end
+        page.within('.modal') do
+          click_button('OK', match: :first)
         end
+
         expect(find('.js-note-text').text).to eq ''
       end
 

spec/features/merge_request/user_sees_avatar_on_diff_notes_spec.rb

 # frozen_string_literal: true
 
 require 'spec_helper'
+include Spec::Support::Helpers::ModalHelpers # rubocop:disable  Style/MixinUsage
 
 RSpec.describe 'Merge request > User sees avatars on diff notes', :js do
   include NoteInteractionHelpers
+  include Spec::Support::Helpers::ModalHelpers
 
   let(:project)       { create(:project, :public, :repository) }
   let(:user)          { project.creator }
@@ -121,8 +123,8 @@ RSpec.describe 'Merge request > User sees avatars on diff notes', :js do
       it 'removes avatar when note is deleted' do
         open_more_actions_dropdown(note)
 
-        page.within find(".note-row-#{note.id}") do
-          accept_confirm { find('.js-note-delete').click }
+        accept_gl_confirm(button_text: 'Delete Comment') do
+          find(".note-row-#{note.id} .js-note-delete").click
         end
 
         wait_for_requests