Merge branch '515975-project-tool-coverage-indicator' into 'master'

Add project tool coverage indicator

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/183111



Merged-by: Jose Ivan Vargas <jvargas@gitlab.com>
Approved-by: Michael Fangman <mfangman@gitlab.com>
Approved-by: Thomas Randolph <trandolph@gitlab.com>
Approved-by: Jose Ivan Vargas <jvargas@gitlab.com>
Co-authored-by: Miranda Fluharty <mfluharty@gitlab.com>

ee/app/assets/javascripts/security_inventory/components/project_tool_coverage_indicator.vue

+<script>
+import { GlBadge } from '@gitlab/ui';
+import { SCANNERS } from '../constants';
+
+export default {
+  name: 'ProjectToolCoverageIndicator',
+  components: { GlBadge },
+  props: {
+    securityScanners: {
+      type: Object,
+      required: false,
+      default: () => ({
+        enabled: [],
+        pipelineRun: [],
+      }),
+    },
+    // TODO: switch to object with status enum
+    //    scanners: {
+    //      type: Object,
+    //      required: false,
+    //      default: () => ({
+    //        SAST: {
+    //          status: 'SCANNER_DISABLED'
+    //        },
+    //        DAST: {
+    //          status: 'SCANNER_DISABLED'
+    //        },
+    //        SAST_IAC: {
+    //          status: 'SCANNER_DISABLED'
+    //        },
+    //        SECRET_DETECTION: {
+    //          status: 'SCANNER_DISABLED'
+    //        },
+    //        DEPENDENCY_SCANNING: {
+    //          status: 'SCANNER_DISABLED'
+    //        },
+    //        CONTAINER_SCANNING: {
+    //          status: 'SCANNER_DISABLED'
+    //        },
+    //      })
+    //    }
+  },
+  methods: {
+    isEnabled(scanner) {
+      return (
+        this.securityScanners.enabled?.includes(scanner) &&
+        this.securityScanners.pipelineRun?.includes(scanner)
+      );
+    },
+    isFailed(scanner) {
+      return (
+        this.securityScanners.enabled?.includes(scanner) &&
+        !this.securityScanners.pipelineRun?.includes(scanner)
+      );
+    },
+    scannerStyling(scanner) {
+      if (this.isEnabled(scanner)) {
+        // TODO: replace with this.scanners[scanner].status === 'SCANNER_ENABLED'
+        return { variant: 'success', class: 'gl-border-transparent' };
+      }
+      if (this.isFailed(scanner)) {
+        // TODO: replace with this.scanners[scanner].status === 'SCANNER_FAILED'
+        return { variant: 'danger', class: 'gl-border-red-600' };
+      }
+      // otherwise assume status is SCANNER_DISABLED
+      return { class: '!gl-bg-white gl-border-gray-200 gl-border-dashed' };
+    },
+  },
+  SCANNERS,
+};
+</script>
+
+<template>
+  <div class="gl-flex gl-flex-row gl-gap-2">
+    <gl-badge
+      v-for="{ scanner, label } in $options.SCANNERS"
+      :key="scanner"
+      v-bind="scannerStyling(scanner)"
+      class="gl-border gl-w-8 gl-text-xs gl-font-bold"
+      :data-testid="`${scanner}-badge`"
+    >
+      {{ label }}
+    </gl-badge>
+  </div>
+</template>

ee/app/assets/javascripts/security_inventory/constants.js

+import { s__ } from '~/locale';
+
+const SAST_LABEL = s__('SecurityInventory|SAST');
+const DAST_LABEL = s__('SecurityInventory|DAST');
+const SAST_IAC_LABEL = s__('SecurityInventory|IaC');
+const SECRET_DETECTION_LABEL = s__('SecurityInventory|SD');
+const DEPENDENCY_SCANNING_LABEL = s__('SecurityInventory|DS');
+const CONTAINER_SCANNING_LABEL = s__('SecurityInventory|CS');
+
+export const SCANNERS = [
+  {
+    scanner: 'SAST',
+    label: SAST_LABEL,
+  },
+  {
+    scanner: 'DAST',
+    label: DAST_LABEL,
+  },
+  {
+    scanner: 'SAST_IAC',
+    label: SAST_IAC_LABEL,
+  },
+  {
+    scanner: 'SECRET_DETECTION',
+    label: SECRET_DETECTION_LABEL,
+  },
+  {
+    scanner: 'DEPENDENCY_SCANNING',
+    label: DEPENDENCY_SCANNING_LABEL,
+  },
+  {
+    scanner: 'CONTAINER_SCANNING',
+    label: CONTAINER_SCANNING_LABEL,
+  },
+];

ee/spec/frontend/security_inventory/components/project_tool_coverage_indicator_spec.js

+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import ProjectToolCoverageIndicator from 'ee/security_inventory/components/project_tool_coverage_indicator.vue';
+import { SCANNERS } from 'ee/security_inventory/constants';
+
+describe('ProjectToolCoverageIndicator', () => {
+  let wrapper;
+
+  const createComponent = (propsData) => {
+    wrapper = shallowMountExtended(ProjectToolCoverageIndicator, { propsData });
+  };
+
+  describe.each(SCANNERS)('$scanner badge', ({ scanner, label }) => {
+    it('shows success variant when enabled', () => {
+      createComponent({ securityScanners: { enabled: [scanner], pipelineRun: [scanner] } });
+
+      expect(wrapper.findByTestId(`${scanner}-badge`).props('variant')).toBe('success');
+      expect(wrapper.findByTestId(`${scanner}-badge`).text()).toBe(label);
+    });
+
+    it('shows danger variant with border when failed', () => {
+      createComponent({ securityScanners: { enabled: [scanner] } });
+
+      expect(wrapper.findByTestId(`${scanner}-badge`).props('variant')).toBe('danger');
+      expect(wrapper.findByTestId(`${scanner}-badge`).classes()).toContain('gl-border-red-600');
+      expect(wrapper.findByTestId(`${scanner}-badge`).text()).toBe(label);
+    });
+
+    it('shows dashed outline for $scanner when disabled', () => {
+      createComponent({ enabledScanners: [] });
+
+      expect(wrapper.findByTestId(`${scanner}-badge`).classes()).toContain('gl-border-dashed');
+      expect(wrapper.findByTestId(`${scanner}-badge`).text()).toBe(label);
+    });
+  });
+});

locale/gitlab.pot

@@ -52568,6 +52568,24 @@ msgstr ""
 msgid "SecurityExclusions|ex: spec/**/*.rb"
 msgstr ""
+msgid "SecurityInventory|CS"
+msgstr ""
+
+msgid "SecurityInventory|DAST"
+msgstr ""
+
+msgid "SecurityInventory|DS"
+msgstr ""
+
+msgid "SecurityInventory|IaC"
+msgstr ""
+
+msgid "SecurityInventory|SAST"
+msgstr ""
+
+msgid "SecurityInventory|SD"
+msgstr ""
+
 msgid "SecurityInventory|Security inventory"
 msgstr ""