From a1de606d00565ad6f171b928ea4783a74285a3a9 Mon Sep 17 00:00:00 2001
From: Jannik Lehmann <jlehmann@gitlab.com>
Date: Wed, 22 Nov 2023 07:54:36 +0000
Subject: [PATCH] Refactor Security MR Widget State Badge
This commit refactors the Security MR
Widget State Badge to display a muted variant when
the finding was dismissed.
Changelog: changed
EE: true
---
.../components/vulnerability_details.vue | 8 +++++++-
.../vulnerability_details_spec.js.snap | 2 +-
.../components/vulnerability_details_spec.js | 20 ++++++++++++-------
3 files changed, 21 insertions(+), 9 deletions(-)
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 ae69d0b60783c..20c078090881a 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 7f3668a9b5390..af2566188410b 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 fc35772bab0a6..490fef7ebbeb1 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();
--
GitLab