Merge branch...

Merge branch '333894-generic-vulnerability-report-file-location-component-does-not-render-on-pipeline-security' into 'master'

Resolve "Generic Vulnerability Report: `file-location` component does not render on pipeline-security view"

See merge request gitlab-org/gitlab!64278

ee/app/assets/javascripts/security_dashboard/store/modules/vulnerabilities/actions.js

 import _ from 'lodash';
 import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
-import { parseIntPagination, normalizeHeaders } from '~/lib/utils/common_utils';
+import {
+  parseIntPagination,
+  normalizeHeaders,
+  convertObjectPropsToCamelCase,
+} from '~/lib/utils/common_utils';
 import download from '~/lib/utils/downloader';
 import { s__, n__, sprintf } from '~/locale';
 import toast from '~/vue_shared/plugins/global_toast';
@@ -72,11 +76,16 @@ export const requestVulnerabilities = ({ commit }) => {
 export const receiveVulnerabilitiesSuccess = ({ commit }, { headers, data }) => {
   const normalizedHeaders = normalizeHeaders(headers);
   const pageInfo = parseIntPagination(normalizedHeaders);
-  // Vulnerabilities on pipelines don't have IDs.
-  // We need to add dummy IDs here to avoid rendering issues.
+
   const vulnerabilities = data.map((vulnerability) => ({
     ...vulnerability,
+    // Vulnerabilities on pipelines don't have IDs.
+    // We need to add dummy IDs here to avoid rendering issues.
     id: vulnerability.id || _.uniqueId('client_'),
+    // The generic report component expects all fields within `vulnerability.details` to be in camelCase
+    ...(vulnerability.details && {
+      details: convertObjectPropsToCamelCase(vulnerability.details, { deep: true }),
+    }),
   }));
 
   commit(types.RECEIVE_VULNERABILITIES_SUCCESS, { pageInfo, vulnerabilities });

ee/spec/frontend/security_dashboard/store/modules/vulnerabilities/actions_spec.js

@@ -187,6 +187,22 @@ describe('vulnerabilities actions', () => {
         },
       ]);
     });
+
+    it('should transform each details property to camelCase', () => {
+      const dataWithDetails = [{ id: '1', details: { prop_one: '1' } }];
+
+      return testAction(
+        actions.receiveVulnerabilitiesSuccess,
+        { headers, data: dataWithDetails },
+        state,
+        [
+          {
+            type: types.RECEIVE_VULNERABILITIES_SUCCESS,
+            payload: { pageInfo, vulnerabilities: [{ id: '1', details: { propOne: '1' } }] },
+          },
+        ],
+      );
+    });
   });
 
   describe('receiveVulnerabilitiesError', () => {