OAS3 multi examples in requestbody

src/core/components/model-example.jsx

@@ -1,18 +1,21 @@
 import React from "react"
 import PropTypes from "prop-types"
+import ImPropTypes from "react-immutable-proptypes"
 
 export default class ModelExample extends React.Component {
   static propTypes = {
     getComponent: PropTypes.func.isRequired,
     specSelectors: PropTypes.object.isRequired,
-    schema: PropTypes.object.isRequired,
-    example: PropTypes.any.isRequired,
+    schema: PropTypes.object,
+    example: PropTypes.any,
+    examples: ImPropTypes.orderedMap,
     isExecute: PropTypes.bool,
     getConfigs: PropTypes.func.isRequired
   }
 
   constructor(props, context) {
     super(props, context)
+
     let { getConfigs } = this.props
     let { defaultModelRendering } = getConfigs()
     if (defaultModelRendering !== "example" && defaultModelRendering !== "model") {
@@ -31,16 +34,36 @@ export default class ModelExample extends React.Component {
     })
   }
 
+  formatValue = (value) => {
+    if(typeof(value) === "string") {
+      return value
+    } else {
+      return JSON.stringify(value, null, 2)
+    }
+  }
+
   render() {
-    let { getComponent, specSelectors, schema, example, isExecute, getConfigs } = this.props
+    let { getComponent, specSelectors, schema, example, examples, isExecute, getConfigs } = this.props
     let { defaultModelExpandDepth } = getConfigs()
     const ModelWrapper = getComponent("ModelWrapper")
+    const HighlightCode = getComponent("highlightCode")
+    const Markdown = getComponent("Markdown")
+    const ExternalValue = getComponent("ExternalValue")
 
+    // TODO fetch externalValue and display it on demand
     return <div>
       <ul className="tab">
         <li className={ "tabitem" + ( isExecute || this.state.activeTab === "example" ? " active" : "") }>
           <a className="tablinks" data-name="example" onClick={ this.activeTab }>Example Value</a>
         </li>
+
+        { examples && examples.map( (item, key) => {
+          return ( !isExecute && <li key={"examples_key_" + key} className={"tabitem" + ( isExecute || this.state.activeTab === "example_" + key ? " active" : "") }>
+            <a className="tablinks" data-name={"example_" + key} onClick={ this.activeTab }>Example: {key}</a>
+          </li> )
+        } ).toArray()
+        }
+
         { schema ? <li className={ "tabitem" + ( !isExecute && this.state.activeTab === "model" ? " active" : "") }>
           <a className={ "tablinks" + ( isExecute ? " inactive" : "" )} data-name="model" onClick={ this.activeTab }>Model</a>
         </li> : null }
@@ -49,13 +72,27 @@ export default class ModelExample extends React.Component {
         {
           (isExecute || this.state.activeTab === "example") && example
         }
+        {
+          examples && examples.map( (item, key) => {
+            return ((!isExecute && this.state.activeTab === "example_" + key) && (
+              <div key={"example_div_key_" + key} className="example-wrapper">
+                { item.has("summary") && <h6 className="example-summary">{ item.get("summary") }</h6> }
+                {
+                  item.has("description") && <div className="example-description">
+                    <Markdown source={ item.get("description") } />
+                  </div>
+                }
+                { item.has("value") && <HighlightCode value={ this.formatValue(item.get("value")) } /> }
+                { item.has("externalValue") && <ExternalValue location={ item.get("externalValue") } getComponent={ getComponent } /> }
+              </div>
+            ))
+          } ).toArray()
+        }
         {
           !isExecute && this.state.activeTab === "model" && <ModelWrapper schema={ schema }
-                                                     getComponent={ getComponent }
-                                                     specSelectors={ specSelectors }
-                                                     expandDepth={ defaultModelExpandDepth } />
-
-
+                                                                          getComponent={ getComponent }
+                                                                          specSelectors={ specSelectors }
+                                                                          expandDepth={ defaultModelExpandDepth } />
         }
       </div>
     </div>

src/core/components/parameter-row.jsx

@@ -2,6 +2,8 @@ import React, { Component } from "react"
 import { Map } from "immutable"
 import PropTypes from "prop-types"
 import win from "core/window"
+import HighlightCode from "./highlight-code"
+import { formatParamValue } from "core/plugins/oas3/utils"
 
 export default class ParameterRow extends Component {
   static propTypes = {
@@ -33,6 +35,7 @@ export default class ParameterRow extends Component {
     let { isOAS3 } = specSelectors
 
     let example = param.get("example")
+    let examples = param.get("examples")
     let defaultValue = param.get("default")
     let parameter = specSelectors.getParameter(pathMethod, param.get("name"), param.get("in"))
     let enumValue
@@ -49,12 +52,18 @@ export default class ParameterRow extends Component {
 
     if ( paramValue !== undefined ) {
       value = paramValue
-    } else if ( example !== undefined ) {
-      value = example
     } else if ( defaultValue !== undefined) {
       value = defaultValue
+    } else if ( example !== undefined ) {
+      value = example
+    } else if ( examples !== undefined && examples.size > 0 ) {
+      value = examples.first().value
     } else if ( param.get("required") && enumValue && enumValue.size ) {
       value = enumValue.first()
+    } else if ( example !== undefined ) {
+      value = example.toObject()
+    } else if ( examples !== undefined && examples.size > 0 ) {
+      value = examples.first().value
     }
 
     if ( value !== undefined ) {
@@ -100,6 +109,20 @@ export default class ParameterRow extends Component {
     let itemType = param.getIn(isOAS3 && isOAS3() ? ["schema", "items", "type"] : ["items", "type"])
     let parameter = specSelectors.getParameter(pathMethod, param.get("name"), param.get("in"))
     let value = parameter ? parameter.get("value") : ""
+    let examples = isOAS3 && isOAS3() && param.get("examples")
+    let example
+
+    if(isOAS3 && isOAS3() && !examples){
+      // in OAS3, "example" and "examples" are mutually exclusive.
+      // So "example" are handled only when "examples" is not present.
+      example = param.get("example")
+
+      if(example) {
+        example = <HighlightCode value={ formatParamValue(example, parameter) }/>
+      } else {
+        example = <HighlightCode value={ formatParamValue(value, parameter) }/>
+      }
+    }
 
     return (
       <tr>
@@ -122,7 +145,7 @@ export default class ParameterRow extends Component {
           { bodyParam || !isExecute ? null
             : <JsonSchemaForm fn={fn}
                               getComponent={getComponent}
-                              value={ value }
+                              value={ formatParamValue(value, parameter) }
                               required={ required }
                               description={param.get("description") ? `${param.get("name")} - ${param.get("description")}` : `${param.get("name")}`}
                               onChange={ this.onChangeWrapper }
@@ -136,10 +159,24 @@ export default class ParameterRow extends Component {
                                                 isExecute={ isExecute }
                                                 specSelectors={ specSelectors }
                                                 schema={ schema }
-                                                example={ bodyParam }/>
+                                                example={ bodyParam }
+                                                examples={ examples }/>
               : null
           }
 
+          {/* for non-body params with example(s) */}
+          {
+            (!bodyParam && examples) && <ModelExample
+            getComponent={ getComponent }
+            example={ example }
+            examples={ examples }
+            getConfigs={ getConfigs }
+            isExecute={ isExecute }
+            specSelectors={ specSelectors }
+            schema={ schema } />
+          }
+
+
         </td>
 
       </tr>

src/core/components/response.jsx

@@ -1,33 +1,33 @@
 import React from "react"
 import PropTypes from "prop-types"
 import cx from "classnames"
-import { fromJS, Seq } from "immutable"
-import { getSampleSchema, fromJSOrdered } from "core/utils"
+import { fromJS, OrderedMap, Seq } from "immutable"
+import { fromJSOrdered, getSampleSchema } from "core/utils"
 
 const getExampleComponent = ( sampleResponse, examples, HighlightCode ) => {
+  if ( sampleResponse ) { return <div>
+      <HighlightCode className="example" value={ sampleResponse } />
+    </div>
+  }
   if ( examples && examples.size ) {
-    return examples.entrySeq().map( ([ key, example ]) => {
-      let exampleValue = example
-      if ( example.toJS ) {
-        try {
-          exampleValue = JSON.stringify(example.toJS(), null, 2)
-        }
-        catch(e) {
-          exampleValue = String(example)
-        }
+    let [key, example] = examples.entrySeq().first()
+
+    let exampleValue = example
+    if (example.toJS) {
+      try {
+        exampleValue = JSON.stringify(example.toJS(), null, 2)
       }
+      catch (e) {
+        exampleValue = String(example)
+      }
+    }
 
-      return (<div key={ key }>
-        <h5>{ key }</h5>
-        <HighlightCode className="example" value={ exampleValue } />
-      </div>)
-    }).toArray()
+    return (<div key={key}>
+      <h5>{key}</h5>
+      <HighlightCode className="example" value={exampleValue}/>
+    </div>)
   }
 
-  if ( sampleResponse ) { return <div>
-      <HighlightCode className="example" value={ sampleResponse } />
-    </div>
-  }
   return null
 }
 
@@ -102,6 +102,16 @@ export default class Response extends React.Component {
         includeReadOnly: true
       }) : null
       schema = oas3SchemaForContentType ? inferSchema(oas3SchemaForContentType.toJS()) : null
+      examples = response.getIn(["content", this.state.responseContentType, "examples"])
+
+      if(!examples) {
+        // The example object is mutually exclusive of the examples object. Prefer `examples` here.
+        let example = response.getIn(["content", this.state.responseContentType, "example"])
+
+        if(example) {
+          examples = OrderedMap({"Example": example})
+        }
+      }
     } else {
       schema = inferSchema(response.toJS())
       sampleResponse = schema ? getSampleSchema(schema, contentType, {
@@ -149,7 +159,9 @@ export default class Response extends React.Component {
               getConfigs={ getConfigs }
               specSelectors={ specSelectors }
               schema={ fromJSOrdered(schema) }
-              example={ example }/>
+              example={ example }
+              examples={ examples }
+            />
           ) : null}
 
           { headers ? (

src/core/plugins/oas3/components/external-value.jsx

@@ -0,0 +1,33 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+/**
+ * ExternalValue is a <HighlightCode> with content set to an external location.
+ * usage: <ExternalValue location="http://example.com/path/to/file" />
+ */
+export default class ExternalValue extends React.Component {
+  static propTypes = {
+    getComponent: PropTypes.func.isRequired,
+    location: PropTypes.string.isRequired
+  }
+
+  constructor(props, context) {
+    super(props, context)
+  }
+
+  render() {
+    let { location } = this.props
+    // const Markdown = getComponent("Markdown")
+
+    // TODO should externalValue be fetched and displayed inline?
+
+    return (
+      <div>
+        <a href={location} target="_blank" title={location} >Open ExternalValue</a>
+      </div>
+    )
+  }
+}
+
+
+

src/core/plugins/oas3/components/index.js

@@ -1,6 +1,8 @@
+
 import Callbacks from "./callbacks"
 import RequestBody from "./request-body"
 import OperationLink from "./operation-link.jsx"
+import ExternalValue from "./external-value.jsx"
 import Servers from "./servers"
 import RequestBodyEditor from "./request-body-editor"
 import HttpAuth from "./http-auth"
@@ -9,7 +11,8 @@ export default {
   Callbacks,
   HttpAuth,
   RequestBody,
+  operationLink: OperationLink,
+  ExternalValue,
   Servers,
-  RequestBodyEditor,
-  operationLink: OperationLink
+  RequestBodyEditor
 }

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

@@ -2,6 +2,7 @@ import React from "react"
 import PropTypes from "prop-types"
 import ImPropTypes from "react-immutable-proptypes"
 import { OrderedMap } from "immutable"
+import { memoizedGetExamples } from "core/plugins/oas3/utils"
 
 const RequestBody = ({
   requestBody,
@@ -22,6 +23,8 @@ const RequestBody = ({
 
   const mediaTypeValue = requestBodyContent.get(contentType)
 
+  const examples = memoizedGetExamples(mediaTypeValue.get("examples"))
+
   return <div>
     { requestBodyDescription &&
       <Markdown source={requestBodyDescription} />
@@ -40,8 +43,9 @@ const RequestBody = ({
         getComponent={getComponent}
         isExecute={isExecute}
         specSelectors={specSelectors}
-        />}
-      />
+      />}
+      examples={examples}
+    />
   </div>
 }
 

src/core/plugins/oas3/utils.js

@@ -0,0 +1,27 @@
+import memoizee from "memoizee"
+import { fromJS } from "immutable"
+
+/**
+ * Convert OAS3 "Examples" (in requestBody) section and convert to Map
+ * @param examplesInSpec {object} "examples" in OAS3 spec
+ * @returns {Map} Map {name: {summary, description, value, externalValue}}
+ */
+export const getExamples = (examplesInSpec) => {
+  return fromJS(examplesInSpec)
+}
+
+export const memoizedGetExamples = memoizee(getExamples)
+
+/**
+ * Convert 'value' to serialized format, so can be handled correctly in <input>
+ * @param value value
+ * @param parameter {OrderedMap} parameter in spec
+ */
+export const formatParamValue = (value, parameter) => {
+  if (typeof ( value ) === "string") {
+    return value
+  } else {
+    // TODO apply 'style', 'explode', 'allowReserved' in OAS3
+    return JSON.stringify(value, null, 2)
+  }
+}