Add modal for stopping and retrying pipelines

Fix tests

Address code review feedback

Fix tests

6 files changed, 152 insertions, 13 deletions

diff --git a/app/assets/javascripts/groups/components/app.vue b/app/assets/javascripts/groups/components/app.vue
index e035ba462db..b8f0566f48c 100644
--- a/app/assets/javascripts/groups/components/app.vue
+++ b/app/assets/javascripts/groups/components/app.vue
@@ -152,14 +152,14 @@ export default {
     showLeaveGroupModal(group, parentGroup) {
       this.targetGroup = group;
       this.targetParentGroup = parentGroup;
-      this.showModal = true;
+      this.updateModal = true;
       this.groupLeaveConfirmationMessage = s__(`GroupsTree|Are you sure you want to leave the "${group.fullName}" group?`);
     },
     hideLeaveGroupModal() {
-      this.showModal = false;
+      this.updateModal = false;
     },
     leaveGroup() {
-      this.showModal = false;
+      this.updateModal = false;
       this.targetGroup.isBeingRemoved = true;
       this.service.leaveGroup(this.targetGroup.leavePath)
         .then(res => res.json())
diff --git a/app/assets/javascripts/pipelines/components/async_button.vue b/app/assets/javascripts/pipelines/components/async_button.vue
index 77553ca67cc..a5f22c4ec80 100644
--- a/app/assets/javascripts/pipelines/components/async_button.vue
+++ b/app/assets/javascripts/pipelines/components/async_button.vue
@@ -31,10 +31,9 @@
         type: String,
         required: true,
       },
-      confirmActionMessage: {
-        type: String,
-        required: false,
-        default: '',
+      id: {
+        type: Number,
+        required: true,
       },
     },
     data() {
@@ -49,11 +48,10 @@
     },
     methods: {
       onClick() {
-        if (this.confirmActionMessage !== '' && confirm(this.confirmActionMessage)) {
-          this.makeRequest();
-        } else if (this.confirmActionMessage === '') {
-          this.makeRequest();
-        }
+        eventHub.$emit('actionConfirmationModal', {
+          id: this.id,
+          callback: this.makeRequest,
+        });
       },
       makeRequest() {
         this.isLoading = true;
diff --git a/app/assets/javascripts/pipelines/components/pipelines_table.vue b/app/assets/javascripts/pipelines/components/pipelines_table.vue
index 6681b89e629..62fe479fdf4 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_table.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_table.vue
@@ -1,5 +1,7 @@
 <script>
   import pipelinesTableRowComponent from './pipelines_table_row.vue';
+  import stopConfirmationModal from './stop_confirmation_modal.vue';
+  import retryConfirmationModal from './retry_confirmation_modal.vue';
 
   /**
    * Pipelines Table Component.
@@ -9,6 +11,8 @@
   export default {
     components: {
       pipelinesTableRowComponent,
+      stopConfirmationModal,
+      retryConfirmationModal,
     },
     props: {
       pipelines: {
@@ -70,5 +74,7 @@
       :auto-devops-help-path="autoDevopsHelpPath"
       :view-type="viewType"
     />
+    <stop-confirmation-modal />
+    <retry-confirmation-modal />
   </div>
 </template>
diff --git a/app/assets/javascripts/pipelines/components/pipelines_table_row.vue b/app/assets/javascripts/pipelines/components/pipelines_table_row.vue
index d0e4cf7ff40..0e3a10ed7f4 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_table_row.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_table_row.vue
@@ -305,6 +305,9 @@
           css-class="js-pipelines-retry-button btn-default btn-retry"
           title="Retry"
           icon="repeat"
+          :id="pipeline.id"
+          data-toggle="modal"
+          data-target="#retry-confirmation-modal"
         />
 
         <async-button-component
@@ -313,7 +316,9 @@
           css-class="js-pipelines-cancel-button btn-remove"
           title="Cancel"
           icon="close"
-          confirm-action-message="Are you sure you want to cancel this pipeline?"
+          :id="pipeline.id"
+          data-toggle="modal"
+          data-target="#stop-confirmation-modal"
         />
       </div>
     </div>
diff --git a/app/assets/javascripts/pipelines/components/retry_confirmation_modal.vue b/app/assets/javascripts/pipelines/components/retry_confirmation_modal.vue
new file mode 100644
index 00000000000..e2ac08d67bc
--- /dev/null
+++ b/app/assets/javascripts/pipelines/components/retry_confirmation_modal.vue
@@ -0,0 +1,65 @@
+<script>
+  import modal from '~/vue_shared/components/modal.vue';
+  import { s__, sprintf } from '~/locale';
+  import eventHub from '../event_hub';
+
+  export default {
+    components: {
+      modal,
+    },
+    data() {
+      return {
+        id: '',
+        callback: () => {},
+      };
+    },
+    computed: {
+      title() {
+        return sprintf(s__('Pipeline|Retry pipeline #%{id}?'), {
+          id: `'${this.id}'`,
+        }, false);
+      },
+      text() {
+        return sprintf(s__('Pipeline|You’re about to retry pipeline %{id}.'), {
+          id: `<strong>#${this.id}</strong>`,
+        }, false);
+      },
+      primaryButtonLabel() {
+        return s__('Pipeline|Retry pipeline');
+      },
+    },
+    created() {
+      eventHub.$on('actionConfirmationModal', this.updateModal);
+    },
+    beforeDestroy() {
+      eventHub.$off('actionConfirmationModal', this.updateModal);
+    },
+    methods: {
+      updateModal(action) {
+        this.id = action.id;
+        this.callback = action.callback;
+      },
+      onSubmit() {
+        this.callback();
+      },
+    },
+  };
+</script>
+
+<template>
+  <modal
+    id="retry-confirmation-modal"
+    :title="title"
+    :text="text"
+    kind="danger"
+    :primary-button-label="primaryButtonLabel"
+    @submit="onSubmit"
+  >
+    <template
+      slot="body"
+      slot-scope="props"
+    >
+      <p v-html="props.text"></p>
+    </template>
+  </modal>
+</template>
diff --git a/app/assets/javascripts/pipelines/components/stop_confirmation_modal.vue b/app/assets/javascripts/pipelines/components/stop_confirmation_modal.vue
new file mode 100644
index 00000000000..d737d567787
--- /dev/null
+++ b/app/assets/javascripts/pipelines/components/stop_confirmation_modal.vue
@@ -0,0 +1,65 @@
+<script>
+  import modal from '~/vue_shared/components/modal.vue';
+  import { s__, sprintf } from '~/locale';
+  import eventHub from '../event_hub';
+
+  export default {
+    components: {
+      modal,
+    },
+    data() {
+      return {
+        id: '',
+        callback: () => {},
+      };
+    },
+    computed: {
+      title() {
+        return sprintf(s__('Pipeline|Stop pipeline #%{id}?'), {
+          id: `'${this.id}'`,
+        }, false);
+      },
+      text() {
+        return sprintf(s__('Pipeline|You’re about to stop pipeline %{id}.'), {
+          id: `<strong>#${this.id}</strong>`,
+        }, false);
+      },
+      primaryButtonLabel() {
+        return s__('Pipeline|Stop pipeline');
+      },
+    },
+    created() {
+      eventHub.$on('actionConfirmationModal', this.updateModal);
+    },
+    beforeDestroy() {
+      eventHub.$off('actionConfirmationModal', this.updateModal);
+    },
+    methods: {
+      updateModal(action) {
+        this.id = action.id;
+        this.callback = action.callback;
+      },
+      onSubmit() {
+        this.callback();
+      },
+    },
+  };
+</script>
+
+<template>
+  <modal
+    id="stop-confirmation-modal"
+    :title="title"
+    :text="text"
+    kind="danger"
+    :primary-button-label="primaryButtonLabel"
+    @submit="onSubmit"
+  >
+    <template
+      slot="body"
+      slot-scope="props"
+    >
+      <p v-html="props.text"></p>
+    </template>
+  </modal>
+</template>