1 files changed, 34 insertions, 21 deletions
diff --git a/app/assets/javascripts/pipelines/components/graph/action_component.vue b/app/assets/javascripts/pipelines/components/graph/action_component.vue
index fd3491c7fe0..82b4ce083fb 100644
--- a/app/assets/javascripts/pipelines/components/graph/action_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/action_component.vue
@@ -1,11 +1,21 @@
 <script>
 import $ from 'jquery';
-import tooltip from '../../../vue_shared/directives/tooltip';
-import Icon from '../../../vue_shared/components/icon.vue';
-import { dasherize } from '../../../lib/utils/text_utility';
-import eventHub from '../../event_hub';
+import axios from '~/lib/utils/axios_utils';
+import { dasherize } from '~/lib/utils/text_utility';
+import { __ } from '~/locale';
+import createFlash from '~/flash';
+import tooltip from '~/vue_shared/directives/tooltip';
+import Icon from '~/vue_shared/components/icon.vue';
+
 /**
- * Renders either a cancel, retry or play icon pointing to the given path.
+ * Renders either a cancel, retry or play icon button and handles the post request
+ *
+ * Used in:
+ * - mr widget mini pipeline graph: `mr_widget_pipeline.vue`
+ * - pipelines table
+ * - pipelines table in merge request page
+ * - pipelines table in commit page
+ * - pipelines detail page in big graph
  */
 export default {
   components: {
@@ -32,16 +42,10 @@ export default {
       required: true,
     },
 
-    requestFinishedFor: {
-      type: String,
-      required: false,
-      default: '',
-    },
   },
   data() {
     return {
       isDisabled: false,
-      linkRequested: '',
     };
   },
 
@@ -51,19 +55,28 @@ export default {
       return `${actionIconDash} js-icon-${actionIconDash}`;
     },
   },
-  watch: {
-    requestFinishedFor() {
-      if (this.requestFinishedFor === this.linkRequested) {
-        this.isDisabled = false;
-      }
-    },
-  },
   methods: {
+    /**
+     * The request should not be handled here.
+     * However due to this component being used in several
+     * different apps it avoids repetition & complexity.
+     *
+     */
     onClickAction() {
       $(this.$el).tooltip('hide');
-      eventHub.$emit('postAction', this.link);
-      this.linkRequested = this.link;
+
       this.isDisabled = true;
+
+      axios.post(`${this.link}.json`)
+        .then(() => {
+          this.isDisabled = false;
+          this.$emit('pipelineActionRequestComplete');
+        })
+        .catch(() => {
+          this.isDisabled = false;
+
+          createFlash(__('An error occurred while making the request.'));
+        });
     },
   },
 };
@@ -80,6 +93,6 @@ btn-transparent ci-action-icon-container ci-action-icon-wrapper"
     data-container="body"
     :disabled="isDisabled"
   >
-    <icon :name="actionIcon" />
+    <icon :name="actionIcon"/>
   </button>
 </template>