Fix 3803. Added support for oneOf and anyOf for Example Value

src/core/components/example-wrapper.jsx

@@ -0,0 +1,94 @@
+import React from "react"
+import PropTypes from "prop-types"
+import { fromJS } from "immutable"
+import { getModelNameFromRef } from "core/utils"
+
+export default class ExampleWrapper extends React.Component {
+    static propTypes = {
+        getComponent: PropTypes.func.isRequired,
+        specSelectors: PropTypes.object.isRequired,
+        schema: PropTypes.object.isRequired,
+        examples: PropTypes.any,
+        contentType: PropTypes.string,
+        oas3SchemaForContentType: PropTypes.any,
+        responseContentType: PropTypes.string,
+    }
+
+    render() {
+        let {
+            getComponent,
+            specSelectors,
+            schema,
+            examples,
+            contentType,
+            oas3SchemaForContentType,
+            responseContentType,
+        } = this.props
+
+        if (examples && examples.size) {
+            const Examples = getComponent("Examples")
+            return <Examples getComponent={getComponent} examples={examples} />
+        }
+
+        const Example = getComponent("Example")
+        let { isOAS3 } = specSelectors
+        schema = schema.toJS()
+
+        let anyOf, oneOf
+        if (isOAS3()) {
+            oneOf = schema.oneOf
+            anyOf = schema.anyOf
+        }
+
+        const getMultipleExamples = (title, attribute) => {
+            const getModelName = (schema) => {
+                let $$ref = schema && schema.$$ref
+                return $$ref ? getModelNameFromRef($$ref) : null
+            }
+
+            return (
+                <div>
+                    <div className="small">{title}</div>
+                    {
+                        attribute.map((subschema, key) =>
+                            <div key={key}>
+                                <h5>{getModelName(subschema)}</h5>
+                                <Example
+                                    getComponent={getComponent}
+                                    specSelectors={specSelectors}
+                                    schema={subschema}
+                                    examples={examples}
+                                    contentType={contentType}
+                                    oas3SchemaForContentType={fromJS(subschema)}
+                                    responseContentType={responseContentType} />
+                            </div>)
+                    }
+                </div>
+            )
+        }
+
+        const getExample = () => {
+            if (!schema)
+                return null
+
+            if (anyOf) {
+                return getMultipleExamples("anyOf:", anyOf)
+            }
+            else if (oneOf) {
+                return getMultipleExamples("oneOf:", oneOf)
+            }
+            else {
+                return <Example
+                    getComponent={getComponent}
+                    specSelectors={specSelectors}
+                    schema={schema}
+                    examples={examples}
+                    contentType={contentType}
+                    oas3SchemaForContentType={oas3SchemaForContentType}
+                    responseContentType={responseContentType} />
+            }
+        }
+
+        return (<div className="example-box">{getExample()}</div>)
+    }
+}

src/core/components/example.jsx

@@ -0,0 +1,63 @@
+import React from "react"
+import PropTypes from "prop-types"
+import { getSampleSchema } from "core/utils"
+
+const getExampleComponent = (sampleResponse, HighlightCode) => {
+    if (!sampleResponse)
+        return null
+
+    return <div>
+        <HighlightCode className="example" value={sampleResponse} />
+    </div>
+}
+
+export default class Example extends React.Component {
+    static propTypes = {
+        getComponent: PropTypes.func.isRequired,
+        specSelectors: PropTypes.object.isRequired,
+        schema: PropTypes.object.isRequired,
+        examples: PropTypes.any,
+        contentType: PropTypes.string,
+        oas3SchemaForContentType: PropTypes.any,
+        responseContentType: PropTypes.string,
+    }
+
+    render() {
+        let {
+            getComponent,
+            specSelectors,
+            schema,
+            examples,
+            contentType,
+            oas3SchemaForContentType,
+            responseContentType,
+        } = this.props
+
+        if (examples && examples.size) {
+            const Examples = getComponent("Examples")
+            return <Examples getComponent={getComponent} examples={examples} />
+        }
+
+        const HighlightCode = getComponent("highlightCode")
+        let { isOAS3 } = specSelectors
+
+        let sampleResponse
+        if (isOAS3()) {
+            sampleResponse = getSampleSchema(oas3SchemaForContentType ? oas3SchemaForContentType.toJS() : null,
+                responseContentType,
+                {
+                    includeReadOnly: true
+                })
+        }
+        else {
+            sampleResponse = getSampleSchema(schema, contentType,
+                {
+                    includeReadOnly: true,
+                    includeWriteOnly: true // writeOnly has no filtering effect in swagger 2.0
+                })
+        }
+
+        return getExampleComponent(sampleResponse, HighlightCode)
+    }
+
+}

