Add modal for stopping and retrying pipelines41297-new-design-for-cancel-stop-pipeline-confirmation

Fix tests

Address code review feedback

Fix tests

3 files changed, 15 insertions, 12 deletions

diff --git a/spec/features/projects/pipelines/pipelines_spec.rb b/spec/features/projects/pipelines/pipelines_spec.rb
index 592c99fc64a..37a06b65481 100644
--- a/spec/features/projects/pipelines/pipelines_spec.rb
+++ b/spec/features/projects/pipelines/pipelines_spec.rb
@@ -109,7 +109,8 @@ describe 'Pipelines', :js do
 
         context 'when canceling' do
           before do
-            accept_confirm { find('.js-pipelines-cancel-button').click }
+            find('.js-pipelines-cancel-button').click
+            find('.js-primary-button').click
             wait_for_requests
           end
 
@@ -140,6 +141,7 @@ describe 'Pipelines', :js do
         context 'when retrying' do
           before do
             find('.js-pipelines-retry-button').click
+            find('.js-primary-button').click
             wait_for_requests
           end
 
@@ -238,7 +240,8 @@ describe 'Pipelines', :js do
 
           context 'when canceling' do
             before do
-              accept_alert { find('.js-pipelines-cancel-button').click }
+              find('.js-pipelines-cancel-button').click
+              find('.js-primary-button').click
             end
 
             it 'indicates that pipeline was canceled' do
diff --git a/spec/javascripts/groups/components/app_spec.js b/spec/javascripts/groups/components/app_spec.js
index 8338efe915b..3adc29262f3 100644
--- a/spec/javascripts/groups/components/app_spec.js
+++ b/spec/javascripts/groups/components/app_spec.js
@@ -268,10 +268,10 @@ describe('AppComponent', () => {
 
       it('updates props which show modal confirmation dialog', () => {
         const group = Object.assign({}, mockParentGroupItem);
-        expect(vm.showModal).toBeFalsy();
+        expect(vm.updateModal).toBeFalsy();
         expect(vm.groupLeaveConfirmationMessage).toBe('');
         vm.showLeaveGroupModal(group, mockParentGroupItem);
-        expect(vm.showModal).toBeTruthy();
+        expect(vm.updateModal).toBeTruthy();
         expect(vm.groupLeaveConfirmationMessage).toBe(`Are you sure you want to leave the "${group.fullName}" group?`);
       });
     });
@@ -280,9 +280,9 @@ describe('AppComponent', () => {
       it('hides modal confirmation which is shown before leaving the group', () => {
         const group = Object.assign({}, mockParentGroupItem);
         vm.showLeaveGroupModal(group, mockParentGroupItem);
-        expect(vm.showModal).toBeTruthy();
+        expect(vm.updateModal).toBeTruthy();
         vm.hideLeaveGroupModal();
-        expect(vm.showModal).toBeFalsy();
+        expect(vm.updateModal).toBeFalsy();
       });
     });
 
@@ -307,7 +307,7 @@ describe('AppComponent', () => {
         spyOn($, 'scrollTo');
 
         vm.leaveGroup();
-        expect(vm.showModal).toBeFalsy();
+        expect(vm.updateModal).toBeFalsy();
         expect(vm.targetGroup.isBeingRemoved).toBeTruthy();
         expect(vm.service.leaveGroup).toHaveBeenCalledWith(vm.targetGroup.leavePath);
         setTimeout(() => {
@@ -475,7 +475,7 @@ describe('AppComponent', () => {
 
     it('renders modal confirmation dialog', () => {
       vm.groupLeaveConfirmationMessage = 'Are you sure you want to leave the "foo" group?';
-      vm.showModal = true;
+      vm.updateModal = true;
       const modalDialogEl = vm.$el.querySelector('.modal');
       expect(modalDialogEl).not.toBe(null);
       expect(modalDialogEl.querySelector('.modal-title').innerText.trim()).toBe('Are you sure?');
diff --git a/spec/javascripts/pipelines/async_button_spec.js b/spec/javascripts/pipelines/async_button_spec.js
index d010d897642..8ce33d410a7 100644
--- a/spec/javascripts/pipelines/async_button_spec.js
+++ b/spec/javascripts/pipelines/async_button_spec.js
@@ -15,6 +15,7 @@ describe('Pipelines Async Button', () => {
         title: 'Foo',
         icon: 'repeat',
         cssClass: 'bar',
+        id: 123,
       },
     }).$mount();
   });
@@ -38,9 +39,8 @@ describe('Pipelines Async Button', () => {
 
   describe('With confirm dialog', () => {
     it('should call the service when confimation is positive', () => {
-      spyOn(window, 'confirm').and.returnValue(true);
-      eventHub.$on('postAction', (endpoint) => {
-        expect(endpoint).toEqual('/foo');
+      eventHub.$on('actionConfirmationModal', (data) => {
+        expect(data.id).toEqual(123);
       });
 
       component = new AsyncButtonComponent({
@@ -49,7 +49,7 @@ describe('Pipelines Async Button', () => {
           title: 'Foo',
           icon: 'fa fa-foo',
           cssClass: 'bar',
-          confirmActionMessage: 'bar',
+          id: 123,
         },
       }).$mount();