Merge branch 'update-badge-security-mr-widget' into 'master'

Refactor Security MR Widget State Badge

See merge request !137411



Merged-by: Jacques Erasmus <jerasmus@gitlab.com>
Approved-by: David Pisek <dpisek@gitlab.com>
Approved-by: Jacques Erasmus <jerasmus@gitlab.com>
Reviewed-by: David Pisek <dpisek@gitlab.com>
Reviewed-by: Jannik Lehmann <jlehmann@gitlab.com>
Co-authored-by: Jannik Lehmann <jlehmann@gitlab.com>

ee/app/assets/javascripts/vue_shared/security_reports/components/vulnerability_details.vue

@@ -16,6 +16,7 @@ import { cleanLeadingSeparator } from '~/lib/utils/url_utility';
 import { s__, sprintf } from '~/locale';
 import CodeBlock from '~/vue_shared/components/code_block.vue';
 import VulnerabilityTraining from 'ee/vulnerabilities/components/vulnerability_training.vue';
+import { SAST_FINDING_DISMISSED } from '~/diffs/constants';
 import getFileLocation from '../store/utils/get_file_location';
 import { bodyWithFallBack } from './helpers';
 import SeverityBadge from './severity_badge.vue';
@@ -44,6 +45,9 @@ export default {
     };
   },
   computed: {
+    statusBadgeVariant() {
+      return this.vulnerability.state === SAST_FINDING_DISMISSED ? 'muted' : 'warning';
+    },
     url() {
       return this.vulnerability.request?.url || getFileLocation(this.vulnLocation);
     },
@@ -208,7 +212,9 @@ export default {
   <div class="border-white mb-0 px-3">
     <false-positive-alert v-if="falsePositive" />
     <vulnerability-detail v-if="vulnerability.state" :label="s__('Vulnerability|Status')">
-      <gl-badge variant="warning" class="text-capitalize">{{ vulnerability.state }}</gl-badge>
+      <gl-badge :variant="statusBadgeVariant" class="gl-text-transform-capitalize">{{
+        vulnerability.state
+      }}</gl-badge>
     </vulnerability-detail>
     <vulnerability-detail v-if="hasDescription" :label="s__('Vulnerability|Description')">
       <p

ee/spec/frontend/vue_shared/security_reports/components/__snapshots__/vulnerability_details_spec.js.snap

@@ -8,7 +8,7 @@ exports[`VulnerabilityDetails component pin test renders correctly 1`] = `
     label="Status"
   >
     <gl-badge-stub
-      class="text-capitalize"
+      class="gl-text-transform-capitalize"
       iconsize="md"
       size="md"
       variant="warning"

ee/spec/frontend/vue_shared/security_reports/components/vulnerability_details_spec.js

@@ -89,13 +89,19 @@ describe('VulnerabilityDetails component', () => {
     expect(badge.props('severity')).toBe(vulnerability.severity);
   });
 
-  it('renders status with a badge', () => {
-    const vulnerability = makeVulnerability({ state: 'detected' });
-    componentFactory(vulnerability);
-    const badge = wrapper.findComponent(GlBadge);
-
-    expect(badge.text()).toContain(vulnerability.state);
-  });
+  it.each([
+    { state: 'detected', expectedBadgeVariant: 'warning' },
+    { state: 'dismissed', expectedBadgeVariant: 'muted' },
+  ])(
+    'renders $state status with a $expectedBadgeVariant badge',
+    ({ state, expectedBadgeVariant }) => {
+      const vulnerability = makeVulnerability({ state });
+      componentFactory(vulnerability);
+      const badge = wrapper.findComponent(GlBadge);
+      expect(badge.props('variant')).toBe(expectedBadgeVariant);
+      expect(badge.text()).toContain(vulnerability.state);
+    },
+  );
 
   it('renders link fields with link', () => {
     const vulnerability = makeVulnerability();