Merge branch 'master' of github.com:swagger-api/swagger-ui into bug/3511-query-formData-parameters

# Conflicts: # src/core/components/parameter-row.jsx # src/core/plugins/spec/actions.js
2017-09-18 16:59:08 -06:00
parent 5d7d20ec5e aa9e008f0b
commit 7ef8a7ddc7
86 changed files with 4210 additions and 291 deletions
--- a/src/core/components/array-model.jsx
+++ b/src/core/components/array-model.jsx
@@ -15,7 +15,7 @@ export default class ArrayModel extends Component {
  }

  render(){
-    let { getComponent, required, schema, depth, expandDepth, name } = this.props
+    let { getComponent, schema, depth, expandDepth, name } = this.props
    let items = schema.get("items")
    let title = schema.get("title") || name
    let properties = schema.filter( ( v, key) => ["type", "items", "$$ref"].indexOf(key) === -1 )
@@ -28,10 +28,15 @@ 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 }/></span>
+          <span><Model { ...this.props } name={null} schema={ items } required={ false } depth={ depth + 1 } /></span>
        ]
        {
          properties.size ? <span>
@@ -41,7 +46,6 @@ export default class ArrayModel extends Component {
            : null
        }
      </ModelCollapse>
-      { required && <span style={{ color: "red" }}>*</span>}
    </span>
  }
 }
