Merge branch '28419-ask-confirmation-cancel' into 'master'

Adds confirmation for cancel button

Closes #28419

See merge request !9519

app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6

 /* global Vue, Flash, gl */
-/* eslint-disable no-param-reassign */
+/* eslint-disable no-param-reassign, no-alert */
 
 ((gl) => {
   gl.VuePipelineActions = Vue.extend({
@@ -16,6 +16,20 @@
       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();
+        }
+      },
     },
     template: `
       <td class="pipeline-actions hidden-xs">
@@ -87,6 +101,7 @@
             </a>
             <a
               v-if='pipeline.flags.cancelable'
+              @click="confirmAction"
               class="btn btn-remove has-tooltip"
               title="Cancel"
               rel="nofollow"