fix: avoid filling parameter input with invalid array initial values

src/core/components/parameter-row.jsx

@@ -5,6 +5,7 @@ import ImPropTypes from "react-immutable-proptypes"
 import win from "core/window"
 import { getExtensions, getCommonExtensions, numberToString, stringify, isEmptyValue } from "core/utils"
 import getParameterSchema from "core/utils/get-parameter-schema.js"
+import { parseParameterArrayValue } from "core/utils/parse-parameter-array-value"
 
 export default class ParameterRow extends Component {
   static propTypes = {
@@ -95,9 +96,10 @@ export default class ParameterRow extends Component {
 
   setDefaultValue = () => {
     let { specSelectors, pathMethod, rawParam, oas3Selectors, fn } = this.props
+    const isOAS3 = specSelectors.isOAS3()
 
     const paramWithMeta = specSelectors.parameterWithMetaByIdentity(pathMethod, rawParam) || Map()
-    let { schema } = getParameterSchema(paramWithMeta, { isOAS3: specSelectors.isOAS3() })
+    let { schema } = getParameterSchema(paramWithMeta, { isOAS3 })
     const parameterMediaType = paramWithMeta
       .get("content", Map())
       .keySeq()
@@ -125,7 +127,7 @@ export default class ParameterRow extends Component {
           : paramWithMeta.getIn(["schema", "example"]) !== undefined
           ? paramWithMeta.getIn(["schema", "example"])
           : (schema && schema.getIn(["default"]))
-      } else if (specSelectors.isOAS3()) {
+      } else if (isOAS3) {
         schema = this.composeJsonSchema(schema)
 
         const currentExampleKey = oas3Selectors.activeExamplesMember(...pathMethod, "parameters", this.getParamKey())
@@ -154,6 +156,15 @@ export default class ParameterRow extends Component {
 
       const schemaObjectType = fn.getSchemaObjectType(schema)
       const schemaItemsType = fn.getSchemaObjectType(schema?.get("items"))
+      const hasMultipleTypes = List.isList(schema?.get("type"))
+
+      // Discard invalid array initial values (non-array, non-stringified-array)
+      if (isOAS3 && schemaObjectType === "array" && !hasMultipleTypes && initialValue !== undefined) {
+        const parsedValue = parseParameterArrayValue(initialValue)
+
+        this.onChangeWrapper(parsedValue)
+        return
+      }
 
       if(initialValue !== undefined) {
         this.onChangeWrapper(initialValue)
@@ -181,17 +192,37 @@ export default class ParameterRow extends Component {
         && generatedSampleValue
         && !paramWithMeta.get("examples")
       ) {
-        this.onChangeWrapper(
-          List.isList(generatedSampleValue) ? (
-            generatedSampleValue
-          ) : (
-            List(JSON.parse(generatedSampleValue))
-          )
-        )
+        const parsedValue = parseParameterArrayValue(generatedSampleValue)
+
+        this.onChangeWrapper(parsedValue)
       }
     }
   }
 
+
+
+  onExampleValueUpdate = (value) => {
+    const { specSelectors, pathMethod, rawParam, fn } = this.props
+
+    const paramWithMeta = specSelectors.parameterWithMetaByIdentity(pathMethod, rawParam) || Map()
+    let { schema } = getParameterSchema(paramWithMeta, { isOAS3: true })
+
+    if (schema) {
+      schema = this.composeJsonSchema(schema)
+    }
+
+    const schemaObjectType = fn.getSchemaObjectType(schema)
+    const hasMultipleTypes = List.isList(schema?.get("type"))
+
+    if (schemaObjectType === "array" && !hasMultipleTypes) {
+      const parsedValue = parseParameterArrayValue(value)
+
+      this.onChangeWrapper(parsedValue)
+    } else {
+      this.onChangeWrapper(value)
+    }
+  }
+
   getParamKey() {
     const { param } = this.props
 
@@ -364,7 +395,7 @@ export default class ParameterRow extends Component {
                 <ExamplesSelectValueRetainer
                   examples={param.get("examples")}
                   onSelect={this._onExampleSelect}
-                  updateValue={this.onChangeWrapper}
+                  updateValue={this.onExampleValueUpdate}
                   getComponent={getComponent}
                   defaultToFirstExample={true}
                   currentKey={oas3Selectors.activeExamplesMember(...pathMethod, "parameters", this.getParamKey())}

src/core/utils/parse-parameter-array-value.js

@@ -0,0 +1,23 @@
+/**
+ * @prettier
+ */
+
+import { List } from "immutable"
+
+export const parseParameterArrayValue = (value) => {
+  if (List.isList(value)) {
+    return value
+  }
+
+  if (typeof value !== "string") {
+    return null
+  }
+
+  try {
+    const parsed = JSON.parse(value)
+
+    return Array.isArray(parsed) ? List(parsed) : null
+  } catch {
+    return null
+  }
+}

test/e2e-cypress/e2e/features/try-it-out-schema-type-array-with-example.cy.js

@@ -0,0 +1,129 @@
+/**
+ * @prettier
+ */
+
+describe("Try it out: schema type array with example or parameter examples", () => {
+  it("shows a validation error message when field is required and example is a string", () => {
+    cy.visit(
+      "?tryItOutEnabled=true&url=/documents/features/try-it-out-schema-type-array-with-example.yaml"
+    )
+      .get("#operations-default-get_requiredStringExample")
+      .click()
+      .get(".btn.execute")
+      .click()
+      .get(".validation-errors")
+      .should("exist")
+  })
+
+  it("executes with the initial value when field is not required and example is an array", () => {
+    cy.visit(
+      "?tryItOutEnabled=true&url=/documents/features/try-it-out-schema-type-array-with-example.yaml"
+    )
+      .get("#operations-default-get_arrayExample")
+      .click()
+      .get(".btn.execute")
+      .click()
+      .get(".validation-errors")
+      .should("not.exist")
+      .get(".curl.microlight")
+      .should(
+        "contain",
+        "'http://localhost:3230/arrayExample?test=test1&test=test2'"
+      )
+  })
+
+  it("executes with the initial value when field is not required and example is a stringified array", () => {
+    cy.visit(
+      "?tryItOutEnabled=true&url=/documents/features/try-it-out-schema-type-array-with-example.yaml"
+    )
+      .get("#operations-default-get_stringifiedArrayExample")
+      .click()
+      .get(".btn.execute")
+      .click()
+      .get(".validation-errors")
+      .should("not.exist")
+      .get(".curl.microlight")
+      .should(
+        "contain",
+        "'http://localhost:3230/stringifiedArrayExample?test=test1&test=test2'"
+      )
+  })
+
+  it("executes without the initial value when field is not required and example is a string", () => {
+    cy.visit(
+      "?tryItOutEnabled=true&url=/documents/features/try-it-out-schema-type-array-with-example.yaml"
+    )
+      .get("#operations-default-get_stringExample")
+      .click()
+      .get(".btn.execute")
+      .click()
+      .get(".validation-errors")
+      .should("not.exist")
+      .get(".curl.microlight")
+      .should("contain", "'http://localhost:3230/stringExample'")
+  })
+
+  it("executes with the initial value when field is not required and parameter examples are arrays", () => {
+    cy.visit(
+      "?tryItOutEnabled=true&url=/documents/features/try-it-out-schema-type-array-with-example.yaml"
+    )
+      .get("#operations-default-get_parameterArrayExamples")
+      .click()
+      .get(".btn.execute")
+      .click()
+      .get(".validation-errors")
+      .should("not.exist")
+      .get(".curl.microlight")
+      .should(
+        "contain",
+        "'http://localhost:3230/parameterArrayExamples?test=test1&test=test2'"
+      )
+  })
+
+  it("executes with the initial value when field is not required and parameter examples are stringified arrays", () => {
+    cy.visit(
+      "?tryItOutEnabled=true&url=/documents/features/try-it-out-schema-type-array-with-example.yaml"
+    )
+      .get("#operations-default-get_parameterStringifiedArrayExamples")
+      .click()
+      .get(".btn.execute")
+      .click()
+      .get(".validation-errors")
+      .should("not.exist")
+      .get(".curl.microlight")
+      .should(
+        "contain",
+        "'http://localhost:3230/parameterStringifiedArrayExamples?test=test1&test=test2'"
+      )
+  })
+
+  it("executes without the initial value when field is not required and parameter examples are strings", () => {
+    cy.visit(
+      "?tryItOutEnabled=true&url=/documents/features/try-it-out-schema-type-array-with-example.yaml"
+    )
+      .get("#operations-default-get_parameterStringExamples")
+      .click()
+      .get(".btn.execute")
+      .click()
+      .get(".validation-errors")
+      .should("not.exist")
+      .get(".curl.microlight")
+      .should("contain", "'http://localhost:3230/parameterStringExamples'")
+  })
+
+  it("executes without the chosen examples value when field is not required and parameter examples are strings", () => {
+    cy.visit(
+      "?tryItOutEnabled=true&url=/documents/features/try-it-out-schema-type-array-with-example.yaml"
+    )
+      .get("#operations-default-get_parameterStringExamples")
+      .click()
+      .get(".examples-select-element")
+      .select("example2")
+      .get(".btn.execute")
+      .click()
+      .get(".validation-errors")
+      .should("not.exist")
+      .get(".curl.microlight")
+      .should("contain", "'http://localhost:3230/parameterStringExamples'")
+  })
+})