--- a/src/core/components/auth/authorization-popup.jsx
+++ b/src/core/components/auth/authorization-popup.jsx
@@ -23,7 +23,7 @@ export default class AuthorizationPopup extends React.Component {
                <h3>Available authorizations</h3>
                <button type="button" className="close-modal" onClick={ this.close }>
                  <svg width="20" height="20">
-                    <use xlinkHref="#close" />
+                    <use href="#close" xlinkHref="#close" />
                  </svg>
                </button>
              </div>
--- a/src/core/components/auth/authorize-btn.jsx
+++ b/src/core/components/auth/authorize-btn.jsx
@@ -25,7 +25,7 @@ export default class AuthorizeBtn extends React.Component {
        <button className={isAuthorized ? "btn authorize locked" : "btn authorize unlocked"} onClick={ this.onClick }>
          <span>Authorize</span>
          <svg width="20" height="20">
-            <use xlinkHref={ isAuthorized ? "#locked" : "#unlocked" } />
+            <use href={ isAuthorized ? "#locked" : "#unlocked" } xlinkHref={ isAuthorized ? "#locked" : "#unlocked" } />
          </svg>
        </button>
      { showPopup && <AuthorizationPopup /> }
--- a/src/core/components/auth/authorize-operation-btn.jsx
+++ b/src/core/components/auth/authorize-operation-btn.jsx
@@ -24,7 +24,7 @@ export default class AuthorizeOperationBtn extends React.Component {
    return (
      <button className={isAuthorized ? "authorization__btn locked" : "authorization__btn unlocked"} onClick={ this.onClick }>
        <svg width="20" height="20">
-          <use xlinkHref={ isAuthorized ? "#locked" : "#unlocked" } />
+          <use href={ isAuthorized ? "#locked" : "#unlocked" } xlinkHref={ isAuthorized ? "#locked" : "#unlocked" } />
        </svg>
      </button>

--- a/src/core/components/layouts/base.jsx
+++ b/src/core/components/layouts/base.jsx
@@ -8,6 +8,8 @@ export default class BaseLayout extends React.Component {
    errActions: PropTypes.object.isRequired,
    specActions: PropTypes.object.isRequired,
    specSelectors: PropTypes.object.isRequired,
+    oas3Selectors: PropTypes.object.isRequired,
+    oas3Actions: PropTypes.object.isRequired,
    layoutSelectors: PropTypes.object.isRequired,
    layoutActions: PropTypes.object.isRequired,
    getComponent: PropTypes.func.isRequired
@@ -19,7 +21,14 @@ export default class BaseLayout extends React.Component {
  }

  render() {
-    let { specSelectors, specActions, getComponent, layoutSelectors } = this.props
+    let {
+      specSelectors,
+      specActions,
+      getComponent,
+      layoutSelectors,
+      oas3Selectors,
+      oas3Actions
+    } = this.props

    let info = specSelectors.info()
    let url = specSelectors.url()
@@ -28,6 +37,7 @@ export default class BaseLayout extends React.Component {
    let securityDefinitions = specSelectors.securityDefinitions()
    let externalDocs = specSelectors.externalDocs()
    let schemes = specSelectors.schemes()
+    let servers = specSelectors.servers()

    let Info = getComponent("info")
    let Operations = getComponent("operations", true)
@@ -35,6 +45,7 @@ export default class BaseLayout extends React.Component {
    let AuthorizeBtn = getComponent("authorizeBtn", true)
    let Row = getComponent("Row")
    let Col = getComponent("Col")
+    let Servers = getComponent("Servers")
    let Errors = getComponent("errors", true)

    let isLoading = specSelectors.loadingStatus() === "loading"
@@ -69,7 +80,10 @@ export default class BaseLayout extends React.Component {
              <div className="scheme-container">
                <Col className="schemes wrapper" mobile={12}>
                  { schemes && schemes.size ? (
-                    <Schemes schemes={ schemes } specActions={ specActions } />
+                    <Schemes
+                      currentScheme={specSelectors.operationScheme()}
+                      schemes={ schemes }
+                      specActions={ specActions } />
                  ) : null }

                  { securityDefinitions ? (
@@ -79,6 +93,22 @@ export default class BaseLayout extends React.Component {
              </div>
            ) : null }

+            { servers && servers.size ? (
+              <div className="server-container">
+                <Col className="servers wrapper" mobile={12}>
+                  <Servers
+                    servers={servers}
+                    currentServer={oas3Selectors.selectedServer()}
+                    setSelectedServer={oas3Actions.setSelectedServer}
+                    setServerVariableValue={oas3Actions.setServerVariableValue}
+                    getServerVariable={oas3Selectors.serverVariableValue}
+                    getEffectiveServerValue={oas3Selectors.serverEffectiveValue}
+                    />
+                </Col>
+              </div>
+
+            ) : null}
+
            {
              filter === null || filter === false ? null :
                <div className="filter-container">
--- a/src/core/components/live-response.jsx
+++ b/src/core/components/live-response.jsx
@@ -29,13 +29,18 @@ Duration.propTypes = {
 export default class LiveResponse extends React.Component {
  static propTypes = {
    response: PropTypes.object.isRequired,
+    specSelectors: PropTypes.object.isRequired,
+    pathMethod: PropTypes.object.isRequired,
    getComponent: PropTypes.func.isRequired,
-    displayRequestDuration: PropTypes.bool.isRequired
+    displayRequestDuration: PropTypes.bool.isRequired,
+    getConfigs: PropTypes.func.isRequired
  }

  render() {
-    const { request, response, getComponent, displayRequestDuration } = this.props
+    const { response, getComponent, getConfigs, displayRequestDuration, specSelectors, pathMethod } = this.props
+    const { showMutatedRequest } = getConfigs()

+    const curlRequest = showMutatedRequest ? specSelectors.mutatedRequestFor(pathMethod[0], pathMethod[1]) : specSelectors.requestFor(pathMethod[0], pathMethod[1])
    const status = response.get("status")
    const url = response.get("url")
    const headers = response.get("headers").toJS()
@@ -55,7 +60,7 @@ export default class LiveResponse extends React.Component {

    return (
      <div>
-        { request && <Curl request={ request }/> }
+        { curlRequest && <Curl request={ curlRequest }/> }
        <h4>Server response</h4>
        <table className="responses-table">
          <thead>
--- 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={ name || modelName }
+          schema={ schema }
+          name={ name }
          deprecated={deprecated}
-          isRef={ isRef!== undefined ? isRef : !!$$ref } />
+          isRef={ isRef } />
      case "array":
        return <ArrayModel
          className="array" { ...this.props }
-          schema={ modelSchema }
-          name={ name || modelName }
+          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={ name || modelName }
+          schema={ schema }
+          name={ name }
          deprecated={deprecated}
-          required={ required }/>    }
+          required={ required }/>
+    }
  }
 }
--- a/src/core/components/models.jsx
+++ b/src/core/components/models.jsx
@@ -24,7 +24,7 @@ export default class Models extends Component {
    return <section className={ showModels ? "models is-open" : "models"}>
      <h4 onClick={() => layoutActions.show("models", !showModels)}>
        <span>Models</span>
-        <svg className="arrow" width="20" height="20">
+        <svg width="20" height="20">
          <use xlinkHref={showModels ? "#large-arrow-down" : "#large-arrow"} />
        </svg>
      </h4>
@@ -34,7 +34,6 @@ export default class Models extends Component {
            return <div className="model-container" key={ `models-section-${name}` }>
              <ModelWrapper name={ name }
                     schema={ model }
-                     isRef={ true }
                     getComponent={ getComponent }
                     specSelectors={ specSelectors }/>
              </div>
--- a/src/core/components/object-model.jsx
+++ b/src/core/components/object-model.jsx
@@ -17,9 +17,10 @@ export default class ObjectModel extends Component {
  }

  render(){
-    let { schema, name, isRef, getComponent, depth, ...props } = this.props
-    let { expandDepth, specSelectors } = this.props
+    let { schema, name, isRef, getComponent, depth, expandDepth, ...otherProps } = this.props
+    let { specSelectors } = otherProps
    let { isOAS3 } = specSelectors
+
    let description = schema.get("description")
    let properties = schema.get("properties")
    let additionalProperties = schema.get("additionalProperties")
@@ -59,7 +60,7 @@ export default class ObjectModel extends Component {
          }
          <span className="inner-object">
            {
-              <table className="model" style={{ marginLeft: "2em" }}><tbody>
+              <table className="model"><tbody>
              {
                !description ? null : <tr style={{ color: "#999", fontStyle: "italic" }}>
                    <td>description:</td>
@@ -82,7 +83,7 @@ export default class ObjectModel extends Component {
                          { key }{ isRequired && <span style={{ color: "red" }}>*</span> }
                        </td>
                        <td style={{ verticalAlign: "top" }}>
-                          <Model key={ `object-${name}-${key}_${value}` } { ...props }
+                          <Model key={ `object-${name}-${key}_${value}` } { ...otherProps }
                                 required={ isRequired }
                                 getComponent={ getComponent }
                                 schema={ value }
@@ -96,7 +97,7 @@ export default class ObjectModel extends Component {
                  : <tr>
                    <td>{ "< * >:" }</td>
                    <td>
-                      <Model { ...props } required={ false }
+                      <Model { ...otherProps } required={ false }
                             getComponent={ getComponent }
                             schema={ additionalProperties }
                             depth={ depth + 1 } />
@@ -109,7 +110,7 @@ export default class ObjectModel extends Component {
                    <td>{ "anyOf ->" }</td>
                    <td>
                      {anyOf.map((schema, k) => {
-                        return <div key={k}><Model { ...props } required={ false }
+                        return <div key={k}><Model { ...otherProps } required={ false }
                                 getComponent={ getComponent }
                                 schema={ schema }
                                 depth={ depth + 1 } /></div>
@@ -123,7 +124,7 @@ export default class ObjectModel extends Component {
                    <td>{ "oneOf ->" }</td>
                    <td>
                      {oneOf.map((schema, k) => {
-                        return <div key={k}><Model { ...props } required={ false }
+                        return <div key={k}><Model { ...otherProps } required={ false }
                                 getComponent={ getComponent }
                                 schema={ schema }
                                 depth={ depth + 1 } /></div>
@@ -137,7 +138,7 @@ export default class ObjectModel extends Component {
                    <td>{ "not ->" }</td>
                    <td>
                      {not.map((schema, k) => {
-                        return <div key={k}><Model { ...props } required={ false }
+                        return <div key={k}><Model { ...otherProps } required={ false }
                                 getComponent={ getComponent }
                                 schema={ schema }
                                 depth={ depth + 1 } /></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")
@@ -161,12 +163,12 @@ export default class Operation extends PureComponent {
          <div className={`opblock-summary opblock-summary-${method}`} onClick={this.toggleShown} >
              <span className="opblock-summary-method">{method.toUpperCase()}</span>
              <span className={ deprecated ? "opblock-summary-path__deprecated" : "opblock-summary-path" } >
-                <a
-                  className="nostyle"
-                  onClick={(e) => e.preventDefault()}
-                  href={ isDeepLinkingEnabled ? `#/${isShownKey[1]}/${isShownKey[2]}` : ""} >
-                  <span>{path}</span>
-                </a>
+              <a
+                className="nostyle"
+                onClick={isDeepLinkingEnabled ? (e) => e.preventDefault() : null}
+                href={isDeepLinkingEnabled ? `#/${isShownKey[1]}/${isShownKey[2]}` : null}>
+                <span>{path}</span>
+              </a>
                <JumpToPath path={jumpToKey} />
              </span>

@@ -186,7 +188,7 @@ export default class Operation extends PureComponent {
            }
          </div>

-          <Collapse isOpened={shown} animated>
+          <Collapse isOpened={shown}>
            <div className="opblock-body">
              { deprecated && <h4 className="opblock-title_normal"> Warning: Deprecated</h4>}
              { description &&
@@ -229,7 +231,7 @@ export default class Operation extends PureComponent {
                             path={ path }
                             method={ method }
                             specActions={ specActions }
-                             operationScheme={ operationScheme } />
+                             currentScheme={ operationScheme } />
                  </div> : null
              }

@@ -263,7 +265,9 @@ export default class Operation extends PureComponent {
                    request={ request }
                    tryItOutResponse={ response }
                    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,
@@ -69,7 +71,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 (
@@ -81,8 +83,8 @@ export default class Operations extends React.Component {
                    id={isShownKey.join("-")}>
                    <a
                      className="nostyle"
-                      onClick={(e) => e.preventDefault()}
-                      href={ isDeepLinkingEnabled ? `#/${tag}` : ""}>
+                      onClick={isDeepLinkingEnabled ? (e) => e.preventDefault() : null}
+                      href= {isDeepLinkingEnabled ? `#/${tag}` : null}>
                      <span>{tag}</span>
                    </a>
                    { !tagDescription ? null :
@@ -109,7 +111,7 @@ export default class Operations extends React.Component {

                    <button className="expand-operation" title="Expand operation" onClick={() => layoutActions.show(isShownKey, !showTag)}>
                      <svg className="arrow" width="20" height="20">
-                        <use xlinkHref={showTag ? "#large-arrow-down" : "#large-arrow"} />
+                        <use href={showTag ? "#large-arrow-down" : "#large-arrow"} xlinkHref={showTag ? "#large-arrow-down" : "#large-arrow"} />
                      </svg>
                    </button>
                  </h4>
@@ -124,7 +126,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 +149,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
@@ -69,7 +69,9 @@ export default class ParamBody extends PureComponent {
    let { param, fn:{inferSchema} } = this.props
    let schema = inferSchema(param.toJS())

-    return getSampleSchema(schema, xml)
+    return getSampleSchema(schema, xml, {
+      includeWriteOnly: true
+    })
  }

  onChange = (value, { isEditBox, isXml }) => {
--- a/src/core/components/parameter-row.jsx
+++ b/src/core/components/parameter-row.jsx
@@ -62,6 +62,8 @@ export default class ParameterRow extends Component {
  render() {
    let {param, onChange, getComponent, isExecute, fn, onChangeConsumes, specSelectors, pathMethod} = this.props

+    let { isOAS3 } = specSelectors
+
    // const onChangeWrapper = (value) => onChange(param, value)
    const JsonSchemaForm = getComponent("JsonSchemaForm")
    const ParamBody = getComponent("ParamBody")
@@ -83,11 +85,11 @@ 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(["items", "type"])
+    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") : ""

@@ -98,7 +100,10 @@ export default class ParameterRow extends Component {
            { param.get("name") }
            { !required ? null : <span style={{color: "red"}}>&nbsp;*</span> }
          </div>
-          <div className="parameter__type">{ param.get("type") } { itemType && `[${itemType}]` }</div>
+          <div className="parameter__type">{ type } { itemType && `[${itemType}]` }</div>
+          <div className="parameter__deprecated">
+            { isOAS3 && isOAS3() && param.get("deprecated") ? "deprecated": null }
+          </div>
          <div className="parameter__in">({ param.get("in") })</div>
        </td>

--- a/src/core/components/primitive-model.jsx
+++ b/src/core/components/primitive-model.jsx
@@ -7,11 +7,12 @@ export default class Primitive extends Component {
  static propTypes = {
    schema: PropTypes.object.isRequired,
    getComponent: PropTypes.func.isRequired,
-    required: PropTypes.bool
+    name: PropTypes.string,
+    depth: PropTypes.number
  }

  render(){
-    let { schema, getComponent, required } = this.props
+    let { schema, getComponent, name, depth } = this.props

    if(!schema || !schema.get) {
      // don't render if schema isn't correctly formed
@@ -24,32 +25,34 @@ export default class Primitive extends Component {
    let enumArray = schema.get("enum")
    let description = schema.get("description")
    let properties = schema.filter( ( v, key) => ["enum", "type", "format", "description", "$$ref"].indexOf(key) === -1 )
-    let style = required ? { fontWeight: "bold" } : {}
    const Markdown = getComponent("Markdown")
    const EnumModel = getComponent("EnumModel")

-    return <span className="prop">
-      <span className="prop-type" style={ style }>{ type }</span> { required && <span style={{ color: "red" }}>*</span>}
-      { format && <span className="prop-format">(${format})</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 } />
-      }
-      {
-        xml && xml.size ? (<span><br /><span style={ propStyle }>xml:</span>
-          {
-            xml.entrySeq().map( ( [ key, v ] ) => <span key={`${key}-${v}`} style={ propStyle }><br/>&nbsp;&nbsp;&nbsp;{key}: { String(v) }</span>).toArray()
-          }
-        </span>): null
-      }
-      {
-        enumArray && <EnumModel value={ enumArray } getComponent={ getComponent } />
-      }
+    return <span className="model">
+      <span className="prop">
+        { name && <span className={`${depth === 1 && "model-title"} prop-name`}>{ name }</span> }
+        <span className="prop-type">{ type }</span>
+        { format && <span className="prop-format">(${format})</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 } />
+        }
+        {
+          xml && xml.size ? (<span><br /><span style={ propStyle }>xml:</span>
+            {
+              xml.entrySeq().map( ( [ key, v ] ) => <span key={`${key}-${v}`} style={ propStyle }><br/>&nbsp;&nbsp;&nbsp;{key}: { String(v) }</span>).toArray()
+            }
+          </span>): null
+        }
+        {
+          enumArray && <EnumModel value={ enumArray } getComponent={ getComponent } />
+        }
+      </span>
    </span>
  }
 }
--- 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 ) {
@@ -46,23 +47,35 @@ export default class Response extends React.Component {
    getComponent: 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,
      specSelectors,
-      contentType
+      contentType,
+      controlsAcceptHeader
    } = this.props

    let { inferSchema } = fn
@@ -83,11 +96,16 @@ export default class Response extends React.Component {

    if(isOAS3()) {
      let oas3SchemaForContentType = response.getIn(["content", this.state.responseContentType, "schema"])
-      sampleResponse = oas3SchemaForContentType ? getSampleSchema(oas3SchemaForContentType.toJS(), this.state.responseContentType, { includeReadOnly: true }) : null
+      sampleResponse = oas3SchemaForContentType ? getSampleSchema(oas3SchemaForContentType.toJS(), this.state.responseContentType, {
+        includeReadOnly: true
+      }) : null
      schema = oas3SchemaForContentType ? inferSchema(oas3SchemaForContentType.toJS()) : null
    } else {
      schema = inferSchema(response.toJS())
-      sampleResponse = schema ? getSampleSchema(schema, contentType, { includeReadOnly: true }) : null
+      sampleResponse = schema ? getSampleSchema(schema, contentType, {
+        includeReadOnly: true,
+        includeWriteOnly: true // writeOnly has no filtering effect in swagger 2.0
+       }) : null
    }
    let example = getExampleComponent( sampleResponse, examples, HighlightCode )

@@ -102,17 +120,24 @@ 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 }
              specSelectors={ specSelectors }
-              schema={ fromJS(schema) }
+              schema={ fromJSOrdered(schema) }
              example={ example }/>
          ) : null}

@@ -122,10 +147,10 @@ export default class Response extends React.Component {


        </td>
-        {specSelectors.isOAS3() ? <td>
+        {specSelectors.isOAS3() ? <td className="col response-col_links">
          { links ?
            links.toSeq().map((link, key) => {
-              return <OperationLink key={key} name={key} link={ link }/>
+              return <OperationLink key={key} name={key} link={ link } getComponent={getComponent}/>
            })
          : <i>No links</i>}
        </td> : 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 {

@@ -14,9 +14,11 @@ export default class Responses extends React.Component {
    getComponent: 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
+    fn: PropTypes.object.isRequired,
+    getConfigs: PropTypes.func.isRequired
  }

  static defaultProps = {
@@ -28,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, 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" )
@@ -38,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">
@@ -57,6 +84,9 @@ export default class Responses extends React.Component {
                                  <LiveResponse request={ request }
                                                response={ tryItOutResponse }
                                                getComponent={ getComponent }
+                                                getConfigs={ getConfigs }
+                                                specSelectors={ specSelectors }
+                                                pathMethod={ this.props.pathMethod }
                                                displayRequestDuration={ displayRequestDuration } />
                                  <h4>Responses</h4>
                                </div>
@@ -68,13 +98,12 @@ export default class Responses extends React.Component {
              <tr className="responses-header">
                <td className="col col_header response-col_status">Code</td>
                <td className="col col_header response-col_description">Description</td>
-                { specSelectors.isOAS3() ? <td className="col col_header response-col_description">Links</td> : null }
+                { specSelectors.isOAS3() ? <td className="col col_header response-col_links">Links</td> : null }
              </tr>
            </thead>
            <tbody>
              {
                responses.entrySeq().map( ([code, response]) => {
-
                  let className = tryItOutResponse && tryItOutResponse.get("status") == code ? "response_current" : ""
                  return (
                    <Response key={ code }
@@ -84,6 +113,8 @@ export default class Responses extends React.Component {
                              code={ code }
                              response={ response }
                              specSelectors={ specSelectors }
+                              controlsAcceptHeader={response === acceptControllingResponse}
+                              onContentTypeChange={this.onResponseContentTypeChange}
                              contentType={ producesValue }
                              getComponent={ getComponent }/>
                    )
--- a/src/core/components/schemes.jsx
+++ b/src/core/components/schemes.jsx
@@ -6,9 +6,9 @@ export default class Schemes extends React.Component {
  static propTypes = {
    specActions: PropTypes.object.isRequired,
    schemes: PropTypes.object.isRequired,
+    currentScheme: PropTypes.string.isRequired,
    path: PropTypes.string,
    method: PropTypes.string,
-    operationScheme: PropTypes.string
  }

  componentWillMount() {
@@ -19,8 +19,8 @@ export default class Schemes extends React.Component {
  }

  componentWillReceiveProps(nextProps) {
-    if ( !this.props.operationScheme || !nextProps.schemes.has(this.props.operationScheme) ) {
-      // if we don't have a selected operationScheme or if our selected scheme is no longer an option,
+    if ( !this.props.currentScheme || !nextProps.schemes.includes(this.props.currentScheme) ) {
+      // if we don't have a selected currentScheme or if our selected scheme is no longer an option,
      // then fire 'change' event and select the first scheme in the list of options
      this.setScheme(nextProps.schemes.first())
    }