Fix Vuln details page request/response

* https://gitlab.com/gitlab-org/gitlab/-/merge_requests/47966
* Fix bug due to field names changed to camelCase

Add bug fix change log

* Run prettier

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

@@ -143,7 +143,7 @@ export default {
         : '';
     },
     constructResponse(response) {
-      const { body, status_code: statusCode, reason_phrase: reasonPhrase, headers = [] } = response;
+      const { body, statusCode, reasonPhrase, headers = [] } = response;
       const headerLines = this.getHeadersAsCodeBlockLines(headers);
 
       return statusCode && reasonPhrase && headerLines

ee/changelogs/unreleased/fix-vuln-details-request-response-fields.yml

+---
+title: Fix Vuln details page request/response sections not appearing
+merge_request: 49166
+author:
+type: fixed

ee/spec/frontend/vulnerabilities/details_spec.js

@@ -241,29 +241,29 @@ describe('Vulnerability Details', () => {
     });
 
     it.each`
-      response                                                                                                           | expectedData
-      ${null}                                                                                                            | ${null}
-      ${{}}                                                                                                              | ${null}
-      ${{ headers: TEST_HEADERS }}                                                                                       | ${null}
-      ${{ headers: TEST_HEADERS, body: '[{"user_id":1,}]' }}                                                             | ${null}
-      ${{ headers: TEST_HEADERS, body: '[{"user_id":1,}]', status_code: '500' }}                                         | ${null}
-      ${{ headers: TEST_HEADERS, body: '[{"user_id":1,}]', status_code: '500', reason_phrase: 'INTERNAL SERVER ERROR' }} | ${[EXPECT_RESPONSE]}
+      response                                                                                                         | expectedData
+      ${null}                                                                                                          | ${null}
+      ${{}}                                                                                                            | ${null}
+      ${{ headers: TEST_HEADERS }}                                                                                     | ${null}
+      ${{ headers: TEST_HEADERS, body: '[{"user_id":1,}]' }}                                                           | ${null}
+      ${{ headers: TEST_HEADERS, body: '[{"user_id":1,}]', statusCode: '500' }}                                        | ${null}
+      ${{ headers: TEST_HEADERS, body: '[{"user_id":1,}]', statusCode: '500', reasonPhrase: 'INTERNAL SERVER ERROR' }} | ${[EXPECT_RESPONSE]}
     `('shows response data for $response', ({ response, expectedData }) => {
       createWrapper({ response });
       expect(getSectionData('response')).toEqual(expectedData);
     });
 
     it.each`
-      supportingMessages                                                                                                                                           | expectedData
-      ${null}                                                                                                                                                      | ${null}
-      ${[]}                                                                                                                                                        | ${null}
-      ${[{}]}                                                                                                                                                      | ${null}
-      ${[{}, { response: {} }]}                                                                                                                                    | ${null}
-      ${[{}, { response: { headers: TEST_HEADERS } }]}                                                                                                             | ${null}
-      ${[{}, { response: { headers: TEST_HEADERS, body: '[{"user_id":1,}]' } }]}                                                                                   | ${null}
-      ${[{}, { response: { headers: TEST_HEADERS, body: '[{"user_id":1,}]', status_code: '200' } }]}                                                               | ${null}
-      ${[{}, { response: { headers: TEST_HEADERS, body: '[{"user_id":1,}]', status_code: '200', reason_phrase: 'OK' } }]}                                          | ${null}
-      ${[{}, { name: SUPPORTING_MESSAGE_TYPES.RECORDED, response: { headers: TEST_HEADERS, body: '[{"user_id":1,}]', status_code: '200', reason_phrase: 'OK' } }]} | ${[EXPECT_RECORDED_RESPONSE]}
+      supportingMessages                                                                                                                                         | expectedData
+      ${null}                                                                                                                                                    | ${null}
+      ${[]}                                                                                                                                                      | ${null}
+      ${[{}]}                                                                                                                                                    | ${null}
+      ${[{}, { response: {} }]}                                                                                                                                  | ${null}
+      ${[{}, { response: { headers: TEST_HEADERS } }]}                                                                                                           | ${null}
+      ${[{}, { response: { headers: TEST_HEADERS, body: '[{"user_id":1,}]' } }]}                                                                                 | ${null}
+      ${[{}, { response: { headers: TEST_HEADERS, body: '[{"user_id":1,}]', status_code: '200' } }]}                                                             | ${null}
+      ${[{}, { response: { headers: TEST_HEADERS, body: '[{"user_id":1,}]', status_code: '200', reason_phrase: 'OK' } }]}                                        | ${null}
+      ${[{}, { name: SUPPORTING_MESSAGE_TYPES.RECORDED, response: { headers: TEST_HEADERS, body: '[{"user_id":1,}]', statusCode: '200', reasonPhrase: 'OK' } }]} | ${[EXPECT_RECORDED_RESPONSE]}
     `('shows response data for $supporting_messages', ({ supportingMessages, expectedData }) => {
       createWrapper({ supportingMessages });
       expect(getSectionData('recorded-response')).toEqual(expectedData);