fix: missing commas in response header values #6183 (#6515)

Author: Lucia Sarni

src/core/components/live-response.jsx

@@ -65,7 +65,8 @@ export default class LiveResponse extends React.Component {
     const Curl = getComponent("curl")
     const ResponseBody = getComponent("responseBody")
     const returnObject = headersKeys.map(key => {
-      return <span className="headerline" key={key}> {key}: {headers[key]} </span>
+      var joinedHeaders = Array.isArray(headers[key]) ? headers[key].join() : headers[key]
+      return <span className="headerline" key={key}> {key}: {joinedHeaders} </span>
     })
     const hasHeaders = returnObject.length !== 0
 

test/e2e-cypress/static/documents/bugs/6183.yaml

@@ -0,0 +1,37 @@
+swagger: "2.0"
+info:
+  title: Response headers test
+  version: 1.0.0
+host: httpbin.org
+schemes: [https]
+paths:
+  /response-headers:
+    get:
+      summary: Run the request using the default parameter values
+      parameters:
+        - in: query
+          name: X-Header1
+          type: string
+          x-example: 'value1,value2'
+          required: true
+        - in: query
+          name: X-Header2
+          type: string
+          x-example: 'value3, value4'
+          required: true
+        - in: query
+          name: X-Header3
+          type: array
+          items:
+            type: string
+          x-example: [value5, value6]
+          collectionFormat: multi
+          required: true
+        - in: query
+          name: Access-Control-Expose-Headers
+          type: string
+          x-example: 'X-Header1, X-Header2, X-Header3, Access-Control-Expose-Headers'
+          required: true
+      responses:
+        200:
+          description: ok

test/e2e-cypress/tests/bugs/6183.js

@@ -0,0 +1,21 @@
+describe("When trying it out", () => {
+  it("should render the response headers as comma separated lists", () => {
+    cy.visit("/?url=/documents/bugs/6183.yaml")
+      .get("#operations-default-get_response_headers")
+      .click()
+      .get(".try-out__btn")
+      .click()
+      .get(".btn.execute")
+      .click()
+      .wait(1000)
+      .get(".response-col_description .microlight")
+      .find(("span:contains(\"value1,value2\")"))
+      .should("exist")
+      .get(".response-col_description .microlight")
+      .find(("span:contains(\"value3,value4\")"))
+      .should("exist")
+      .get(".response-col_description .microlight")
+      .find(("span:contains(\"value5,value6\")"))
+      .should("exist")
+  })
+})