feat(plugins): Show multipart/form-data example and schema

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

@@ -129,11 +129,12 @@ const RequestBody = ({
 
   const isObjectContent = fn.hasSchemaType(mediaTypeValue.get("schema"), "object")
 
+  const isContentTypeMultipart = contentType.indexOf("multipart/") === 0
   if (
     isObjectContent &&
     (
       contentType === "application/x-www-form-urlencoded" ||
-      contentType.indexOf("multipart/") === 0
+      isContentTypeMultipart
     ) &&
     schemaForMediaType.get("properties", OrderedMap()).size > 0
   ) {
@@ -203,6 +204,10 @@ const RequestBody = ({
                 }}
               />
 
+              const schemaPartForKey = mediaTypeValue
+                            .get("schema")
+                            .update("properties", (properties) => properties.filter((v, k) => k === key))
+
               return <tr key={key} className="parameters" data-property-name={key}>
               <td className="parameters-col_name">
                 <div className={required ? "parameter__name required" : "parameter__name"}>
@@ -242,6 +247,23 @@ const RequestBody = ({
                     />
                   )}
                 </div> : null }
+                {!isExecute && isContentTypeMultipart && objectType === "object" ? (
+                  <ModelExample
+                    getComponent={getComponent}
+                    getConfigs={getConfigs}
+                    specSelectors={specSelectors}
+                    expandDepth={1}
+                    isExecute={false}
+                    schema={schemaPartForKey}
+                    specPath={specPath.push("content", contentType)}
+                    example={
+                      <HighlightCode className="body-param__example" language={"json"}>
+                        {initialValue}
+                      </HighlightCode>
+                    }
+                    includeWriteOnly={true}
+                  />
+                ) : null }
               </td>
               </tr>
             })

test/e2e-cypress/e2e/features/oas3-request-body-default-views.cy.js

@@ -12,5 +12,29 @@ describe("OAS3 default views", () => {
         .get(".parameters-col_description textarea")
         .should("contains.text", "\"stuff\": \"string\"")
     })
+
+    it("should display calculated object string as example (#5169)", () => {
+      cy.visit(
+        "/?url=/documents/features/request-body/multipart/default-views.yaml",
+      )
+        .get("#operations-default-post_test")
+        .click()
+        // Show example
+        .get(".parameters-col_description code")
+        .should("contains.text", "\"stuff\": \"string\"")
+        // Switch to schema
+        .get(".parameters-col_description")
+        .contains("Schema")
+        .click()
+        .get(".parameters-col_description")
+        .should("contains.text", "parameters")
+        .should("not.contain.text", "file")
+        .should("contains.text", "TestBody")
+        // Expand Try It Out to hide example
+        .get(".try-out__btn")
+        .click()
+        .get(".parameters-col_description textarea")
+        .should("contains.text", "\"stuff\": \"string\"")
+    })
   })
 })