1 files changed, 55 insertions, 0 deletions
diff --git a/app/assets/javascripts/pipelines/components/graph/dropdown_action_component.vue b/app/assets/javascripts/pipelines/components/graph/dropdown_action_component.vue
new file mode 100644
index 00000000000..18fe1847eef
--- /dev/null
+++ b/app/assets/javascripts/pipelines/components/graph/dropdown_action_component.vue
@@ -0,0 +1,55 @@
+<script>
+  import getActionIcon from '../../../vue_shared/ci_action_icons';
+  import tooltip from '../../../vue_shared/directives/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,
+      },
+    },
+
+    directives: {
+      tooltip,
+    },
+
+    computed: {
+      actionIconSvg() {
+        return getActionIcon(this.actionIcon);
+      },
+    },
+  };
+</script>
+<template>
+  <a
+    v-tooltip
+    :data-method="actionMethod"
+    :title="tooltipText"
+    :href="link"
+    rel="nofollow"
+    class="ci-action-icon-wrapper js-ci-status-icon"
+    data-container="body"
+    v-html="actionIconSvg"
+    aria-label="Job's action">
+  </a>
+</template>