From ea9135fd4b09b6171e407eb82f1510763ff37420 Mon Sep 17 00:00:00 2001
From: Payton Burdette <pburdette@gitlab.com>
Date: Mon, 7 Oct 2024 17:36:32 +0000
Subject: [PATCH] Hide blob ci status
Hide blob ci status when there is no
pipeline.
Changelog: changed
---
.../components/commit_pipeline_status.vue | 19 ++++++--
locale/gitlab.pot | 3 ++
.../commit/commit_pipeline_status_spec.js | 45 +++++++++++--------
3 files changed, 44 insertions(+), 23 deletions(-)
diff --git a/app/assets/javascripts/projects/tree/components/commit_pipeline_status.vue b/app/assets/javascripts/projects/tree/components/commit_pipeline_status.vue
index 7286f91d80758..d7c38875d8679 100644
--- a/app/assets/javascripts/projects/tree/components/commit_pipeline_status.vue
+++ b/app/assets/javascripts/projects/tree/components/commit_pipeline_status.vue
@@ -1,6 +1,7 @@
<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>
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index bfd9832cdebde..79a7be3ac16ac 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -32491,6 +32491,9 @@ msgstr ""
msgid "Loading more"
msgstr ""
+msgid "Loading pipeline status"
+msgstr ""
+
msgid "Loading snippet"
msgstr ""
diff --git a/spec/frontend/commit/commit_pipeline_status_spec.js b/spec/frontend/commit/commit_pipeline_status_spec.js
index 6d407ed886ad5..e0e1f5b17a28b 100644
--- a/spec/frontend/commit/commit_pipeline_status_spec.js
+++ b/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({
--
GitLab