Ft/3803 multiple responses using one of attribute do not appear in ui

docs/usage/configuration.md

@@ -58,6 +58,7 @@ Parameter name | Docker variable | Description
 <a name="operationsSorter"></a>`operationsSorter` | _Unavailable_ | `Function=(a => a)`. Apply a sort to the operation list of each API. It can be 'alpha' (sort by paths alphanumerically), 'method' (sort by HTTP method) or a function (see Array.prototype.sort() to know how sort function works). Default is the order returned by the server unchanged.
 <a name="showExtensions"></a>`showExtensions` | `SHOW_EXTENSIONS` | `Boolean=false`. Controls the display of vendor extension (`x-`) fields and values for Operations, Parameters, and Schema.
 <a name="showCommonExtensions"></a>`showCommonExtensions` | `SHOW_COMMON_EXTENSIONS` | `Boolean=false`. Controls the display of extensions (`pattern`, `maxLength`, `minLength`, `maximum`, `minimum`) fields and values for Parameters.
+<a name="showAlternativeSchemaExample"></a>`showAlternativeSchemaExample` | _Unavailable_ | `Boolean=false`. Controls the display of alternative schemas (oneOf/anyOf) in the Example View.
 <a name="tagSorter"></a>`tagsSorter` | _Unavailable_ | `Function=(a => a)`. Apply a sort to the tag list of each API. It can be 'alpha' (sort by paths alphanumerically) or a function (see [Array.prototype.sort()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) to learn how to write a sort function). Two tag name strings are passed to the sorter for each pass. Default is the order determined by Swagger UI.
 <a name="onComplete"></a>`onComplete` | _Unavailable_ | `Function=NOOP`. Provides a mechanism to be notified when Swagger UI has finished rendering a newly provided definition.
 

src/core/components/alternative-schema-select.jsx

@@ -0,0 +1,91 @@
+import React, { Component } from "react"
+import PropTypes from "prop-types"
+
+export default class AlternativeSchemaSelect extends Component {
+
+  static propTypes = {
+    alternativeSchemaSelections: PropTypes.object.isRequired,
+    onSelectionChanged: PropTypes.func.isRequired,
+    isManualMode: PropTypes.bool.isRequired, 
+    alternativeSchemas: PropTypes.object.isRequired    
+  }
+
+  constructor(props) {
+    super(props)
+    this.onModeChange = this.onModeChange.bind(this)
+    this.oneOfChange = this.oneOfChange.bind(this)
+    this.selectOneOfComponent = this.selectOneOfComponent.bind(this)
+    this.state = {
+      isManualMode: false,
+      alternativeSchemaSelections: {}
+    }
+  }
+
+  onModeChange(e) {
+    var { onSelectionChanged } = this.props
+    var { alternativeSchemaSelections } = this.state
+
+    onSelectionChanged( (e.target.dataset.name === "MANUAL" ? alternativeSchemaSelections :{}))
+    this.setState({isManualMode: e.target.dataset.name === "MANUAL"})
+  }
+
+  oneOfChange(e, id) {
+    var { onSelectionChanged } = this.props
+    var { alternativeSchemaSelections } = this.state
+
+    alternativeSchemaSelections[id] = parseInt(e.target.value)
+
+    onSelectionChanged( alternativeSchemaSelections )
+  }
+
+  selectOneOfComponent(attributePath, options, defaultOption, type) {
+    if (options) {
+      return (
+        <div key={"OneOf" + attributePath} style={{ padding: "0 0 10px 0" }} className={"content-type-wrapper "}>
+          <div>
+            <small htmlFor={attributePath} className={"response-control-alternative-examples__title"}>Choose {type} {attributePath}:</small>
+          </div>
+          <select
+            className="content-type"
+            name={attributePath}
+            value={defaultOption}
+            onChange={(e) => this.oneOfChange(e, attributePath)}
+          >
+          <option key={"empty"} value={"-1"}>{"<empty>"}</option>
+            {Object.keys(options).map((key, index) => {
+              return <option key={index + key} value={index}>{options[key]}</option>
+            })}
+          </select>
+        </div>
+      )
+    }
+    return null
+  }
+
+  render() {
+
+    const { alternativeSchemas } = this.props
+    const { isManualMode } = this.state
+
+    var oneOfComponents = []
+    if (isManualMode && alternativeSchemas) {
+      alternativeSchemas.map((attribute) => {
+        oneOfComponents.push(this.selectOneOfComponent(attribute.key, attribute.options, attribute.selectedIndex, attribute.type))
+        return true
+      })
+    }
+    return (
+      <div>
+        <ul className="response-control-alternative-examples tab">Example Value with:
+              <li className={"tabitem" + (isManualMode ? "" : " active")}>
+            <a className="tablinks" data-name="FIRST" onClick={this.onModeChange} >first `oneOf` item</a>
+          </li>
+          <li className={"tabitem" + (isManualMode ? " active" : "")}>
+            <a className="tablinks" data-name="MANUAL" onClick={this.onModeChange} >manually selected `oneOf` item</a>
+          </li>
+        </ul>
+        {oneOfComponents}
+      </div>
+    )
+  }
+}

