1 files changed, 18 insertions, 2 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 5de71c35be9..84bd6bca601 100644
--- a/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
+++ b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
@@ -1,5 +1,6 @@
 <script>
 import { GlTooltipDirective } from '@gitlab/ui';
+import { visitUrl } from '~/lib/utils/url_utility';
 import CiIcon from './ci_icon.vue';
 /**
  * Renders CI Badge link with CI icon and status text based on
@@ -57,13 +58,28 @@ export default {
     },
     cssClass() {
       const className = this.status.group;
-      return className ? `ci-status ci-${className} qa-status-badge` : 'ci-status qa-status-badge';
+      return className ? `ci-status ci-${className}` : 'ci-status';
+    },
+  },
+  methods: {
+    navigateToPipeline() {
+      visitUrl(this.detailsPath);
+
+      // event used for tracking
+      this.$emit('ciStatusBadgeClick');
     },
   },
 };
 </script>
 <template>
-  <a v-gl-tooltip :href="detailsPath" :class="cssClass" :title="title">
+  <a
+    v-gl-tooltip
+    :class="cssClass"
+    class="gl-cursor-pointer"
+    :title="title"
+    data-qa-selector="status_badge_link"
+    @click="navigateToPipeline"
+  >
     <ci-icon :status="status" :css-classes="iconClasses" />
 
     <template v-if="showText">