1 files changed, 9 insertions, 7 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 d7af3b3298e..1b7e51b7d02 100644
--- a/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
+++ b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
@@ -7,7 +7,7 @@ import CiIcon from './ci_icon.vue';
  *
  * Receives status object containing:
  * status: {
- *   details_path: "/gitlab-org/gitlab-foss/pipelines/8150156" // url
+ *   details_path or detailsPath: "/gitlab-org/gitlab-foss/pipelines/8150156" // url
  *   group:"running" // used for CSS class
  *   icon: "icon_status_running" // used to render the icon
  *   label:"running" // used for potential tooltip
@@ -46,6 +46,13 @@ export default {
     },
   },
   computed: {
+    title() {
+      return !this.showText ? this.status?.text : '';
+    },
+    detailsPath() {
+      // For now, this can either come from graphQL with camelCase or REST API in snake_case
+      return this.status.detailsPath || this.status.details_path;
+    },
     cssClass() {
       const className = this.status.group;
       return className ? `ci-status ci-${className} qa-status-badge` : 'ci-status qa-status-badge';
@@ -54,12 +61,7 @@ export default {
 };
 </script>
 <template>
-  <a
-    v-gl-tooltip
-    :href="status.details_path"
-    :class="cssClass"
-    :title="!showText ? status.text : ''"
-  >
+  <a v-gl-tooltip :href="detailsPath" :class="cssClass" :title="title">
     <ci-icon :status="status" :css-classes="iconClasses" />
 
     <template v-if="showText">