Simplify vulnerability destructuring logic

- use convertObjectPropsToCamelCase to convert
  snake_case to camelCase
- update details page to use the new data model

ee/app/assets/javascripts/pages/projects/security/vulnerabilities/show/index.js

 import Vue from 'vue';
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import HeaderApp from 'ee/vulnerabilities/components/header.vue';
 import DetailsApp from 'ee/vulnerabilities/components/details.vue';
 import FooterApp from 'ee/vulnerabilities/components/footer.vue';
@@ -22,12 +23,11 @@ function createHeaderApp() {
 
 function createDetailsApp() {
   const el = document.getElementById('js-vulnerability-details');
-  const vulnerability = JSON.parse(el.dataset.vulnerabilityJson);
-  const finding = JSON.parse(el.dataset.findingJson);
+  const vulnerability = JSON.parse(el.dataset.vulnerability);
 
   return new Vue({
     el,
-    render: h => h(DetailsApp, { props: { vulnerability, finding } }),
+    render: h => h(DetailsApp, { props: { vulnerability } }),
   });
 }
 
@@ -39,15 +39,16 @@ function createFooterApp() {
   }
 
   const {
-    vulnerability_feedback_help_path: vulnerabilityFeedbackHelpPath,
-    has_mr: hasMr,
-    discussions_url: discussionsUrl,
+    vulnerabilityFeedbackHelpPath,
+    hasMr,
+    discussionsUrl,
     state,
-    issue_feedback: feedback,
+    issueFeedback: feedback,
+    notesUrl,
     project,
     remediations,
     solution,
-  } = JSON.parse(el.dataset.vulnerability);
+  } = convertObjectPropsToCamelCase(JSON.parse(el.dataset.vulnerability));
 
   const remediation = remediations?.length ? remediations[0] : null;
   const hasDownload = Boolean(

ee/app/assets/javascripts/vulnerabilities/components/details.vue

@@ -11,14 +11,10 @@ export default {
       type: Object,
       required: true,
     },
-    finding: {
-      type: Object,
-      required: true,
-    },
   },
   computed: {
     location() {
-      return this.finding.location || {};
+      return this.vulnerability.location || {};
     },
     scanner() {
       return this.finding.scanner || {};
@@ -60,7 +56,7 @@ export default {
   <div class="md" data-qa-selector="vulnerability_details">
     <h1 class="mt-3 mb-2 border-bottom-0" data-testid="title">{{ vulnerability.title }}</h1>
     <h3 class="mt-0">{{ __('Description') }}</h3>
-    <p data-testid="description">{{ finding.description }}</p>
+    <p data-testid="description">{{ vulnerability.description }}</p>
 
     <ul>
       <detail-item :sprintf-message="__('%{labelStart}Severity:%{labelEnd} %{severity}')">
@@ -125,10 +121,10 @@ export default {
       </ul>
     </template>
 
-    <template v-if="finding.links && finding.links.length">
+    <template v-if="vulnerability.links && vulnerability.links.length">
       <h3>{{ __('Links') }}</h3>
       <ul>
-        <li v-for="link in finding.links" :key="link.url">
+        <li v-for="link in vulnerability.links" :key="link.url">
           <gl-link
             :href="link.url"
             data-testid="link"
@@ -142,10 +138,10 @@ export default {
       </ul>
     </template>
 
-    <template v-if="finding.identifiers && finding.identifiers.length">
+    <template v-if="vulnerability.identifiers && vulnerability.identifiers.length">
       <h3>{{ __('Identifiers') }}</h3>
       <ul>
-        <li v-for="identifier in finding.identifiers" :key="identifier.url">
+        <li v-for="identifier in vulnerability.identifiers" :key="identifier.url">
           <gl-link :href="identifier.url" data-testid="identifier" target="_blank">
             {{ identifier.name }}
           </gl-link>

ee/spec/frontend/vulnerabilities/details_spec.js

@@ -11,16 +11,12 @@ describe('Vulnerability Details', () => {
     severity: 'bad severity',
     confidence: 'high confidence',
     report_type: 'nice report_type',
+    description: 'vulnerability description',
   };
 
-  const finding = {
-    description: 'finding description',
-  };
-
-  const createWrapper = findingOverrides => {
+  const createWrapper = vulnerabilityOverrides => {
     const propsData = {
-      vulnerability,
-      finding: { ...finding, ...findingOverrides },
+      vulnerability: { ...vulnerability, ...vulnerabilityOverrides },
     };
 
     wrapper = mount(VulnerabilityDetails, { propsData });
@@ -37,7 +33,7 @@ describe('Vulnerability Details', () => {
   it('shows the properties that should always be shown', () => {
     createWrapper();
     expect(getText('title')).toBe(vulnerability.title);
-    expect(getText('description')).toBe(finding.description);
+    expect(getText('description')).toBe(vulnerability.description);
     expect(wrapper.find(SeverityBadge).props('severity')).toBe(vulnerability.severity);
     expect(getText('reportType')).toBe(`Report Type: ${vulnerability.report_type}`);
 
@@ -62,12 +58,12 @@ describe('Vulnerability Details', () => {
     expect(getText('namespace')).toBe(`Namespace: linux`);
   });
 
-  it('shows the finding class if it exists', () => {
+  it('shows the vulnerability class if it exists', () => {
     createWrapper({ location: { file: 'file', class: 'class name' } });
     expect(getText('class')).toBe(`Class: class name`);
   });
 
-  it('shows the finding method if it exists', () => {
+  it('shows the vulnerability method if it exists', () => {
     createWrapper({ location: { file: 'file', method: 'method name' } });
     expect(getText('method')).toBe(`Method: method name`);
   });
@@ -89,7 +85,7 @@ describe('Vulnerability Details', () => {
     });
   });
 
-  it('shows the finding identifiers if they exist', () => {
+  it('shows the vulnerability identifiers if they exist', () => {
     createWrapper({
       identifiers: [{ url: '0', name: '00' }, { url: '1', name: '11' }, { url: '2', name: '22' }],
     });