1 files changed, 65 insertions, 6 deletions

diff --git a/app/assets/javascripts/pipelines/components/pipelines_table.vue b/app/assets/javascripts/pipelines/components/pipelines_table.vue
index 62fe479fdf4..c9028952ddd 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_table.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_table.vue
@@ -1,7 +1,8 @@
 <script>
+  import modal from '~/vue_shared/components/modal.vue';
+  import { s__, sprintf } from '~/locale';
   import pipelinesTableRowComponent from './pipelines_table_row.vue';
-  import stopConfirmationModal from './stop_confirmation_modal.vue';
-  import retryConfirmationModal from './retry_confirmation_modal.vue';
+  import eventHub from '../event_hub';
 
   /**
    * Pipelines Table Component.
@@ -11,8 +12,7 @@
   export default {
     components: {
       pipelinesTableRowComponent,
-      stopConfirmationModal,
-      retryConfirmationModal,
+      modal,
     },
     props: {
       pipelines: {
@@ -33,6 +33,52 @@
         required: true,
       },
     },
+    data() {
+      return {
+        pipelineId: '',
+        endpoint: '',
+        type: '',
+      };
+    },
+    computed: {
+      modalTitle() {
+        return this.type === 'stop' ?
+          sprintf(s__('Pipeline|Stop pipeline #%{pipelineId}?'), {
+            pipelineId: `'${this.pipelineId}'`,
+          }, false) :
+          sprintf(s__('Pipeline|Retry pipeline #%{pipelineId}?'), {
+            pipelineId: `'${this.pipelineId}'`,
+          }, false);
+      },
+      modalText() {
+        return this.type === 'stop' ?
+          sprintf(s__('Pipeline|You’re about to stop pipeline %{pipelineId}.'), {
+            pipelineId: `<strong>#${this.pipelineId}</strong>`,
+          }, false) :
+          sprintf(s__('Pipeline|You’re about to retry pipeline %{pipelineId}.'), {
+            pipelineId: `<strong>#${this.pipelineId}</strong>`,
+          }, false);
+      },
+      primaryButtonLabel() {
+        return this.type === 'stop' ? s__('Pipeline|Stop pipeline') : s__('Pipeline|Retry pipeline');
+      },
+    },
+    created() {
+      eventHub.$on('openConfirmationModal', this.setModalData);
+    },
+    beforeDestroy() {
+      eventHub.$off('openConfirmationModal', this.setModalData);
+    },
+    methods: {
+      setModalData(data) {
+        this.pipelineId = data.pipelineId;
+        this.endpoint = data.endpoint;
+        this.type = data.type;
+      },
+      onSubmit() {
+        eventHub.$emit('postAction', this.endpoint);
+      },
+    },
   };
 </script>
 <template>
@@ -74,7 +120,20 @@
       :auto-devops-help-path="autoDevopsHelpPath"
       :view-type="viewType"
     />
-    <stop-confirmation-modal />
-    <retry-confirmation-modal />
+    <modal
+      id="confirmation-modal"
+      :title="modalTitle"
+      :text="modalText"
+      kind="danger"
+      :primary-button-label="primaryButtonLabel"
+      @submit="onSubmit"
+    >
+      <template
+        slot="body"
+        slot-scope="props"
+      >
+        <p v-html="props.text"></p>
+      </template>
+    </modal>
   </div>
 </template>