Prepare a pipeline status badge

- The badge will be used in a later iteration.
- Write tests

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

+<script>
+import { GlBadge, GlIcon } from '@gitlab/ui';
+
+export default {
+  components: { GlBadge, GlIcon },
+  inject: {
+    pipelineSecurityBuildsFailedCount: { type: Number, required: false, default: 0 },
+    pipelineSecurityBuildsFailedPath: { type: String, required: false, default: '' },
+  },
+};
+</script>
+
+<template>
+  <gl-badge variant="danger" :href="pipelineSecurityBuildsFailedPath">
+    <gl-icon name="status_failed" class="gl-mr-2" />
+    {{
+      n__('%d failed security job', '%d failed security jobs', pipelineSecurityBuildsFailedCount)
+    }}
+  </gl-badge>
+</template>

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

@@ -43,6 +43,8 @@ export default (el, dashboardType) => {
     component = FirstClassProjectSecurityDashboard;
     props.projectFullPath = el.dataset.projectFullPath;
     provide.autoFixDocumentation = el.dataset.autoFixDocumentation;
+    provide.pipelineSecurityBuildsFailedCount = el.dataset.pipelineSecurityBuildsFailedCount;
+    provide.pipelineSecurityBuildsFailedPath = el.dataset.pipelineSecurityBuildsFailedPath;
   } else if (dashboardType === DASHBOARD_TYPES.GROUP) {
     component = FirstClassGroupSecurityDashboard;
     props.groupFullPath = el.dataset.groupFullPath;

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

+import { GlBadge } 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 }) => {
+    wrapper = shallowMount(PipelineStatusBadge, {
+      provide: {
+        pipelineSecurityBuildsFailedCount,
+        pipelineSecurityBuildsFailedPath,
+      },
+      stubs: { GlBadge },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  it('displays correct message for 5 failed jobs', () => {
+    createWrapper({ pipelineSecurityBuildsFailedCount: 5 });
+    expect(wrapper.text()).toBe('5 failed security jobs');
+  });
+
+  it('displays correct message for 1 failed job', () => {
+    createWrapper({ pipelineSecurityBuildsFailedCount: 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);
+  });
+});

locale/gitlab.pot

@@ -185,6 +185,11 @@ msgid_plural "%d failed"
 msgstr[0] ""
 msgstr[1] ""
 
+msgid "%d failed security job"
+msgid_plural "%d failed security jobs"
+msgstr[0] ""
+msgstr[1] ""
+
 msgid "%d fixed test result"
 msgid_plural "%d fixed test results"
 msgstr[0] ""