diff --git a/ee/app/assets/javascripts/vue_shared/security_reports/components/vulnerability_details.vue b/ee/app/assets/javascripts/vue_shared/security_reports/components/vulnerability_details.vue index ae69d0b60783c17171a7a8485e6f1bfd0d7cb1ad..20c078090881a28e54d113bb1d9e334498739838 100644 --- a/ee/app/assets/javascripts/vue_shared/security_reports/components/vulnerability_details.vue +++ b/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 diff --git a/ee/spec/frontend/vue_shared/security_reports/components/__snapshots__/vulnerability_details_spec.js.snap b/ee/spec/frontend/vue_shared/security_reports/components/__snapshots__/vulnerability_details_spec.js.snap index 7f3668a9b5390c5c3fe60e78c3f582f93f4ad718..af2566188410b4afc0ecd8945127a57a44add7ef 100644 --- a/ee/spec/frontend/vue_shared/security_reports/components/__snapshots__/vulnerability_details_spec.js.snap +++ b/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" diff --git a/ee/spec/frontend/vue_shared/security_reports/components/vulnerability_details_spec.js b/ee/spec/frontend/vue_shared/security_reports/components/vulnerability_details_spec.js index fc35772bab0a6c9d47098a2ae6c4dcf08038c2d6..490fef7ebbeb18be6dff9122d44c0ee7d7540d6a 100644 --- a/ee/spec/frontend/vue_shared/security_reports/components/vulnerability_details_spec.js +++ b/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();