Security MR-widget: Clarify dismissed state

This MR changes the UI for a dismissed vulnerability within
the MR-widget.

It removes the strike-through and adds a "Dismissed" badge to any
vulnerability that has been dismissed.

Changelog: changed
EE: true
MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/69943

app/assets/javascripts/reports/components/report_item.vue

@@ -53,11 +53,7 @@ export default {
 };
 </script>
 <template>
-  <li
-    :class="{ 'is-dismissed': issue.isDismissed }"
-    class="report-block-list-issue align-items-center"
-    data-qa-selector="report_item_row"
-  >
+  <li class="report-block-list-issue align-items-center" data-qa-selector="report_item_row">
     <component
       :is="iconComponent"
       v-if="showReportSectionStatusIcon"

app/assets/stylesheets/page_bundles/reports.scss

@@ -49,11 +49,6 @@
   display: flex;
 }
 
-.is-dismissed .report-block-list-issue-description,
-.is-dismissed .vulnerability-name-button {
-  text-decoration: line-through;
-}
-
 .report-block-list-issue-description-text::after {
   content: '\00a0';
 }

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

@@ -4,6 +4,7 @@
  * Scanning, Secret Scanning) body text
  * [severity-badge] [name] in [link]:[line]
  */
+import { GlBadge } from '@gitlab/ui';
 import ModalOpenName from 'ee/reports/components/modal_open_name.vue';
 import ReportLink from '~/reports/components/report_link.vue';
 import SeverityBadge from './severity_badge.vue';
@@ -11,6 +12,7 @@ import SeverityBadge from './severity_badge.vue';
 export default {
   name: 'SecurityIssueBody',
   components: {
+    GlBadge,
     ReportLink,
     ModalOpenName,
     SeverityBadge,
@@ -38,10 +40,13 @@ export default {
     <div class="report-block-list-issue-description-text gl-display-flex gl-w-full">
       <severity-badge
         v-if="issue.severity"
-        class="d-inline-block gl-mr-1"
+        class="gl-display-inline-flex gl-align-items-center gl-mr-1"
         :severity="issue.severity"
       />
       <modal-open-name :issue="issue" :status="status" />
+      <gl-badge v-if="issue.isDismissed" class="gl-ml-3" data-testid="dismissed-badge">
+        {{ __('Dismissed') }}
+      </gl-badge>
     </div>
     <report-link v-if="showReportLink && issue.path" :issue="issue" />
   </div>

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

@@ -7,6 +7,7 @@ import {
 } from 'ee/security_dashboard/store/modules/vulnerabilities/constants';
 import SecurityIssueBody from 'ee/vue_shared/security_reports/components/security_issue_body.vue';
 import SeverityBadge from 'ee/vue_shared/security_reports/components/severity_badge.vue';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import ReportLink from '~/reports/components/report_link.vue';
 import { STATUS_FAILED } from '~/reports/constants';
 import {
@@ -23,12 +24,14 @@ describe('Security Issue Body', () => {
   const findReportLink = () => wrapper.find(ReportLink);
 
   const createComponent = (issue) => {
-    wrapper = shallowMount(SecurityIssueBody, {
-      propsData: {
-        issue,
-        status: STATUS_FAILED,
-      },
-    });
+    wrapper = extendedWrapper(
+      shallowMount(SecurityIssueBody, {
+        propsData: {
+          issue,
+          status: STATUS_FAILED,
+        },
+      }),
+    );
   };
 
   afterEach(() => {
@@ -60,5 +63,14 @@ describe('Security Issue Body', () => {
     it(`does ${hasReportLink ? '' : 'not '}render report link`, () => {
       expect(findReportLink().exists()).toBe(hasReportLink);
     });
+
+    it.each([true, false])(
+      `shows a "dismissed" info correctly when the vulnerability's "isDismissed" property is set to "%s`,
+      (isDismissed) => {
+        createComponent({ ...vuln, isDismissed });
+
+        expect(wrapper.findByTestId('dismissed-badge').exists()).toBe(isDismissed);
+      },
+    );
   });
 });