1 files changed, 17 insertions, 1 deletions
diff --git a/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6
index 34ea7512d2b..c57f41bcdfa 100644
--- a/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6
+++ b/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6
@@ -1,7 +1,8 @@
 /* global Vue, Flash, gl */
-/* eslint-disable no-param-reassign */
+/* eslint-disable no-param-reassign,  no-alert */
 const playIconSvg = require('../../../views/shared/icons/_icon_play.svg');
 
+
 ((gl) => {
   gl.VuePipelineActions = Vue.extend({
     props: ['pipeline'],
@@ -17,6 +18,20 @@ const playIconSvg = require('../../../views/shared/icons/_icon_play.svg');
       download(name) {
         return `Download ${name} artifacts`;
       },
+
+      /**
+       * Shows a dialog when the user clicks in the cancel button.
+       * We need to prevent the default behavior and stop propagation because the
+       * link relies on UJS.
+       *
+       * @param  {Event} event
+       */
+      confirmAction(event) {
+        if (!confirm('Are you sure you want to cancel this pipeline?')) {
+          event.preventDefault();
+          event.stopPropagation();
+        }
+      },
     },
 
     data() {
@@ -93,6 +108,7 @@ const playIconSvg = require('../../../views/shared/icons/_icon_play.svg');
             </a>
             <a
               v-if='pipeline.flags.cancelable'
+              @click="confirmAction"
               class="btn btn-remove has-tooltip"
               title="Cancel"
               rel="nofollow"