Merge branch...

Merge branch '344108-replace-browser-confirm-modal-with-glmodal-in-app-assets-javascripts-environments-components-2' into 'master'

Replace window.confirm with GlModal in environment actions

See merge request gitlab-org/gitlab!80425

app/assets/javascripts/environments/components/environment_actions.vue

 <script>
 import { GlDropdown, GlDropdownItem, GlIcon, GlTooltipDirective } from '@gitlab/ui';
+import { confirmAction } from '~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal';
 import { formatTime } from '~/lib/utils/datetime_utility';
 import { __, s__, sprintf } from '~/locale';
 import eventHub from '../event_hub';
@@ -37,7 +38,7 @@ export default {
     },
   },
   methods: {
-    onClickAction(action) {
+    async onClickAction(action) {
       if (action.scheduledAt) {
         const confirmationMessage = sprintf(
           s__(
@@ -45,9 +46,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/environments/environments_spec.rb

@@ -3,6 +3,8 @@
 require 'spec_helper'
 
 RSpec.describe 'Environments page', :js do
+  include Spec::Support::Helpers::ModalHelpers
+
   let(:project) { create(:project) }
   let(:user) { create(:user) }
   let(:role) { :developer }
@@ -346,7 +348,9 @@ RSpec.describe 'Environments page', :js do
         context 'when user played a delayed job immediately' do
           before do
             find(actions_button_selector).click
-            accept_confirm { find(action_link_selector).click }
+            accept_gl_confirm do
+              find(action_link_selector).click
+            end
             wait_for_requests
           end
 

spec/frontend/environments/environment_actions_spec.js

@@ -7,8 +7,15 @@ import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import EnvironmentActions from '~/environments/components/environment_actions.vue';
 import eventHub from '~/environments/event_hub';
 import actionMutation from '~/environments/graphql/mutations/action.mutation.graphql';
+import { confirmAction } from '~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal';
 import createMockApollo from 'helpers/mock_apollo_helper';
 
+jest.mock('~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal', () => {
+  return {
+    confirmAction: jest.fn(),
+  };
+});
+
 const scheduledJobAction = {
   name: 'scheduled action',
   playPath: `${TEST_HOST}/scheduled/job/action`,
@@ -50,7 +57,7 @@ describe('EnvironmentActions Component', () => {
 
   afterEach(() => {
     wrapper.destroy();
-    wrapper = null;
+    confirmAction.mockReset();
   });
 
   it('should render a dropdown button with 2 icons', () => {
@@ -105,7 +112,7 @@ describe('EnvironmentActions Component', () => {
     let emitSpy;
 
     const clickAndConfirm = async ({ confirm = true } = {}) => {
-      jest.spyOn(window, 'confirm').mockImplementation(() => confirm);
+      confirmAction.mockResolvedValueOnce(confirm);
 
       findDropdownItem(scheduledJobAction).vm.$emit('click');
       await nextTick();
@@ -124,7 +131,7 @@ describe('EnvironmentActions Component', () => {
       });
 
       it('emits postAction event', () => {
-        expect(window.confirm).toHaveBeenCalled();
+        expect(confirmAction).toHaveBeenCalled();
         expect(emitSpy).toHaveBeenCalledWith({ endpoint: scheduledJobAction.playPath });
       });
 
@@ -134,13 +141,13 @@ describe('EnvironmentActions Component', () => {
     });
 
     describe('when postAction event is denied', () => {
-      beforeEach(() => {
+      beforeEach(async () => {
         createComponentWithScheduledJobs({ mountFn: mount });
         clickAndConfirm({ confirm: false });
       });
 
       it('does not emit postAction event if confirmation is cancelled', () => {
-        expect(window.confirm).toHaveBeenCalled();
+        expect(confirmAction).toHaveBeenCalled();
         expect(emitSpy).not.toHaveBeenCalled();
       });
     });