src/core/components/examples.jsx

@@ -0,0 +1,43 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+export default class Examples extends React.Component {
+    static propTypes = {
+        getComponent: PropTypes.func.isRequired,
+        examples: PropTypes.any
+    }
+
+    render() {
+        let {
+            getComponent,
+            examples
+        } = this.props
+
+        if (!examples || !examples.size) {
+            return null
+        }
+
+        const HighlightCode = getComponent("highlightCode")
+
+        return <div>
+            {
+                examples.entrySeq().map(([key, example]) => {
+                    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()
+            }
+        </div>
+    }
+}

src/core/components/model-example.jsx

@@ -7,10 +7,13 @@ export default class ModelExample extends React.Component {
     getComponent: PropTypes.func.isRequired,
     specSelectors: PropTypes.object.isRequired,
     schema: PropTypes.object.isRequired,
-    example: PropTypes.any.isRequired,
     isExecute: PropTypes.bool,
     getConfigs: PropTypes.func.isRequired,
     specPath: ImPropTypes.list.isRequired,
+    examples: PropTypes.any,
+    contentType: PropTypes.string,
+    oas3SchemaForContentType: PropTypes.any,
+    responseContentType: PropTypes.string,
   }
 
   constructor(props, context) {
@@ -34,9 +37,22 @@ export default class ModelExample extends React.Component {
   }
 
   render() {
-    let { getComponent, specSelectors, schema, example, isExecute, getConfigs, specPath } = this.props
+    let { 
+      getComponent, 
+      specSelectors, 
+      schema, 
+      isExecute, 
+      getConfigs, 
+      specPath, 
+      examples, 
+      contentType, 
+      oas3SchemaForContentType, 
+      responseContentType 
+    } = this.props
+
     let { defaultModelExpandDepth } = getConfigs()
     const ModelWrapper = getComponent("ModelWrapper")
+    const ExampleWrapper = getComponent("ExampleWrapper")
 
     return <div>
       <ul className="tab">
@@ -49,7 +65,14 @@ export default class ModelExample extends React.Component {
       </ul>
       <div>
         {
-          (isExecute || this.state.activeTab === "example") && example
+          (isExecute || this.state.activeTab === "example") && <ExampleWrapper
+                                                    getComponent={ getComponent }
+                                                    specSelectors={ specSelectors }
+                                                    schema={ schema }
+                                                    examples={ examples }
+                                                    contentType={ contentType }
+                                                    oas3SchemaForContentType={ oas3SchemaForContentType }
+                                                    responseContentType={ responseContentType }/>
         }
         {
           !isExecute && this.state.activeTab === "model" && <ModelWrapper schema={ schema }

src/core/components/model.jsx

@@ -2,6 +2,7 @@ import React from "react"
 import ImmutablePureComponent from "react-immutable-pure-component"
 import ImPropTypes from "react-immutable-proptypes"
 import PropTypes from "prop-types"
+import { getModelNameFromRef } from "core/utils"
 
 export default class Model extends ImmutablePureComponent {
   static propTypes = {
@@ -15,16 +16,7 @@ export default class Model extends ImmutablePureComponent {
     expandDepth: PropTypes.number,
     depth: PropTypes.number,
     specPath: ImPropTypes.list.isRequired,
-  }
-
-  getModelName =( ref )=> {
-    if ( ref.indexOf("#/definitions/") !== -1 ) {
-      return ref.replace(/^.*#\/definitions\//, "")
-    }
-    if ( ref.indexOf("#/components/schemas/") !== -1 ) {
-      return ref.replace("#/components/schemas/", "")
-    }
-  }
+  }  
 
   getRefSchema =( model )=> {
     let { specSelectors } = this.props
@@ -42,7 +34,7 @@ export default class Model extends ImmutablePureComponent {
 
     // If we weren't passed a `name` but have a ref, grab the name from the ref
     if ( !name && $$ref ) {
-      name = this.getModelName( $$ref )
+      name = getModelNameFromRef($$ref)
     }
     // If we weren't passed a `schema` but have a ref, grab the schema from the ref
     if ( !schema && $$ref ) {

src/core/components/response.jsx

@@ -3,34 +3,7 @@ import PropTypes from "prop-types"
 import ImPropTypes from "react-immutable-proptypes"
 import cx from "classnames"
 import { fromJS, Seq, Iterable, List } from "immutable"
-import { getSampleSchema, fromJSOrdered } from "core/utils"
-
-const getExampleComponent = ( sampleResponse, examples, HighlightCode ) => {
-  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)
-        }
-      }
-
-      return (<div key={ key }>
-        <h5>{ key }</h5>
-        <HighlightCode className="example" value={ exampleValue } />
-      </div>)
-    }).toArray()
-  }
-
-  if ( sampleResponse ) { return <div>
-      <HighlightCode className="example" value={ sampleResponse } />
-    </div>
-  }
-  return null
-}
+import { fromJSOrdered } from "core/utils"
 
 export default class Response extends React.Component {
   constructor(props, context) {
@@ -90,30 +63,21 @@ export default class Response extends React.Component {
     let examples = response.get("examples")
     let links = response.get("links")
     const Headers = getComponent("headers")
-    const HighlightCode = getComponent("highlightCode")
     const ModelExample = getComponent("modelExample")
     const Markdown = getComponent( "Markdown" )
     const OperationLink = getComponent("operationLink")
     const ContentType = getComponent("contentType")
 
-    var sampleResponse
-    var schema, specPathWithPossibleSchema
+    var schema, specPathWithPossibleSchema, oas3SchemaForContentType
 
     if(isOAS3()) {
       const schemaPath = List(["content", this.state.responseContentType, "schema"])
-      const oas3SchemaForContentType = response.getIn(schemaPath)
-      sampleResponse = oas3SchemaForContentType ? getSampleSchema(oas3SchemaForContentType.toJS(), this.state.responseContentType, {
-        includeReadOnly: true
-      }) : null
+      oas3SchemaForContentType = response.getIn(schemaPath)
       schema = oas3SchemaForContentType ? inferSchema(oas3SchemaForContentType.toJS()) : null
       specPathWithPossibleSchema = oas3SchemaForContentType ? schemaPath : specPath
     } else {
       schema = inferSchema(response.toJS()) // TODO: don't convert back and forth. Lets just stick with immutable for inferSchema
       specPathWithPossibleSchema = response.has("schema") ? specPath.push("schema") : specPath
-      sampleResponse = schema ? getSampleSchema(schema, contentType, {
-        includeReadOnly: true,
-        includeWriteOnly: true // writeOnly has no filtering effect in swagger 2.0
-       }) : null
     }
 
     if(examples) {
@@ -123,8 +87,6 @@ export default class Response extends React.Component {
       })
     }
 
-    let example = getExampleComponent( sampleResponse, examples, HighlightCode )
-
     return (
       <tr className={ "response " + ( className || "") }>
         <td className="col response-col_status">
@@ -149,14 +111,17 @@ export default class Response extends React.Component {
             </div>
              : null }
 
-          { example ? (
+          { schema ? (
             <ModelExample
               specPath={specPathWithPossibleSchema}
               getComponent={ getComponent }
               getConfigs={ getConfigs }
               specSelectors={ specSelectors }
-              schema={ fromJSOrdered(schema) }
-              example={ example }/>
+              schema={ fromJSOrdered(schema) } 
+              examples={ examples }
+              contentType={ contentType }
+              oas3SchemaForContentType={ oas3SchemaForContentType }
+              responseContentType={ this.state.responseContentType }/>
           ) : null}
 
           { headers ? (