Replace window.confirm with GlModa in pipeline manual actions

This replaces the window.confirm dialog with
a GlModal when performaning a manual
action on a pipeline.

Changelog: changed

app/assets/javascripts/pipelines/components/pipelines_list/pipelines_manual_actions.vue

@@ -2,6 +2,7 @@
 import { GlDropdown, GlDropdownItem, GlIcon, GlTooltipDirective } from '@gitlab/ui';
 import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
+import { confirmAction } from '~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal';
 import { s__, __, sprintf } from '~/locale';
 import GlCountdown from '~/vue_shared/components/gl_countdown.vue';
 import eventHub from '../../event_hub';
@@ -28,7 +29,7 @@ export default {
     };
   },
   methods: {
-    onClickAction(action) {
+    async onClickAction(action) {
       if (action.scheduled_at) {
         const confirmationMessage = sprintf(
           s__(
@@ -36,9 +37,10 @@ export default {
           ),
           { jobName: action.name },
         );
-        // https://gitlab.com/gitlab-org/gitlab-foss/issues/52156
-        // eslint-disable-next-line no-alert
-        if (!window.confirm(confirmationMessage)) {
+
+        const confirmed = await confirmAction(confirmationMessage);
+
+        if (!confirmed) {
           return;
         }
       }

spec/features/projects/pipelines/pipelines_spec.rb

@@ -4,6 +4,7 @@ require 'spec_helper'
 
 RSpec.describe 'Pipelines', :js do
   include ProjectForksHelper
+  include Spec::Support::Helpers::ModalHelpers
 
   let(:project) { create(:project) }
 
@@ -436,7 +437,9 @@ RSpec.describe 'Pipelines', :js do
         context 'when user played a delayed job immediately' do
           before do
             find('[data-testid="pipelines-manual-actions-dropdown"]').click
-            page.accept_confirm { click_button('delayed job 1') }
+            accept_gl_confirm do
+              click_button 'delayed job 1'
+            end
             wait_for_requests
           end
 

spec/frontend/pipelines/pipelines_actions_spec.js

@@ -6,10 +6,16 @@ import waitForPromises from 'helpers/wait_for_promises';
 import { TEST_HOST } from 'spec/test_constants';
 import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
+import { confirmAction } from '~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal';
 import PipelinesManualActions from '~/pipelines/components/pipelines_list/pipelines_manual_actions.vue';
 import GlCountdown from '~/vue_shared/components/gl_countdown.vue';
 
 jest.mock('~/flash');
+jest.mock('~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal', () => {
+  return {
+    confirmAction: jest.fn(),
+  };
+});
 
 describe('Pipelines Actions dropdown', () => {
   let wrapper;
@@ -36,6 +42,7 @@ describe('Pipelines Actions dropdown', () => {
     wrapper = null;
 
     mock.restore();
+    confirmAction.mockReset();
   });
 
   describe('manual actions', () => {
@@ -112,11 +119,11 @@ describe('Pipelines Actions dropdown', () => {
 
     it('makes post request after confirming', async () => {
       mock.onPost(scheduledJobAction.path).reply(200);
-      jest.spyOn(window, 'confirm').mockReturnValue(true);
+      confirmAction.mockResolvedValueOnce(true);
 
       findAllDropdownItems().at(0).vm.$emit('click');
 
-      expect(window.confirm).toHaveBeenCalled();
+      expect(confirmAction).toHaveBeenCalled();
 
       await waitForPromises();
 
@@ -125,11 +132,11 @@ describe('Pipelines Actions dropdown', () => {
 
     it('does not make post request if confirmation is cancelled', async () => {
       mock.onPost(scheduledJobAction.path).reply(200);
-      jest.spyOn(window, 'confirm').mockReturnValue(false);
+      confirmAction.mockResolvedValueOnce(false);
 
       findAllDropdownItems().at(0).vm.$emit('click');
 
-      expect(window.confirm).toHaveBeenCalled();
+      expect(confirmAction).toHaveBeenCalled();
 
       await waitForPromises();