1 files changed, 52 insertions, 40 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
index caa28bff6db..5b6c6e8d0b9 100644
--- a/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
+++ b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
@@ -1,52 +1,64 @@
 <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
- */
+  import ciIcon from './ci_icon.vue';
+  import tooltip from '../directives/tooltip';
+  /**
+   * 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,
+  export default {
+    props: {
+      status: {
+        type: Object,
+        required: true,
+      },
+      showText: {
+        type: Boolean,
+        required: false,
+        default: true,
+      },
     },
-  },
-
-  components: {
-    ciIcon,
-  },
-
-  computed: {
-    cssClass() {
-      const className = this.status.group;
+    components: {
+      ciIcon,
+    },
+    directives: {
+      tooltip,
+    },
+    computed: {
+      cssClass() {
+        const className = this.status.group;
 
-      return className ? `ci-status ci-${this.status.group}` : 'ci-status';
+        return className ? `ci-status ci-${className}` : 'ci-status';
+      },
     },
-  },
-};
+  };
 </script>
 <template>
   <a
     :href="status.details_path"
-    :class="cssClass">
+    :class="cssClass"
+    v-tooltip
+    :title="!showText ? status.text : ''">
     <ci-icon :status="status" />
-    {{status.text}}
+
+    <template v-if="showText">
+      {{status.text}}
+    </template>
   </a>
 </template>