Simplify pipeline failed jobs widget via props

- remove provide/inject in lieu of props
- update tests
- update changelog

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

@@ -59,11 +59,6 @@ export default {
     };
   },
   inject: ['dashboardDocumentation', 'autoFixDocumentation'],
-  computed: {
-    shouldShowPipelineStatus() {
-      return Object.values(this.pipeline).every(Boolean);
-    },
-  },
   methods: {
     handleFilterChange(filters) {
       this.filters = filters;
@@ -90,7 +85,7 @@ export default {
             <h4 class="flex-grow mt-0 mb-0">{{ __('Vulnerabilities') }}</h4>
             <csv-export-button :vulnerabilities-export-endpoint="vulnerabilitiesExportEndpoint" />
           </div>
-          <project-pipeline-status v-if="shouldShowPipelineStatus" :pipeline="pipeline" />
+          <project-pipeline-status :pipeline="pipeline" />
           <vulnerabilities-count-list :project-full-path="projectFullPath" :filters="filters" />
         </template>
         <template #sticky>

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

@@ -3,18 +3,29 @@ import { GlBadge, GlIcon } from '@gitlab/ui';
 
 export default {
   components: { GlBadge, GlIcon },
-  inject: {
-    pipelineSecurityBuildsFailedCount: { default: 0 },
-    pipelineSecurityBuildsFailedPath: { default: '' },
+  props: {
+    pipeline: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    failedCount() {
+      return this.pipeline.securityBuildsFailedCount || 0;
+    },
+    failedPath() {
+      return this.pipeline.securityBuildsFailedPath || '';
+    },
+    shouldShow() {
+      return this.failedCount > 0;
+    },
   },
 };
 </script>
 
 <template>
-  <gl-badge variant="danger" :href="pipelineSecurityBuildsFailedPath">
+  <gl-badge v-if="shouldShow" variant="danger" :href="failedPath">
     <gl-icon name="status_failed" class="gl-mr-2" />
-    {{
-      n__('%d failed security job', '%d failed security jobs', pipelineSecurityBuildsFailedCount)
-    }}
+    {{ n__('%d failed security job', '%d failed security jobs', failedCount) }}
   </gl-badge>
 </template>

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

@@ -13,12 +13,9 @@ export default {
   props: {
     pipeline: { type: Object, required: true },
   },
-  inject: {
-    pipelineSecurityBuildsFailedCount: { type: Number, default: 0 },
-  },
   computed: {
-    shouldShowPipelineStatusBadge() {
-      return this.pipelineSecurityBuildsFailedCount > 0;
+    shouldShowPipelineStatus() {
+      return this.pipeline.createdAt && this.pipeline.id && this.pipeline.path;
     },
   },
   i18n: {
@@ -31,7 +28,7 @@ export default {
 </script>
 
 <template>
-  <div>
+  <div v-if="shouldShowPipelineStatus">
     <h6 class="gl-font-weight-normal">{{ $options.i18n.title }}</h6>
     <div
       class="gl-display-flex gl-align-items-center gl-border-solid gl-border-1 gl-border-gray-100 gl-p-6"
@@ -39,7 +36,7 @@ export default {
       <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" />
+      <pipeline-status-badge :pipeline="pipeline" class="gl-ml-3" />
     </div>
   </div>
 </template>

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

@@ -41,14 +41,22 @@ export default (el, dashboardType) => {
 
   if (dashboardType === DASHBOARD_TYPES.PROJECT) {
     component = FirstClassProjectSecurityDashboard;
-    const { pipelineCreatedAt: createdAt, pipelineId: id, pipelinePath: path } = el.dataset;
-    props.pipeline = { createdAt, id, path };
+    const {
+      pipelineCreatedAt: createdAt,
+      pipelineId: id,
+      pipelinePath: path,
+      pipelineSecurityBuildsFailedCount: securityBuildsFailedCount,
+      pipelineSecurityBuildsFailedPath: securityBuildsFailedPath,
+    } = el.dataset;
+    props.pipeline = {
+      createdAt,
+      id,
+      path,
+      securityBuildsFailedCount: Number(securityBuildsFailedCount),
+      securityBuildsFailedPath,
+    };
     props.projectFullPath = el.dataset.projectFullPath;
     provide.autoFixDocumentation = el.dataset.autoFixDocumentation;
-    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
+title: Add security status badge to the project pipeline widget
 merge_request: 45987
 author:
 type: added

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

@@ -168,7 +168,6 @@ describe('First class Project Security Dashboard component', () => {
       createComponent({
         props: {
           hasVulnerabilities: true,
-          pipeline: { id: '214' },
         },
         data() {
           return { filters };
@@ -193,23 +192,5 @@ describe('First class Project Security Dashboard component', () => {
     it('displays the unconfigured state', () => {
       expect(findUnconfiguredState().exists()).toBe(true);
     });
-
-    it('does not display the project pipeline status', () => {
-      expect(findProjectPipelineStatus().exists()).toBe(false);
-    });
-  });
-
-  describe('when there is no pipeline data', () => {
-    beforeEach(() => {
-      createComponent({
-        props: {
-          pipeline: undefined,
-        },
-      });
-    });
-
-    it('does not display the project pipeline status', () => {
-      expect(findProjectPipelineStatus().exists()).toBe(false);
-    });
   });
 });

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

-import { GlBadge } from '@gitlab/ui';
+import { GlBadge, GlIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import PipelineStatusBadge from 'ee/security_dashboard/components/pipeline_status_badge.vue';
 
 describe('Pipeline status badge', () => {
-  const pipelineSecurityBuildsFailedPath = '/some/path/to/failed/jobs';
-
   let wrapper;
 
-  const createWrapper = ({ pipelineSecurityBuildsFailedCount }) => {
+  const securityBuildsFailedPath = '/some/path/to/failed/jobs';
+  const DEFAULT_PROPS = {
+    pipeline: {
+      securityBuildsFailedCount: 5,
+      securityBuildsFailedPath,
+    },
+  };
+
+  const findGlBadge = () => wrapper.find(GlBadge);
+  const findGlIcon = () => wrapper.find(GlIcon);
+
+  const createProps = securityBuildsFailedCount => ({ pipeline: { securityBuildsFailedCount } });
+
+  const createWrapper = ({ props = {} } = {}) => {
     wrapper = shallowMount(PipelineStatusBadge, {
-      provide: {
-        pipelineSecurityBuildsFailedCount,
-        pipelineSecurityBuildsFailedPath,
-      },
-      stubs: { GlBadge },
+      propsData: { ...DEFAULT_PROPS, ...props },
     });
   };
 
@@ -22,18 +29,36 @@ describe('Pipeline status badge', () => {
     wrapper = null;
   });
 
-  it('displays correct message for 5 failed jobs', () => {
-    createWrapper({ pipelineSecurityBuildsFailedCount: 5 });
-    expect(wrapper.text()).toBe('5 failed security jobs');
-  });
+  describe('when there are more than 0 failed jobs', () => {
+    beforeEach(() => {
+      createWrapper();
+    });
 
-  it('displays correct message for 1 failed job', () => {
-    createWrapper({ pipelineSecurityBuildsFailedCount: 1 });
-    expect(wrapper.text()).toBe('1 failed security job');
+    it('displays correct message for 5 failed jobs', () => {
+      expect(wrapper.text()).toBe('5 failed security jobs');
+    });
+
+    it('links to the correct path', () => {
+      expect(findGlBadge().attributes('href')).toBe(securityBuildsFailedPath);
+    });
+
+    it('displays correct message for 1 failed job', () => {
+      createWrapper({ props: createProps(1) });
+      expect(wrapper.text()).toBe('1 failed security job');
+    });
   });
 
-  it('links to the correct path', () => {
-    createWrapper({ pipelineSecurityBuildsFailedCount: 5 });
-    expect(wrapper.find(GlBadge).attributes('href')).toBe(pipelineSecurityBuildsFailedPath);
+  describe('when there are not more than 0 failed jobs', () => {
+    it('does not display when there are 0 failed jobs', () => {
+      createWrapper({ props: createProps(0) });
+      expect(findGlBadge().exists()).toBe(false);
+      expect(findGlIcon().exists()).toBe(false);
+    });
+
+    it('does not display when there is no failed jobs count', () => {
+      createWrapper({ props: createProps(undefined) });
+      expect(findGlBadge().exists()).toBe(false);
+      expect(findGlIcon().exists()).toBe(false);
+    });
   });
 });

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

@@ -7,7 +7,7 @@ import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 describe('Project Pipeline Status Component', () => {
   let wrapper;
 
-  const propsData = {
+  const DEFAULT_PROPS = {
     pipeline: {
       createdAt: '2020-10-06T20:08:07Z',
       id: '214',
@@ -19,9 +19,9 @@ describe('Project Pipeline Status Component', () => {
   const findTimeAgoTooltip = () => wrapper.find(TimeAgoTooltip);
   const findLink = () => wrapper.find(GlLink);
 
-  const createWrapper = options => {
+  const createWrapper = ({ props = {}, options = {} } = {}) => {
     return shallowMount(ProjectPipelineStatus, {
-      propsData,
+      propsData: { ...DEFAULT_PROPS, ...props },
       ...options,
     });
   };
@@ -40,7 +40,7 @@ describe('Project Pipeline Status Component', () => {
       const TimeComponent = findTimeAgoTooltip();
       expect(TimeComponent.exists()).toBeTruthy();
       expect(TimeComponent.props()).toStrictEqual({
-        time: propsData.pipeline.createdAt,
+        time: DEFAULT_PROPS.pipeline.createdAt,
         cssClass: '',
         tooltipPlacement: 'top',
       });
@@ -49,27 +49,19 @@ describe('Project Pipeline Status Component', () => {
     it('should show the link component', () => {
       const GlLinkComponent = findLink();
       expect(GlLinkComponent.exists()).toBeTruthy();
-      expect(GlLinkComponent.text()).toBe(`#${propsData.pipeline.id}`);
-      expect(GlLinkComponent.attributes('href')).toBe(propsData.pipeline.path);
+      expect(GlLinkComponent.text()).toBe(`#${DEFAULT_PROPS.pipeline.id}`);
+      expect(GlLinkComponent.attributes('href')).toBe(DEFAULT_PROPS.pipeline.path);
     });
   });
 
-  describe('when there are more than 0 failed jobs', () => {
+  describe('when no pipeline has run', () => {
     beforeEach(() => {
-      wrapper = createWrapper({ provide: { pipelineSecurityBuildsFailedCount: 5 } });
+      wrapper = createWrapper({ props: { pipeline: { path: '' } } });
     });
 
-    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', () => {
+    it('should not show the project_pipeline_status component', () => {
+      expect(findLink().exists()).toBe(false);
+      expect(findTimeAgoTooltip().exists()).toBe(false);
       expect(findPipelineStatusBadge().exists()).toBe(false);
     });
   });