1 files changed, 52 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/ci_badge_link.vue b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
new file mode 100644
index 00000000000..caa28bff6db
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
@@ -0,0 +1,52 @@
+<script>
+import ciIcon from './ci_icon.vue';
+/**
+ * Renders CI Badge link with CI icon and status text based on
+ * API response shared between all places where it is used.
+ *
+ * Receives status object containing:
+ * status: {
+ *   details_path: "/gitlab-org/gitlab-ce/pipelines/8150156" // url
+ *   group:"running" // used for CSS class
+ *   icon: "icon_status_running" // used to render the icon
+ *   label:"running" // used for potential tooltip
+ *   text:"running" // text rendered
+ * }
+ *
+ * Used in:
+ * - Pipelines table - first column
+ * - Jobs table - first column
+ * - Pipeline show view - header
+ * - Job show view - header
+ * - MR widget
+ */
+
+export default {
+  props: {
+    status: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  components: {
+    ciIcon,
+  },
+
+  computed: {
+    cssClass() {
+      const className = this.status.group;
+
+      return className ? `ci-status ci-${this.status.group}` : 'ci-status';
+    },
+  },
+};
+</script>
+<template>
+  <a
+    :href="status.details_path"
+    :class="cssClass">
+    <ci-icon :status="status" />
+    {{status.text}}
+  </a>
+</template>