fix(parameters): render items format for array-type parameters (#4516)

src/core/plugins/json-schema-5/fn.js

@@ -19,7 +19,11 @@ export const hasSchemaType = (schema, type) => {
   )
 }
 
-const getType = (schema, processedSchemas = new WeakSet()) => {
+const getType = (
+  schema,
+  processedSchemas = new WeakSet(),
+  withFormat = false
+) => {
   if (schema == null) {
     return "any"
   }
@@ -30,11 +34,14 @@ const getType = (schema, processedSchemas = new WeakSet()) => {
 
   processedSchemas.add(schema)
 
-  const { type, items } = schema
+  const { type, format, items } = schema
 
   const getArrayType = () => {
     if (items) {
-      const itemsType = getType(items, processedSchemas)
+      // Inline items format (e.g. "string($uuid)") inside the array<...> label,
+      // because the array's items have no separate rendering path that would
+      // append their format. See issue #4516.
+      const itemsType = getType(items, processedSchemas, true)
       return `array<${itemsType}>`
     } else {
       return "array<any>"
@@ -44,6 +51,9 @@ const getType = (schema, processedSchemas = new WeakSet()) => {
   if (Object.hasOwn(schema, "items")) {
     return getArrayType()
   }
+  if (withFormat && type && format) {
+    return `${type}($${format})`
+  }
   return type
 }
 

test/e2e-cypress/e2e/bugs/4516.cy.js

@@ -0,0 +1,32 @@
+/**
+ * @prettier
+ */
+
+describe("UI #4516: array parameter items.format is rendered", () => {
+  beforeEach(() => {
+    cy.visit("/?url=/documents/bugs/4516.yaml")
+      .get("#operations-default-searchUsers")
+      .click()
+  })
+
+  it("renders items format for an array of strings with format uuid", () => {
+    cy.get('tr[data-param-name="targetUserIds"]')
+      .find(".parameter__type")
+      .invoke("text")
+      .should("match", /^array<string\(\$uuid\)>/)
+  })
+
+  it("renders items format for an array of integers with format int64", () => {
+    cy.get('tr[data-param-name="limits"]')
+      .find(".parameter__type")
+      .invoke("text")
+      .should("match", /^array<integer\(\$int64\)>/)
+  })
+
+  it("does not alter non-array parameter type rendering", () => {
+    cy.get('tr[data-param-name="tag"]')
+      .find(".parameter__type")
+      .invoke("text")
+      .should("match", /^string(\s|$)/)
+  })
+})

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

@@ -0,0 +1,35 @@
+swagger: "2.0"
+info:
+  description: "Swagger 2.0 spec exercising issue #4516"
+  version: "0.0.1"
+  title: "Swagger 4516 sample"
+paths:
+  /users:
+    get:
+      summary: "Search users by UUID"
+      operationId: "searchUsers"
+      parameters:
+        - in: "query"
+          name: "targetUserIds"
+          description: "List of user UUIDs to query for"
+          collectionFormat: "multi"
+          required: true
+          type: "array"
+          items:
+            type: "string"
+            format: "uuid"
+        - in: "query"
+          name: "limits"
+          description: "Pagination limits"
+          collectionFormat: "csv"
+          type: "array"
+          items:
+            type: "integer"
+            format: "int64"
+        - in: "query"
+          name: "tag"
+          description: "Plain string parameter, no format"
+          type: "string"
+      responses:
+        "200":
+          description: "OK"

test/unit/components/parameter-row.jsx

@@ -147,6 +147,67 @@ describe("<ParameterRow/>", () => {
     expect(wrapper.find(".parameter__type").length).toEqual(1)
     expect(wrapper.find(".parameter__type").text()).toEqual("boolean")
   })
+
+  it("Can render Swagger 2 array parameter type with items format (#4516)", () => {
+    const param = fromJS({
+      name: "targetUserIds",
+      in: "query",
+      type: "array",
+      collectionFormat: "multi",
+      items: {
+        type: "string",
+        format: "uuid",
+      },
+    })
+
+    const props = createProps({ param, isOAS3: false })
+    const wrapper = render(<ParameterRow {...props} />)
+
+    expect(wrapper.find(".parameter__type").length).toEqual(1)
+    expect(wrapper.find(".parameter__type").text()).toEqual(
+      "array<string($uuid)>"
+    )
+  })
+
+  it("Can render Swagger 2 array parameter type without items format", () => {
+    const param = fromJS({
+      name: "tags",
+      in: "query",
+      type: "array",
+      collectionFormat: "multi",
+      items: {
+        type: "string",
+      },
+    })
+
+    const props = createProps({ param, isOAS3: false })
+    const wrapper = render(<ParameterRow {...props} />)
+
+    expect(wrapper.find(".parameter__type").length).toEqual(1)
+    expect(wrapper.find(".parameter__type").text()).toEqual("array<string>")
+  })
+
+  it("Can render OAS3 array parameter type with items format (#4516)", () => {
+    const param = fromJS({
+      name: "targetUserIds",
+      in: "query",
+      schema: {
+        type: "array",
+        items: {
+          type: "string",
+          format: "uuid",
+        },
+      },
+    })
+
+    const props = createProps({ param, isOAS3: true })
+    const wrapper = render(<ParameterRow {...props} />)
+
+    expect(wrapper.find(".parameter__type").length).toEqual(1)
+    expect(wrapper.find(".parameter__type").text()).toEqual(
+      "array<string($uuid)>"
+    )
+  })
 })
 
 describe("bug #5573: zero default and example values", function () {

test/unit/core/plugins/json-schema-5/fn.js

@@ -0,0 +1,78 @@
+/**
+ * @prettier
+ */
+import { fromJS } from "immutable"
+
+import { getSchemaObjectTypeLabel } from "core/plugins/json-schema-5/fn"
+
+describe("json-schema-5 fn", () => {
+  describe("getSchemaObjectTypeLabel", () => {
+    it("returns the type for a primitive schema", () => {
+      const schema = fromJS({ type: "string" })
+
+      expect(getSchemaObjectTypeLabel(schema)).toEqual("string")
+    })
+
+    it("returns the type without inline format for a top-level primitive", () => {
+      // Format on a primitive top-level schema is rendered separately by the
+      // calling component, so the label itself should not embed it.
+      const schema = fromJS({ type: "string", format: "uuid" })
+
+      expect(getSchemaObjectTypeLabel(schema)).toEqual("string")
+    })
+
+    it("returns array<itemsType> when items has no format", () => {
+      const schema = fromJS({
+        type: "array",
+        items: { type: "string" },
+      })
+
+      expect(getSchemaObjectTypeLabel(schema)).toEqual("array<string>")
+    })
+
+    it("inlines items format inside the array<...> label (#4516)", () => {
+      const schema = fromJS({
+        type: "array",
+        items: { type: "string", format: "uuid" },
+      })
+
+      expect(getSchemaObjectTypeLabel(schema)).toEqual("array<string($uuid)>")
+    })
+
+    it("inlines items format for integer arrays (#4516)", () => {
+      const schema = fromJS({
+        type: "array",
+        items: { type: "integer", format: "int64" },
+      })
+
+      expect(getSchemaObjectTypeLabel(schema)).toEqual("array<integer($int64)>")
+    })
+
+    it("inlines items format for nested arrays (#4516)", () => {
+      const schema = fromJS({
+        type: "array",
+        items: {
+          type: "array",
+          items: { type: "string", format: "uuid" },
+        },
+      })
+
+      expect(getSchemaObjectTypeLabel(schema)).toEqual(
+        "array<array<string($uuid)>>"
+      )
+    })
+
+    it("inlines items format for the issue's repro spec (#4516)", () => {
+      // Excerpt from https://github.com/swagger-api/swagger-ui/issues/4516
+      const schema = fromJS({
+        items: { format: "uuid", type: "string" },
+        in: "query",
+        name: "targetUserIds",
+        collectionFormat: "multi",
+        type: "array",
+      })
+
+      expect(getSchemaObjectTypeLabel(schema)).toEqual("array<string($uuid)>")
+    })
+  })
+})