Merge branch 'master' into xlink-deprecated

2017-08-11 16:45:53 -07:00
parent cb6b305fc9 8bf0f42c5d
commit 08bb9fb7f3
93 changed files with 4552 additions and 355 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 } = 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 )
@@ -23,7 +23,7 @@ export default class ArrayModel extends Component {
    const ModelCollapse = getComponent("ModelCollapse")
    const Model = getComponent("Model")

-    const titleEl = title && 
+    const titleEl = title &&
      <span className="model-title">
        <span className="model-title__text">{ title }</span>
      </span>
@@ -31,7 +31,7 @@ export default class ArrayModel extends Component {
    return <span className="model">
      <ModelCollapse title={titleEl} collapsed={ depth > expandDepth } collapsedContent="[...]">
        [
-          <span><Model { ...this.props } schema={ items } required={ false }/></span>
+          <span><Model { ...this.props } schema={ items } required={ false } depth={ depth + 1 } /></span>
        ]
        {
          properties.size ? <span>
@@ -41,7 +41,6 @@ export default class ArrayModel extends Component {
            : null
        }
      </ModelCollapse>
-      { required && <span style={{ color: "red" }}>*</span>}
    </span>
  }
-}
+}
--- a/src/core/components/content-type.jsx
+++ b/src/core/components/content-type.jsx
@@ -8,7 +8,7 @@ const noop = ()=>{}
 export default class ContentType extends React.Component {

  static propTypes = {
-    contentTypes: PropTypes.oneOfType([ImPropTypes.list, ImPropTypes.set]),
+    contentTypes: PropTypes.oneOfType([ImPropTypes.list, ImPropTypes.set, ImPropTypes.seq]),
    value: PropTypes.string,
    onChange: PropTypes.func,
    className: PropTypes.string
@@ -22,7 +22,9 @@ export default class ContentType extends React.Component {

  componentDidMount() {
    // Needed to populate the form, initially
-    this.props.onChange(this.props.contentTypes.first())
+    if(this.props.contentTypes) {
+      this.props.onChange(this.props.contentTypes.first())
+    }
  }

  onChangeWrapper = e => this.props.onChange(e.target.value)
--- a/src/core/components/info.jsx
+++ b/src/core/components/info.jsx
@@ -88,12 +88,13 @@ export default class Info extends React.Component {
    const { url:externalDocsUrl, description:externalDocsDescription } = (externalDocs || fromJS({})).toJS()

    const Markdown = getComponent("Markdown")
+    const VersionStamp = getComponent("VersionStamp")

    return (
      <div className="info">
        <hgroup className="main">
          <h2 className="title" >{ title }
-            { version && <small><pre className="version"> { version } </pre></small> }
+            { version && <VersionStamp version={version}></VersionStamp> }
          </h2>
          { host || basePath ? <Path host={ host } basePath={ basePath } /> : null }
          { url && <a target="_blank" href={ url }><span className="url"> { url } </span></a> }
--- a/src/core/components/layout-utils.jsx
+++ b/src/core/components/layout-utils.jsx
@@ -129,7 +129,8 @@ export class Select extends React.Component {
    value: PropTypes.any,
    onChange: PropTypes.func,
    multiple: PropTypes.bool,
-    allowEmptyValue: PropTypes.bool
+    allowEmptyValue: PropTypes.bool,
+    className: PropTypes.string
  }

  static defaultProps = {
@@ -142,7 +143,7 @@ export class Select extends React.Component {

    let value

-    if (props.value !== undefined) {
+    if (props.value) {
      value = props.value
    } else {
      value = props.multiple ? [""] : ""
@@ -178,7 +179,7 @@ export class Select extends React.Component {
    let value = this.state.value.toJS ? this.state.value.toJS() : this.state.value

    return (
-      <select multiple={ multiple } value={ value } onChange={ this.onChange } >
+      <select className={this.props.className} multiple={ multiple } value={ value } onChange={ this.onChange } >
        { allowEmptyValue ? <option value="">--</option> : null }
        {
          allowedValues.map(function (item, key) {
--- a/src/core/components/layouts/base.jsx
+++ b/src/core/components/layouts/base.jsx
@@ -69,7 +69,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 ? (
--- a/src/core/components/model-example.jsx
+++ b/src/core/components/model-example.jsx
@@ -35,9 +35,9 @@ export default class ModelExample extends React.Component {
        <li className={ "tabitem" + ( isExecute || this.state.activeTab === "example" ? " active" : "") }>
          <a className="tablinks" data-name="example" onClick={ this.activeTab }>Example Value</a>
        </li>
-        <li className={ "tabitem" + ( !isExecute && this.state.activeTab === "model" ? " active" : "") }>
+        { schema ? <li className={ "tabitem" + ( !isExecute && this.state.activeTab === "model" ? " active" : "") }>
          <a className={ "tablinks" + ( isExecute ? " inactive" : "" )} data-name="model" onClick={ this.activeTab }>Model</a>
-        </li>
+        </li> : null }
      </ul>
      <div>
        {
--- a/src/core/components/model.jsx
+++ b/src/core/components/model.jsx
@@ -17,6 +17,9 @@ export default class Model extends Component {
    if ( ref.indexOf("#/definitions/") !== -1 ) {
      return ref.replace(/^.*#\/definitions\//, "")
    }
+    if ( ref.indexOf("#/components/schemas/") !== -1 ) {
+      return ref.replace("#/components/schemas/", "")
+    }
  }

  getRefSchema =( model )=> {
@@ -26,7 +29,7 @@ export default class Model extends Component {
  }

  render () {
-    let { schema, getComponent, required, name, isRef } = this.props
+    let { getComponent, specSelectors, schema, required, name, isRef } = this.props
    let ObjectModel = getComponent("ObjectModel")
    let ArrayModel = getComponent("ArrayModel")
    let PrimitiveModel = getComponent("PrimitiveModel")
@@ -34,6 +37,8 @@ export default class Model extends Component {
    let modelName = $$ref && this.getModelName( $$ref )
    let modelSchema, type

+    const deprecated = specSelectors.isOAS3() && schema.get("deprecated")
+
    if ( schema && (schema.get("type") || schema.get("properties")) ) {
      modelSchema = schema
    } else if ( $$ref ) {
@@ -47,17 +52,30 @@ export default class Model extends Component {

    switch(type) {
      case "object":
-        return <ObjectModel className="object" { ...this.props } schema={ modelSchema }
-                                              name={ name || modelName }
-                                              isRef={ isRef!== undefined ? isRef : !!$$ref }/>
+        return <ObjectModel
+          className="object" { ...this.props }
+          schema={ modelSchema }
+          name={ modelName || name }
+          deprecated={deprecated}
+          isRef={ isRef!== undefined ? isRef : !!$$ref } />
      case "array":
-        return <ArrayModel className="array" { ...this.props } schema={ modelSchema } required={ required } />
+        return <ArrayModel
+          className="array" { ...this.props }
+          schema={ modelSchema }
+          name={ modelName || name }
+          deprecated={deprecated}
+          required={ required } />
      case "string":
      case "number":
      case "integer":
      case "boolean":
      default:
-        return <PrimitiveModel getComponent={ getComponent } schema={ modelSchema } required={ required }/>
-    }
+        return <PrimitiveModel
+          { ...this.props }
+          getComponent={ getComponent }
+          schema={ modelSchema }
+          name={ modelName || name }
+          deprecated={deprecated}
+          required={ required }/> }
  }
-}
+}
--- a/src/core/components/models.jsx
+++ b/src/core/components/models.jsx
@@ -25,7 +25,7 @@ export default class Models extends Component {
      <h4 onClick={() => layoutActions.show("models", !showModels)}>
        <span>Models</span>
        <svg width="20" height="20">
-          <use href="#large-arrow" xlinkHref="#large-arrow" />
+          <use xlinkHref={showModels ? "#large-arrow-down" : "#large-arrow"} />
        </svg>
      </h4>
      <Collapse isOpened={showModels}>
--- a/src/core/components/object-model.jsx
+++ b/src/core/components/object-model.jsx
@@ -17,27 +17,36 @@ export default class ObjectModel extends Component {
  }

  render(){
-    let { schema, name, isRef, getComponent, depth, ...props } = this.props
-    let { expandDepth } = 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")
    let title = schema.get("title") || name
-    let required = schema.get("required")
+    let requiredProperties = schema.get("required")

    const JumpToPath = getComponent("JumpToPath", true)
    const Markdown = getComponent("Markdown")
    const Model = getComponent("Model")
    const ModelCollapse = getComponent("ModelCollapse")

-    const JumpToPathSection = ({ name }) => <span className="model-jump-to-path"><JumpToPath path={`definitions.${name}`} /></span>
+    const JumpToPathSection = ({ name }) => {
+      const path = isOAS3 && isOAS3() ? `components.schemas.${name}` : `definitions.${name}`
+      return <span className="model-jump-to-path"><JumpToPath path={path} /></span>
+    }
    const collapsedContent = (<span>
        <span>{ braceOpen }</span>...<span>{ braceClose }</span>
        {
        isRef ? <JumpToPathSection name={ name }/> : ""
        }
    </span>)
-    
+
+    const anyOf = specSelectors.isOAS3() ? schema.get("anyOf") : null
+    const oneOf = specSelectors.isOAS3() ? schema.get("oneOf") : null
+    const not = specSelectors.isOAS3() ? schema.get("not") : null
+
    const titleEl = title && <span className="model-title">
      { isRef && schema.get("$$ref") && <span className="model-hint">{ schema.get("$$ref") }</span> }
      <span className="model-title__text">{ title }</span>
@@ -51,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>
@@ -63,16 +72,18 @@ export default class ObjectModel extends Component {
              {
                !(properties && properties.size) ? null : properties.entrySeq().map(
                    ([key, value]) => {
-                      let isRequired = List.isList(required) && required.contains(key)
+                      let isRequired = List.isList(requiredProperties) && requiredProperties.contains(key)
                      let propertyStyle = { verticalAlign: "top", paddingRight: "0.2em" }
                      if ( isRequired ) {
                        propertyStyle.fontWeight = "bold"
                      }

                      return (<tr key={key}>
-                        <td style={ propertyStyle }>{ key }:</td>
+                        <td style={ propertyStyle }>
+                          { 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 }
@@ -86,13 +97,55 @@ 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 } />
                    </td>
                  </tr>
              }
+              {
+                !anyOf ? null
+                  : <tr>
+                    <td>{ "anyOf ->" }</td>
+                    <td>
+                      {anyOf.map((schema, k) => {
+                        return <div key={k}><Model { ...otherProps } required={ false }
+                                 getComponent={ getComponent }
+                                 schema={ schema }
+                                 depth={ depth + 1 } /></div>
+                      })}
+                    </td>
+                  </tr>
+              }
+              {
+                !oneOf ? null
+                  : <tr>
+                    <td>{ "oneOf ->" }</td>
+                    <td>
+                      {oneOf.map((schema, k) => {
+                        return <div key={k}><Model { ...otherProps } required={ false }
+                                 getComponent={ getComponent }
+                                 schema={ schema }
+                                 depth={ depth + 1 } /></div>
+                      })}
+                    </td>
+                  </tr>
+              }
+              {
+                !not ? null
+                  : <tr>
+                    <td>{ "not ->" }</td>
+                    <td>
+                      {not.map((schema, k) => {
+                        return <div key={k}><Model { ...otherProps } required={ false }
+                                 getComponent={ getComponent }
+                                 schema={ schema }
+                                 depth={ depth + 1 } /></div>
+                      })}
+                    </td>
+                  </tr>
+              }
              </tbody></table>
          }
        </span>
@@ -100,4 +153,4 @@ export default class ObjectModel extends Component {
      </ModelCollapse>
    </span>
  }
-}
+}
--- a/src/core/components/operation.jsx
+++ b/src/core/components/operation.jsx
@@ -186,7 +186,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 &&
@@ -210,6 +210,7 @@ export default class Operation extends PureComponent {
              }
              <Parameters
                parameters={parameters}
+                operation={operation}
                onChangeKey={onChangeKey}
                onTryoutClick = { this.onTryoutClick }
                onCancelClick = { this.onCancelClick }
@@ -228,7 +229,7 @@ export default class Operation extends PureComponent {
                             path={ path }
                             method={ method }
                             specActions={ specActions }
-                             operationScheme={ operationScheme } />
+                             currentScheme={ operationScheme } />
                  </div> : null
              }

--- a/src/core/components/operations.jsx
+++ b/src/core/components/operations.jsx
@@ -66,6 +66,8 @@ export default class Operations extends React.Component {
            taggedOps.map( (tagObj, tag) => {
              let operations = tagObj.get("operations")
              let tagDescription = tagObj.getIn(["tagDetails", "description"], null)
+              let tagExternalDocsDescription = tagObj.getIn(["tagDetails", "externalDocs", "description"])
+              let tagExternalDocsUrl = tagObj.getIn(["tagDetails", "externalDocs", "url"])

              let isShownKey = ["operations-tag", tag]
              let showTag = layoutSelectors.isShown(isShownKey, docExpansion === "full" || docExpansion === "list")
@@ -89,6 +91,22 @@ export default class Operations extends React.Component {
                        </small>
                    }

+                    <div>
+                    { !tagExternalDocsDescription ? null :
+                        <small>
+                          { tagExternalDocsDescription }
+                          { tagExternalDocsUrl ? ": " : null }
+                          { tagExternalDocsUrl ?
+                            <a
+                              href={tagExternalDocsUrl}
+                              onClick={(e) => e.stopPropagation()}
+                              target={"_blank"}
+                            >{tagExternalDocsUrl}</a> : null
+                          }
+                        </small>
+                    }
+                    </div>
+
                    <button className="expand-operation" title="Expand operation" onClick={() => layoutActions.show(isShownKey, !showTag)}>
                      <svg className="arrow" width="20" height="20">
                        <use href={showTag ? "#large-arrow-down" : "#large-arrow"} xlinkHref={showTag ? "#large-arrow-down" : "#large-arrow"} />
--- 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
@@ -58,6 +58,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")
@@ -80,10 +82,11 @@ export default class ParameterRow extends Component {

    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"))
    let value = parameter ? parameter.get("value") : ""

@@ -94,7 +97,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/parameters.jsx
+++ b/src/core/components/parameters.jsx
@@ -72,7 +72,9 @@ export default class Parameters extends Component {
    return (
      <div className="opblock-section">
        <div className="opblock-section-header">
-          <h4 className="opblock-title">Parameters</h4>
+          <div className="tab-header">
+            <h4 className="opblock-title">Parameters</h4>
+          </div>
            { allowTryItOut ? (
              <TryItOutButton enabled={ tryItOutEnabled } onCancelClick={ onCancelClick } onTryoutClick={ onTryoutClick } />
            ) : null }
--- 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/providers/markdown.jsx
+++ b/src/core/components/providers/markdown.jsx
@@ -3,15 +3,8 @@ import PropTypes from "prop-types"
 import Remarkable from "react-remarkable"
 import sanitize from "sanitize-html"

-const sanitizeOptions = {
-  textFilter: function(text) {
-    return text
-      .replace(/&quot;/g, "\"")
-  }
-}
-
 function Markdown({ source }) {
-  const sanitized = sanitize(source, sanitizeOptions)
+  const sanitized = sanitizer(source)

  // sometimes the sanitizer returns "undefined" as a string
  if(!source || !sanitized || sanitized === "undefined") {
@@ -31,3 +24,14 @@ Markdown.propTypes = {
 }

 export default Markdown
+
+const sanitizeOptions = {
+  textFilter: function(text) {
+    return text
+      .replace(/&quot;/g, "\"")
+  }
+}
+
+export function sanitizer(str) {
+  return sanitize(str, sanitizeOptions)
+}
--- a/src/core/components/response-body.jsx
+++ b/src/core/components/response-body.jsx
@@ -40,7 +40,7 @@ export default class ResponseBody extends React.Component {

      // Image
    } else if (/^image\//i.test(contentType)) {
-      bodyEl = <img src={ url } />
+      bodyEl = <img style={{ maxWidth: "100%" }} src={ window.URL.createObjectURL(content) } />

      // Audio
    } else if (/^audio\//i.test(contentType)) {
--- a/src/core/components/response.jsx
+++ b/src/core/components/response.jsx
@@ -1,6 +1,6 @@
 import React from "react"
 import PropTypes from "prop-types"
-import { fromJS } from "immutable"
+import { fromJS, Seq } from "immutable"
 import { getSampleSchema } from "core/utils"

 const getExampleComponent = ( sampleResponse, examples, HighlightCode ) => {
@@ -31,6 +31,13 @@ const getExampleComponent = ( sampleResponse, examples, HighlightCode ) => {
 }

 export default class Response extends React.Component {
+  constructor(props, context) {
+    super(props, context)
+
+    this.state = {
+      responseContentType: ""
+    }
+  }

  static propTypes = {
    code: PropTypes.string.isRequired,
@@ -59,16 +66,34 @@ export default class Response extends React.Component {
    } = this.props

    let { inferSchema } = fn
+    let { isOAS3 } = specSelectors

-    let schema = inferSchema(response.toJS())
    let headers = response.get("headers")
    let examples = response.get("examples")
+    let links = response.get("links")
    const Headers = getComponent("headers")
    const HighlightCode = getComponent("highlightCode")
    const ModelExample = getComponent("modelExample")
    const Markdown = getComponent( "Markdown" )
+    const OperationLink = getComponent("operationLink")
+    const ContentType = getComponent("contentType")

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

    return (
@@ -82,6 +107,12 @@ 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 }
+
          { example ? (
            <ModelExample
              getComponent={ getComponent }
@@ -94,8 +125,15 @@ export default class Response extends React.Component {
            <Headers headers={ headers }/>
          ) : null}

-        </td>

+        </td>
+        {specSelectors.isOAS3() ? <td className="col response-col_links">
+          { links ?
+            links.toSeq().map((link, key) => {
+              return <OperationLink key={key} name={key} link={ link } getComponent={getComponent}/>
+            })
+          : <i>No links</i>}
+        </td> : null}
      </tr>
    )
  }
--- a/src/core/components/responses.jsx
+++ b/src/core/components/responses.jsx
@@ -42,13 +42,13 @@ export default class Responses extends React.Component {
      <div className="responses-wrapper">
        <div className="opblock-section-header">
          <h4>Responses</h4>
-            <label>
+            { specSelectors.isOAS3() ? null : <label>
              <span>Response content type</span>
              <ContentType value={producesValue}
                         onChange={this.onChangeProducesWrapper}
                         contentTypes={produces}
                         className="execute-content-type"/>
-                     </label>
+                     </label> }
        </div>
        <div className="responses-inner">
          {
@@ -68,6 +68,7 @@ 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_links">Links</td> : null }
              </tr>
            </thead>
            <tbody>
--- 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,9 @@ export default class Schemes extends React.Component {
  }

  componentWillReceiveProps(nextProps) {
-    if ( this.props.operationScheme && !nextProps.schemes.has(this.props.operationScheme) ) {
-      //fire 'change' event 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())
    }
  }
--- a/src/core/components/version-stamp.jsx
+++ b/src/core/components/version-stamp.jsx
@@ -0,0 +1,12 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+const VersionStamp = ({ version }) => {
+  return <small><pre className="version"> { version } </pre></small>
+}
+
+VersionStamp.propTypes = {
+  version: PropTypes.string.isRequired
+}
+
+export default VersionStamp