Merge branch 'master' into feature/request-url

2017-09-29 14:38:42 -07:00
parent b9be09709a 37399958a2
commit ac634c61ce
44 changed files with 1045 additions and 156 deletions
--- a/src/core/components/array-model.jsx
+++ b/src/core/components/array-model.jsx
@@ -16,10 +16,12 @@ export default class ArrayModel extends Component {

  render(){
    let { getComponent, schema, depth, expandDepth, name } = this.props
+    let description = schema.get("description")
    let items = schema.get("items")
    let title = schema.get("title") || name
-    let properties = schema.filter( ( v, key) => ["type", "items", "$$ref"].indexOf(key) === -1 )
+    let properties = schema.filter( ( v, key) => ["type", "items", "description", "$$ref"].indexOf(key) === -1 )

+    const Markdown = getComponent("Markdown")
    const ModelCollapse = getComponent("ModelCollapse")
    const Model = getComponent("Model")

@@ -28,18 +30,25 @@ export default class ArrayModel extends Component {
        <span className="model-title__text">{ title }</span>
      </span>

+    /* 
+    Note: we set `name={null}` in <Model> below because we don't want
+    the name of the current Model passed (and displayed) as the name of the array element Model
+    */ 
+
    return <span className="model">
      <ModelCollapse title={titleEl} collapsed={ depth > expandDepth } collapsedContent="[...]">
        [
-          <span><Model { ...this.props } schema={ items } required={ false } depth={ depth + 1 } /></span>
+          {
+            properties.size ? properties.entrySeq().map( ( [ key, v ] ) => <span key={`${key}-${v}`} style={ propStyle }>
+              <br />{ key }: { String(v) }</span>)
+              : null
+          }
+          {
+            !description ? null :
+              <Markdown source={ description } />
+          }
+          <span><Model { ...this.props } name={null} schema={ items } required={ false } depth={ depth + 1 } /></span>
        ]
-        {
-          properties.size ? <span>
-              { properties.entrySeq().map( ( [ key, v ] ) => <span key={`${key}-${v}`} style={propStyle}>
-                <br />{ `${key}:`}{ String(v) }</span>)
-              }<br /></span>
-            : null
-        }
      </ModelCollapse>
    </span>
  }
--- a/src/core/components/model-example.jsx
+++ b/src/core/components/model-example.jsx
@@ -7,14 +7,19 @@ export default class ModelExample extends React.Component {
    specSelectors: PropTypes.object.isRequired,
    schema: PropTypes.object.isRequired,
    example: PropTypes.any.isRequired,
-    isExecute: PropTypes.bool
+    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") {
+      defaultModelRendering = "example"
+    }
    this.state = {
-      activeTab: "example"
+      activeTab: defaultModelRendering
    }
  }

@@ -27,7 +32,8 @@ export default class ModelExample extends React.Component {
  }

  render() {
-    let { getComponent, specSelectors, schema, example, isExecute } = this.props
+    let { getComponent, specSelectors, schema, example, isExecute, getConfigs } = this.props
+    let { defaultModelExpandDepth } = getConfigs()
    const ModelWrapper = getComponent("ModelWrapper")

    return <div>
@@ -47,7 +53,7 @@ export default class ModelExample extends React.Component {
          !isExecute && this.state.activeTab === "model" && <ModelWrapper schema={ schema }
                                                     getComponent={ getComponent }
                                                     specSelectors={ specSelectors }
-                                                     expandDepth={ 1 } />
+                                                     expandDepth={ defaultModelExpandDepth } />


        }
--- a/src/core/components/model.jsx
+++ b/src/core/components/model.jsx
@@ -30,39 +30,38 @@ export default class Model extends Component {

  render () {
    let { getComponent, specSelectors, schema, required, name, isRef } = this.props
-    let ObjectModel = getComponent("ObjectModel")
-    let ArrayModel = getComponent("ArrayModel")
-    let PrimitiveModel = getComponent("PrimitiveModel")
+    const ObjectModel = getComponent("ObjectModel")
+    const ArrayModel = getComponent("ArrayModel")
+    const PrimitiveModel = getComponent("PrimitiveModel")
+    let type = "object"
    let $$ref = schema && schema.get("$$ref")
-    let modelName = $$ref && this.getModelName( $$ref )
-    let modelSchema, type
-
+    
+    // If we weren't passed a `name` but have a ref, grab the name from the ref
+    if ( !name && $$ref ) {
+      name = this.getModelName( $$ref )
+    }
+    // If we weren't passed a `schema` but have a ref, grab the schema from the ref
+    if ( !schema && $$ref ) {
+      schema = this.getRefSchema( name )
+    }
+    
    const deprecated = specSelectors.isOAS3() && schema.get("deprecated")
-
-    if ( schema && (schema.get("type") || schema.get("properties")) ) {
-      modelSchema = schema
-    } else if ( $$ref ) {
-      modelSchema = this.getRefSchema( modelName )
-    }
-
-    type = modelSchema && modelSchema.get("type")
-    if ( !type && modelSchema && modelSchema.get("properties") ) {
-      type = "object"
-    }
-
+    isRef = isRef !== undefined ? isRef : !!$$ref
+    type = schema && schema.get("type") || type
+    
    switch(type) {
      case "object":
        return <ObjectModel
          className="object" { ...this.props }
-          schema={ modelSchema }
-          name={ modelName || name }
+          schema={ schema }
+          name={ name }
          deprecated={deprecated}
-          isRef={ isRef!== undefined ? isRef : !!$$ref } />
+          isRef={ isRef } />
      case "array":
        return <ArrayModel
          className="array" { ...this.props }
-          schema={ modelSchema }
-          name={ modelName || name }
+          schema={ schema }
+          name={ name }
          deprecated={deprecated}
          required={ required } />
      case "string":
@@ -73,9 +72,10 @@ export default class Model extends Component {
        return <PrimitiveModel
          { ...this.props }
          getComponent={ getComponent }
-          schema={ modelSchema }
-          name={ modelName || name }
+          schema={ schema }
+          name={ name }
          deprecated={deprecated}
-          required={ required }/> }
+          required={ required }/>
+    }
  }
 }
--- a/src/core/components/models.jsx
+++ b/src/core/components/models.jsx
@@ -13,7 +13,7 @@ export default class Models extends Component {
  render(){
    let { specSelectors, getComponent, layoutSelectors, layoutActions, getConfigs } = this.props
    let definitions = specSelectors.definitions()
-    let { docExpansion } = getConfigs()
+    let { docExpansion, defaultModelExpandDepth } = getConfigs()
    let showModels = layoutSelectors.isShown("models", docExpansion === "full" || docExpansion === "list" )

    const ModelWrapper = getComponent("ModelWrapper")
@@ -33,8 +33,8 @@ export default class Models extends Component {
          definitions.entrySeq().map( ( [ name, model ])=>{
            return <div className="model-container" key={ `models-section-${name}` }>
              <ModelWrapper name={ name }
+                     expandDepth={ defaultModelExpandDepth }
                     schema={ model }
-                     isRef={ true }
                     getComponent={ getComponent }
                     specSelectors={ specSelectors }/>
              </div>
--- a/src/core/components/operation.jsx
+++ b/src/core/components/operation.jsx
@@ -28,6 +28,7 @@ export default class Operation extends PureComponent {
    authSelectors: PropTypes.object,
    specActions: PropTypes.object.isRequired,
    specSelectors: PropTypes.object.isRequired,
+    oas3Actions: PropTypes.object.isRequired,
    layoutActions: PropTypes.object.isRequired,
    layoutSelectors: PropTypes.object.isRequired,
    fn: PropTypes.object.isRequired,
@@ -117,7 +118,8 @@ export default class Operation extends PureComponent {
      specSelectors,
      authActions,
      authSelectors,
-      getConfigs
+      getConfigs,
+      oas3Actions
    } = this.props

    let summary = operation.get("summary")
@@ -147,7 +149,7 @@ export default class Operation extends PureComponent {
    const isDeepLinkingEnabled = deepLinking && deepLinking !== "false"

    // Merge in Live Response
-    if(response && response.size > 0) {
+    if(responses && response && response.size > 0) {
      let notDocumented = !responses.get(String(response.get("status")))
      response = response.set("notDocumented", notDocumented)
    }
@@ -222,6 +224,7 @@ export default class Operation extends PureComponent {
                specActions={ specActions }
                specSelectors={ specSelectors }
                pathMethod={ [path, method] }
+                getConfigs={ getConfigs }
              />

              {!tryItOutEnabled || !allowTryItOut ? null : schemes && schemes.size ? <div className="opblock-schemes">
@@ -265,6 +268,7 @@ export default class Operation extends PureComponent {
                    getComponent={ getComponent }
                    getConfigs={ getConfigs }
                    specSelectors={ specSelectors }
+                    oas3Actions={oas3Actions}
                    specActions={ specActions }
                    produces={ produces }
                    producesValue={ operation.get("produces_value") }
--- a/src/core/components/operations.jsx
+++ b/src/core/components/operations.jsx
@@ -1,7 +1,7 @@
 import React from "react"
 import PropTypes from "prop-types"
 import { helpers } from "swagger-client"
-
+import { createDeepLinkPath } from "core/utils"
 const { opId } = helpers

 export default class Operations extends React.Component {
@@ -9,6 +9,7 @@ export default class Operations extends React.Component {
  static propTypes = {
    specSelectors: PropTypes.object.isRequired,
    specActions: PropTypes.object.isRequired,
+    oas3Actions: PropTypes.object.isRequired,
    getComponent: PropTypes.func.isRequired,
    layoutSelectors: PropTypes.object.isRequired,
    layoutActions: PropTypes.object.isRequired,
@@ -21,6 +22,7 @@ export default class Operations extends React.Component {
    let {
      specSelectors,
      specActions,
+      oas3Actions,
      getComponent,
      layoutSelectors,
      layoutActions,
@@ -34,6 +36,7 @@ export default class Operations extends React.Component {

    const Operation = getComponent("operation")
    const Collapse = getComponent("Collapse")
+    const Markdown = getComponent("Markdown")

    let showSummary = layoutSelectors.showSummary()
    let {
@@ -69,7 +72,7 @@ export default class Operations extends React.Component {
              let tagExternalDocsDescription = tagObj.getIn(["tagDetails", "externalDocs", "description"])
              let tagExternalDocsUrl = tagObj.getIn(["tagDetails", "externalDocs", "url"])

-              let isShownKey = ["operations-tag", tag]
+              let isShownKey = ["operations-tag", createDeepLinkPath(tag)]
              let showTag = layoutSelectors.isShown(isShownKey, docExpansion === "full" || docExpansion === "list")

              return (
@@ -87,7 +90,7 @@ export default class Operations extends React.Component {
                    </a>
                    { !tagDescription ? null :
                        <small>
-                          { tagDescription }
+                          <Markdown source={tagDescription} />
                        </small>
                    }

@@ -124,7 +127,7 @@ export default class Operations extends React.Component {

                        const operationId =
                        op.getIn(["operation", "operationId"]) || op.getIn(["operation", "__originalOperationId"]) || opId(op.get("operation"), path, method) || op.get("id")
-                        const isShownKey = ["operations", tag, operationId]
+                        const isShownKey = ["operations", createDeepLinkPath(tag), createDeepLinkPath(operationId)]

                        const allowTryItOut = specSelectors.allowTryItOutFor(op.get("path"), op.get("method"))
                        const response = specSelectors.responseFor(op.get("path"), op.get("method"))
@@ -147,6 +150,8 @@ export default class Operations extends React.Component {
                          specActions={ specActions }
                          specSelectors={ specSelectors }

+                          oas3Actions={oas3Actions}
+
                          layoutActions={ layoutActions }
                          layoutSelectors={ layoutSelectors }

--- a/src/core/components/param-body.jsx
+++ b/src/core/components/param-body.jsx
@@ -47,7 +47,7 @@ export default class ParamBody extends PureComponent {

  updateValues = (props) => {
    let { specSelectors, pathMethod, param, isExecute, consumesValue="" } = props
-    let parameter = specSelectors ? specSelectors.getParameter(pathMethod, param.get("name")) : {}
+    let parameter = specSelectors ? specSelectors.getParameter(pathMethod, param.get("name"), param.get("in")) : {}
    let isXml = /xml/i.test(consumesValue)
    let isJson = /json/i.test(consumesValue)
    let paramValue = isXml ? parameter.get("value_xml") : parameter.get("value")
@@ -107,7 +107,7 @@ export default class ParamBody extends PureComponent {
    const HighlightCode = getComponent("highlightCode")
    const ContentType = getComponent("contentType")
    // for domains where specSelectors not passed
-    let parameter = specSelectors ? specSelectors.getParameter(pathMethod, param.get("name")) : param
+    let parameter = specSelectors ? specSelectors.getParameter(pathMethod, param.get("name"), param.get("in")) : param
    let errors = parameter.get("errors", List())
    let consumesValue = specSelectors.contentTypeValues(pathMethod).get("requestContentType")
    let consumes = this.props.consumes && this.props.consumes.size ? this.props.consumes : ParamBody.defaultProp.consumes
--- a/src/core/components/parameter-row.jsx
+++ b/src/core/components/parameter-row.jsx
@@ -11,7 +11,8 @@ export default class ParameterRow extends Component {
    isExecute: PropTypes.bool,
    onChangeConsumes: PropTypes.func.isRequired,
    specSelectors: PropTypes.object.isRequired,
-    pathMethod: PropTypes.array.isRequired
+    pathMethod: PropTypes.array.isRequired,
+    getConfigs: PropTypes.func.isRequired
  }

  constructor(props, context) {
@@ -19,7 +20,7 @@ export default class ParameterRow extends Component {

    let { specSelectors, pathMethod, param } = props
    let defaultValue = param.get("default")
-    let parameter = specSelectors.getParameter(pathMethod, param.get("name"))
+    let parameter = specSelectors.getParameter(pathMethod, param.get("name"), param.get("in"))
    let value = parameter ? parameter.get("value") : ""
    if ( defaultValue !== undefined && value === undefined ) {
      this.onChangeWrapper(defaultValue)
@@ -30,7 +31,7 @@ export default class ParameterRow extends Component {
    let { specSelectors, pathMethod, param } = props
    let example = param.get("example")
    let defaultValue = param.get("default")
-    let parameter = specSelectors.getParameter(pathMethod, param.get("name"))
+    let parameter = specSelectors.getParameter(pathMethod, param.get("name"), param.get("in"))
    let paramValue = parameter ? parameter.get("value") : undefined
    let enumValue = parameter ? parameter.get("enum") : undefined
    let value
@@ -56,7 +57,7 @@ export default class ParameterRow extends Component {
  }

  render() {
-    let {param, onChange, getComponent, isExecute, fn, onChangeConsumes, specSelectors, pathMethod} = this.props
+    let {param, onChange, getComponent, getConfigs, isExecute, fn, onChangeConsumes, specSelectors, pathMethod} = this.props

    let { isOAS3 } = specSelectors

@@ -81,13 +82,12 @@ export default class ParameterRow extends Component {
    const Markdown = getComponent("Markdown")

    let schema = param.get("schema")
-
    let type = isOAS3 && isOAS3() ? param.getIn(["schema", "type"]) : param.get("type")
    let isFormData = inType === "formData"
    let isFormDataSupported = "FormData" in win
    let required = param.get("required")
-    let itemType =  param.getIn(isOAS3 && isOAS3() ? ["schema", "items", "type"] : ["items", "type"])
-    let parameter = specSelectors.getParameter(pathMethod, param.get("name"))
+    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") : ""

    return (
@@ -121,6 +121,7 @@ export default class ParameterRow extends Component {

          {
            bodyParam && schema ? <ModelExample getComponent={ getComponent }
+                                                getConfigs={ getConfigs }
                                                isExecute={ isExecute }
                                                specSelectors={ specSelectors }
                                                schema={ schema }
--- a/src/core/components/parameters.jsx
+++ b/src/core/components/parameters.jsx
@@ -19,7 +19,8 @@ export default class Parameters extends Component {
    onTryoutClick: PropTypes.func,
    onCancelClick: PropTypes.func,
    onChangeKey: PropTypes.array,
-    pathMethod: PropTypes.array.isRequired
+    pathMethod: PropTypes.array.isRequired,
+    getConfigs: PropTypes.func.isRequired
  }


@@ -37,7 +38,7 @@ export default class Parameters extends Component {
      onChangeKey,
    } = this.props

-    changeParam( onChangeKey, param.get("name"), value, isXml)
+    changeParam( onChangeKey, param.get("name"), param.get("in"), value, isXml)
  }

  onChangeConsumesWrapper = ( val ) => {
@@ -60,6 +61,7 @@ export default class Parameters extends Component {

      fn,
      getComponent,
+      getConfigs,
      specSelectors,
      pathMethod
    } = this.props
@@ -93,8 +95,9 @@ export default class Parameters extends Component {
                  eachMap(parameters, (parameter) => (
                    <ParameterRow fn={ fn }
                      getComponent={ getComponent }
+                      getConfigs={ getConfigs }
                      param={ parameter }
-                      key={ parameter.get( "name" ) }
+                      key={ `${parameter.get( "in" )}.${parameter.get("name")}` }
                      onChange={ this.onChange }
                      onChangeConsumes={this.onChangeConsumesWrapper}
                      specSelectors={ specSelectors }
--- a/src/core/components/primitive-model.jsx
+++ b/src/core/components/primitive-model.jsx
@@ -23,6 +23,7 @@ export default class Primitive extends Component {
    let format = schema.get("format")
    let xml = schema.get("xml")
    let enumArray = schema.get("enum")
+    let title = schema.get("title") || name
    let description = schema.get("description")
    let properties = schema.filter( ( v, key) => ["enum", "type", "format", "description", "$$ref"].indexOf(key) === -1 )
    const Markdown = getComponent("Markdown")
@@ -30,7 +31,7 @@ export default class Primitive extends Component {

    return <span className="model">
      <span className="prop">
-        { name && <span className={`${depth === 1 && "model-title"} prop-name`}>{ name }</span> }
+        { name && <span className={`${depth === 1 && "model-title"} prop-name`}>{ title }</span> }
        <span className="prop-type">{ type }</span>
        { format && <span className="prop-format">(${format})</span>}
        {
--- a/src/core/components/providers/markdown.jsx
+++ b/src/core/components/providers/markdown.jsx
@@ -1,37 +1,40 @@
 import React from "react"
 import PropTypes from "prop-types"
-import Remarkable from "react-remarkable"
+import Remarkable from "remarkable"
 import sanitize from "sanitize-html"

 function Markdown({ source }) {
-  const sanitized = sanitizer(source)
+    const html = new Remarkable({
+        html: true,
+        typographer: true,
+        breaks: true,
+        linkify: true,
+        linkTarget: "_blank"
+    }).render(source)
+    const sanitized = sanitizer(html)

-  // sometimes the sanitizer returns "undefined" as a string
-  if(!source || !sanitized || sanitized === "undefined") {
-    return null
-  }
+    if ( !source || !html || !sanitized ) {
+        return null
+    }

-  return <div className="markdown">
-    <Remarkable
-      options={{html: true, typographer: true, breaks: true, linkify: true, linkTarget: "_blank"}}
-      source={sanitized}
-      ></Remarkable>
-  </div>
+    return (
+        <div className="markdown" dangerouslySetInnerHTML={{ __html: sanitized }}></div>
+    )
 }

 Markdown.propTypes = {
-  source: PropTypes.string.isRequired
+    source: PropTypes.string.isRequired
 }

 export default Markdown

 const sanitizeOptions = {
-  textFilter: function(text) {
-    return text
-      .replace(/&quot;/g, "\"")
-  }
+    allowedTags: sanitize.defaults.allowedTags.concat([ "img" ]),
+    textFilter: function(text) {
+        return text.replace(/&quot;/g, "\"")
+    }
 }

 export function sanitizer(str) {
-  return sanitize(str, sanitizeOptions)
+    return sanitize(str, sanitizeOptions)
 }
--- a/src/core/components/response-body.jsx
+++ b/src/core/components/response-body.jsx
@@ -49,10 +49,10 @@ export default class ResponseBody extends React.Component {
      // Download
    } else if (
      /^application\/octet-stream/i.test(contentType) ||
-      headers["Content-Disposition"] && (/attachment/i).test(headers["Content-Disposition"]) ||
-      headers["content-disposition"] && (/attachment/i).test(headers["content-disposition"]) ||
-      headers["Content-Description"] && (/File Transfer/i).test(headers["Content-Description"]) ||
-      headers["content-description"] && (/File Transfer/i).test(headers["content-description"])) {
+      (headers["Content-Disposition"] && (/attachment/i).test(headers["Content-Disposition"])) ||
+      (headers["content-disposition"] && (/attachment/i).test(headers["content-disposition"])) ||
+      (headers["Content-Description"] && (/File Transfer/i).test(headers["Content-Description"])) ||
+      (headers["content-description"] && (/File Transfer/i).test(headers["content-description"]))) {

      let contentLength = headers["content-length"] || headers["Content-Length"]
      if ( !(+contentLength) ) return null
--- a/src/core/components/response.jsx
+++ b/src/core/components/response.jsx
@@ -1,7 +1,8 @@
 import React from "react"
 import PropTypes from "prop-types"
+import cx from "classnames"
 import { fromJS, Seq } from "immutable"
-import { getSampleSchema } from "core/utils"
+import { getSampleSchema, fromJSOrdered } from "core/utils"

 const getExampleComponent = ( sampleResponse, examples, HighlightCode ) => {
  if ( examples && examples.size ) {
@@ -44,25 +45,39 @@ export default class Response extends React.Component {
    response: PropTypes.object,
    className: PropTypes.string,
    getComponent: PropTypes.func.isRequired,
+    getConfigs: PropTypes.func.isRequired,
    specSelectors: PropTypes.object.isRequired,
    fn: PropTypes.object.isRequired,
-    contentType: PropTypes.string
+    contentType: PropTypes.string,
+    controlsAcceptHeader: PropTypes.bool,
+    onContentTypeChange: PropTypes.func
  }

  static defaultProps = {
    response: fromJS({}),
+    onContentTypeChange: () => {}
  };

+  _onContentTypeChange = (value) => {
+    const { onContentTypeChange, controlsAcceptHeader } = this.props
+    this.setState({ responseContentType: value })
+    onContentTypeChange({
+      value: value,
+      controlsAcceptHeader
+    })
+  }
+
  render() {
    let {
      code,
      response,
      className,
-
      fn,
      getComponent,
+      getConfigs,
      specSelectors,
-      contentType
+      contentType,
+      controlsAcceptHeader
    } = this.props

    let { inferSchema } = fn
@@ -94,6 +109,14 @@ export default class Response extends React.Component {
        includeWriteOnly: true // writeOnly has no filtering effect in swagger 2.0
       }) : null
    }
+
+    if(examples) {
+      examples = examples.map(example => {
+        // Remove unwanted properties from examples
+        return example.set ? example.set("$$ref", undefined) : example
+      })
+    }
+
    let example = getExampleComponent( sampleResponse, examples, HighlightCode )

    return (
@@ -107,17 +130,25 @@ export default class Response extends React.Component {
            <Markdown source={ response.get( "description" ) } />
          </div>

-          { isOAS3 ? <ContentType
-              value={this.state.responseContentType}
-              contentTypes={ response.get("content") ? response.get("content").keySeq() : Seq() }
-              onChange={(val) => this.setState({ responseContentType: val })}
-              className="response-content-type" /> : null }
+          { isOAS3 ?
+            <div className={cx("response-content-type", {
+              "controls-accept-header": controlsAcceptHeader
+            })}>
+              <ContentType
+                  value={this.state.responseContentType}
+                  contentTypes={ response.get("content") ? response.get("content").keySeq() : Seq() }
+                  onChange={this._onContentTypeChange}
+                  />
+                { controlsAcceptHeader ? <small>Controls <code>Accept</code> header.</small> : null }
+            </div>
+             : null }

          { example ? (
            <ModelExample
              getComponent={ getComponent }
+              getConfigs={ getConfigs }
              specSelectors={ specSelectors }
-              schema={ fromJS(schema) }
+              schema={ fromJSOrdered(schema) }
              example={ example }/>
          ) : null}

--- a/src/core/components/responses.jsx
+++ b/src/core/components/responses.jsx
@@ -1,7 +1,7 @@
 import React from "react"
 import PropTypes from "prop-types"
 import { fromJS } from "immutable"
-import { defaultStatusCode } from "core/utils"
+import { defaultStatusCode, getAcceptControllingResponse } from "core/utils"

 export default class Responses extends React.Component {

@@ -12,12 +12,13 @@ export default class Responses extends React.Component {
    produces: PropTypes.object,
    producesValue: PropTypes.any,
    getComponent: PropTypes.func.isRequired,
+    getConfigs: PropTypes.func.isRequired,
    specSelectors: PropTypes.object.isRequired,
    specActions: PropTypes.object.isRequired,
+    oas3Actions: PropTypes.object.isRequired,
    pathMethod: PropTypes.array.isRequired,
    displayRequestDuration: PropTypes.bool.isRequired,
-    fn: PropTypes.object.isRequired,
-    getConfigs: PropTypes.func.isRequired
+    fn: PropTypes.object.isRequired
  }

  static defaultProps = {
@@ -29,8 +30,28 @@ export default class Responses extends React.Component {

  onChangeProducesWrapper = ( val ) => this.props.specActions.changeProducesValue(this.props.pathMethod, val)

+  onResponseContentTypeChange = ({ controlsAcceptHeader, value }) => {
+    const { oas3Actions, pathMethod } = this.props
+    if(controlsAcceptHeader) {
+      oas3Actions.setResponseContentType({
+        value,
+        pathMethod
+      })
+    }
+  }
+
  render() {
-    let { responses, request, tryItOutResponse, getComponent, getConfigs, specSelectors, fn, producesValue, displayRequestDuration } = this.props
+    let {
+      responses,
+      request,
+      tryItOutResponse,
+      getComponent,
+      getConfigs,
+      specSelectors,
+      fn,
+      producesValue,
+      displayRequestDuration
+    } = this.props
    let defaultCode = defaultStatusCode( responses )

    const ContentType = getComponent( "contentType" )
@@ -39,6 +60,11 @@ export default class Responses extends React.Component {

    let produces = this.props.produces && this.props.produces.size ? this.props.produces : Responses.defaultProps.produces

+    const isSpecOAS3 = specSelectors.isOAS3()
+
+    const acceptControllingResponse = isSpecOAS3 ?
+      getAcceptControllingResponse(responses) : null
+
    return (
      <div className="responses-wrapper">
        <div className="opblock-section-header">
@@ -78,7 +104,6 @@ export default class Responses extends React.Component {
            <tbody>
              {
                responses.entrySeq().map( ([code, response]) => {
-
                  let className = tryItOutResponse && tryItOutResponse.get("status") == code ? "response_current" : ""
                  return (
                    <Response key={ code }
@@ -88,7 +113,10 @@ export default class Responses extends React.Component {
                              code={ code }
                              response={ response }
                              specSelectors={ specSelectors }
+                              controlsAcceptHeader={response === acceptControllingResponse}
+                              onContentTypeChange={this.onResponseContentTypeChange}
                              contentType={ producesValue }
+                              getConfigs={ getConfigs }
                              getComponent={ getComponent }/>
                    )
                }).toArray()
--- a/src/core/index.js
+++ b/src/core/index.js
@@ -45,6 +45,8 @@ module.exports = function SwaggerUI(opts) {
    requestInterceptor: (a => a),
    responseInterceptor: (a => a),
    showMutatedRequest: true,
+    defaultModelRendering: "example",
+    defaultModelExpandDepth: 1,

    // Initial set of plugins ( TODO rename this, or refactor - we don't need presets _and_ plugins. Its just there for performance.
    // Instead, we can compile the first plugin ( it can be a collection of plugins ), then batch the rest.
--- a/src/core/oauth2-authorize.js
+++ b/src/core/oauth2-authorize.js
@@ -64,7 +64,8 @@ export default function authorize ( { auth, authActions, errActions, configs, au
    }
  }

-  let url = [schema.get("authorizationUrl"), query.join("&")].join("?")
+  let authorizationUrl = schema.get("authorizationUrl")
+  let url = [authorizationUrl, query.join("&")].join(authorizationUrl.indexOf("?") === -1 ? "?" : "&")

  // pass action authorizeOauth2 and authentication data through window
  // to authorize with oauth2
--- a/src/core/plugins/deep-linking/layout-wrap-actions.js
+++ b/src/core/plugins/deep-linking/layout-wrap-actions.js
@@ -1,4 +1,5 @@
 import { setHash } from "./helpers"
+import { createDeepLinkPath } from "core/utils"

 export const show = (ori, { getConfigs }) => (...args) => {
  ori(...args)
@@ -19,12 +20,12 @@ export const show = (ori, { getConfigs }) => (...args) => {

      if(type === "operations") {
        let [, tag, operationId] = thing
-        setHash(`/${tag}/${operationId}`)
+        setHash(`/${createDeepLinkPath(tag)}/${createDeepLinkPath(operationId)}`)
      }

      if(type === "operations-tag") {
        let [, tag] = thing
-        setHash(`/${tag}`)
+        setHash(`/${createDeepLinkPath(tag)}`)
      }
    }

--- a/src/core/plugins/deep-linking/spec-wrap-actions.js
+++ b/src/core/plugins/deep-linking/spec-wrap-actions.js
@@ -1,4 +1,5 @@
 import scrollTo from "scroll-to-element"
+import { escapeDeepLinkPath } from "core/utils"

 const SCROLL_OFFSET = -5
 let hasHashBeenParsed = false
@@ -34,14 +35,14 @@ export const updateResolved = (ori, { layoutActions, getConfigs }) => (...args)
      layoutActions.show(["operations-tag", tag], true)
      layoutActions.show(["operations", tag, operationId], true)

-      scrollTo(`#operations-${tag}-${operationId}`, {
+      scrollTo(`#operations-${escapeDeepLinkPath(tag)}-${escapeDeepLinkPath(operationId)}`, {
        offset: SCROLL_OFFSET
      })
    } else if(tag) {
      // Pre-expand and scroll to the tag
      layoutActions.show(["operations-tag", tag], true)

-      scrollTo(`#operations-tag-${tag}`, {
+      scrollTo(`#operations-tag-${escapeDeepLinkPath(tag)}`, {
        offset: SCROLL_OFFSET
      })
    }
--- a/src/core/plugins/oas3/actions.js
+++ b/src/core/plugins/oas3/actions.js
@@ -4,6 +4,7 @@
 export const UPDATE_SELECTED_SERVER = "oas3_set_servers"
 export const UPDATE_REQUEST_BODY_VALUE = "oas3_set_request_body_value"
 export const UPDATE_REQUEST_CONTENT_TYPE = "oas3_set_request_content_type"
+export const UPDATE_RESPONSE_CONTENT_TYPE = "oas3_set_response_content_type"
 export const UPDATE_SERVER_VARIABLE_VALUE = "oas3_set_server_variable_value"

 export function setSelectedServer (selectedServerUrl) {
@@ -27,6 +28,13 @@ export function setRequestContentType ({ value, pathMethod }) {
  }
 }

+export function setResponseContentType ({ value, pathMethod }) {
+  return {
+    type: UPDATE_RESPONSE_CONTENT_TYPE,
+    payload: { value, pathMethod }
+  }
+}
+
 export function setServerVariableValue ({ server, key, val }) {
  return {
    type: UPDATE_SERVER_VARIABLE_VALUE,
--- a/src/core/plugins/oas3/reducers.js
+++ b/src/core/plugins/oas3/reducers.js
@@ -2,7 +2,8 @@ import {
  UPDATE_SELECTED_SERVER,
  UPDATE_REQUEST_BODY_VALUE,
  UPDATE_REQUEST_CONTENT_TYPE,
-  UPDATE_SERVER_VARIABLE_VALUE
+  UPDATE_SERVER_VARIABLE_VALUE,
+  UPDATE_RESPONSE_CONTENT_TYPE
 } from "./actions"

 export default {
@@ -17,6 +18,10 @@ export default {
    let [path, method] = pathMethod
    return state.setIn( [ "requestData", path, method, "requestContentType" ], value)
  },
+  [UPDATE_RESPONSE_CONTENT_TYPE]: (state, { payload: { value, pathMethod } } ) =>{
+    let [path, method] = pathMethod
+    return state.setIn( [ "requestData", path, method, "responseContentType" ], value)
+  },
  [UPDATE_SERVER_VARIABLE_VALUE]: (state, { payload: { server, key, val } } ) =>{
    return state.setIn( [ "serverVariableValues", server, key ], val)
  },
--- a/src/core/plugins/oas3/selectors.js
+++ b/src/core/plugins/oas3/selectors.js
@@ -30,6 +30,11 @@ export const requestContentType = onlyOAS3((state, path, method) => {
  }
 )

+export const responseContentType = onlyOAS3((state, path, method) => {
+    return state.getIn(["requestData", path, method, "responseContentType"]) || null
+  }
+)
+
 export const serverVariableValue = onlyOAS3((state, server, key) => {
    return state.getIn(["serverVariableValues", server, key]) || null
  }
--- a/src/core/plugins/oas3/wrap-components/markdown.js
+++ b/src/core/plugins/oas3/wrap-components/markdown.js
@@ -1,11 +1,26 @@
 import React from "react"
 import ReactMarkdown from "react-markdown"
+import { Parser, HtmlRenderer } from "commonmark"
 import { OAS3ComponentWrapFactory } from "../helpers"
 import { sanitizer } from "core/components/providers/markdown"

-export default OAS3ComponentWrapFactory(({ source }) => { return source ? (
-  <ReactMarkdown
-    source={sanitizer(source)}
-    className={"renderedMarkdown"}
-    />
-) : null})
+export default OAS3ComponentWrapFactory(({ source }) => { 
+  if ( source ) {
+    const parser = new Parser()
+    const writer = new HtmlRenderer()
+    const html = writer.render(parser.parse(source || ""))
+    const sanitized = sanitizer(html)
+
+    if ( !source || !html || !sanitized ) {
+        return null
+    }
+
+    return (
+      <ReactMarkdown
+        source={sanitized}
+        className={"renderedMarkdown"}
+      />
+    )
+  }
+  return null
+})
--- a/src/core/plugins/oas3/wrap-components/parameters.jsx
+++ b/src/core/plugins/oas3/wrap-components/parameters.jsx
@@ -49,7 +49,7 @@ class Parameters extends Component {
      onChangeKey,
    } = this.props

-    changeParam( onChangeKey, param.get("name"), value, isXml)
+    changeParam( onChangeKey, param.get("name"), param.get("in"), value, isXml)
  }

  onChangeConsumesWrapper = ( val ) => {
--- a/src/core/plugins/spec/actions.js
+++ b/src/core/plugins/spec/actions.js
@@ -130,10 +130,10 @@ export const formatIntoYaml = () => ({specActions, specSelectors}) => {
  }
 }

-export function changeParam( path, paramName, value, isXml ){
+export function changeParam( path, paramName, paramIn, value, isXml ){
  return {
    type: UPDATE_PARAM,
-    payload:{ path, value, paramName, isXml }
+    payload:{ path, value, paramName, paramIn, isXml }
  }
 }

@@ -206,7 +206,6 @@ export const executeRequest = (req) =>
    // if url is relative, parseUrl makes it absolute by inferring from `window.location`
    req.contextUrl = parseUrl(specSelectors.url()).toString()

-
    if(op && op.operationId) {
      req.operationId = op.operationId
    } else if(op && pathName && method) {
@@ -218,6 +217,7 @@ export const executeRequest = (req) =>
      req.server = oas3Selectors.selectedServer()
      req.serverVariables = oas3Selectors.serverVariables(req.server).toJS()
      req.requestContentType = oas3Selectors.requestContentType(pathName, method)
+      req.responseContentType = oas3Selectors.responseContentType(pathName, method) || "*/*"
      const requestBody = oas3Selectors.requestBodyValue(pathName, method)

      if(isJSONObject(requestBody)) {
--- a/src/core/plugins/spec/reducers.js
+++ b/src/core/plugins/spec/reducers.js
@@ -40,9 +40,10 @@ export default {
  },

  [UPDATE_PARAM]: ( state, {payload} ) => {
-    let { path, paramName, value, isXml } = payload
+    let { path, paramName, paramIn, value, isXml } = payload
+
    return state.updateIn( [ "resolved", "paths", ...path, "parameters" ], fromJS([]), parameters => {
-      const index = parameters.findIndex(p => p.get( "name" ) === paramName )
+      const index = parameters.findIndex(p => p.get( "name" ) === paramName && p.get("in") === paramIn )
      if (!(value instanceof win.File)) {
        value = fromJSOrdered( value )
      }
--- a/src/core/plugins/spec/selectors.js
+++ b/src/core/plugins/spec/selectors.js
@@ -260,10 +260,10 @@ export const allowTryItOutFor = () => {
 }

 // Get the parameter value by parameter name
-export function getParameter(state, pathMethod, name) {
+export function getParameter(state, pathMethod, name, inType) {
  let params = spec(state).getIn(["paths", ...pathMethod, "parameters"], fromJS([]))
  return params.filter( (p) => {
-    return Map.isMap(p) && p.get("name") === name
+    return Map.isMap(p) && p.get("name") === name && p.get("in") === inType
  }).first()
 }

@@ -280,7 +280,7 @@ export function parameterValues(state, pathMethod, isXml) {
  let params = spec(state).getIn(["paths", ...pathMethod, "parameters"], fromJS([]))
  return params.reduce( (hash, p) => {
    let value = isXml && p.get("in") === "body" ? p.get("value_xml") : p.get("value")
-    return hash.set(p.get("name"), value)
+    return hash.set(`${p.get("in")}.${p.get("name")}`, value)
  }, fromJS({}))
 }

--- a/src/core/utils.js
+++ b/src/core/utils.js
@@ -8,6 +8,7 @@ import some from "lodash/some"
 import eq from "lodash/eq"
 import { memoizedSampleFromSchema, memoizedCreateXMLExample } from "core/plugins/samples/fn"
 import win from "./window"
+import cssEscape from "css.escape"

 const DEFAULT_REPONSE_KEY = "default"

@@ -469,6 +470,18 @@ export const propChecker = (props, nextProps, objectList=[], ignoreList=[]) => {
    || objectList.some( objectPropName => !eq(props[objectPropName], nextProps[objectPropName])))
 }

+export const validateMaximum = ( val, max ) => {
+  if (val > max) {
+    return "Value must be less than Maximum"
+  }
+}
+
+export const validateMinimum = ( val, min ) => {
+  if (val < min) {
+    return "Value must be greater than Minimum"
+  }
+}
+
 export const validateNumber = ( val ) => {
  if (!/^-?\d+(\.?\d+)?$/.test(val)) {
    return "Value must be a number"
@@ -499,12 +512,41 @@ export const validateString = ( val ) => {
  }
 }

+export const validateDateTime = (val) => {
+    if (isNaN(Date.parse(val))) {
+        return "Value must be a DateTime"
+    }
+}
+
+export const validateGuid = (val) => {
+    if (!/^[{(]?[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}[)}]?$/.test(val)) {
+        return "Value must be a Guid"
+    }
+}
+
+export const validateMaxLength = (val, max) => {
+  if (val.length > max) {
+      return "Value must be less than MaxLength"
+  }
+}
+
+export const validateMinLength = (val, min) => {
+  if (val.length < min) {
+      return "Value must be greater than MinLength"
+  }
+}
+
 // validation of parameters before execute
 export const validateParam = (param, isXml) => {
  let errors = []
  let value = isXml && param.get("in") === "body" ? param.get("value_xml") : param.get("value")
  let required = param.get("required")
+  let maximum = param.get("maximum")
+  let minimum = param.get("minimum")
  let type = param.get("type")
+  let format = param.get("format")
+  let maxLength = param.get("maxLength")
+  let minLength = param.get("minLength")

  /*
    If the parameter is required OR the parameter has a value (meaning optional, but filled in)
@@ -521,13 +563,40 @@ export const validateParam = (param, isXml) => {
    let numberCheck = type === "number" && !validateNumber(value) // validateNumber returns undefined if the value is a number
    let integerCheck = type === "integer" && !validateInteger(value) // validateInteger returns undefined if the value is an integer

+    if (maxLength || maxLength === 0) {
+      let err = validateMaxLength(value, maxLength)
+      if (err) errors.push(err)
+    }
+
+    if (minLength) {
+      let err = validateMinLength(value, minLength)
+      if (err) errors.push(err)
+    }
+
    if ( required && !(stringCheck || arrayCheck || listCheck || fileCheck || booleanCheck || numberCheck || integerCheck) ) {
      errors.push("Required field is not provided")
      return errors
    }

+    if (maximum || maximum === 0) {
+      let err = validateMaximum(value, maximum)
+      if (err) errors.push(err)
+    }
+
+    if (minimum || minimum === 0) {
+      let err = validateMinimum(value, minimum)
+      if (err) errors.push(err)
+    }
+
    if ( type === "string" ) {
-      let err = validateString(value)
+      let err
+      if (format === "date-time") {
+          err = validateDateTime(value)
+      } else if (format === "uuid") {
+          err = validateGuid(value)
+      } else {
+          err = validateString(value)
+      }
      if (!err) return errors
      errors.push(err)
    } else if ( type === "boolean" ) {
@@ -650,3 +719,29 @@ export const shallowEqualKeys = (a,b, keys) => {
    return eq(a[key], b[key])
  })
 }
+
+export function getAcceptControllingResponse(responses) {
+  if(!Im.OrderedMap.isOrderedMap(responses)) {
+    // wrong type!
+    return null
+  }
+
+  if(!responses.size) {
+    // responses is empty
+    return null
+  }
+
+  const suitable2xxResponse = responses.find((res, k) => {
+    return k.startsWith("2") && Object.keys(res.get("content") || {}).length > 0
+  })
+
+  // try to find a suitable `default` responses
+  const defaultResponse = responses.get("default") || Im.OrderedMap()
+  const defaultResponseMediaTypes = (defaultResponse.get("content") || Im.OrderedMap()).keySeq().toJS()
+  const suitableDefaultResponse = defaultResponseMediaTypes.length ? defaultResponse : null
+
+  return suitable2xxResponse || suitableDefaultResponse
+}
+
+export const createDeepLinkPath = (str) => typeof str == "string" || str instanceof String ? str.trim().replace(/\s/g, "_") : ""
+export const escapeDeepLinkPath = (str) => cssEscape( createDeepLinkPath(str) )
--- a/src/style/_layout.scss
+++ b/src/style/_layout.scss
@@ -252,8 +252,11 @@
        font-size: 16px;

        display: flex;
+        flex: 0 3 auto;
        align-items: center;

+        word-break: break-all;
+
        padding: 0 10px;

        @include text_code();
@@ -775,6 +778,17 @@

 .response-content-type {
  padding-top: 1em;
+
+  &.controls-accept-header {
+    select {
+      border-color: green;
+    }
+
+    small {
+      color: green;
+      font-size: .7em;
+    }
+  }
 }

@keyframes blinker
--- a/src/style/_models.scss
+++ b/src/style/_models.scss
@@ -237,7 +237,8 @@ span
 .prop-name
 {
    display: inline-block;
-    width: 100px;
+    margin-right: 1em;
+    width: 8em;
 }

 .prop-type