fix: provide JSON editor for x-www-form-urlencoded bodies lacking properties (via #5180)

Author: shockey

src/core/plugins/oas3/components/request-body.jsx

@@ -30,7 +30,8 @@ const RequestBody = ({
   const requestBodyContent = (requestBody && requestBody.get("content")) || new OrderedMap()
   contentType = contentType || requestBodyContent.keySeq().first()
 
-  const mediaTypeValue = requestBodyContent.get(contentType)
+  const mediaTypeValue = requestBodyContent.get(contentType, OrderedMap())
+  const schemaForMediaType = mediaTypeValue.get("schema", OrderedMap())
 
   if(!mediaTypeValue) {
     return null
@@ -55,15 +56,17 @@ const RequestBody = ({
     return <Input type={"file"} onChange={handleFile} />
   }
 
-  if(
+  if (
     isObjectContent &&
-    (contentType === "application/x-www-form-urlencoded"
-    || contentType.indexOf("multipart/") === 0))
-  {
+    (
+      contentType === "application/x-www-form-urlencoded" ||
+      contentType.indexOf("multipart/") === 0
+    ) &&
+    schemaForMediaType.get("properties", OrderedMap()).size > 0
+  ) {
     const JsonSchemaForm = getComponent("JsonSchemaForm")
     const ParameterExt = getComponent("ParameterExt")
-    const schemaForContentType = requestBody.getIn(["content", contentType, "schema"], OrderedMap())
-    const bodyProperties = schemaForContentType.getIn([ "properties"], OrderedMap())
+    const bodyProperties = schemaForMediaType.get("properties", OrderedMap())
     requestBodyValue = Map.isMap(requestBodyValue) ? requestBodyValue : OrderedMap()
 
     return <div className="table-container">
@@ -75,7 +78,7 @@ const RequestBody = ({
           {
             bodyProperties.map((prop, key) => {
               let commonExt = showCommonExtensions ? getCommonExtensions(prop) : null
-              const required = schemaForContentType.get("required", List()).includes(key)
+              const required = schemaForMediaType.get("required", List()).includes(key)
               const type = prop.get("type")
               const format = prop.get("format")
               const description = prop.get("description")

src/core/plugins/oas3/wrap-components/parameters.jsx

@@ -171,7 +171,7 @@ class Parameters extends Component {
         </div> : "" }
         {
           isOAS3() && requestBody && this.state.parametersVisible &&
-          <div className="opblock-section">
+          <div className="opblock-section opblock-section-request-body">
             <div className="opblock-section-header">
               <h4 className={`opblock-title parameter__name ${requestBody.get("required") && "required"}`}>Request body</h4>
               <label>

test/e2e-cypress/static/documents/bugs/5072/additional.yaml

@@ -0,0 +1,35 @@
+openapi: "3.0.0"
+info:
+  description: "A sample API for "
+  version: "1.0.0"
+  title: "Sample"
+  contact:
+    name: ""
+    url: "http://website.com"
+    email: "[email protected]"
+paths:
+  /:
+    post:
+      summary: Create/modify object
+      operationId: postObject
+      parameters:
+        - name: filterParams
+          in: query
+          description: Additional filter fields
+          required: false
+          schema:
+            type: object
+      requestBody:
+        content:
+          application/x-www-form-urlencoded:
+            schema:
+              type: object
+              additionalProperties:
+                type: string
+      responses:
+        '200':
+          description: Status message
+          content:
+            application/json:
+              schema:
+                  type: object

test/e2e-cypress/static/documents/bugs/5072/empty.yaml

@@ -0,0 +1,33 @@
+openapi: "3.0.0"
+info:
+  description: "A sample API for "
+  version: "1.0.0"
+  title: "Sample"
+  contact:
+    name: ""
+    url: "http://website.com"
+    email: "[email protected]"
+paths:
+  /:
+    post:
+      summary: Create/modify object
+      operationId: postObject
+      parameters:
+        - name: filterParams
+          in: query
+          description: Additional filter fields
+          required: false
+          schema:
+            type: object
+      requestBody:
+        content:
+          application/x-www-form-urlencoded:
+            schema:
+              type: object  
+      responses:
+        '200':
+          description: Status message
+          content:
+            application/json:
+              schema:
+                  type: object

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

@@ -0,0 +1,22 @@
+describe("#5072: x-www-form-urlencoded request body input when `properties` is missing", () => {
+  it("should provide a JSON input for an empty object schema", () => {
+    cy
+      .visit("?url=/documents/bugs/5072/empty.yaml")
+      .get("#operations-default-postObject")
+      .click()
+      .get(".try-out__btn")
+      .click()
+      .get(`.opblock-section-request-body textarea`)
+      .should("have.value", "{}")
+  })
+  it("should provide a JSON input for an additionalProperties object schema", () => {
+    cy
+      .visit("?url=/documents/bugs/5072/additional.yaml")
+      .get("#operations-default-postObject")
+      .click()
+      .get(".try-out__btn")
+      .click()
+      .get(`.opblock-section-request-body textarea`)
+      .contains(`"additionalProp1": "string"`)
+  })
+})