add binary media type support to request body

swagger-api · May 26, 2018 · 640f70d · 640f70d
1 parent c5fb1a2
commit 640f70d
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 3 deletions.
diff --git a/src/core/components/parameter-row.jsx b/src/core/components/parameter-row.jsx
@@ -30,7 +30,7 @@ export default class ParameterRow extends Component {
     let { isOAS3 } = specSelectors
 
     let example = param.get("example")
-    let parameter = specSelectors.parameterWithMeta(pathMethod, param.get("name"), param.get("in"))
+    let parameter = specSelectors.parameterWithMeta(pathMethod, param.get("name"), param.get("in")) || param
     let enumValue
 
     if(isOAS3()) {
@@ -156,7 +156,7 @@ export default class ParameterRow extends Component {
     }
 
     return (
-      <tr>
+      <tr className="parameters">
         <td className="col parameters-col_name">
           <div className={required ? "parameter__name required" : "parameter__name"}>
             { param.get("name") }

diff --git a/src/core/plugins/oas3/components/request-body.jsx b/src/core/plugins/oas3/components/request-body.jsx
@@ -1,10 +1,12 @@
 import React from "react"
 import PropTypes from "prop-types"
 import ImPropTypes from "react-immutable-proptypes"
-import { OrderedMap } from "immutable"
+import { getSampleSchema } from "core/utils"
+import Im, { Map, OrderedMap, List } from "immutable"
 
 const RequestBody = ({
   requestBody,
+  requestBodyValue,
   getComponent,
   getConfigs,
   specSelectors,
@@ -13,6 +15,10 @@ const RequestBody = ({
   specPath,
   onChange
 }) => {
+  const handleFile = (e) => {
+    onChange(e.target.files[0])
+  }
+
   const Markdown = getComponent("Markdown")
   const ModelExample = getComponent("modelExample")
   const RequestBodyEditor = getComponent("RequestBodyEditor")
@@ -23,10 +29,80 @@ const RequestBody = ({
 
   const mediaTypeValue = requestBodyContent.get(contentType)
 
+  const isObjectContent = mediaTypeValue.getIn(["schema", "type"]) === "object"
+
   if(!mediaTypeValue) {
     return null
   }
 
+  if(contentType === "application/octet-stream") {
+    const Input = getComponent("Input")
+
+    if(!isExecute) {
+      return <i>
+        Example values are not available for <code>application/octet-stream</code> media types.
+      </i>
+    }
+
+    return <Input type={"file"} onChange={handleFile} />
+  }
+
+  if(
+    isObjectContent &&
+    (contentType === "application/x-www-form-urlencoded"
+    || contentType.indexOf("multipart/") === 0))
+  {
+    const JsonSchemaForm = getComponent("JsonSchemaForm")
+    const HighlightCode = getComponent("highlightCode")
+    const bodyProperties = requestBody.getIn(["content", contentType, "schema", "properties"], OrderedMap())
+    requestBodyValue = Map.isMap(requestBodyValue) ? requestBodyValue : OrderedMap()
+
+    return <div className="table-container">
+      <table>
+        <tbody>
+          {
+            bodyProperties.map((prop, key) => {
+              const required = prop.get("required")
+              const type = prop.get("type")
+              const format = prop.get("format")
+
+              const isFile = type === "string" && (format === "binary" || format === "base64")
+
+              return <tr key={key} className="parameters">
+                <td className="col parameters-col_name">
+                        <div className={required ? "parameter__name required" : "parameter__name"}>
+                          { key }
+                          { !required ? null : <span style={{color: "red"}}>&nbsp;*</span> }
+                        </div>
+                        <div className="parameter__type">
+                          { type }
+                          { format && <span className="prop-format">(${format})</span>}
+                        </div>
+                        <div className="parameter__deprecated">
+                          { prop.get("deprecated") ? "deprecated": null }
+                        </div>
+                      </td>
+                      <td className="col parameters-col_description">
+                        {isExecute ?
+                        <JsonSchemaForm
+                          dispatchInitialValue={!isFile}
+                          schema={prop}
+                          getComponent={getComponent}
+                          value={requestBodyValue.get(key) || getSampleSchema(prop)}
+                          onChange={(value) => {
+                            onChange(value, [key])
+                          }}
+                          />
+                        : <HighlightCode className="example" value={ getSampleSchema(prop) } />}
+                      </td>
+                      </tr>
+            })
+          }
+        </tbody>
+      </table>
+    </div>
+  }
+
   return <div>
     { requestBodyDescription &&
       <Markdown source={requestBodyDescription} />
@@ -53,6 +129,7 @@ const RequestBody = ({
 
 RequestBody.propTypes = {
   requestBody: ImPropTypes.orderedMap.isRequired,
+  requestBodyValue: ImPropTypes.orderedMap.isRequired,
   getComponent: PropTypes.func.isRequired,
   getConfigs: PropTypes.func.isRequired,
   specSelectors: PropTypes.object.isRequired,

diff --git a/src/core/plugins/oas3/wrap-components/parameters.jsx b/src/core/plugins/oas3/wrap-components/parameters.jsx
@@ -185,6 +185,7 @@ class Parameters extends Component {
               <RequestBody
                 specPath={requestBodySpecPath}
                 requestBody={requestBody}
+                requestBodyValue={oas3Selectors.requestBodyValue(...pathMethod) || Map()}
                 isExecute={isExecute}
                 onChange={(value, path) => {
                   if(path) {