src/core/components/model-example.jsx

@@ -11,6 +11,9 @@ export default class ModelExample extends React.Component {
     isExecute: PropTypes.bool,
     getConfigs: PropTypes.func.isRequired,
     specPath: ImPropTypes.list.isRequired,
+    alternativeSchemas: PropTypes.object,
+    onSelectedAlternativeOptionChanged: PropTypes.func,
+    onChange: PropTypes.func,
   }
 
   constructor(props, context) {
@@ -52,10 +55,11 @@ export default class ModelExample extends React.Component {
   }
 
   render() {
-    let { getComponent, specSelectors, schema, example, isExecute, getConfigs, specPath } = this.props
+    let { getComponent, specSelectors, schema, example, isExecute, getConfigs, specPath, alternativeSchemas, onChange } = this.props
     let { defaultModelExpandDepth } = getConfigs()
     const ModelWrapper = getComponent("ModelWrapper")
     const HighlightCode = getComponent("highlightCode")
+    const AlternativeSchemaSelect = getComponent("alternativeSchemaSelect")
 
     let isOAS3 = specSelectors.isOAS3()
 
@@ -78,6 +82,14 @@ export default class ModelExample extends React.Component {
             )
           ) : null
         }
+        {
+          this.state.activeTab === "example" && alternativeSchemas && onChange ? (
+              <AlternativeSchemaSelect
+                alternativeSchemas = {alternativeSchemas}
+                onSelectionChanged = {onChange}
+              />
+          ) : null
+        }
         {
           this.state.activeTab === "model" && <ModelWrapper schema={ schema }
                                                      getComponent={ getComponent }

src/core/components/parameters/parameters.jsx

@@ -12,7 +12,8 @@ export default class Parameters extends Component {
    super(props)
    this.state = {
      callbackVisible: false,
-     parametersVisible: true
+     parametersVisible: true,
+     alternativeSchemaSelections: {}
    }
  }
 
@@ -33,6 +34,7 @@ export default class Parameters extends Component {
     pathMethod: PropTypes.array.isRequired,
     getConfigs: PropTypes.func.isRequired,
     specPath: ImPropTypes.list.isRequired,
+    alternativeSchemaSelections: PropTypes.object,
   }
 
 
@@ -197,6 +199,7 @@ export default class Parameters extends Component {
                 requestBody={requestBody}
                 requestBodyValue={oas3Selectors.requestBodyValue(...pathMethod)}
                 isExecute={isExecute}
+                alternativeSchemaSelections= {this.state.alternativeSchemaSelections || {}}
                 activeExamplesKey={oas3Selectors.activeExamplesMember(
                   ...pathMethod,
                   "requestBody",
@@ -222,6 +225,9 @@ export default class Parameters extends Component {
                   }
                   oas3Actions.setRequestBodyValue({ value, pathMethod })
                 }}
+                onAlternativeSchemaChange= {(alternativeSchemaSelections) => { 
+                  this.setState({alternativeSchemaSelections: alternativeSchemaSelections})
+                }}
                 contentType={oas3Selectors.requestContentType(...pathMethod)}/>
             </div>
           </div>

src/core/components/response.jsx

@@ -22,6 +22,7 @@ export default class Response extends React.Component {
 
     this.state = {
       responseContentType: "",
+      alternativeSchemaSelections: {}
     }
   }
 
@@ -40,7 +41,8 @@ export default class Response extends React.Component {
     contentType: PropTypes.string,
     activeExamplesKey: PropTypes.string,
     controlsAcceptHeader: PropTypes.bool,
-    onContentTypeChange: PropTypes.func
+    onContentTypeChange: PropTypes.func,
+    alternativeSchemaSelections: PropTypes.object
   }
 
   static defaultProps = {
@@ -57,6 +59,10 @@ export default class Response extends React.Component {
     })
   }
 
+  _onAlternativeSchemaChanged = (alternativeSchemaSelections) =>{
+    this.setState({alternativeSchemaSelections: alternativeSchemaSelections})
+  }
+
   getTargetExamplesKey = () => {
     const { response, contentType, activeExamplesKey } = this.props
 
@@ -85,6 +91,8 @@ export default class Response extends React.Component {
       oas3Actions,
     } = this.props
 
+    const { showAlternativeSchemaExample } = getConfigs()
+
     let { inferSchema } = fn
     let isOAS3 = specSelectors.isOAS3()
 
@@ -131,8 +139,11 @@ export default class Response extends React.Component {
         sampleResponse = stringify(activeMediaType.get("example"))
       } else {
         // use an example value generated based on the schema
+        var alternativeSchemas = showAlternativeSchemaExample === true ? [] : undefined
         sampleResponse = getSampleSchema(oas3SchemaForContentType.toJS(), this.state.responseContentType, {
-          includeReadOnly: true
+          includeReadOnly: true,
+          alternativeSchemas: alternativeSchemas,
+          alternativeSchemaSelections: this.state.alternativeSchemaSelections || {}
         })
       }
     } else {
@@ -218,6 +229,8 @@ export default class Response extends React.Component {
               getConfigs={ getConfigs }
               specSelectors={ specSelectors }
               schema={ fromJSOrdered(schema) }
+              alternativeSchemas= { alternativeSchemas }
+              onChange = { this._onAlternativeSchemaChanged }
               example={ example }/>
           ) : null }
 

src/core/index.js

@@ -50,6 +50,7 @@ export default function SwaggerUI(opts) {
     defaultModelsExpandDepth: 1,
     showExtensions: false,
     showCommonExtensions: false,
+    showAlternativeSchemaExample: false,
     withCredentials: undefined,
     supportedSubmitMethods: [
       "get",

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

@@ -4,7 +4,7 @@ import ImPropTypes from "react-immutable-proptypes"
 import { Map, OrderedMap, List } from "immutable"
 import { getCommonExtensions, getSampleSchema, stringify } from "core/utils"
 
-function getDefaultRequestBodyValue(requestBody, mediaType, activeExamplesKey) {
+function getDefaultRequestBodyValue(requestBody, mediaType, activeExamplesKey, alternativeSchemas, alternativeSchemaSelections) {
   let mediaTypeValue = requestBody.getIn(["content", mediaType])
   let schema = mediaTypeValue.get("schema").toJS()
   let example =
@@ -25,7 +25,9 @@ function getDefaultRequestBodyValue(requestBody, mediaType, activeExamplesKey) {
     return stringify(
       example ||
         getSampleSchema(schema, mediaType, {
-          includeWriteOnly: true
+          includeWriteOnly: true,
+          alternativeSchemas: alternativeSchemas,
+          alternativeSchemaSelections: alternativeSchemaSelections
         }) ||
         ""
     )
@@ -47,6 +49,8 @@ const RequestBody = ({
   onChange,
   activeExamplesKey,
   updateActiveExamplesKey,
+  alternativeSchemaSelections,
+  onAlternativeSchemaChange,
 }) => {
   const handleFile = (e) => {
     onChange(e.target.files[0])
@@ -59,7 +63,7 @@ const RequestBody = ({
   const ExamplesSelectValueRetainer = getComponent("ExamplesSelectValueRetainer")
   const Example = getComponent("Example")
 
-  const { showCommonExtensions } = getConfigs()
+  const { showCommonExtensions, showAlternativeSchemaExample } = getConfigs()
 
   const requestBodyDescription = (requestBody && requestBody.get("description")) || null
   const requestBodyContent = (requestBody && requestBody.get("content")) || new OrderedMap()
@@ -175,6 +179,8 @@ const RequestBody = ({
     </div>
   }
 
+  var alternativeSchemas = showAlternativeSchemaExample === true ? [] : undefined
+
   return <div>
     { requestBodyDescription &&
       <Markdown source={requestBodyDescription} />
@@ -207,6 +213,7 @@ const RequestBody = ({
           />
         </div>
       ) : (
+
         <ModelExample
           getComponent={ getComponent }
           getConfigs={ getConfigs }
@@ -215,13 +222,17 @@ const RequestBody = ({
           isExecute={isExecute}
           schema={mediaTypeValue.get("schema")}
           specPath={specPath.push("content", contentType)}
+          alternativeSchemas= { alternativeSchemas }
+          onChange= { onAlternativeSchemaChange }
           example={
             <HighlightCode
               className="body-param__example"
               value={stringify(requestBodyValue) || getDefaultRequestBodyValue(
                 requestBody,
                 contentType,
                 activeExamplesKey,
+                alternativeSchemas, 
+                alternativeSchemaSelections
               )}
             />
           }
@@ -252,6 +263,8 @@ RequestBody.propTypes = {
   specPath: PropTypes.array.isRequired,
   activeExamplesKey: PropTypes.string,
   updateActiveExamplesKey: PropTypes.func,
+  alternativeSchemaSelections: PropTypes.object,
+  onAlternativeSchemaChange: PropTypes.func,
 }
 
 export default RequestBody