1 files changed, 54 insertions, 42 deletions
diff --git a/app/assets/javascripts/pipelines/components/graph/action_component.vue b/app/assets/javascripts/pipelines/components/graph/action_component.vue
index d7effb27bff..e99d949801f 100644
--- a/app/assets/javascripts/pipelines/components/graph/action_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/action_component.vue
@@ -1,60 +1,72 @@
 <script>
-  import tooltip from '../../../vue_shared/directives/tooltip';
-  import icon from '../../../vue_shared/components/icon.vue';
-  import { dasherize } from '../../../lib/utils/text_utility';
-  /**
-   * Renders either a cancel, retry or play icon pointing to the given path.
-   * TODO: Remove UJS from here and use an async request instead.
-   */
-  export default {
-    components: {
-      icon,
-    },
+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';
+/**
+ * Renders either a cancel, retry or play icon pointing to the given path.
+ */
+export default {
+  components: {
+    Icon,
+  },
 
-    directives: {
-      tooltip,
-    },
+  directives: {
+    tooltip,
+  },
 
-    props: {
-      tooltipText: {
-        type: String,
-        required: true,
-      },
+  props: {
+    tooltipText: {
+      type: String,
+      required: true,
+    },
 
-      link: {
-        type: String,
-        required: true,
-      },
+    link: {
+      type: String,
+      required: true,
+    },
 
-      actionMethod: {
-        type: String,
-        required: true,
-      },
+    actionIcon: {
+      type: String,
+      required: true,
+    },
 
-      actionIcon: {
-        type: String,
-        required: true,
-      },
+    buttonDisabled: {
+      type: String,
+      required: false,
+      default: null,
+    },
+  },
+  computed: {
+    cssClass() {
+      const actionIconDash = dasherize(this.actionIcon);
+      return `${actionIconDash} js-icon-${actionIconDash}`;
+    },
+    isDisabled() {
+      return this.buttonDisabled === this.link;
     },
+  },
 
-    computed: {
-      cssClass() {
-        const actionIconDash = dasherize(this.actionIcon);
-        return `${actionIconDash} js-icon-${actionIconDash}`;
-      },
+  methods: {
+    onClickAction() {
+      $(this.$el).tooltip('hide');
+      eventHub.$emit('graphAction', this.link);
     },
-  };
+  },
+};
 </script>
 <template>
-  <a
+  <button
+    type="button"
+    @click="onClickAction"
     v-tooltip
-    :data-method="actionMethod"
     :title="tooltipText"
-    :href="link"
-    class="ci-action-icon-container ci-action-icon-wrapper"
+    class="btn btn-blank btn-transparent ci-action-icon-container ci-action-icon-wrapper"
     :class="cssClass"
     data-container="body"
+    :disabled="isDisabled"
   >
     <icon :name="actionIcon" />
-  </a>
+  </button>
 </template>