1 files changed, 64 insertions, 0 deletions
diff --git a/app/assets/javascripts/pipelines/components/graph/action_component.vue b/app/assets/javascripts/pipelines/components/graph/action_component.vue
new file mode 100644
index 00000000000..1f9e3d39779
--- /dev/null
+++ b/app/assets/javascripts/pipelines/components/graph/action_component.vue
@@ -0,0 +1,64 @@
+<script>
+  import getActionIcon from '../../../vue_shared/ci_action_icons';
+  import tooltipMixin from '../../../vue_shared/mixins/tooltip';
+
+  /**
+   * 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 {
+    props: {
+      tooltipText: {
+        type: String,
+        required: true,
+      },
+
+      link: {
+        type: String,
+        required: true,
+      },
+
+      actionMethod: {
+        type: String,
+        required: true,
+      },
+
+      actionIcon: {
+        type: String,
+        required: true,
+      },
+    },
+
+    mixins: [
+      tooltipMixin,
+    ],
+
+    computed: {
+      actionIconSvg() {
+        return getActionIcon(this.actionIcon);
+      },
+
+      cssClass() {
+        return `js-${gl.text.dasherize(this.actionIcon)}`;
+      },
+    },
+  };
+</script>
+<template>
+  <a
+    :data-method="actionMethod"
+    :title="tooltipText"
+    :href="link"
+    ref="tooltip"
+    class="ci-action-icon-container"
+    data-toggle="tooltip"
+    data-container="body">
+
+    <i
+      class="ci-action-icon-wrapper"
+      :class="cssClass"
+      v-html="actionIconSvg"
+      aria-hidden="true"
+      />
+  </a>
+</template>