Integrate the status badge

- Update tests
- Add changelog

ee/app/assets/javascripts/security_dashboard/components/project_pipeline_status.vue

@@ -2,15 +2,25 @@
 import { GlLink } from '@gitlab/ui';
 import { __ } from '~/locale';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+import PipelineStatusBadge from './pipeline_status_badge.vue';
 
 export default {
   components: {
     GlLink,
     TimeAgoTooltip,
+    PipelineStatusBadge,
   },
   props: {
     pipeline: { type: Object, required: true },
   },
+  inject: {
+    pipelineSecurityBuildsFailedCount: { type: Number, default: 0 },
+  },
+  computed: {
+    shouldShowPipelineStatusBadge() {
+      return this.pipelineSecurityBuildsFailedCount > 0;
+    },
+  },
   i18n: {
     title: __(
       'The Security Dashboard shows the results of the last successful pipeline run on the default branch.',
@@ -23,10 +33,13 @@ export default {
 <template>
   <div>
     <h6 class="gl-font-weight-normal">{{ $options.i18n.title }}</h6>
-    <div class="gl-border-solid gl-border-1 gl-border-gray-100 gl-p-6">
+    <div
+      class="gl-display-flex gl-align-items-center gl-border-solid gl-border-1 gl-border-gray-100 gl-p-6"
+    >
       <span class="gl-font-weight-bold">{{ $options.i18n.label }}</span>
       <time-ago-tooltip class="gl-px-3" :time="pipeline.createdAt" />
       <gl-link :href="pipeline.path" target="_blank">#{{ pipeline.id }}</gl-link>
+      <pipeline-status-badge v-if="shouldShowPipelineStatusBadge" class="gl-ml-3" />
     </div>
   </div>
 </template>

ee/app/assets/javascripts/security_dashboard/first_class_init.js

@@ -45,8 +45,10 @@ export default (el, dashboardType) => {
     props.pipeline = { createdAt, id, path };
     props.projectFullPath = el.dataset.projectFullPath;
     provide.autoFixDocumentation = el.dataset.autoFixDocumentation;
-    provide.pipelineSecurityBuildsFailedCount = el.dataset.pipelineSecurityBuildsFailedCount;
     provide.pipelineSecurityBuildsFailedPath = el.dataset.pipelineSecurityBuildsFailedPath;
+    provide.pipelineSecurityBuildsFailedCount = Number(
+      el.dataset.pipelineSecurityBuildsFailedCount,
+    );
   } else if (dashboardType === DASHBOARD_TYPES.GROUP) {
     component = FirstClassGroupSecurityDashboard;
     props.groupFullPath = el.dataset.groupFullPath;

ee/changelogs/unreleased/241061-integrate-pipeline-failed-widget.yml

+---
+title: Integrate the status badge in the pipeline widget
+merge_request: 45987
+author:
+type: added

ee/spec/frontend/security_dashboard/components/project_pipeline_status_spec.js

 import { shallowMount } from '@vue/test-utils';
 import { GlLink } from '@gitlab/ui';
 import ProjectPipelineStatus from 'ee/security_dashboard/components/project_pipeline_status.vue';
+import PipelineStatusBadge from 'ee/security_dashboard/components/pipeline_status_badge.vue';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 
 describe('Project Pipeline Status Component', () => {
@@ -14,12 +15,14 @@ describe('Project Pipeline Status Component', () => {
     },
   };
 
-  const findLink = () => wrapper.find(GlLink);
+  const findPipelineStatusBadge = () => wrapper.find(PipelineStatusBadge);
   const findTimeAgoTooltip = () => wrapper.find(TimeAgoTooltip);
+  const findLink = () => wrapper.find(GlLink);
 
-  const createWrapper = () => {
+  const createWrapper = options => {
     return shallowMount(ProjectPipelineStatus, {
       propsData,
+      ...options,
     });
   };
 
@@ -50,4 +53,24 @@ describe('Project Pipeline Status Component', () => {
       expect(GlLinkComponent.attributes('href')).toBe(propsData.pipeline.path);
     });
   });
+
+  describe('when there are more than 0 failed jobs', () => {
+    beforeEach(() => {
+      wrapper = createWrapper({ provide: { pipelineSecurityBuildsFailedCount: 5 } });
+    });
+
+    it('should show the pipeline status badge', () => {
+      expect(findPipelineStatusBadge().exists()).toBe(true);
+    });
+  });
+
+  describe('when there are 0 failed jobs', () => {
+    beforeEach(() => {
+      wrapper = createWrapper({ provide: { pipelineSecurityBuildsFailedCount: 0 } });
+    });
+
+    it('should show the pipeline status badge', () => {
+      expect(findPipelineStatusBadge().exists()).toBe(false);
+    });
+  });
 });