Merge pull request #3945 from shockey/v/3.5.0

v3.5.0

.gitignore

@@ -2,6 +2,7 @@ node_modules
 .idea
 .deps_check
 .DS_Store
+.nyc_output
 npm-debug.log*
 .eslintcache
 package-lock.json

.npmignore

@@ -6,3 +6,4 @@
 !dist/swagger-ui.js.map
 !dist/swagger-ui.css
 !dist/swagger-ui.css.map
+!dist/oauth2-redirect.html

CONTRIBUTING.md

@@ -4,7 +4,7 @@ We love contributions from our community of users! This document explains our gu
 
 #### Environment setup
 
-0. Install Node.js (4 or newer) and npm (3 or newer).
+0. Install Node.js (6 or newer) and npm (3 or newer).
 1. Make a fork of Swagger-UI on GitHub, then clone your fork to your machine.
 2. Run `npm install` in your Swagger-UI directory.
 3. Run `npm run dev`. `localhost:3200` should open automatically.

README.md

@@ -22,7 +22,7 @@ The OpenAPI Specification has undergone 5 revisions since initial creation in 20
 
 Swagger UI Version | Release Date | OpenAPI Spec compatibility | Notes
 ------------------ | ------------ | -------------------------- | -----
-3.4.3 | 2017-11-03 | 2.0, 3.0 | [tag v3.4.3](https://github.com/swagger-api/swagger-ui/tree/v3.4.3)
+3.5.0 | 2017-11-23 | 2.0, 3.0 | [tag v3.5.0](https://github.com/swagger-api/swagger-ui/tree/v3.5.0)
 3.0.21 | 2017-07-26 | 2.0 | [tag v3.0.21](https://github.com/swagger-api/swagger-ui/tree/v3.0.21)
 2.2.10 | 2017-01-04 | 1.1, 1.2, 2.0 | [tag v2.2.10](https://github.com/swagger-api/swagger-ui/tree/v2.2.10)
 2.1.5 | 2016-07-20 | 1.1, 1.2, 2.0 | [tag v2.1.5](https://github.com/swagger-api/swagger-ui/tree/v2.1.5)
@@ -165,6 +165,7 @@ deepLinking | If set to `true`, enables dynamic deep linking for tags and operat
 requestInterceptor | MUST be a function.  Function to intercept try-it-out requests.  Accepts one argument requestInterceptor(request) and must return the potentially modified request.
 responseInterceptor | MUST be a function.  Function to intercept try-it-out responses.  Accepts one argument responseInterceptor(response) and must return the potentially modified response.
 showMutatedRequest | If set to `true` (the default), uses the mutated request returned from a rquestInterceptor to produce the curl command in the UI, otherwise the request before the requestInterceptor was applied is used.
+showExtensions | Controls the display of vendor extension (`x-`) fields and values for Operations, Parameters, and Schema. The default is `false`.
 
 ### Plugins
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "swagger-ui",
-  "version": "3.4.3",
+  "version": "3.5.0",
   "main": "dist/swagger-ui.js",
   "repository": "git@github.com:swagger-api/swagger-ui.git",
   "contributors": [
@@ -33,6 +33,7 @@
     "test-in-node": "npm run lint-errors && npm run just-test-in-node",
     "just-test": "karma start --config karma.conf.js",
     "just-test-in-node": "mocha --recursive --compilers js:babel-core/register test/core test/components test/bugs test/swagger-ui-dist-package test/xss",
+    "just-check-coverage": "nyc npm run just-test-in-node",
     "test-e2e": "sleep 3 && nightwatch test/e2e/scenarios/ --config test/e2e/nightwatch.json",
     "e2e-initial-render": "nightwatch test/e2e/scenarios/ --config test/e2e/nightwatch.json --group initial-render",
     "mock-api": "json-server --watch test/e2e/db.json --port 3204",
@@ -44,6 +45,7 @@
     "brace": "0.7.0",
     "classnames": "^2.2.5",
     "commonmark": "^0.28.1",
+    "core-js": "^2.5.1",
     "css.escape": "1.5.1",
     "deep-extend": "0.4.1",
     "expect": "1.20.2",
@@ -60,16 +62,16 @@
     "react-addons-perf": "^15.4.0",
     "react-addons-shallow-compare": "0.14.8",
     "react-addons-test-utils": "^15.6.2",
-    "react-collapse": "2.3.1",
+    "react-collapse": "^4.0.3",
     "react-dom": "^15.6.2",
     "react-height": "^2.0.0",
     "react-hot-loader": "1.3.1",
     "react-immutable-proptypes": "2.1.0",
     "react-markdown": "^2.5.0",
-    "react-motion": "0.4.4",
+    "react-motion": "^0.5.2",
     "react-object-inspector": "0.2.1",
     "react-redux": "^4.x.x",
-    "react-split-pane": "0.1.57",
+    "react-split-pane": "0.1.70",
     "redux": "^3.x.x",
     "redux-immutable": "3.0.8",
     "redux-logger": "*",
@@ -79,7 +81,7 @@
     "scroll-to-element": "^2.0.0",
     "serialize-error": "2.0.0",
     "shallowequal": "0.2.2",
-    "swagger-client": "^3.3.2",
+    "swagger-client": "^3.3.5",
     "url-parse": "^1.1.8",
     "whatwg-fetch": "0.11.1",
     "worker-loader": "^0.7.1",
@@ -127,6 +129,7 @@
     "node-sass": "^4.5.0",
     "npm-run-all": "4.0.2",
     "null-loader": "0.1.1",
+    "nyc": "^11.3.0",
     "open": "0.0.5",
     "postcss-loader": "2.0.6",
     "raw-loader": "0.5.1",
@@ -152,5 +155,11 @@
   ],
   "optionalDependencies": {
     "webpack-dev-server": "2.5.0"
+  },
+  "nyc": {
+    "all": true,
+    "include": [
+      "**/src/core/plugins/**.js"
+    ]
   }
 }

src/core/components/array-model.jsx

@@ -7,6 +7,7 @@ export default class ArrayModel extends Component {
   static propTypes = {
     schema: PropTypes.object.isRequired,
     getComponent: PropTypes.func.isRequired,
+    getConfigs: PropTypes.func.isRequired,
     specSelectors: PropTypes.object.isRequired,
     name: PropTypes.string,
     required: PropTypes.bool,
@@ -15,7 +16,7 @@ export default class ArrayModel extends Component {
   }
 
   render(){
-    let { getComponent, schema, depth, expandDepth, name } = this.props
+    let { getComponent, getConfigs, schema, depth, expandDepth, name } = this.props
     let description = schema.get("description")
     let items = schema.get("items")
     let title = schema.get("title") || name
@@ -46,7 +47,7 @@ export default class ArrayModel extends Component {
             !description ? null :
               <Markdown source={ description } />
           }
-          <span><Model { ...this.props } name={null} schema={ items } required={ false } depth={ depth + 1 } /></span>
+          <span><Model { ...this.props } getConfigs={ getConfigs } name={null} schema={ items } required={ false } depth={ depth + 1 } /></span>
         ]
       </ModelCollapse>
     </span>

src/core/components/auth/api-key-auth.jsx

@@ -60,6 +60,9 @@ export default class ApiKeyAuth extends React.Component {
         <Row>
           <Markdown source={ schema.get("description") } />
         </Row>
+        <Row>
+          <p>Name: <code>{ schema.get("name") }</code></p>
+        </Row>
         <Row>
           <p>In: <code>{ schema.get("in") }</code></p>
         </Row>

src/core/components/auth/authorize-operation-btn.jsx

@@ -1,25 +1,23 @@
 import React from "react"
 import PropTypes from "prop-types"
-import ImPropTypes from "react-immutable-proptypes"
 
 export default class AuthorizeOperationBtn extends React.Component {
+    static propTypes = {
+      isAuthorized: PropTypes.bool.isRequired,
+      onClick: PropTypes.func
+    }
+
   onClick =(e) => {
     e.stopPropagation()
+    let { onClick } = this.props
 
-    let { security, authActions, authSelectors } = this.props
-    let definitions = authSelectors.getDefinitionsByNames(security)
-
-    authActions.showDefinitions(definitions)
+    if(onClick) {
+      onClick()
+    }
   }
 
   render() {
-    let { security, authSelectors } = this.props
-
-    let isAuthorized = authSelectors.isAuthorized(security)
-
-    if(isAuthorized === null) {
-      return null
-    }
+    let { isAuthorized } = this.props
 
     return (
       <button className={isAuthorized ? "authorization__btn locked" : "authorization__btn unlocked"} onClick={ this.onClick }>
@@ -30,10 +28,4 @@ export default class AuthorizeOperationBtn extends React.Component {
 
     )
   }
-
-  static propTypes = {
-    authSelectors: PropTypes.object.isRequired,
-    authActions: PropTypes.object.isRequired,
-    security: ImPropTypes.iterable.isRequired
-  }
 }

src/core/components/auth/auths.jsx

@@ -41,6 +41,13 @@ export default class Auths extends React.Component {
     authActions.logout(auths)
   }
 
+  close =(e) => {
+    e.preventDefault()
+    let { authActions } = this.props
+
+    authActions.showDefinitions(false)
+  }
+
   render() {
     let { definitions, getComponent, authSelectors, errSelectors } = this.props
     const AuthItem = getComponent("AuthItem")
@@ -74,6 +81,7 @@ export default class Auths extends React.Component {
               }).toArray()
             }
             <div className="auth-btn-wrapper">
+              <Button className="btn modal-btn auth btn-done" onClick={ this.close }>Done</Button>
               {
                 nonOauthDefinitions.size === authorizedAuth.size ? <Button className="btn modal-btn auth" onClick={ this.logoutClick }>Logout</Button>
               : <Button type="submit" className="btn modal-btn auth authorize">Authorize</Button>

src/core/components/auth/oauth2.jsx

@@ -200,11 +200,11 @@ export default class Oauth2 extends React.Component {
                 <Row key={ name }>
                   <div className="checkbox">
                     <Input data-value={ name }
-                          id={`${name}-checkbox-${this.state.name}`}
+                          id={`${name}-${flow}-checkbox-${this.state.name}`}
                            disabled={ isAuthorized }
                            type="checkbox"
                            onChange={ this.onScopeChange }/>
-                         <label htmlFor={`${name}-checkbox-${this.state.name}`}>
+                         <label htmlFor={`${name}-${flow}-checkbox-${this.state.name}`}>
                            <span className="item"></span>
                            <div className="text">
                              <p className="name">{name}</p>

src/core/components/content-type.jsx

@@ -27,6 +27,16 @@ export default class ContentType extends React.Component {
     }
   }
 
+  componentWillReceiveProps(nextProps) {
+    if(!nextProps.contentTypes || !nextProps.contentTypes.size) {
+      return
+    }
+
+    if(!nextProps.contentTypes.includes(nextProps.value)) {
+      nextProps.onChange(nextProps.contentTypes.first())
+    }
+  }
+
   onChangeWrapper = e => this.props.onChange(e.target.value)
 
   render() {
@@ -37,7 +47,7 @@ export default class ContentType extends React.Component {
 
     return (
       <div className={ "content-type-wrapper " + ( className || "" ) }>
-        <select className="content-type" value={value} onChange={this.onChangeWrapper} >
+        <select className="content-type" value={value || ""} onChange={this.onChangeWrapper} >
           { contentTypes.map( (val) => {
             return <option key={ val } value={ val }>{ val }</option>
           }).toArray()}

src/core/components/debug.jsx

@@ -1,6 +1,6 @@
 import React from "react"
 import PropTypes from "prop-types"
-import Collapse from "react-collapse"
+import { Collapse } from "react-collapse"
 import { presets } from "react-motion"
 import ObjectInspector from "react-object-inspector"
 import Perf from "react-addons-perf"

src/core/components/errors.jsx

@@ -1,7 +1,7 @@
 import React from "react"
 import PropTypes from "prop-types"
 import { List } from "immutable"
-import Collapse from "react-collapse"
+import { Collapse } from "react-collapse"
 
 export default class Errors extends React.Component {
 
@@ -113,7 +113,7 @@ const SpecErrorItem = ( { error, jumpToLine } ) => {
   }
 
 function toTitleCase(str) {
-  return str
+  return (str || "")
     .split(" ")
     .map(substr => substr[0].toUpperCase() + substr.slice(1))
     .join(" ")

src/core/components/execute.jsx

@@ -8,7 +8,6 @@ export default class Execute extends Component {
     specActions: PropTypes.object.isRequired,
     operation: PropTypes.object.isRequired,
     path: PropTypes.string.isRequired,
-    getComponent: PropTypes.func.isRequired,
     method: PropTypes.string.isRequired,
     onExecute: PropTypes.func
   }

src/core/components/layout-utils.jsx

@@ -1,6 +1,6 @@
 import React from "react"
 import PropTypes from "prop-types"
-import OriCollapse from "react-collapse"
+import { Collapse as OriCollapse } from "react-collapse"
 
 function xclass(...args) {
   return args.filter(a => !!a).join(" ").trim()

src/core/components/live-response.jsx

@@ -1,6 +1,7 @@
 import React from "react"
 import PropTypes from "prop-types"
 import ImPropTypes from "react-immutable-proptypes"
+import { Iterable } from "immutable"
 
 const Headers = ( { headers } )=>{
   return (
@@ -28,19 +29,29 @@ 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,
+    response: PropTypes.instanceOf(Iterable).isRequired,
+    path: PropTypes.string.isRequired,
+    method: PropTypes.string.isRequired,
     displayRequestDuration: PropTypes.bool.isRequired,
+    specSelectors: PropTypes.object.isRequired,
+    getComponent: PropTypes.func.isRequired,
     getConfigs: PropTypes.func.isRequired
   }
 
+  shouldComponentUpdate(nextProps) {
+    // BUG: props.response is always coming back as a new Immutable instance
+    // same issue as responses.jsx (tryItOutResponse)
+    return this.props.response !== nextProps.response
+      || this.props.path !== nextProps.path
+      || this.props.method !== nextProps.method
+      || this.props.displayRequestDuration !== nextProps.displayRequestDuration
+  }
+
   render() {
-    const { response, getComponent, getConfigs, displayRequestDuration, specSelectors, pathMethod } = this.props
+    const { response, getComponent, getConfigs, displayRequestDuration, specSelectors, path, method } = this.props
     const { showMutatedRequest } = getConfigs()
 
-    const curlRequest = showMutatedRequest ? specSelectors.mutatedRequestFor(pathMethod[0], pathMethod[1]) : specSelectors.requestFor(pathMethod[0], pathMethod[1])
+    const curlRequest = showMutatedRequest ? specSelectors.mutatedRequestFor(path, method) : specSelectors.requestFor(path, method)
     const status = response.get("status")
     const url = response.get("url")
     const headers = response.get("headers").toJS()
@@ -118,7 +129,6 @@ export default class LiveResponse extends React.Component {
 
   static propTypes = {
     getComponent: PropTypes.func.isRequired,
-    request: ImPropTypes.map,
     response: ImPropTypes.map
   }
 }

src/core/components/model-example.jsx

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

src/core/components/model-wrapper.jsx

@@ -6,18 +6,17 @@ export default class ModelComponent extends Component {
     schema: PropTypes.object.isRequired,
     name: PropTypes.string,
     getComponent: PropTypes.func.isRequired,
+    getConfigs: PropTypes.func.isRequired,
     specSelectors: PropTypes.object.isRequired,
     expandDepth: PropTypes.number
   }
 
   render(){
-    let { getComponent } = this.props
+    let { getComponent, getConfigs } = this.props
     const Model = getComponent("Model")
 
     return <div className="model-box">
-      <Model { ...this.props } depth={ 1 } expandDepth={ this.props.expandDepth || 0 }/>
+      <Model { ...this.props } getConfigs={ getConfigs } depth={ 1 } expandDepth={ this.props.expandDepth || 0 }/>
     </div>
   }
 }
-
-

src/core/components/model.jsx

@@ -1,10 +1,12 @@
-import React, { Component } from "react"
+import React, { PureComponent } from "react"
+import ImPropTypes from "react-immutable-proptypes"
 import PropTypes from "prop-types"
 
-export default class Model extends Component {
+export default class Model extends PureComponent {
   static propTypes = {
-    schema: PropTypes.object.isRequired,
+    schema: ImPropTypes.orderedMap.isRequired,
     getComponent: PropTypes.func.isRequired,
+    getConfigs: PropTypes.func.isRequired,
     specSelectors: PropTypes.object.isRequired,
     name: PropTypes.string,
     isRef: PropTypes.bool,
@@ -29,13 +31,13 @@ export default class Model extends Component {
   }
 
   render () {
-    let { getComponent, specSelectors, schema, required, name, isRef } = this.props
+    let { getComponent, getConfigs, specSelectors, schema, required, name, isRef } = this.props
     const ObjectModel = getComponent("ObjectModel")
     const ArrayModel = getComponent("ArrayModel")
     const PrimitiveModel = getComponent("PrimitiveModel")
     let type = "object"
     let $$ref = schema && schema.get("$$ref")
-    
+
     // If we weren't passed a `name` but have a ref, grab the name from the ref
     if ( !name && $$ref ) {
       name = this.getModelName( $$ref )
@@ -44,15 +46,16 @@ export default class Model extends Component {
     if ( !schema && $$ref ) {
       schema = this.getRefSchema( name )
     }
-    
+
     const deprecated = specSelectors.isOAS3() && schema.get("deprecated")
     isRef = isRef !== undefined ? isRef : !!$$ref
     type = schema && schema.get("type") || type
-    
+
     switch(type) {
       case "object":
         return <ObjectModel
           className="object" { ...this.props }
+          getConfigs={ getConfigs }
           schema={ schema }
           name={ name }
           deprecated={deprecated}
@@ -60,6 +63,7 @@ export default class Model extends Component {
       case "array":
         return <ArrayModel
           className="array" { ...this.props }
+          getConfigs={ getConfigs }
           schema={ schema }
           name={ name }
           deprecated={deprecated}
@@ -72,6 +76,7 @@ export default class Model extends Component {
         return <PrimitiveModel
           { ...this.props }
           getComponent={ getComponent }
+          getConfigs={ getConfigs }
           schema={ schema }
           name={ name }
           deprecated={deprecated}

src/core/components/models.jsx

@@ -36,6 +36,7 @@ export default class Models extends Component {
                      expandDepth={ defaultModelExpandDepth }
                      schema={ model }
                      getComponent={ getComponent }
+                     getConfigs={ getConfigs }
                      specSelectors={ specSelectors }/>
               </div>
           }).toArray()

src/core/components/object-model.jsx

@@ -9,6 +9,7 @@ export default class ObjectModel extends Component {
   static propTypes = {
     schema: PropTypes.object.isRequired,
     getComponent: PropTypes.func.isRequired,
+    getConfigs: PropTypes.func.isRequired,
     specSelectors: PropTypes.object.isRequired,
     name: PropTypes.string,
     isRef: PropTypes.bool,
@@ -17,10 +18,16 @@ export default class ObjectModel extends Component {
   }
 
   render(){
-    let { schema, name, isRef, getComponent, depth, expandDepth, ...otherProps } = this.props
+    let { schema, name, isRef, getComponent, getConfigs, depth, expandDepth, ...otherProps } = this.props
     let { specSelectors } = otherProps
     let { isOAS3 } = specSelectors
 
+    if(!schema) {
+      return null
+    }
+
+    const { showExtensions } = getConfigs()
+
     let description = schema.get("description")
     let properties = schema.get("properties")
     let additionalProperties = schema.get("additionalProperties")
@@ -72,13 +79,14 @@ export default class ObjectModel extends Component {
               {
                 !(properties && properties.size) ? null : properties.entrySeq().map(
                     ([key, value]) => {
+                      let isDeprecated = isOAS3() && value.get("deprecated")
                       let isRequired = List.isList(requiredProperties) && requiredProperties.contains(key)
                       let propertyStyle = { verticalAlign: "top", paddingRight: "0.2em" }
                       if ( isRequired ) {
                         propertyStyle.fontWeight = "bold"
                       }
 
-                      return (<tr key={key}>
+                      return (<tr key={key} className={isDeprecated && "deprecated"}>
                         <td style={ propertyStyle }>
                           { key }{ isRequired && <span style={{ color: "red" }}>*</span> }
                         </td>
@@ -86,12 +94,37 @@ export default class ObjectModel extends Component {
                           <Model key={ `object-${name}-${key}_${value}` } { ...otherProps }
                                  required={ isRequired }
                                  getComponent={ getComponent }
+                                 getConfigs={ getConfigs }
                                  schema={ value }
                                  depth={ depth + 1 } />
                         </td>
                       </tr>)
                     }).toArray()
               }
+              {
+                // empty row befor extensions...
+                !showExtensions ? null : <tr>&nbsp;</tr>
+              }
+              {
+                !showExtensions ? null :
+                  schema.entrySeq().map(
+                    ([key, value]) => {
+                      if(key.slice(0,2) !== "x-") {
+                        return
+                      }
+
+                      const normalizedValue = !value ? null : value.toJS ? value.toJS() : value
+
+                      return (<tr key={key} style={{ color: "#777" }}>
+                        <td>
+                          { key }
+                        </td>
+                        <td style={{ verticalAlign: "top" }}>
+                          { JSON.stringify(normalizedValue) }
+                        </td>
+                      </tr>)
+                    }).toArray()
+              }
               {
                 !additionalProperties || !additionalProperties.size ? null
                   : <tr>
@@ -99,6 +132,7 @@ export default class ObjectModel extends Component {
                     <td>
                       <Model { ...otherProps } required={ false }
                              getComponent={ getComponent }
+                             getConfigs={ getConfigs }
                              schema={ additionalProperties }
                              depth={ depth + 1 } />
                     </td>
@@ -112,6 +146,7 @@ export default class ObjectModel extends Component {
                       {anyOf.map((schema, k) => {
                         return <div key={k}><Model { ...otherProps } required={ false }
                                  getComponent={ getComponent }
+                                 getConfigs={ getConfigs }
                                  schema={ schema }
                                  depth={ depth + 1 } /></div>
                       })}
@@ -126,6 +161,7 @@ export default class ObjectModel extends Component {
                       {oneOf.map((schema, k) => {
                         return <div key={k}><Model { ...otherProps } required={ false }
                                  getComponent={ getComponent }
+                                 getConfigs={ getConfigs }
                                  schema={ schema }
                                  depth={ depth + 1 } /></div>
                       })}
@@ -137,12 +173,14 @@ export default class ObjectModel extends Component {
                   : <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>
-                      })}
+                      <div>
+                        <Model { ...otherProps }
+                               required={ false }
+                               getComponent={ getComponent }
+                               getConfigs={ getConfigs }
+                               schema={ not }
+                               depth={ depth + 1 } />
+                      </div>
                     </td>
                   </tr>
               }

src/core/components/operation-extension-row.jsx

@@ -0,0 +1,17 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+export const OperationExtRow = ({ xKey, xVal }) => {
+  const xNormalizedValue = !xVal ? null : xVal.toJS ? xVal.toJS() : xVal
+
+    return (<tr>
+        <td>{ xKey }</td>
+        <td>{ JSON.stringify(xNormalizedValue) }</td>
+    </tr>)
+}
+OperationExtRow.propTypes = {
+  xKey: PropTypes.string,
+  xVal: PropTypes.any
+}
+
+export default OperationExtRow

src/core/components/operation-extensions.jsx

@@ -0,0 +1,35 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+export const OperationExt = ({ extensions, getComponent }) => {
+    let OperationExtRow = getComponent("OperationExtRow")
+    return (
+      <div className="opblock-section">
+        <div className="opblock-section-header">
+          <h4>Extensions</h4>
+        </div>
+        <div className="table-container">
+
+          <table>
+            <thead>
+              <tr>
+                <td className="col col_header">Field</td>
+                <td className="col col_header">Value</td>
+              </tr>
+            </thead>
+            <tbody>
+                {
+                    extensions.entrySeq().map(([k, v]) => <OperationExtRow key={`${k}-${v}`} xKey={k} xVal={v} />)
+                }
+            </tbody>
+          </table>
+        </div>
+      </div>
+    )
+}
+OperationExt.propTypes = {
+  extensions: PropTypes.object.isRequired,
+  getComponent: PropTypes.func.isRequired
+}
+
+export default OperationExt

src/core/components/operation.jsx

@@ -1,30 +1,22 @@
 import React, { PureComponent } from "react"
 import PropTypes from "prop-types"
 import { getList } from "core/utils"
-import * as CustomPropTypes from "core/proptypes"
-import { sanitizeUrl } from "core/utils"
-
-//import "less/opblock"
+import { getExtensions, sanitizeUrl } from "core/utils"
+import { Iterable } from "immutable"
 
 export default class Operation extends PureComponent {
   static propTypes = {
-    path: PropTypes.string.isRequired,
-    method: PropTypes.string.isRequired,
-    operation: PropTypes.object.isRequired,
-    showSummary: PropTypes.bool,
+    operation: PropTypes.instanceOf(Iterable).isRequired,
+    response: PropTypes.instanceOf(Iterable),
+    request: PropTypes.instanceOf(Iterable),
 
-    isShownKey: CustomPropTypes.arrayOrString.isRequired,
-    jumpToKey: CustomPropTypes.arrayOrString.isRequired,
-
-    allowTryItOut: PropTypes.bool,
-
-    displayOperationId: PropTypes.bool,
-    displayRequestDuration: PropTypes.bool,
-
-    response: PropTypes.object,
-    request: PropTypes.object,
+    toggleShown: PropTypes.func.isRequired,
+    onTryoutClick: PropTypes.func.isRequired,
+    onCancelClick: PropTypes.func.isRequired,
+    onExecute: PropTypes.func.isRequired,
 
     getComponent: PropTypes.func.isRequired,
+    getConfigs: PropTypes.func.isRequired,
     authActions: PropTypes.object,
     authSelectors: PropTypes.object,
     specActions: PropTypes.object.isRequired,
@@ -32,108 +24,68 @@ export default class Operation extends PureComponent {
     oas3Actions: PropTypes.object.isRequired,
     layoutActions: PropTypes.object.isRequired,
     layoutSelectors: PropTypes.object.isRequired,
-    fn: PropTypes.object.isRequired,
-    getConfigs: PropTypes.func.isRequired
+    fn: PropTypes.object.isRequired
   }
 
   static defaultProps = {
-    showSummary: true,
+    operation: null,
     response: null,
-    allowTryItOut: true,
-    displayOperationId: false,
-    displayRequestDuration: false
-  }
-
-  constructor(props, context) {
-    super(props, context)
-    this.state = {
-      tryItOutEnabled: false
-    }
-  }
-
-  componentWillReceiveProps(nextProps) {
-    const defaultContentType = "application/json"
-    let { specActions, path, method, operation } = nextProps
-    let producesValue = operation.get("produces_value")
-    let produces = operation.get("produces")
-    let consumes = operation.get("consumes")
-    let consumesValue = operation.get("consumes_value")
-
-    if(nextProps.response !== this.props.response) {
-      this.setState({ executeInProgress: false })
-    }
-
-    if (producesValue === undefined) {
-      producesValue = produces && produces.size ? produces.first() : defaultContentType
-      specActions.changeProducesValue([path, method], producesValue)
-    }
-
-    if (consumesValue === undefined) {
-      consumesValue = consumes && consumes.size ? consumes.first() : defaultContentType
-      specActions.changeConsumesValue([path, method], consumesValue)
-    }
-  }
-
-  toggleShown =() => {
-    let { layoutActions, isShownKey } = this.props
-    layoutActions.show(isShownKey, !this.isShown())
-  }
-
-  isShown =() => {
-    let { layoutSelectors, isShownKey, getConfigs } = this.props
-    let { docExpansion } = getConfigs()
-
-    return layoutSelectors.isShown(isShownKey, docExpansion === "full" ) // Here is where we set the default
-  }
-
-  onTryoutClick =() => {
-    this.setState({tryItOutEnabled: !this.state.tryItOutEnabled})
-  }
-
-  onCancelClick =() => {
-    let { specActions, path, method } = this.props
-    this.setState({tryItOutEnabled: !this.state.tryItOutEnabled})
-    specActions.clearValidateParams([path, method])
-  }
-
-  onExecute = () => {
-    this.setState({ executeInProgress: true })
+    request: null
   }
 
   render() {
     let {
-      isShownKey,
-      jumpToKey,
-      path,
-      method,
-      operation,
-      showSummary,
       response,
       request,
-      allowTryItOut,
-      displayOperationId,
-      displayRequestDuration,
+      toggleShown,
+      onTryoutClick,
+      onCancelClick,
+      onExecute,
       fn,
       getComponent,
+      getConfigs,
       specActions,
       specSelectors,
       authActions,
       authSelectors,
-      getConfigs,
       oas3Actions
     } = this.props
+    let operationProps = this.props.operation
 
-    let summary = operation.get("summary")
-    let description = operation.get("description")
-    let deprecated = operation.get("deprecated")
-    let externalDocs = operation.get("externalDocs")
+    let {
+      isShown,
+      isAuthorized,
+      jumpToKey,
+      path,
+      method,
+      op,
+      tag,
+      showSummary,
+      operationId,
+      allowTryItOut,
+      displayOperationId,
+      displayRequestDuration,
+      isDeepLinkingEnabled,
+      tryItOutEnabled,
+      executeInProgress
+    } = operationProps.toJS()
+
+    let {
+      summary,
+      description,
+      deprecated,
+      externalDocs,
+      schemes
+    } = op.operation
+
+    let operation = operationProps.getIn(["op", "operation"])
+    let security = operationProps.get("security")
     let responses = operation.get("responses")
-    let security = operation.get("security") || specSelectors.security()
     let produces = operation.get("produces")
-    let schemes = operation.get("schemes")
     let parameters = getList(operation, ["parameters"])
-    let operationId = operation.get("__originalOperationId")
     let operationScheme = specSelectors.operationScheme(path, method)
+    let isShownKey = ["operations", tag, operationId]
+    let extensions = getExtensions(operation)
 
     const Responses = getComponent("responses")
     const Parameters = getComponent( "parameters" )
@@ -144,10 +96,9 @@ export default class Operation extends PureComponent {
     const Collapse = getComponent( "Collapse" )
     const Markdown = getComponent( "Markdown" )
     const Schemes = getComponent( "schemes" )
+    const OperationExt = getComponent( "OperationExt" )
 
-    const { deepLinking } = getConfigs()
-
-    const isDeepLinkingEnabled = deepLinking && deepLinking !== "false"
+    const { showExtensions } = getConfigs()
 
     // Merge in Live Response
     if(responses && response && response.size > 0) {
@@ -155,19 +106,17 @@ export default class Operation extends PureComponent {
       response = response.set("notDocumented", notDocumented)
     }
 
-    let { tryItOutEnabled } = this.state
-    let shown = this.isShown()
     let onChangeKey = [ path, method ] // Used to add values to _this_ operation ( indexed by path and method )
 
     return (
-        <div className={deprecated ? "opblock opblock-deprecated" : shown ? `opblock opblock-${method} is-open` : `opblock opblock-${method}`} id={isShownKey.join("-")} >
-          <div className={`opblock-summary opblock-summary-${method}`} onClick={this.toggleShown} >
+        <div className={deprecated ? "opblock opblock-deprecated" : isShown ? `opblock opblock-${method} is-open` : `opblock opblock-${method}`} id={isShownKey.join("-")} >
+          <div className={`opblock-summary opblock-summary-${method}`} onClick={toggleShown} >
               <span className="opblock-summary-method">{method.toUpperCase()}</span>
               <span className={ deprecated ? "opblock-summary-path__deprecated" : "opblock-summary-path" } >
               <a
                 className="nostyle"
                 onClick={isDeepLinkingEnabled ? (e) => e.preventDefault() : null}
-                href={isDeepLinkingEnabled ? `#/${isShownKey[1]}/${isShownKey[2]}` : null}>
+                href={isDeepLinkingEnabled ? `#/${isShownKey.join("/")}` : null}>
                 <span>{path}</span>
               </a>
                 <JumpToPath path={jumpToKey} />
@@ -183,13 +132,17 @@ export default class Operation extends PureComponent {
 
             {
               (!security || !security.count()) ? null :
-                <AuthorizeOperationBtn authActions={ authActions }
-                  security={ security }
-                  authSelectors={ authSelectors }/>
+                <AuthorizeOperationBtn
+                  isAuthorized={ isAuthorized }
+                  onClick={() => {
+                    const applicableDefinitions = authSelectors.definitionsForRequirements(security)
+                    authActions.showDefinitions(applicableDefinitions)
+                  }}
+                />
             }
           </div>
 
-          <Collapse isOpened={shown}>
+          <Collapse isOpened={isShown}>
             <div className="opblock-body">
               { deprecated && <h4 className="opblock-title_normal"> Warning: Deprecated</h4>}
               { description &&
@@ -200,23 +153,24 @@ export default class Operation extends PureComponent {
                 </div>
               }
               {
-                externalDocs && externalDocs.get("url") ?
+                externalDocs && externalDocs.url ?
                 <div className="opblock-external-docs-wrapper">
                   <h4 className="opblock-title_normal">Find more details</h4>
                   <div className="opblock-external-docs">
                     <span className="opblock-external-docs__description">
-                      <Markdown source={ externalDocs.get("description") } />
+                      <Markdown source={ externalDocs.description } />
                     </span>
-                    <a className="opblock-external-docs__link" href={ sanitizeUrl(externalDocs.get("url")) }>{ externalDocs.get("url") }</a>
+                    <a target="_blank" className="opblock-external-docs__link" href={ sanitizeUrl(externalDocs.url) }>{ externalDocs.url }</a>
                   </div>
                 </div> : null
               }
+
               <Parameters
                 parameters={parameters}
                 operation={operation}
                 onChangeKey={onChangeKey}
-                onTryoutClick = { this.onTryoutClick }
-                onCancelClick = { this.onCancelClick }
+                onTryoutClick = { onTryoutClick }
+                onCancelClick = { onCancelClick }
                 tryItOutEnabled = { tryItOutEnabled }
                 allowTryItOut={allowTryItOut}
 
@@ -241,25 +195,23 @@ export default class Operation extends PureComponent {
               { !tryItOutEnabled || !allowTryItOut ? null :
 
                   <Execute
-                    getComponent={getComponent}
                     operation={ operation }
                     specActions={ specActions }
                     specSelectors={ specSelectors }
                     path={ path }
                     method={ method }
-                    onExecute={ this.onExecute } />
+                    onExecute={ onExecute } />
               }
 
               { (!tryItOutEnabled || !response || !allowTryItOut) ? null :
                   <Clear
-                    onClick={ this.onClearClick }
                     specActions={ specActions }
                     path={ path }
                     method={ method }/>
               }
             </div>
 
-            {this.state.executeInProgress ? <div className="loading-container"><div className="loading"></div></div> : null}
+            {executeInProgress ? <div className="loading-container"><div className="loading"></div></div> : null}
 
               { !responses ? null :
                   <Responses
@@ -273,10 +225,15 @@ export default class Operation extends PureComponent {
                     specActions={ specActions }
                     produces={ produces }
                     producesValue={ operation.get("produces_value") }
-                    pathMethod={ [path, method] }
+                    path={ path }
+                    method={ method }
                     displayRequestDuration={ displayRequestDuration }
                     fn={fn} />
               }
+
+              { !showExtensions || !extensions.size ? null :
+                <OperationExt extensions={ extensions } getComponent={ getComponent } />
+              }
             </div>
           </Collapse>
         </div>

src/core/components/operations.jsx

@@ -1,8 +1,6 @@
 import React from "react"
 import PropTypes from "prop-types"
-import { helpers } from "swagger-client"
 import { createDeepLinkPath, sanitizeUrl } from "core/utils"
-const { opId } = helpers
 
 export default class Operations extends React.Component {
 
@@ -21,28 +19,20 @@ export default class Operations extends React.Component {
   render() {
     let {
       specSelectors,
-      specActions,
-      oas3Actions,
       getComponent,
       layoutSelectors,
       layoutActions,
-      authActions,
-      authSelectors,
-      getConfigs,
-      fn
+      getConfigs
     } = this.props
 
     let taggedOps = specSelectors.taggedOperations()
 
-    const Operation = getComponent("operation")
+    const OperationContainer = getComponent("OperationContainer", true)
     const Collapse = getComponent("Collapse")
     const Markdown = getComponent("Markdown")
 
-    let showSummary = layoutSelectors.showSummary()
     let {
       docExpansion,
-      displayOperationId,
-      displayRequestDuration,
       maxDisplayedTags,
       deepLinking
     } = getConfigs()
@@ -120,47 +110,15 @@ export default class Operations extends React.Component {
                   <Collapse isOpened={showTag}>
                     {
                       operations.map( op => {
+                        const path = op.get("path")
+                        const method = op.get("method")
 
-                        const path = op.get("path", "")
-                        const method = op.get("method", "")
-                        const jumpToKey = `paths.${path}.${method}`
-
-                        const operationId =
-                        op.getIn(["operation", "operationId"]) || op.getIn(["operation", "__originalOperationId"]) || opId(op.get("operation"), path, method) || op.get("id")
-                        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"))
-                        const request = specSelectors.requestFor(op.get("path"), op.get("method"))
-
-                        return <Operation
-                          {...op.toObject()}
-
-                          isShownKey={isShownKey}
-                          jumpToKey={jumpToKey}
-                          showSummary={showSummary}
-                          key={isShownKey}
-                          response={ response }
-                          request={ request }
-                          allowTryItOut={allowTryItOut}
-
-                          displayOperationId={displayOperationId}
-                          displayRequestDuration={displayRequestDuration}
-
-                          specActions={ specActions }
-                          specSelectors={ specSelectors }
-
-                          oas3Actions={oas3Actions}
-
-                          layoutActions={ layoutActions }
-                          layoutSelectors={ layoutSelectors }
-
-                          authActions={ authActions }
-                          authSelectors={ authSelectors }
-
-                          getComponent={ getComponent }
-                          fn={fn}
-                          getConfigs={ getConfigs }
+                        return <OperationContainer
+                          key={`${path}-${method}`}
+                          op={op}
+                          path={path}
+                          method={method}
+                          tag={tag}
                         />
                       }).toArray()
                     }

src/core/components/parameter-extension.jsx

@@ -0,0 +1,12 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+export const ParameterExt = ({ xKey, xVal }) => {
+    return <div className="parameter__extension">{ xKey }: { String(xVal) }</div>
+}
+ParameterExt.propTypes = {
+  xKey: PropTypes.string,
+  xVal: PropTypes.any
+}
+
+export default ParameterExt

src/core/components/parameter-row.jsx

@@ -2,6 +2,7 @@ import React, { Component } from "react"
 import { Map } from "immutable"
 import PropTypes from "prop-types"
 import win from "core/window"
+import { getExtensions } from "core/utils"
 
 export default class ParameterRow extends Component {
   static propTypes = {
@@ -72,6 +73,8 @@ export default class ParameterRow extends Component {
 
     let { isOAS3 } = specSelectors
 
+    const { showExtensions } = getConfigs()
+
     // const onChangeWrapper = (value) => onChange(param, value)
     const JsonSchemaForm = getComponent("JsonSchemaForm")
     const ParamBody = getComponent("ParamBody")
@@ -91,6 +94,7 @@ export default class ParameterRow extends Component {
 
     const ModelExample = getComponent("modelExample")
     const Markdown = getComponent("Markdown")
+    const ParameterExt = getComponent("ParameterExt")
 
     let schema = param.get("schema")
     let type = isOAS3 && isOAS3() ? param.getIn(["schema", "type"]) : param.get("type")
@@ -100,6 +104,7 @@ export default class ParameterRow extends Component {
     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") : ""
+    let extensions = getExtensions(param)
 
     return (
       <tr>
@@ -113,6 +118,7 @@ export default class ParameterRow extends Component {
             { isOAS3 && isOAS3() && param.get("deprecated") ? "deprecated": null }
           </div>
           <div className="parameter__in">({ param.get("in") })</div>
+          { !showExtensions || !extensions.size ? null : extensions.map((v, key) => <ParameterExt key={`${key}-${v}`} xKey={key} xVal={v} /> )}
         </td>
 
         <td className="col parameters-col_description">

src/core/components/primitive-model.jsx

@@ -1,5 +1,6 @@
 import React, { Component } from "react"
 import PropTypes from "prop-types"
+import { getExtensions } from "core/utils"
 
 const propStyle = { color: "#999", fontStyle: "italic" }
 
@@ -7,12 +8,15 @@ export default class Primitive extends Component {
   static propTypes = {
     schema: PropTypes.object.isRequired,
     getComponent: PropTypes.func.isRequired,
+    getConfigs: PropTypes.func.isRequired,
     name: PropTypes.string,
     depth: PropTypes.number
   }
 
   render(){
-    let { schema, getComponent, name, depth } = this.props
+    let { schema, getComponent, getConfigs, name, depth } = this.props
+
+    const { showExtensions } = getConfigs()
 
     if(!schema || !schema.get) {
       // don't render if schema isn't correctly formed
@@ -25,7 +29,10 @@ export default class Primitive extends Component {
     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 )
+    let extensions = getExtensions(schema)
+    let properties = schema
+      .filter( ( v, key) => ["enum", "type", "format", "description", "$$ref"].indexOf(key) === -1 )
+      .filterNot( (v, key) => extensions.has(key) )
     const Markdown = getComponent("Markdown")
     const EnumModel = getComponent("EnumModel")
     const Property = getComponent("Property")
@@ -38,6 +45,9 @@ export default class Primitive extends Component {
         {
           properties.size ? properties.entrySeq().map( ( [ key, v ] ) => <Property key={`${key}-${v}`} propKey={ key } propVal={ v } propStyle={ propStyle } />) : null
         }
+        {
+          showExtensions && extensions.size ? extensions.entrySeq().map( ( [ key, v ] ) => <Property key={`${key}-${v}`} propKey={ key } propVal={ v } propStyle={ propStyle } />) : null
+        }
         {
           !description ? null :
             <Markdown source={ description } />

src/core/components/response.jsx

@@ -1,7 +1,7 @@
 import React from "react"
 import PropTypes from "prop-types"
 import cx from "classnames"
-import { fromJS, Seq } from "immutable"
+import { fromJS, Seq, Iterable } from "immutable"
 import { getSampleSchema, fromJSOrdered } from "core/utils"
 
 const getExampleComponent = ( sampleResponse, examples, HighlightCode ) => {
@@ -42,7 +42,7 @@ export default class Response extends React.Component {
 
   static propTypes = {
     code: PropTypes.string.isRequired,
-    response: PropTypes.object,
+    response: PropTypes.instanceOf(Iterable),
     className: PropTypes.string,
     getComponent: PropTypes.func.isRequired,
     getConfigs: PropTypes.func.isRequired,

src/core/components/responses.jsx

@@ -1,41 +1,52 @@
 import React from "react"
 import PropTypes from "prop-types"
-import { fromJS } from "immutable"
+import { fromJS, Iterable } from "immutable"
 import { defaultStatusCode, getAcceptControllingResponse } from "core/utils"
 
 export default class Responses extends React.Component {
-
   static propTypes = {
-    request: PropTypes.object,
-    tryItOutResponse: PropTypes.object,
-    responses: PropTypes.object.isRequired,
-    produces: PropTypes.object,
+    tryItOutResponse: PropTypes.instanceOf(Iterable),
+    responses: PropTypes.instanceOf(Iterable).isRequired,
+    produces: PropTypes.instanceOf(Iterable),
     producesValue: PropTypes.any,
+    displayRequestDuration: PropTypes.bool.isRequired,
+    path: PropTypes.string.isRequired,
+    method: PropTypes.string.isRequired,
     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
   }
 
   static defaultProps = {
-    request: null,
     tryItOutResponse: null,
     produces: fromJS(["application/json"]),
     displayRequestDuration: false
   }
 
-  onChangeProducesWrapper = ( val ) => this.props.specActions.changeProducesValue(this.props.pathMethod, val)
+  shouldComponentUpdate(nextProps) {
+    // BUG: props.tryItOutResponse is always coming back as a new Immutable instance
+    let render = this.props.tryItOutResponse !== nextProps.tryItOutResponse
+    || this.props.responses !== nextProps.responses
+    || this.props.produces !== nextProps.produces
+    || this.props.producesValue !== nextProps.producesValue
+    || this.props.displayRequestDuration !== nextProps.displayRequestDuration
+    || this.props.path !== nextProps.path
+    || this.props.method !== nextProps.method
+    return render
+  }
+
+	onChangeProducesWrapper = ( val ) => this.props.specActions.changeProducesValue([this.props.path, this.props.method], val)
 
   onResponseContentTypeChange = ({ controlsAcceptHeader, value }) => {
-    const { oas3Actions, pathMethod } = this.props
+    const { oas3Actions, path, method } = this.props
     if(controlsAcceptHeader) {
       oas3Actions.setResponseContentType({
         value,
-        pathMethod
+        path,
+        method
       })
     }
   }
@@ -43,7 +54,6 @@ export default class Responses extends React.Component {
   render() {
     let {
       responses,
-      request,
       tryItOutResponse,
       getComponent,
       getConfigs,
@@ -81,12 +91,12 @@ export default class Responses extends React.Component {
           {
             !tryItOutResponse ? null
                               : <div>
-                                  <LiveResponse request={ request }
-                                                response={ tryItOutResponse }
+                                  <LiveResponse response={ tryItOutResponse }
                                                 getComponent={ getComponent }
                                                 getConfigs={ getConfigs }
                                                 specSelectors={ specSelectors }
-                                                pathMethod={ this.props.pathMethod }
+                                                path={ this.props.path }
+                                                method={ this.props.method }
                                                 displayRequestDuration={ displayRequestDuration } />
                                   <h4>Responses</h4>
                                 </div>

src/core/containers/OperationContainer.jsx

@@ -0,0 +1,203 @@
+import React, { PureComponent } from "react"
+import PropTypes from "prop-types"
+import { helpers } from "swagger-client"
+import { Iterable, fromJS } from "immutable"
+
+const { opId } = helpers
+
+export default class OperationContainer extends PureComponent {
+  constructor(props, context) {
+    super(props, context)
+    this.state = {
+      tryItOutEnabled: false,
+      executeInProgress: false
+    }
+  }
+
+  static propTypes = {
+    op: PropTypes.instanceOf(Iterable).isRequired,
+    tag: PropTypes.string.isRequired,
+    path: PropTypes.string.isRequired,
+    method: PropTypes.string.isRequired,
+    operationId: PropTypes.string.isRequired,
+    showSummary: PropTypes.bool.isRequired,
+    isShown: PropTypes.bool.isRequired,
+    jumpToKey: PropTypes.string.isRequired,
+    allowTryItOut: PropTypes.bool,
+    displayOperationId: PropTypes.bool,
+    isAuthorized: PropTypes.bool,
+    displayRequestDuration: PropTypes.bool,
+    response: PropTypes.instanceOf(Iterable),
+    request: PropTypes.instanceOf(Iterable),
+    security: PropTypes.instanceOf(Iterable),
+    isDeepLinkingEnabled: PropTypes.bool.isRequired,
+
+    getComponent: PropTypes.func.isRequired,
+    authActions: PropTypes.object,
+    oas3Actions: PropTypes.object,
+    authSelectors: PropTypes.object,
+    specActions: PropTypes.object.isRequired,
+    specSelectors: PropTypes.object.isRequired,
+    layoutActions: PropTypes.object.isRequired,
+    layoutSelectors: PropTypes.object.isRequired,
+    fn: PropTypes.object.isRequired,
+    getConfigs: PropTypes.func.isRequired
+  }
+
+  static defaultProps = {
+    showSummary: true,
+    response: null,
+    allowTryItOut: true,
+    displayOperationId: false,
+    displayRequestDuration: false
+  }
+
+  mapStateToProps(nextState, props) {
+    const { op, layoutSelectors, getConfigs } = props
+    const { docExpansion, deepLinking, displayOperationId, displayRequestDuration } = getConfigs()
+    const showSummary = layoutSelectors.showSummary()
+    const operationId = op.getIn(["operation", "operationId"]) || op.getIn(["operation", "__originalOperationId"]) || opId(op.get("operation"), props.path, props.method) || op.get("id")
+    const isShownKey = ["operations", props.tag, operationId]
+    const isDeepLinkingEnabled = deepLinking && deepLinking !== "false"
+    const allowTryItOut = typeof props.allowTryItOut === "undefined" ?
+      props.specSelectors.allowTryItOutFor(props.path, props.method) : props.allowTryItOut
+    const security = op.getIn(["operation", "security"]) || props.specSelectors.security()
+
+    return {
+      operationId,
+      isDeepLinkingEnabled,
+      showSummary,
+      displayOperationId,
+      displayRequestDuration,
+      allowTryItOut,
+      security,
+      isAuthorized: props.authSelectors.isAuthorized(security),
+      isShown: layoutSelectors.isShown(isShownKey, docExpansion === "full" ),
+      jumpToKey: `paths.${props.path}.${props.method}`,
+      response: props.specSelectors.responseFor(props.path, props.method),
+      request: props.specSelectors.requestFor(props.path, props.method)
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const defaultContentType = "application/json"
+    let { specActions, path, method, op } = nextProps
+    let operation = op.get("operation")
+    let producesValue = operation.get("produces_value")
+    let produces = operation.get("produces")
+    let consumes = operation.get("consumes")
+    let consumesValue = operation.get("consumes_value")
+
+    if(nextProps.response !== this.props.response) {
+      this.setState({ executeInProgress: false })
+    }
+
+    if (producesValue === undefined) {
+      producesValue = produces && produces.size ? produces.first() : defaultContentType
+      specActions.changeProducesValue([path, method], producesValue)
+    }
+
+    if (consumesValue === undefined) {
+      consumesValue = consumes && consumes.size ? consumes.first() : defaultContentType
+      specActions.changeConsumesValue([path, method], consumesValue)
+    }
+  }
+
+  toggleShown =() => {
+    let { layoutActions, tag, operationId, isShown } = this.props
+    layoutActions.show(["operations", tag, operationId], !isShown)
+  }
+
+  onTryoutClick =() => {
+    this.setState({tryItOutEnabled: !this.state.tryItOutEnabled})
+  }
+
+  onCancelClick =() => {
+    let { specActions, path, method } = this.props
+    this.setState({tryItOutEnabled: !this.state.tryItOutEnabled})
+    specActions.clearValidateParams([path, method])
+  }
+
+  onExecute = () => {
+    this.setState({ executeInProgress: true })
+  }
+
+  render() {
+    let {
+      op,
+      tag,
+      path,
+      method,
+      security,
+      isAuthorized,
+      operationId,
+      showSummary,
+      isShown,
+      jumpToKey,
+      allowTryItOut,
+      response,
+      request,
+      displayOperationId,
+      displayRequestDuration,
+      isDeepLinkingEnabled,
+      specSelectors,
+      specActions,
+      getComponent,
+      getConfigs,
+      layoutSelectors,
+      layoutActions,
+      authActions,
+      authSelectors,
+      oas3Actions,
+      fn
+    } = this.props
+
+    const Operation = getComponent( "operation" )
+
+    const operationProps = fromJS({
+      op,
+      tag,
+      path,
+      method,
+      security,
+      isAuthorized,
+      operationId,
+      showSummary,
+      isShown,
+      jumpToKey,
+      allowTryItOut,
+      request,
+      displayOperationId,
+      displayRequestDuration,
+      isDeepLinkingEnabled,
+      executeInProgress: this.state.executeInProgress,
+      tryItOutEnabled: this.state.tryItOutEnabled
+    })
+
+    return (
+      <Operation
+        operation={operationProps}
+        response={response}
+        request={request}
+        isShown={isShown}
+
+        toggleShown={this.toggleShown}
+        onTryoutClick={this.onTryoutClick}
+        onCancelClick={this.onCancelClick}
+        onExecute={this.onExecute}
+
+        specActions={ specActions }
+        specSelectors={ specSelectors }
+        oas3Actions={oas3Actions}
+        layoutActions={ layoutActions }
+        layoutSelectors={ layoutSelectors }
+        authActions={ authActions }
+        authSelectors={ authSelectors }
+        getComponent={ getComponent }
+        getConfigs={ getConfigs }
+        fn={fn}
+      />
+    )
+  }
+
+}

src/core/index.js

@@ -7,8 +7,7 @@ import * as AllPlugins from "core/plugins/all"
 import { parseSearch } from "core/utils"
 
 if (process.env.NODE_ENV !== "production") {
-  const Perf = require("react-addons-perf")
-  window.Perf = Perf
+  window.Perf = require("react-addons-perf")
 }
 
 // eslint-disable-next-line no-undef
@@ -47,6 +46,7 @@ module.exports = function SwaggerUI(opts) {
     showMutatedRequest: true,
     defaultModelRendering: "example",
     defaultModelExpandDepth: 1,
+    showExtensions: false,
 
     // 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.

src/core/json-schema-components.js

@@ -58,6 +58,7 @@ export class JsonSchema_string extends Component {
     if ( enumValue ) {
       const Select = getComponent("Select")
       return (<Select className={ errors.length ? "invalid" : ""}
+                      title={ errors.length ? errors  : ""}
                       allowedValues={ enumValue }
                       value={ value }
                       allowEmptyValue={ !required }
@@ -67,10 +68,20 @@ export class JsonSchema_string extends Component {
     const isDisabled = schema["in"] === "formData" && !("FormData" in window)
     const Input = getComponent("Input")
     if (schema["type"] === "file") {
-      return <Input type="file" className={ errors.length ? "invalid" : ""} onChange={ this.onChange } disabled={isDisabled}/>
+      return (<Input type="file" 
+                     className={ errors.length ? "invalid" : ""} 
+                     title={ errors.length ? errors  : ""}
+                     onChange={ this.onChange } 
+                     disabled={isDisabled}/>)
     }
     else {
-      return <Input type={ schema.format === "password" ? "password" : "text" } className={ errors.length ? "invalid" : ""} value={value} placeholder={description} onChange={ this.onChange } disabled={isDisabled}/>
+      return (<Input type={ schema.format === "password" ? "password" : "text" } 
+                     className={ errors.length ? "invalid" : ""} 
+                     title={ errors.length ? errors  : ""}
+                     value={value} 
+                     placeholder={description} 
+                     onChange={ this.onChange } 
+                     disabled={isDisabled}/>)
     }
   }
 }
@@ -134,11 +145,12 @@ export class JsonSchema_array extends PureComponent {
     if ( enumValue ) {
       const Select = getComponent("Select")
       return (<Select className={ errors.length ? "invalid" : ""}
-                     multiple={ true }
-                     value={ value }
-                     allowedValues={ enumValue }
-                     allowEmptyValue={ !required }
-                     onChange={ this.onEnumChange }/>)
+                      title={ errors.length ? errors  : ""}
+                      multiple={ true }
+                      value={ value }
+                      allowedValues={ enumValue }
+                      allowEmptyValue={ !required }
+                      onChange={ this.onEnumChange }/>)
     }
 
     return (
@@ -175,6 +187,7 @@ export class JsonSchema_boolean extends Component {
     const Select = getComponent("Select")
 
     return (<Select className={ errors.length ? "invalid" : ""}
+                    title={ errors.length ? errors  : ""}
                     value={ String(value) }
                     allowedValues={ fromJS(["true", "false"]) }
                     allowEmptyValue={ true }

src/core/plugins/auth/actions.js

@@ -73,7 +73,7 @@ export const authorizePassword = ( auth ) => ( { authActions } ) => {
   let { schema, name, username, password, passwordType, clientId, clientSecret } = auth
   let form = {
     grant_type: "password",
-    scope: encodeURIComponent(auth.scopes.join(scopeSeparator))
+    scope: auth.scopes.join(scopeSeparator)
   }
   let query = {}
   let headers = {}

src/core/plugins/auth/selectors.js

@@ -11,7 +11,7 @@ export const shownDefinitions = createSelector(
 export const definitionsToAuthorize = createSelector(
     state,
     () => ( { specSelectors } ) => {
-      let definitions = specSelectors.securityDefinitions()
+      let definitions = specSelectors.securityDefinitions() || Map({})
       let list = List()
 
       //todo refactor
@@ -28,6 +28,7 @@ export const definitionsToAuthorize = createSelector(
 
 
 export const getDefinitionsByNames = ( state, securities ) => ( { specSelectors } ) => {
+  console.warn("WARNING: getDefinitionsByNames is deprecated and will be removed in the next major version.")
   let securityDefinitions = specSelectors.securityDefinitions()
   let result = List()
 
@@ -58,6 +59,13 @@ export const getDefinitionsByNames = ( state, securities ) => ( { specSelectors
   return result
 }
 
+export const definitionsForRequirements = (state, securities = List()) => ({ authSelectors }) => {
+  const allDefinitions = authSelectors.definitionsToAuthorize() || List()
+  return allDefinitions.filter((def) => {
+    return securities.some(sec => sec.get(def.keySeq().first()))
+  })
+}
+
 export const authorized = createSelector(
     state,
     auth => auth.get("authorized") || Map()

src/core/plugins/err/actions.js

@@ -3,6 +3,7 @@ import serializeError from "serialize-error"
 export const NEW_THROWN_ERR = "err_new_thrown_err"
 export const NEW_THROWN_ERR_BATCH = "err_new_thrown_err_batch"
 export const NEW_SPEC_ERR = "err_new_spec_err"
+export const NEW_SPEC_ERR_BATCH = "err_new_spec_err_batch"
 export const NEW_AUTH_ERR = "err_new_auth_err"
 export const CLEAR = "err_clear"
 
@@ -27,6 +28,13 @@ export function newSpecErr(err) {
   }
 }
 
+export function newSpecErrBatch(errArray) {
+  return {
+      type: NEW_SPEC_ERR_BATCH,
+      payload: errArray
+  }
+}
+
 export function newAuthErr(err) {
   return {
     type: NEW_AUTH_ERR,

src/core/plugins/err/reducers.js

@@ -2,6 +2,7 @@ import {
   NEW_THROWN_ERR,
   NEW_THROWN_ERR_BATCH,
   NEW_SPEC_ERR,
+  NEW_SPEC_ERR_BATCH,
   NEW_AUTH_ERR,
   CLEAR
 } from "./actions"
@@ -45,6 +46,15 @@ export default function(system) {
         .update("errors", errors => transformErrors(errors, system.getSystem()))
     },
 
+    [NEW_SPEC_ERR_BATCH]: (state, { payload }) => {
+      payload = payload.map(err => {
+        return fromJS(Object.assign(DEFAULT_ERROR_STRUCTURE, err, { type: "spec" }))
+      })
+      return state
+      .update("errors", errors => (errors || List()).concat( fromJS( payload )) )
+      .update("errors", errors => transformErrors(errors, system.getSystem()))
+    },
+
     [NEW_AUTH_ERR]: (state, { payload }) => {
       let error = fromJS(Object.assign({}, payload))
 

src/core/plugins/oas3/actions.js

@@ -28,10 +28,10 @@ export function setRequestContentType ({ value, pathMethod }) {
   }
 }
 
-export function setResponseContentType ({ value, pathMethod }) {
+export function setResponseContentType ({ value, path, method }) {
   return {
     type: UPDATE_RESPONSE_CONTENT_TYPE,
-    payload: { value, pathMethod }
+    payload: { value, path, method }
   }
 }
 

src/core/plugins/oas3/components/callbacks.jsx

@@ -1,10 +1,12 @@
 import React from "react"
 import PropTypes from "prop-types"
+import ImPropTypes from "react-immutable-proptypes"
+import { fromJS } from "immutable"
 
 const Callbacks = (props) => {
   let { callbacks, getComponent } = props
   // const Markdown = getComponent("Markdown")
-  const Operation = getComponent("operation", true)
+  const OperationContainer = getComponent("OperationContainer", true)
 
   if(!callbacks) {
     return <span>No callbacks</span>
@@ -16,24 +18,22 @@ const Callbacks = (props) => {
       { callback.map((pathItem, pathItemName) => {
         return <div key={pathItemName}>
           { pathItem.map((operation, method) => {
-            return <Operation
-              operation={operation}
+            let op = fromJS({
+              operation
+            })
+            return <OperationContainer
+              {...props}
+              op={op}
               key={method}
+              tag={""}
               method={method}
-              isShownKey={["callbacks", operation.get("id"), callbackName]}
               path={pathItemName}
               allowTryItOut={false}
-              {...props}></Operation>
-            // return <pre>{JSON.stringify(operation)}</pre>
+              />
           }) }
         </div>
       }) }
     </div>
-    // return <div>
-    //   <h2>{name}</h2>
-    //   {callback.description && <Markdown source={callback.description}/>}
-    //   <pre>{JSON.stringify(callback)}</pre>
-    // </div>
   })
   return <div>
     {callbackElements}
@@ -42,7 +42,7 @@ const Callbacks = (props) => {
 
 Callbacks.propTypes = {
   getComponent: PropTypes.func.isRequired,
-  callbacks: PropTypes.array.isRequired
+  callbacks: ImPropTypes.iterable.isRequired
 
 }
 

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

@@ -48,6 +48,13 @@ export default class RequestBodyEditor extends PureComponent {
     }
   }
 
+  componentDidUpdate(prevProps) {
+    if(this.props.requestBody !== prevProps.requestBody) {
+      // force recalc of value if the request body definition has changed
+      this.setValueToSample(this.props.mediaType)
+    }
+  }
+
   setValueToSample = (explicitMediaType) => {
     this.onChange(this.sample(explicitMediaType))
   }

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

@@ -22,6 +22,10 @@ const RequestBody = ({
 
   const mediaTypeValue = requestBodyContent.get(contentType)
 
+  if(!mediaTypeValue) {
+    return null
+  }
+
   return <div>
     { requestBodyDescription &&
       <Markdown source={requestBodyDescription} />
@@ -50,7 +54,7 @@ RequestBody.propTypes = {
   getComponent: PropTypes.func.isRequired,
   getConfigs: PropTypes.func.isRequired,
   specSelectors: PropTypes.object.isRequired,
-  contentType: PropTypes.string.isRequired,
+  contentType: PropTypes.string,
   isExecute: PropTypes.bool.isRequired,
   onChange: PropTypes.func.isRequired
 }

src/core/plugins/oas3/reducers.js

@@ -18,8 +18,7 @@ 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
+  [UPDATE_RESPONSE_CONTENT_TYPE]: (state, { payload: { value, path, method } } ) =>{
     return state.setIn( [ "requestData", path, method, "responseContentType" ], value)
   },
   [UPDATE_SERVER_VARIABLE_VALUE]: (state, { payload: { server, key, val } } ) =>{

src/core/plugins/oas3/wrap-components/model.jsx

@@ -8,12 +8,13 @@ class ModelComponent extends Component {
     schema: PropTypes.object.isRequired,
     name: PropTypes.string,
     getComponent: PropTypes.func.isRequired,
+    getConfigs: PropTypes.func.isRequired,
     specSelectors: PropTypes.object.isRequired,
     expandDepth: PropTypes.number
   }
 
   render(){
-    let { schema } = this.props
+    let { getConfigs, schema } = this.props
     let classes = ["model-box"]
     let isDeprecated = schema.get("deprecated") === true
     let message = null
@@ -26,6 +27,7 @@ class ModelComponent extends Component {
     return <div className={classes.join(" ")}>
       {message}
       <Model { ...this.props }
+        getConfigs={ getConfigs }
         depth={ 1 }
         expandDepth={ this.props.expandDepth || 0 }
         />

src/core/plugins/oas3/wrap-components/parameters.jsx

@@ -22,6 +22,7 @@ class Parameters extends Component {
     specActions: PropTypes.object.isRequired,
     operation: PropTypes.object.isRequired,
     getComponent: PropTypes.func.isRequired,
+    getConfigs: PropTypes.func.isRequired,
     specSelectors: PropTypes.object.isRequired,
     oas3Actions: PropTypes.object.isRequired,
     oas3Selectors: PropTypes.object.isRequired,
@@ -86,6 +87,7 @@ class Parameters extends Component {
 
       fn,
       getComponent,
+      getConfigs,
       specSelectors,
       oas3Actions,
       oas3Selectors,
@@ -137,6 +139,7 @@ class Parameters extends Component {
                     eachMap(parameters, (parameter) => (
                       <ParameterRow fn={ fn }
                         getComponent={ getComponent }
+                        getConfigs={ getConfigs }
                         param={ parameter }
                         key={ parameter.get( "name" ) }
                         onChange={ this.onChange }

src/core/plugins/view/root-injects.js

@@ -20,8 +20,14 @@ const RootWrapper = (reduxStore, ComponentToWrap) => class extends Component {
 }
 
 const makeContainer = (getSystem, component, reduxStore) => {
+  const mapStateToProps = function(state, ownProps) {
+    const propsForContainerComponent = Object.assign({}, ownProps, getSystem())
+    const ori = component.prototype.mapStateToProps || (state => { return {state} })
+    return ori(state, propsForContainerComponent)
+  }
+
   let wrappedWithSystem = SystemWrapper(getSystem, component, reduxStore)
-  let connected = connect(state => ({state}))(wrappedWithSystem)
+  let connected = connect( mapStateToProps )(wrappedWithSystem)
   if(reduxStore)
     return RootWrapper(reduxStore, connected)
   return connected
@@ -114,5 +120,5 @@ export const getComponent = (getSystem, getStore, getComponents, componentName,
     return makeContainer(getSystem, component, getStore())
 
   // container == truthy
-  return makeContainer(getSystem, component)
+  return makeContainer(getSystem, wrapRender(component))
 }

src/core/presets/base.js

@@ -13,6 +13,8 @@ import downloadUrlPlugin from "core/plugins/download-url"
 import configsPlugin from "plugins/configs"
 import deepLinkingPlugin from "core/plugins/deep-linking"
 
+import OperationContainer from "core/containers/OperationContainer"
+
 import App from "core/components/app"
 import AuthorizationPopup from "core/components/auth/authorization-popup"
 import AuthorizeBtn from "core/components/auth/authorize-btn"
@@ -28,11 +30,14 @@ import LiveResponse from "core/components/live-response"
 import OnlineValidatorBadge from "core/components/online-validator-badge"
 import Operations from "core/components/operations"
 import Operation from "core/components/operation"
+import OperationExt from "core/components/operation-extensions"
+import OperationExtRow from "core/components/operation-extension-row"
 import HighlightCode from "core/components/highlight-code"
 import Responses from "core/components/responses"
 import Response from "core/components/response"
 import ResponseBody from "core/components/response-body"
 import Parameters from "core/components/parameters"
+import ParameterExt from "core/components/parameter-extension"
 import ParameterRow from "core/components/parameter-row"
 import Execute from "core/components/execute"
 import Headers from "core/components/headers"
@@ -112,7 +117,11 @@ export default function() {
       TryItOutButton,
       Markdown,
       BaseLayout,
-      VersionStamp
+      VersionStamp,
+      OperationExt,
+      OperationExtRow,
+      ParameterExt,
+      OperationContainer
     }
   }
 

src/core/system.js

@@ -289,8 +289,7 @@ export default class Store {
 
   getMapStateToProps() {
     return () => {
-      let obj = Object.assign({}, this.getSystem())
-      return obj
+      return Object.assign({}, this.getSystem())
     }
   }
 

src/core/utils.js

@@ -494,8 +494,8 @@ export const validateParam = (param, isXml, isOAS3 = false) => {
     let listCheck = type === "array" && Im.List.isList(value) && value.count()
     let fileCheck = type === "file" && value instanceof win.File
     let booleanCheck = type === "boolean" && (value || value === false)
-    let numberCheck = type === "number" && value
-    let integerCheck = type === "integer" && value
+    let numberCheck = type === "number" && (value || value === 0)
+    let integerCheck = type === "integer" && (value || value === 0)
 
     if ( required && !(stringCheck || arrayCheck || listCheck || fileCheck || booleanCheck || numberCheck || integerCheck) ) {
       errors.push("Required field is not provided")
@@ -692,3 +692,5 @@ export function getAcceptControllingResponse(responses) {
 
 export const createDeepLinkPath = (str) => typeof str == "string" || str instanceof String ? str.trim().replace(/\s/g, "_") : ""
 export const escapeDeepLinkPath = (str) => cssEscape( createDeepLinkPath(str) )
+
+export const getExtensions = (defObj) => defObj.filter((v, k) => /^x-/.test(k))

src/plugins/topbar/topbar.jsx

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { cloneElement } from "react"
 import PropTypes from "prop-types"
 
 //import "./topbar.less"
@@ -134,7 +134,7 @@ export default class Topbar extends React.Component {
               <span>swagger</span>
             </Link>
             <form className="download-url-wrapper" onSubmit={formOnSubmit}>
-              {control}
+              {control.map((el, i) => cloneElement(el, { key: i }))}
             </form>
           </div>
         </div>

src/polyfills.js

@@ -3,3 +3,8 @@
 if(!window.Promise) {
   require("core-js/fn/promise")
 }
+
+// Required by IE 11
+if(!String.prototype.startsWith) {
+  require("core-js/es6/string")
+}

src/style/_authorize.scss

@@ -5,6 +5,10 @@
     padding: 10px 0;
 
     justify-content: center;
+
+    .btn-done {
+      margin-right: 1em;
+    }
 }
 
 .auth-wrapper

src/style/_layout.scss

@@ -565,6 +565,7 @@
         p
         {
             margin: 0;
+            @include text_code($response-col-description-inner-markdown-font-color);
         }
 
         a
@@ -575,6 +576,12 @@
                 color: $response-col-description-inner-markdown-link-font-color-hover;
             }
         }
+
+        th
+        {
+            @include text_code($response-col-description-inner-markdown-font-color);
+            border-bottom: 1px solid $response-col-description-inner-markdown-font-color;
+        }
     }
 }
 

src/style/_models.scss

@@ -3,14 +3,20 @@
     font-size: 12px;
     font-weight: 300;
 
+    @include text_code();
+
     .deprecated
     {
-      span, td {
-        color: $model-deprecated-font-color !important;
-      }
-    }
+        span,
+        td
+        {
+            color: $model-deprecated-font-color !important;
+        }
 
-    @include text_code();
+        > td:first-of-type {
+            text-decoration: line-through;
+        }
+    }
     &-toggle
     {
         font-size: 10px;
@@ -87,7 +93,8 @@
         background: rgba($model-hint-background-color,.7);
     }
 
-    p {
+    p
+    {
         margin: 0 0 1em 0;
     }
 }
@@ -106,6 +113,7 @@ section.models
         h4
         {
             margin: 0 0 5px 0;
+
             border-bottom: 1px solid rgba($section-models-isopen-h4-border-bottom-color, .3);
         }
     }
@@ -114,6 +122,7 @@ section.models
         font-size: 16px;
 
         display: flex;
+        align-items: center;
 
         margin: 0;
         padding: 10px 20px 10px 10px;
@@ -122,7 +131,6 @@ section.models
         transition: all .2s;
 
         @include text_headline($section-models-h4-font-color);
-        align-items: center;
 
         svg
         {
@@ -202,7 +210,7 @@ section.models
 
     &.deprecated
     {
-      opacity: .5;
+        opacity: .5;
     }
 }
 
@@ -218,14 +226,16 @@ section.models
 {
     font-size: 16px;
     font-weight: 600;
+
     margin-right: 1em;
+
     @include text_headline($_color-delete);
 }
 
 
 span
 {
-    > span.model
+     > span.model
     {
         .brace-close
         {
@@ -237,8 +247,8 @@ span
 .prop-name
 {
     display: inline-block;
+
     margin-right: 1em;
-    width: 8em;
 }
 
 .prop-type

src/style/_table.scss

@@ -19,7 +19,7 @@ table
 
                     &:first-of-type
                     {
-                        width: 124px;
+                        width: 174px;
                         padding: 0 0 0 2em;
                     }
                 }
@@ -131,7 +131,8 @@ table
     }
 }
 
-.parameter__in
+.parameter__in,
+.parameter__extension
 {
     font-size: 12px;
     font-style: italic;

test/components/object-model.js

@@ -0,0 +1,68 @@
+import React from "react"
+import expect from "expect"
+import { shallow } from "enzyme"
+import { fromJS } from "immutable"
+import ObjectModel from "components/object-model"
+import ModelExample from "components/model-example"
+import Immutable from "immutable"
+import Model from "components/model"
+import ModelCollapse from "components/model-collapse"
+import { inferSchema } from "corePlugins/samples/fn"
+
+describe("<ObjectModel />", function() {
+    const dummyComponent = () => null
+    const components = {
+      "JumpToPath" : dummyComponent,
+      "Markdown" : dummyComponent,
+      "Model" : Model,
+      "ModelCollapse" : ModelCollapse
+    }
+    const props = {
+      getComponent: c => components[c],
+      getConfigs: () => {
+        return {
+          showExtensions: true
+        }
+      },
+      isRef : false,
+      schema: Immutable.fromJS(
+        {
+          "properties": {
+            // Note reverse order: c, b, a
+            c: {
+              type: "integer",
+              name: "c"
+            },
+            b: {
+              type: "boolean",
+              name: "b"
+            },
+            a: {
+              type: "string",
+              name: "a"
+            }
+          }
+        }
+      ),
+      specSelectors: {
+        isOAS3(){
+          return false
+        }
+      },
+      className: "for-test"
+    }
+    it("renders a collapsible header", function(){
+      const wrapper = shallow(<ObjectModel {...props}/>)
+      const renderedModelCollapse = wrapper.find(ModelCollapse)
+      expect(renderedModelCollapse.length).toEqual(1)
+    })
+
+    it("renders the object properties in order", function() {
+        const wrapper = shallow(<ObjectModel {...props}/>)
+        const renderedModel = wrapper.find(Model)
+        expect(renderedModel.length).toEqual(3)
+        expect(renderedModel.get(0).props.schema.get("name")).toEqual("c")
+        expect(renderedModel.get(1).props.schema.get("name")).toEqual("b")
+        expect(renderedModel.get(2).props.schema.get("name")).toEqual("a")
+    })
+})

test/components/primitive-model.js

@@ -14,6 +14,9 @@ describe("<PrimitiveModel/>", function() {
         }
         const props = {
             getComponent: c => components[c],
+            getConfigs: () => ({
+                showExtensions: false
+            }),
             name: "Name from props",
             depth: 1,
             schema: fromJS({
@@ -46,4 +49,4 @@ describe("<PrimitiveModel/>", function() {
         })
 
     })
-} )
+} )

test/core/plugins/auth/selectors.js

@@ -0,0 +1,133 @@
+/* eslint-env mocha */
+import expect from "expect"
+import { fromJS } from "immutable"
+import { definitionsToAuthorize, definitionsForRequirements } from "corePlugins/auth/selectors"
+
+describe("auth plugin - selectors", () => {
+  describe("definitionsToAuthorize", () => {
+    it("should return securityDefinitions as a List", () => {
+      const securityDefinitions = {
+        "petstore_auth": {
+          "type": "oauth2",
+          "authorizationUrl": "http://petstore.swagger.io/oauth/dialog",
+          "flow": "implicit",
+          "scopes": {
+            "write:pets": "modify pets in your account",
+            "read:pets": "read your pets"
+          }
+        },
+        "api_key": {
+          "type": "apiKey",
+          "name": "api_key",
+          "in": "header"
+        }
+      }
+
+      const system = {
+        specSelectors: {
+          securityDefinitions() {
+            return fromJS(securityDefinitions)
+          }
+        }
+      }
+
+      const res = definitionsToAuthorize({})(system)
+
+      expect(res.toJS()).toEqual([
+        {
+          "petstore_auth": securityDefinitions["petstore_auth"]
+        },
+        {
+          "api_key": securityDefinitions["api_key"]
+        },
+      ])
+    })
+
+    it("should fail gracefully with bad data", () => {
+      const securityDefinitions = null
+
+      const system = {
+        specSelectors: {
+          securityDefinitions() {
+            return fromJS(securityDefinitions)
+          }
+        }
+      }
+
+      const res = definitionsToAuthorize({})(system)
+
+      expect(res.toJS()).toEqual([])
+    })
+  })
+
+  describe("definitionsForRequirements", () => {
+    it("should return applicable securityDefinitions as a List", () => {
+      const securityDefinitions = {
+        "petstore_auth": {
+          "type": "oauth2",
+          "authorizationUrl": "http://petstore.swagger.io/oauth/dialog",
+          "flow": "implicit",
+          "scopes": {
+            "write:pets": "modify pets in your account",
+            "read:pets": "read your pets"
+          }
+        },
+        "api_key": {
+          "type": "apiKey",
+          "name": "api_key",
+          "in": "header"
+        }
+      }
+
+      const system = {
+        authSelectors: {
+          definitionsToAuthorize() {
+            return fromJS([
+              {
+                "petstore_auth": securityDefinitions["petstore_auth"]
+              },
+              {
+                "api_key": securityDefinitions["api_key"]
+              },
+            ])
+          }
+        }
+      }
+
+      const securities = fromJS([
+        {
+          "petstore_auth": [
+            "write:pets",
+            "read:pets"
+          ]
+        }
+      ])
+
+      const res = definitionsForRequirements({}, securities)(system)
+
+      expect(res.toJS()).toEqual([
+        {
+          "petstore_auth": securityDefinitions["petstore_auth"]
+        }
+      ])
+    })
+
+    it("should fail gracefully with bad data", () => {
+      const securityDefinitions = null
+
+      const system = {
+        authSelectors: {
+          definitionsToAuthorize() {
+            return null
+          }
+        }
+      }
+
+      const securities = null
+
+      const res = definitionsForRequirements({}, securities)(system)
+
+      expect(res.toJS()).toEqual([])
+    })
+  })
+})

test/core/system/system.js

@@ -1,7 +1,11 @@
 /* eslint-env mocha */
+import React, { PureComponent } from "react"
 import expect from "expect"
 import System from "core/system"
 import { fromJS } from "immutable"
+import { render } from "enzyme"
+import ViewPlugin from "core/plugins/view/index.js"
+import { connect, Provider } from "react-redux"
 
 describe("bound system", function(){
 
@@ -444,4 +448,239 @@ describe("bound system", function(){
 
   })
 
+  describe("getComponent", function() {
+    it("returns a component from the system", function() {
+      const system = new System({
+        plugins: [
+          ViewPlugin,
+          {
+            components: {
+              test: ({ name }) => <div>{name} component</div>
+            }
+          }
+        ]
+      })
+
+      // When
+      var Component = system.getSystem().getComponent("test")
+      const renderedComponent = render(<Component name="Test" />)
+      expect(renderedComponent.text()).toEqual("Test component")
+    })
+
+    it("allows container components to provide their own `mapStateToProps` function", function() {
+      // Given
+      class ContainerComponent extends PureComponent {
+        mapStateToProps(nextState, props) {
+          return {
+            "fromMapState": "This came from mapStateToProps"
+          }
+        }
+
+        static defaultProps = {
+          "fromMapState" : ""
+        }
+
+        render() {
+          const { exampleSelectors, fromMapState, fromOwnProps } = this.props
+          return (
+            <div>{ fromMapState } {exampleSelectors.foo()} {fromOwnProps}</div>
+          )
+        }
+      }
+      const system = new System({
+        plugins: [
+          ViewPlugin,
+          {
+            components: {
+              ContainerComponent
+            }
+          },
+          {
+            statePlugins: {
+              example: {
+                selectors: {
+                  foo() { return "and this came from the system" }
+                }
+              }
+            }
+          }
+        ]
+      })
+
+      // When
+      var Component = system.getSystem().getComponent("ContainerComponent", true)
+      const renderedComponent = render(
+        <Provider store={system.getStore()}>
+          <Component fromOwnProps="and this came from my own props" />
+        </Provider>
+      )
+
+      // Then
+      expect(renderedComponent.text()).toEqual("This came from mapStateToProps and this came from the system and this came from my own props")
+    })
+
+    it("gives the system and own props as props to a container's `mapStateToProps` function", function() {
+      // Given
+      class ContainerComponent extends PureComponent {
+        mapStateToProps(nextState, props) {
+          const { exampleSelectors, fromMapState, fromOwnProps } = props
+          return {
+            "fromMapState": `This came from mapStateToProps ${exampleSelectors.foo()} ${fromOwnProps}`
+          }
+        }
+
+        static defaultProps = {
+          "fromMapState" : ""
+        }
+
+        render() {
+          const { fromMapState } = this.props
+          return (
+            <div>{ fromMapState }</div>
+          )
+        }
+      }
+      const system = new System({
+        plugins: [
+          ViewPlugin,
+          {
+            components: {
+              ContainerComponent
+            }
+          },
+          {
+            statePlugins: {
+              example: {
+                selectors: {
+                  foo() { return "and this came from the system" }
+                }
+              }
+            }
+          }
+        ]
+      })
+
+      // When
+      var Component = system.getSystem().getComponent("ContainerComponent", true)
+      const renderedComponent = render(
+        <Provider store={system.getStore()}>
+          <Component fromOwnProps="and this came from my own props" />
+        </Provider>
+      )
+
+      // Then
+      expect(renderedComponent.text()).toEqual("This came from mapStateToProps and this came from the system and this came from my own props")
+    })
+
+    it("should catch errors thrown inside of React Component Class render methods", function() {
+      // Given
+      // eslint-disable-next-line react/require-render-return
+      class BrokenComponent extends React.Component {
+        render() {
+          throw new Error("This component is broken")
+        }
+      }
+      const system = new System({
+        plugins: [
+          ViewPlugin,
+          {
+            components: {
+              BrokenComponent
+            }
+          }
+        ]
+      })
+
+      // When
+      var Component = system.getSystem().getComponent("BrokenComponent")
+      const renderedComponent = render(<Component />)
+
+      // Then
+      expect(renderedComponent.text()).toEqual("😱 Could not render BrokenComponent, see the console.")
+    })
+
+    it("should catch errors thrown inside of pure component render methods", function() {
+      // Given
+      // eslint-disable-next-line react/require-render-return
+      class BrokenComponent extends PureComponent {
+        render() {
+          throw new Error("This component is broken")
+        }
+      }
+
+      const system = new System({
+        plugins: [
+          ViewPlugin,
+          {
+            components: {
+              BrokenComponent
+            }
+          }
+        ]
+      })
+
+      // When
+      var Component = system.getSystem().getComponent("BrokenComponent")
+      const renderedComponent = render(<Component />)
+
+      // Then
+      expect(renderedComponent.text()).toEqual("😱 Could not render BrokenComponent, see the console.")
+    })
+
+    it("should catch errors thrown inside of stateless component functions", function() {
+      // Given
+      // eslint-disable-next-line react/require-render-return
+      let BrokenComponent = function BrokenComponent() { throw new Error("This component is broken") }
+      const system = new System({
+        plugins: [
+          ViewPlugin,
+          {
+            components: {
+              BrokenComponent
+            }
+          }
+        ]
+      })
+
+      // When
+      var Component = system.getSystem().getComponent("BrokenComponent")
+      const renderedComponent = render(<Component />)
+
+      // Then
+      expect(renderedComponent.text().startsWith("😱 Could not render")).toEqual(true)
+    })
+
+    it("should catch errors thrown inside of container components", function() {
+      // Given
+      // eslint-disable-next-line react/require-render-return
+      class BrokenComponent extends React.Component {
+        render() {
+          throw new Error("This component is broken")
+        }
+      }
+
+      const system = new System({
+        plugins: [
+          ViewPlugin,
+          {
+            components: {
+              BrokenComponent
+            }
+          }
+        ]
+      })
+
+      // When
+      var Component = system.getSystem().getComponent("BrokenComponent", true)
+      const renderedComponent = render(
+        <Provider store={system.getStore()}>
+          <Component />
+        </Provider>
+      )
+
+      // Then
+      expect(renderedComponent.text()).toEqual("😱 Could not render BrokenComponent, see the console.")
+    })
+  })
+
 })

test/core/utils.js

@@ -700,6 +700,14 @@ describe("utils", function() {
       }
       assertValidateParam(param, ["Required field is not provided"])
 
+      // valid integer, but 0 is falsy in JS
+      param = {
+        required: true,
+        type: "integer",
+        value: 0
+      }
+      assertValidateParam(param, [])
+
       // valid integer
       param = {
         required: true,

test/e2e/pages/main.js

@@ -93,6 +93,7 @@ module.exports = {
         petAPIWrapperBar: {
           selector: ".swagger-ui .opblock-tag-section:nth-child(1) .opblock-tag"
         },
+        
         /**
          * Post pet/ api
          */
@@ -141,6 +142,7 @@ module.exports = {
         petOperationPostStatus: {
           selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-addPet pre.microlight span:nth-child(70)"
         },
+        
         /**
          * Put pet/ api
          */
@@ -189,8 +191,9 @@ module.exports = {
         petOperationPutStatus: {
           selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-updatePet pre.microlight span:nth-child(70)"
         },
+        
         /**
-         * Get pet/
+         * Get /pet/findByTags
          */
         petOperationGetByTagContainer: {
           selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-findPetsByTags"
@@ -237,6 +240,34 @@ module.exports = {
         petOperationGetByTagStatus: {
           selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-findPetsByTags pre.microlight span:nth-child(70)"
         },
+
+        /**
+         * Get /pet/{petId}
+         */
+        petOperationGetByIdContainer: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-getPetById"
+        },
+        petOperationGetByIdTitle: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-getPetById .opblock-summary-get span.opblock-summary-path span"
+        },
+        petOperationGetByIdCollpase: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-getPetById .opblock-summary-get"
+        },
+        petOperationGetByIdCollapseContainer: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-getPetById .ReactCollapse--collapse"
+        },
+        petOperationGetByIdTryBtn: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-getPetById button.try-out__btn"
+        },
+        petOperationGetByIdExecuteBtn: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-getPetById button.execute"
+        },
+        petOperationGetByIdParameter: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(3) div#operations-pet-getPetById div.parameters-col_description input"
+        },       
+        petOperationGetByIdResultsBox: {
+          selector: ".swagger-ui .opblock-tag-section:nth-child(1) div#operations-pet-getPetById pre.microlight"
+        },        
         
         /**
          * Delete pet/
@@ -497,9 +528,5 @@ module.exports = {
         },
       }
     }
-
-
-
-
   }
 }

test/e2e/scenarios/operations/pet.js

@@ -84,6 +84,7 @@ describe("render pet api container", function () {
             
         client.end()
     })
+    
     it("Testing put /pet api Mock data", function (client) {
         apiWrapper.waitForElementVisible("@petOperationPutContainer", 5000)
             .click("@petOperationPutCollpase")
@@ -137,6 +138,38 @@ describe("render pet api container", function () {
 
         client.end()
     })
+    
+    it("render get by ID /pet/{petId} api container", function (client) {
+        apiWrapper.waitForElementVisible("@petOperationGetByIdContainer", 5000)
+            .assert.containsText("@petOperationGetByIdTitle", "/pet/{petId}")
+            .click("@petOperationGetByIdCollpase")
+            .waitForElementVisible("@petOperationGetByIdCollapseContainer", 3000)
+            .click("@petOperationGetByIdTryBtn")
+            .waitForElementVisible("@petOperationGetByTagExecuteBtn", 1000)
+            .click("@petOperationGetByTagTryBtn")
+            .assert.cssClassNotPresent("@petOperationGetByTagTryBtn", "cancel")
+            
+        client.end()
+    })
+
+    it("render get by ID /pet/{petId} api Mock data", function (client) {
+        apiWrapper.waitForElementVisible("@petOperationGetByIdContainer", 5000)
+            .assert.containsText("@petOperationGetByIdTitle", "/pet/{petId}")
+            .click("@petOperationGetByIdCollpase")
+            .waitForElementVisible("@petOperationGetByIdCollapseContainer", 3000)
+            .click("@petOperationGetByIdTryBtn")
+            .waitForElementVisible("@petOperationGetByTagExecuteBtn", 1000)
+            .setValue("@petOperationGetByIdParameter", "abc")
+            .click("@petOperationGetByIdExecuteBtn")
+            .waitForElementVisible("@petOperationGetByIdResultsBox")
+            .assert.containsText("@petOperationGetByIdParameter", "abc")
+            .assert.cssClassPresent("@petOperationGetByIdParameter", "invalid")
+            .assert.attributeEquals("@petOperationGetByIdParameter", "title", "Value must be an integer")
+            .click("@petOperationGetByTagTryBtn")
+            .assert.cssClassNotPresent("@petOperationGetByTagTryBtn", "cancel")
+            
+        client.end()
+    })
 
     it("render delete /pet api container", function (client) {
         apiWrapper.waitForElementVisible("@petOperationDeleteContainer")
@@ -150,6 +183,7 @@ describe("render pet api container", function () {
             
         client.end()
     })
+    
     it("Testing delete /pet api Mock data", function (client) {
         apiWrapper.waitForElementVisible("@petOperationDeleteContainer", 3000)
             .click("@petOperationDeleteCollpase")