Hide blob ci status

Hide blob ci status when there is no
pipeline.

Changelog: changed

app/assets/javascripts/projects/tree/components/commit_pipeline_status.vue

 <script>
 import { GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
 import Visibility from 'visibilityjs';
+import { isEmpty } from 'lodash';
 import { createAlert } from '~/alert';
 import Poll from '~/lib/utils/poll';
 import { __, s__, sprintf } from '~/locale';
@@ -33,6 +34,9 @@ export default {
         ciStatus: this.ciStatus.text,
       });
     },
+    hasCiStatus() {
+      return !isEmpty(this.ciStatus) && !this.isLoading;
+    },
   },
   mounted() {
     this.service = new CommitPipelineService(this.endpoint);
@@ -44,10 +48,14 @@ export default {
   methods: {
     successCallback(res) {
       const { pipelines } = res.data;
+
       if (pipelines.length > 0) {
         // The pipeline entity always keeps the latest pipeline info on the `details.status`
         this.ciStatus = pipelines[0].details.status;
+      } else {
+        this.ciStatus = {};
       }
+
       this.isLoading = false;
     },
     errorCallback() {
@@ -92,9 +100,12 @@ export default {
 </script>
 <template>
   <div class="gl-ml-5">
-    <gl-loading-icon v-if="isLoading" size="sm" label="Loading pipeline status" />
-    <a v-else :href="ciStatus.details_path">
-      <ci-icon :status="ciStatus" :title="statusTitle" :aria-label="statusTitle" />
-    </a>
+    <gl-loading-icon v-if="isLoading" size="sm" :label="__('Loading pipeline status')" />
+    <ci-icon
+      v-else-if="hasCiStatus"
+      :status="ciStatus"
+      :title="statusTitle"
+      :aria-label="statusTitle"
+    />
   </div>
 </template>

locale/gitlab.pot

@@ -32491,6 +32491,9 @@ msgstr ""
 msgid "Loading more"
 msgstr ""
+msgid "Loading pipeline status"
+msgstr ""
+
 msgid "Loading snippet"
 msgstr ""

spec/frontend/commit/commit_pipeline_status_spec.js

@@ -38,8 +38,7 @@ describe('Commit pipeline status component', () => {
   };
 
   const findLoader = () => wrapper.findComponent(GlLoadingIcon);
-  const findLink = () => wrapper.find('a');
-  const findCiIcon = () => findLink().findComponent(CiIcon);
+  const findCiIcon = () => wrapper.findComponent(CiIcon);
 
   describe('Visibility management', () => {
     describe('when component is hidden', () => {
@@ -121,24 +120,36 @@ describe('Commit pipeline status component', () => {
     });
 
     describe('is successful', () => {
-      beforeEach(async () => {
-        pollConfig.successCallback({
-          data: { pipelines: [{ details: { status: mockCiStatus } }] },
+      describe('with pipelines', () => {
+        beforeEach(async () => {
+          pollConfig.successCallback({
+            data: { pipelines: [{ details: { status: mockCiStatus } }] },
+          });
+          await nextTick();
         });
-        await nextTick();
-      });
 
-      it('does not render loader', () => {
-        expect(findLoader().exists()).toBe(false);
-      });
+        it('does not render loader', () => {
+          expect(findLoader().exists()).toBe(false);
+        });
 
-      it('renders link with href', () => {
-        expect(findLink().attributes('href')).toEqual(mockCiStatus.details_path);
+        it('renders CI icon with the correct title and status', () => {
+          expect(findCiIcon().attributes('title')).toEqual('Pipeline: Passed');
+          expect(findCiIcon().props('status')).toEqual(mockCiStatus);
+        });
       });
 
-      it('renders CI icon with the correct title and status', () => {
-        expect(findCiIcon().attributes('title')).toEqual('Pipeline: Passed');
-        expect(findCiIcon().props('status')).toEqual(mockCiStatus);
+      describe('without pipelines', () => {
+        beforeEach(async () => {
+          pollConfig.successCallback({
+            data: { pipelines: [] },
+          });
+
+          await nextTick();
+        });
+
+        it('does not render ci icon', () => {
+          expect(findCiIcon().exists()).toBe(false);
+        });
       });
     });
 
@@ -151,10 +162,6 @@ describe('Commit pipeline status component', () => {
         expect(findLoader().exists()).toBe(false);
       });
 
-      it('renders link with href', () => {
-        expect(findLink().attributes('href')).toBeUndefined();
-      });
-
       it('renders not found CI icon', () => {
         expect(findCiIcon().attributes('title')).toEqual('Pipeline: not found');
         expect(findCiIcon().props('status')).toEqual({