improvement: urlencoded Request Body rendering (via #4823)

* use request body schema `required` for marking required urlencoded properties

* don't use sample schema value as a fallback

* modify property layout to mimic regular parameters

* clean up

* use default or example for iniital values

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

@@ -1,8 +1,7 @@
 import React from "react"
 import PropTypes from "prop-types"
 import ImPropTypes from "react-immutable-proptypes"
-import { getSampleSchema } from "core/utils"
+import { Map, OrderedMap, List } from "immutable"
-import { Map, OrderedMap } from "immutable"
 
 const RequestBody = ({
   requestBody,
@@ -59,8 +58,8 @@ const RequestBody = ({
     || contentType.indexOf("multipart/") === 0))
   {
     const JsonSchemaForm = getComponent("JsonSchemaForm")
-    const HighlightCode = getComponent("highlightCode")
+    const schemaForContentType = requestBody.getIn(["content", contentType, "schema"], OrderedMap())
-    const bodyProperties = requestBody.getIn(["content", contentType, "schema", "properties"], OrderedMap())
+    const bodyProperties = schemaForContentType.getIn([ "properties"], OrderedMap())
     requestBodyValue = Map.isMap(requestBodyValue) ? requestBodyValue : OrderedMap()
 
     return <div className="table-container">
@@ -68,9 +67,11 @@ const RequestBody = ({
         <tbody>
           {
             bodyProperties.map((prop, key) => {
-              const required = prop.get("required")
+              const required = schemaForContentType.get("required", List()).includes(key)
               const type = prop.get("type")
               const format = prop.get("format")
+              const currentValue = requestBodyValue.get(key)
+              const initialValue = prop.get("default") || prop.get("example") || ""
 
               const isFile = type === "string" && (format === "binary" || format === "base64")
 
@@ -89,18 +90,18 @@ const RequestBody = ({
                         </div>
                       </td>
                       <td className="col parameters-col_description">
-                        {isExecute ?
+                        { prop.get("description") }
-                        <JsonSchemaForm
+                        {isExecute ? <div><JsonSchemaForm
                           fn={fn}
                           dispatchInitialValue={!isFile}
                           schema={prop}
+                          description={key + " - " + prop.get("description")}
                           getComponent={getComponent}
-                          value={requestBodyValue.get(key) || getSampleSchema(prop)}
+                          value={currentValue === undefined ? initialValue : currentValue}
                           onChange={(value) => {
                             onChange(value, [key])
                           }}
-                          />
+                        /></div> : null }
-                        : <HighlightCode className="example" value={ getSampleSchema(prop) } />}
                       </td>
                       </tr>
             })