Merge branch '229705-pipeline-stop-modal' into 'master'

Replace the deprecatedmodal 2 in the pipeline stop modal

See merge request gitlab-org/gitlab!44765

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

 <script>
 /* eslint-disable vue/no-v-html */
 import { isEmpty } from 'lodash';
-import { GlLink } from '@gitlab/ui';
-import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
+import { GlLink, GlModal } from '@gitlab/ui';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
-import { s__, sprintf } from '~/locale';
+import { __, s__, sprintf } from '~/locale';
 
 /**
  * Pipeline Stop Modal.
@@ -13,7 +12,7 @@ import { s__, sprintf } from '~/locale';
  */
 export default {
   components: {
-    GlModal: DeprecatedModal2,
+    GlModal,
     GlLink,
     CiIcon,
   },
@@ -46,6 +45,17 @@ export default {
     hasRef() {
       return !isEmpty(this.pipeline.ref);
     },
+    primaryProps() {
+      return {
+        text: s__('Pipeline|Stop pipeline'),
+        attributes: [{ variant: 'danger' }],
+      };
+    },
+    cancelProps() {
+      return {
+        text: __('Cancel'),
+      };
+    },
   },
   methods: {
     emitSubmit(event) {
@@ -56,11 +66,11 @@ export default {
 </script>
 <template>
   <gl-modal
-    id="confirmation-modal"
-    :header-title-text="modalTitle"
-    :footer-primary-button-text="s__('Pipeline|Stop pipeline')"
-    footer-primary-button-variant="danger"
-    @submit="emitSubmit($event)"
+    modal-id="confirmation-modal"
+    :title="modalTitle"
+    :action-primary="primaryProps"
+    :action-cancel="cancelProps"
+    @primary="emitSubmit($event)"
   >
     <p v-html="modalText"></p>
 

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

 <script>
-import { GlButton, GlTooltipDirective } from '@gitlab/ui';
+import { GlButton, GlTooltipDirective, GlModalDirective } from '@gitlab/ui';
 import eventHub from '../../event_hub';
 import { __ } from '~/locale';
 import PipelinesActionsComponent from './pipelines_actions.vue';
@@ -24,6 +24,7 @@ export default {
   },
   directives: {
     GlTooltip: GlTooltipDirective,
+    GlModalDirective,
   },
   components: {
     PipelinesActionsComponent,
@@ -366,12 +367,11 @@ export default {
         <gl-button
           v-if="pipeline.flags.cancelable"
           v-gl-tooltip.hover
+          v-gl-modal-directive="'confirmation-modal'"
           :aria-label="$options.i18n.cancelTitle"
           :title="$options.i18n.cancelTitle"
           :loading="isCancelling"
           :disabled="isCancelling"
-          data-toggle="modal"
-          data-target="#confirmation-modal"
           icon="close"
           variant="danger"
           category="primary"

spec/features/projects/pipelines/pipelines_spec.rb

@@ -118,7 +118,7 @@ RSpec.describe 'Pipelines', :js do
         context 'when canceling' do
           before do
             find('.js-pipelines-cancel-button').click
-            find('.js-modal-primary-action').click
+            click_button 'Stop pipeline'
             wait_for_requests
           end
 
@@ -407,7 +407,7 @@ RSpec.describe 'Pipelines', :js do
           context 'when canceling' do
             before do
               find('.js-pipelines-cancel-button').click
-              find('.js-modal-primary-action').click
+              click_button 'Stop pipeline'
             end
 
             it 'indicates that pipeline was canceled', :sidekiq_might_not_need_inline do