Update modal to show fuzzing data

* Add additional fields

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

 <script>
-import { GlFriendlyWrap, GlLink } from '@gitlab/ui';
+import { GlFriendlyWrap, GlLink, GlBadge } from '@gitlab/ui';
 import { REPORT_TYPES } from 'ee/security_dashboard/store/constants';
 import CodeBlock from '~/vue_shared/components/code_block.vue';
 import SeverityBadge from './severity_badge.vue';
@@ -9,11 +9,11 @@ import { s__, sprintf } from '~/locale';
 
 export default {
   name: 'VulnerabilityDetails',
-  components: { CodeBlock, GlFriendlyWrap, SeverityBadge, VulnerabilityDetail, GlLink },
+  components: { CodeBlock, GlFriendlyWrap, SeverityBadge, VulnerabilityDetail, GlLink, GlBadge },
   props: { vulnerability: { type: Object, required: true } },
   computed: {
     url() {
-      return this.vulnerability.request?.url || getFileLocation(this.vulnerability.location);
+      return this.vulnerability.request?.url || getFileLocation(this.vulnLocation);
     },
     file() {
       const file = this.vulnerability?.location?.file;
@@ -21,7 +21,7 @@ export default {
         return null;
       }
       let lineSuffix = '';
-      const { start_line: startLine, end_line: endLine } = this.vulnerability.location;
+      const { start_line: startLine, end_line: endLine } = this.vulnLocation;
       if (startLine) {
         lineSuffix += `:${startLine}`;
         if (endLine && startLine !== endLine) {
@@ -33,20 +33,29 @@ export default {
     identifiers() {
       return this.asNonEmptyListOrNull(this.vulnerability.identifiers);
     },
+    vulnLocation() {
+      return this.vulnerability.location;
+    },
     crashAddress() {
-      return this.vulnerability.location?.crash_address;
+      return this.vulnLocation?.crash_address;
+    },
+    crashType() {
+      return this.vulnLocation?.crash_type;
+    },
+    crashState() {
+      return this.vulnLocation?.crash_state;
     },
     className() {
-      return this.vulnerability.location?.class;
+      return this.vulnLocation?.class;
     },
     methodName() {
-      return this.vulnerability.location?.method;
+      return this.vulnLocation?.method;
     },
     image() {
-      return this.vulnerability.location?.image;
+      return this.vulnLocation?.image;
     },
     namespace() {
-      return this.vulnerability.location?.operating_system;
+      return this.vulnLocation?.operating_system;
     },
     links() {
       return this.asNonEmptyListOrNull(this.vulnerability.links);
@@ -82,7 +91,7 @@ export default {
       });
     },
     stacktraceSnippet() {
-      return this.vulnerability.location?.stacktrace_snippet;
+      return this.vulnLocation?.stacktrace_snippet;
     },
   },
   methods: {
@@ -100,6 +109,9 @@ export default {
 </script>
 <template>
   <div class="border-white mb-0 px-3">
+    <vulnerability-detail v-if="vulnerability.state" :label="s__('Vulnerability|Status')">
+      <gl-badge variant="warning" class="text-capitalize">{{ vulnerability.state }}</gl-badge>
+    </vulnerability-detail>
     <vulnerability-detail
       v-if="vulnerability.description"
       :label="s__('Vulnerability|Description')"
@@ -142,8 +154,14 @@ export default {
     <vulnerability-detail v-if="vulnerability.evidence" :label="s__('Vulnerability|Evidence')">
       <gl-friendly-wrap :text="vulnerability.evidence" />
     </vulnerability-detail>
-    <vulnerability-detail v-if="crashAddress" :label="s__('Vulnerability|Crash Address')">
-      <gl-friendly-wrap ref="crashAddress" :text="crashAddress" />
+    <vulnerability-detail v-if="crashAddress" :label="s__('Vulnerability|Crash address')">
+      <span ref="crashAddress"> {{ crashAddress }} </span>
+    </vulnerability-detail>
+    <vulnerability-detail v-if="crashType" :label="s__('Vulnerability|Crash type')">
+      <span ref="crashType"> {{ crashType }} </span>
+    </vulnerability-detail>
+    <vulnerability-detail v-if="crashState" :label="s__('Vulnerability|Crash state')">
+      <span ref="crashState"> {{ crashState }} </span>
     </vulnerability-detail>
     <vulnerability-detail v-if="stacktraceSnippet" :label="s__('Stacktrace snippet')">
       <code-block ref="stacktraceSnippet" :code="stacktraceSnippet" max-height="225px" />

ee/changelogs/unreleased/254650-modal-fuzz-updates.yml

+---
+title: Update security vulnerability modal to show fuzzing data
+merge_request: 43983
+author:
+type: added

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

@@ -4,6 +4,18 @@ exports[`VulnerabilityDetails component pin test renders correctly 1`] = `
 <div
   class="border-white mb-0 px-3"
 >
+  <vulnerability-detail-stub
+    label="Status"
+  >
+    <gl-badge-stub
+      class="text-capitalize"
+      size="md"
+      variant="warning"
+    >
+      opened
+    </gl-badge-stub>
+  </vulnerability-detail-stub>
+   
   <vulnerability-detail-stub
     label="Description"
   >
@@ -99,6 +111,10 @@ key2: value2"
    
   <!---->
    
+  <!---->
+   
+  <!---->
+   
   <vulnerability-detail-stub
     label="Identifiers"
   >

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

@@ -3,7 +3,7 @@ import VulnerabilityDetails from 'ee/vue_shared/security_reports/components/vuln
 import SeverityBadge from 'ee/vue_shared/security_reports/components/severity_badge.vue';
 import { TEST_HOST } from 'helpers/test_constants';
 import { cloneDeep } from 'lodash';
-import { GlLink } from '@gitlab/ui';
+import { GlLink, GlBadge } from '@gitlab/ui';
 import { mockFindings } from '../mock_data';
 import CodeBlock from '~/vue_shared/components/code_block.vue';
 
@@ -34,6 +34,8 @@ describe('VulnerabilityDetails component', () => {
   const findResponseHeaders = () => wrapper.find({ ref: 'responseHeaders' });
   const findResponseStatusCode = () => wrapper.find({ ref: 'responseStatusCode' });
   const findCrashAddress = () => wrapper.find({ ref: 'crashAddress' });
+  const findCrashState = () => wrapper.find({ ref: 'crashState' });
+  const findCrashType = () => wrapper.find({ ref: 'crashType' });
   const findStacktraceSnippet = () => wrapper.find({ ref: 'stacktraceSnippet' });
 
   afterEach(() => {
@@ -48,6 +50,14 @@ 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.find(GlBadge);
+
+    expect(badge.text()).toContain(vulnerability.state);
+  });
+
   it('renders link fields with link', () => {
     const vulnerability = makeVulnerability();
     componentFactory(vulnerability);
@@ -124,8 +134,9 @@ describe('VulnerabilityDetails component', () => {
   });
 
   describe('with coverage fuzzing information', () => {
+    let vulnerability;
     beforeEach(() => {
-      const vulnerability = makeVulnerability({
+      vulnerability = makeVulnerability({
         location: {
           crash_address: '0x602000001573',
           crash_state: 'FuzzMe\nstart\nstart+0x0\n\n',
@@ -140,6 +151,16 @@ describe('VulnerabilityDetails component', () => {
       expect(findCrashAddress().exists()).toBe(true);
       expect(findStacktraceSnippet().exists()).toBe(true);
     });
+
+    it('renders crash_state', () => {
+      expect(findCrashState().exists()).toBe(true);
+      expect(findCrashState().html()).toContain(vulnerability.location.crash_state);
+    });
+
+    it('renders crash_type', () => {
+      expect(findCrashType().exists()).toBe(true);
+      expect(findCrashType().text()).toContain(vulnerability.location.crash_type);
+    });
   });
 
   describe('with request information', () => {

locale/gitlab.pot

@@ -28716,7 +28716,13 @@ msgstr ""
 msgid "Vulnerability|Comments"
 msgstr ""
 
-msgid "Vulnerability|Crash Address"
+msgid "Vulnerability|Crash address"
+msgstr ""
+
+msgid "Vulnerability|Crash state"
+msgstr ""
+
+msgid "Vulnerability|Crash type"
 msgstr ""
 
 msgid "Vulnerability|Description"