Merge branch 'master' into ft/oas3

src/core/components/app.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 
 export default class App extends React.Component {
 
@@ -6,7 +7,7 @@ export default class App extends React.Component {
     let { getComponent, layoutSelectors } = this.props
     const layoutName = layoutSelectors.current()
     const Component = getComponent(layoutName, true)
-    return Component ? Component : ()=> <h1> No layout defined for "{layoutName}" </h1>
+    return Component ? Component : ()=> <h1> No layout defined for &quot;{layoutName}&quot; </h1>
   }
 
   render() {

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

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 
 export default class ApiKeyAuth extends React.Component {
   static propTypes = {

src/core/components/auth/authorization-popup.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 
 export default class AuthorizationPopup extends React.Component {
   close =() => {

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

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 
 export default class AuthorizeBtn extends React.Component {
   static propTypes = {

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

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 import ImPropTypes from "react-immutable-proptypes"
 
 export default class AuthorizeOperationBtn extends React.Component {

src/core/components/auth/auths.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 import ImPropTypes from "react-immutable-proptypes"
 
 export default class Auths extends React.Component {

src/core/components/auth/basic-auth.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 import ImPropTypes from "react-immutable-proptypes"
 
 export default class BasicAuth extends React.Component {

src/core/components/auth/error.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 
 export default class AuthError extends React.Component {
 

src/core/components/auth/oauth2.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 import oauth2Authorize from "core/oauth2-authorize"
 
 const IMPLICIT = "implicit"

src/core/components/clear.jsx

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from "react"
+import React, { Component } from "react"
+import PropTypes from "prop-types"
 
 export default class Clear extends Component {
 

src/core/components/content-type.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 import ImPropTypes from "react-immutable-proptypes"
 import { fromJS } from "immutable"
 

src/core/components/curl.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 import curlify from "core/curlify"
 
 export default class Curl extends React.Component {

src/core/components/debug.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 import Collapse from "react-collapse"
 import { presets } from "react-motion"
 import ObjectInspector from "react-object-inspector"

src/core/components/errors.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 import { List } from "immutable"
 import Collapse from "react-collapse"
 

src/core/components/execute.jsx

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from "react"
+import React, { Component } from "react"
+import PropTypes from "prop-types"
 
 export default class Execute extends Component {
 

src/core/components/headers.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 import Im from "immutable"
 
 export default class Headers extends React.Component {

src/core/components/highlight-code.jsx

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from "react"
+import React, { Component } from "react"
+import PropTypes from "prop-types"
 import { highlight } from "core/utils"
 
 export default class HighlightCode extends Component {
@@ -8,17 +9,21 @@ export default class HighlightCode extends Component {
   }
 
   componentDidMount() {
-    highlight(this.refs.el)
+    highlight(this.el)
   }
 
   componentDidUpdate() {
-    highlight(this.refs.el)
+    highlight(this.el)
+  }
+
+  initializeComponent = (c) => {
+    this.el = c
   }
 
   render () {
     let { value, className } = this.props
     className = className || ""
 
-    return <pre ref="el" className={className + " microlight"}>{ value }</pre>
+    return <pre ref={this.initializeComponent} className={className + " microlight"}>{ value }</pre>
   }
 }

src/core/components/info.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 import { fromJS } from "immutable"
 import ImPropTypes from "react-immutable-proptypes"
 

src/core/components/layout-utils.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 import OriCollapse from "react-collapse"
 
 function xclass(...args) {

src/core/components/layouts/base.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 
 export default class BaseLayout extends React.Component {
 

src/core/components/layouts/xpane.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 
 export default class XPane extends React.Component {
 

src/core/components/live-response.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 import ImPropTypes from "react-immutable-proptypes"
 
 const Headers = ( { headers } )=>{
@@ -8,28 +9,40 @@ const Headers = ( { headers } )=>{
       <pre>{headers}</pre>
     </div>)
 }
-
 Headers.propTypes = {
   headers: PropTypes.array.isRequired
 }
 
+const Duration = ( { duration } ) => {
+  return (
+    <div>
+      <h5>Request duration</h5>
+      <pre>{duration} ms</pre>
+    </div>
+  )
+}
+Duration.propTypes = {
+  duration: PropTypes.number.isRequired
+}
+
+
 export default class LiveResponse extends React.Component {
   static propTypes = {
     response: PropTypes.object.isRequired,
-    getComponent: PropTypes.func.isRequired
+    getComponent: PropTypes.func.isRequired,
+    displayRequestDuration: PropTypes.bool.isRequired
   }
 
   render() {
-    const { request, response, getComponent } = this.props
+    const { request, response, getComponent, displayRequestDuration } = this.props
 
     const status = response.get("status")
     const url = response.get("url")
     const headers = response.get("headers").toJS()
     const notDocumented = response.get("notDocumented")
     const isError = response.get("error")
-
-    const body = isError ? response.get("response").get("text") : response.get("text")
-
+    const body = response.get("text")
+    const duration = response.get("duration")
     const headersKeys = Object.keys(headers)
     const contentType = headers["content-type"]
 
@@ -80,6 +93,9 @@ export default class LiveResponse extends React.Component {
                 {
                   hasHeaders ? <Headers headers={ returnObject }/> : null
                 }
+                {
+                  displayRequestDuration && duration ? <Duration duration={ duration } /> : null
+                }
               </td>
             </tr>
           </tbody>

src/core/components/model-example.jsx

@@ -1,5 +1,5 @@
-import React, { PropTypes } from "react"
-
+import React from "react"
+import PropTypes from "prop-types"
 
 export default class ModelExample extends React.Component {
   static propTypes = {

src/core/components/model.jsx

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from "react"
+import React, { Component } from "react"
+import PropTypes from "prop-types"
 import ImPropTypes from "react-immutable-proptypes"
 import { List } from "immutable"
 const braceOpen = "{"
@@ -42,6 +43,7 @@ class ObjectModel extends Component {
     let additionalProperties = schema.get("additionalProperties")
     let title = schema.get("title") || name
     let required = schema.get("required")
+    const Markdown = getComponent("Markdown")
     const JumpToPathSection = ({ name }) => <span className="model-jump-to-path"><JumpToPath path={`definitions.${name}`} /></span>
   let collapsedContent = (<span>
       <span>{ braceOpen }</span>...<span>{ braceClose }</span>
@@ -68,7 +70,9 @@ class ObjectModel extends Component {
               {
                 !description ? null : <tr style={{ color: "#999", fontStyle: "italic" }}>
                     <td>description:</td>
-                    <td>{ description }</td>
+                    <td>
+                      <Markdown source={ description } />
+                    </td>
                   </tr>
               }
               {
@@ -122,12 +126,14 @@ class ObjectModel extends Component {
 class Primitive extends Component {
   static propTypes = {
     schema: PropTypes.object.isRequired,
+    name: PropTypes.string,
+    getComponent: PropTypes.func.isRequired,
     required: PropTypes.bool,
     deprecated: PropTypes.bool
   }
 
   render(){
-    let { schema, required, deprecated } = this.props
+    let { schema, getComponent, name, required, deprecated } = this.props
 
     if(!schema || !schema.get) {
       // don't render if schema isn't correctly formed
@@ -138,17 +144,29 @@ class Primitive extends Component {
     let format = schema.get("format")
     let xml = schema.get("xml")
     let enumArray = schema.get("enum")
-    let properties = schema.filter( ( v, key) => ["enum", "type", "format", "$$ref"].indexOf(key) === -1 )
+    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 style = required ? { fontWeight: "bold" } : {}
+    const Markdown = getComponent("Markdown")
 
-    return <span className={`prop ${deprecated ? "deprecated" : ""}`}>
+    return <span className={`model ${deprecated ? "deprecated" : ""}`}>
+      {
+        title && <span className="model-title" style={{ marginRight: "2em" }}>
+          <span className="model-title__text">{ title }</span>
+        </span>
+      }
       <span className="prop-type" style={ style }>{ type }</span> { required && <span style={{ color: "red" }}>*</span>}
       { format && <span className="prop-format">(${format})</span>}
       {
         properties.size ? properties.entrySeq().map( ( [ key, v ] ) => <span key={`${key}-${v}`} style={ propStyle }>
-          <br />{ key !== "description" && key + ": " }{ String(v) }</span>)
+          <br />{ key }: { String(v) }</span>)
           : null
       }
+      {
+        !description ? null :
+          <Markdown source={ description } />
+      }
       {
         xml && xml.size ? (<span><br /><span style={ propStyle }>xml:</span>
           {
@@ -175,17 +193,20 @@ class ArrayModel extends Component {
   }
 
   render(){
-    let { required, schema, depth, expandDepth } = this.props
+    let { required, schema, depth, name, expandDepth } = this.props
     let items = schema.get("items")
+    let title = schema.get("title") || name
     let properties = schema.filter( ( v, key) => ["type", "items", "$$ref"].indexOf(key) === -1 )
 
     return <span className="model">
-      <span className="model-title">
-        <span className="model-title__text">{ schema.get("title") }</span>
-      </span>
+      {
+        title && <span className="model-title">
+          <span className="model-title__text">{ title }</span>
+        </span>
+      }
       <Collapse collapsed={ depth > expandDepth } collapsedContent="[...]">
         [
-          <span><Model { ...this.props } schema={ items } required={ false }/></span>
+          <span><Model { ...this.props } name="" schema={ items } required={ false }/></span>
         ]
         {
           properties.size ? <span>
@@ -226,7 +247,7 @@ export class Model extends Component {
   }
 
   render () {
-    let { schema, required, name, isRef, specSelectors } = this.props
+    let { getComponent, specSelectors, schema, required, name, isRef } = this.props
     let $$ref = schema && schema.get("$$ref")
     let modelName = $$ref && this.getModelName( $$ref )
     let modelSchema, type
@@ -249,27 +270,28 @@ export class Model extends Component {
         return <ObjectModel
           className="object" { ...this.props }
           schema={ modelSchema }
-          name={ modelName || name }
-          isRef={ isRef!== undefined ? isRef : !!$$ref }
+          name={ name || modelName }
           deprecated={deprecated}
-        />
+          isRef={ isRef!== undefined ? isRef : !!$$ref } />
       case "array":
         return <ArrayModel
           className="array" { ...this.props }
           schema={ modelSchema }
-          required={ required }
+          name={ name || modelName }
           deprecated={deprecated}
-          />
+          required={ required } />
       case "string":
       case "number":
       case "integer":
       case "boolean":
       default:
         return <Primitive
+          { ...this.props }
+          getComponent={ getComponent }
           schema={ modelSchema }
-          required={ required }
+          name={ name || modelName }
           deprecated={deprecated}
-        />
+          required={ required }/>
     }
   }
 }

src/core/components/models.jsx

@@ -1,5 +1,5 @@
-import React, { Component, PropTypes } from "react"
-
+import React, { Component } from "react"
+import PropTypes from "prop-types"
 
 export default class Models extends Component {
   static propTypes = {
@@ -24,8 +24,8 @@ export default class Models extends Component {
     return <section className={ showModels ? "models is-open" : "models"}>
       <h4 onClick={() => layoutActions.show("models", !showModels)}>
         <span>Models</span>
-        <svg width="20" height="20">
-          <use xlinkHref="#large-arrow" />
+        <svg className="arrow" width="20" height="20">
+          <use xlinkHref={showModels ? "#large-arrow-down" : "#large-arrow"} />
         </svg>
       </h4>
       <Collapse isOpened={showModels} animated>

src/core/components/online-validator-badge.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 
 export default class OnlineValidatorBadge extends React.Component {
     static propTypes = {

src/core/components/operation.jsx

@@ -1,11 +1,11 @@
-import React, { PropTypes } from "react"
-import shallowCompare from "react-addons-shallow-compare"
+import React, { PureComponent } from "react"
+import PropTypes from "prop-types"
 import { getList } from "core/utils"
 import * as CustomPropTypes from "core/proptypes"
 
 //import "less/opblock"
 
-export default class Operation extends React.Component {
+export default class Operation extends PureComponent {
   static propTypes = {
     path: PropTypes.string.isRequired,
     method: PropTypes.string.isRequired,
@@ -18,6 +18,7 @@ export default class Operation extends React.Component {
     allowTryItOut: PropTypes.bool,
 
     displayOperationId: PropTypes.bool,
+    displayRequestDuration: PropTypes.bool,
 
     response: PropTypes.object,
     request: PropTypes.object,
@@ -38,6 +39,7 @@ export default class Operation extends React.Component {
     response: null,
     allowTryItOut: true,
     displayOperationId: false,
+    displayRequestDuration: false
   }
 
   constructor(props, context) {
@@ -70,10 +72,6 @@ export default class Operation extends React.Component {
     }
   }
 
-  shouldComponentUpdate(props, state) {
-    return shallowCompare(this, props, state)
-  }
-
   toggleShown =() => {
     let { layoutActions, isShownKey } = this.props
     layoutActions.show(isShownKey, !this.isShown())
@@ -112,7 +110,7 @@ export default class Operation extends React.Component {
       request,
       allowTryItOut,
       displayOperationId,
-
+      displayRequestDuration,
       fn,
       getComponent,
       specActions,
@@ -131,6 +129,7 @@ export default class Operation extends React.Component {
     let schemes = operation.get("schemes")
     let parameters = getList(operation, ["parameters"])
     let operationId = operation.get("__originalOperationId")
+    let operationScheme = specSelectors.operationScheme(path, method)
 
     const Responses = getComponent("responses")
     const Parameters = getComponent( "parameters" )
@@ -217,7 +216,8 @@ export default class Operation extends React.Component {
                     <Schemes schemes={ schemes }
                              path={ path }
                              method={ method }
-                             specActions={ specActions }/>
+                             specActions={ specActions }
+                             operationScheme={ operationScheme } />
                   </div> : null
               }
 
@@ -256,6 +256,7 @@ export default class Operation extends React.Component {
                     produces={ produces }
                     producesValue={ operation.get("produces_value") }
                     pathMethod={ [path, method] }
+                    displayRequestDuration={ displayRequestDuration }
                     fn={fn} />
               }
             </div>

src/core/components/operations.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 
 export default class Operations extends React.Component {
 
@@ -32,7 +33,7 @@ export default class Operations extends React.Component {
     const Collapse = getComponent("Collapse")
 
     let showSummary = layoutSelectors.showSummary()
-    let { docExpansion, displayOperationId } = getConfigs()
+    let { docExpansion, displayOperationId, displayRequestDuration } = getConfigs()
 
     return (
         <div>
@@ -87,6 +88,7 @@ export default class Operations extends React.Component {
                           allowTryItOut={allowTryItOut}
 
                           displayOperationId={displayOperationId}
+                          displayRequestDuration={displayRequestDuration}
 
                           specActions={ specActions }
                           specSelectors={ specSelectors }

src/core/components/overview.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 import { Link } from "core/components/layout-utils"
 
 export default class Overview extends React.Component {

src/core/components/param-body.jsx

@@ -1,11 +1,11 @@
-import React, { Component, PropTypes } from "react"
-import shallowCompare from "react-addons-shallow-compare"
+import React, { PureComponent } from "react"
+import PropTypes from "prop-types"
 import { fromJS, List } from "immutable"
 import { getSampleSchema } from "core/utils"
 
 const NOOP = Function.prototype
 
-export default class ParamBody extends Component {
+export default class ParamBody extends PureComponent {
 
   static propTypes = {
     param: PropTypes.object,
@@ -41,10 +41,6 @@ export default class ParamBody extends Component {
     this.updateValues.call(this, this.props)
   }
 
-  shouldComponentUpdate(props, state) {
-    return shallowCompare(this, props, state)
-  }
-
   componentWillReceiveProps(nextProps) {
     this.updateValues.call(this, nextProps)
   }

src/core/components/parameter-row.jsx

@@ -1,7 +1,7 @@
-import React, { Component, PropTypes } from "react"
+import React, { Component } from "react"
+import PropTypes from "prop-types"
 import win from "core/window"
 
-
 export default class ParameterRow extends Component {
   static propTypes = {
     onChange: PropTypes.func.isRequired,

src/core/components/parameters.jsx

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from "react"
+import React, { Component } from "react"
+import PropTypes from "prop-types"
 import ImPropTypes from "react-immutable-proptypes"
 import Im from "immutable"
 

src/core/components/providers/markdown.jsx

@@ -1,9 +1,16 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 import Remarkable from "react-remarkable"
 import sanitize from "sanitize-html"
 
 function Markdown({ source }) {
   const sanitized = sanitizer(source)
+
+  // sometimes the sanitizer returns "undefined" as a string
+  if(!source || !sanitized || sanitized === "undefined") {
+    return null
+  }
+
   return <Remarkable
     options={{html: true, typographer: true, linkify: true, linkTarget: "_blank"}}
     source={sanitized}

src/core/components/response-body.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 import { formatXml } from "core/utils"
 import lowerCase from "lodash/lowerCase"
 
@@ -6,7 +7,7 @@ export default class ResponseBody extends React.Component {
 
   static propTypes = {
     content: PropTypes.any.isRequired,
-    contentType: PropTypes.string.isRequired,
+    contentType: PropTypes.string,
     getComponent: PropTypes.func.isRequired,
     headers: PropTypes.object,
     url: PropTypes.string

src/core/components/response.jsx

@@ -1,18 +1,21 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 import { fromJS, Seq } from "immutable"
 import { getSampleSchema } from "core/utils"
 
 const getExampleComponent = ( sampleResponse, examples, HighlightCode ) => {
   if ( examples && examples.size ) {
     return examples.entrySeq().map( ([ key, example ]) => {
-      let exampleValue
-      try {
-        exampleValue = example && example.toJS ? example.toJS() : example
-        exampleValue = JSON.stringify(exampleValue, null, 2)
-      }
-      catch(e) {
-        exampleValue = String(example)
+      let exampleValue = example
+      if ( example.toJS ) {
+        try {
+          exampleValue = JSON.stringify(example.toJS(), null, 2)
+        }
+        catch(e) {
+          exampleValue = String(example)
+        }
       }
+
       return (<div key={ key }>
         <h5>{ key }</h5>
         <HighlightCode className="example" value={ exampleValue } />

src/core/components/responses.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 import { fromJS } from "immutable"
 import { defaultStatusCode } from "core/utils"
 
@@ -14,19 +15,21 @@ export default class Responses extends React.Component {
     specSelectors: PropTypes.object.isRequired,
     specActions: 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"])
+    produces: fromJS(["application/json"]),
+    displayRequestDuration: false
   }
 
   onChangeProducesWrapper = ( val ) => this.props.specActions.changeProducesValue(this.props.pathMethod, val)
 
   render() {
-    let { responses, request, tryItOutResponse, getComponent, specSelectors, fn, producesValue } = this.props
+    let { responses, request, tryItOutResponse, getComponent, specSelectors, fn, producesValue, displayRequestDuration } = this.props
     let defaultCode = defaultStatusCode( responses )
 
     const ContentType = getComponent( "contentType" )
@@ -53,7 +56,8 @@ export default class Responses extends React.Component {
                               : <div>
                                   <LiveResponse request={ request }
                                                 response={ tryItOutResponse }
-                                                getComponent={ getComponent } />
+                                                getComponent={ getComponent }
+                                                displayRequestDuration={ displayRequestDuration } />
                                   <h4>Responses</h4>
                                 </div>
 

src/core/components/schemes.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 
 export default class Schemes extends React.Component {
 
@@ -6,7 +7,8 @@ export default class Schemes extends React.Component {
     specActions: PropTypes.object.isRequired,
     schemes: PropTypes.object.isRequired,
     path: PropTypes.string,
-    method: PropTypes.string
+    method: PropTypes.string,
+    operationScheme: PropTypes.string
   }
 
   componentWillMount() {
@@ -16,11 +18,18 @@ export default class Schemes extends React.Component {
     this.setScheme(schemes.first())
   }
 
+  componentWillReceiveProps(nextProps) {
+    if ( this.props.operationScheme && !nextProps.schemes.has(this.props.operationScheme) ) {
+      //fire 'change' event if our selected scheme is no longer an option
+      this.setScheme(nextProps.schemes.first())
+    }
+  }
+
   onChange =( e ) => {
     this.setScheme( e.target.value )
   }
 
-  setScheme =( value ) => {
+  setScheme = ( value ) => {
     let { path, method, specActions } = this.props
 
     specActions.setScheme( value, path, method )

src/core/components/try-it-out-button.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 
 export default class TryItOutButton extends React.Component {
 

src/core/index.js

@@ -6,9 +6,9 @@ import ApisPreset from "core/presets/apis"
 import * as AllPlugins from "core/plugins/all"
 import { parseSeach, filterConfigs } from "core/utils"
 
-const CONFIGS = [ "url", "spec", "validatorUrl", "onComplete", "onFailure", "authorizations", "docExpansion",
+const CONFIGS = [ "url", "urls", "urls.primaryName", "spec", "validatorUrl", "onComplete", "onFailure", "authorizations", "docExpansion",
     "apisSorter", "operationsSorter", "supportedSubmitMethods", "dom_id", "defaultModelRendering", "oauth2RedirectUrl",
-    "showRequestHeaders", "custom", "modelPropertyMacro", "parameterMacro", "displayOperationId" ]
+    "showRequestHeaders", "custom", "modelPropertyMacro", "parameterMacro", "displayOperationId" , "displayRequestDuration"]
 
 // eslint-disable-next-line no-undef
 const { GIT_DIRTY, GIT_COMMIT, PACKAGE_VERSION } = buildInfo
@@ -23,12 +23,14 @@ module.exports = function SwaggerUI(opts) {
     dom_id: null,
     spec: {},
     url: "",
+    urls: null,
     layout: "BaseLayout",
     docExpansion: "list",
     validatorUrl: "https://online.swagger.io/validator",
     configs: {},
     custom: {},
     displayOperationId: false,
+    displayRequestDuration: 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.
@@ -117,6 +119,7 @@ module.exports = function SwaggerUI(opts) {
     return downloadSpec()
   }
 
+  return system
 }
 
 // Add presets

src/core/json-schema-components.js

@@ -1,5 +1,5 @@
-import React, { PropTypes, Component } from "react"
-import shallowCompare from "react-addons-shallow-compare"
+import React, { PureComponent, Component } from "react"
+import PropTypes from "prop-types"
 import { List, fromJS } from "immutable"
 //import "less/json-schema-form"
 
@@ -74,7 +74,7 @@ export class JsonSchema_string extends Component {
   }
 }
 
-export class JsonSchema_array extends Component {
+export class JsonSchema_array extends PureComponent {
 
   static propTypes = JsonSchemaPropShape
   static defaultProps = JsonSchemaDefaultProps
@@ -89,10 +89,6 @@ export class JsonSchema_array extends Component {
       this.setState({value: props.value})
   }
 
-  shouldComponentUpdate(props, state) {
-    return shallowCompare(this, props, state)
-  }
-
   onChange = () => this.props.onChange(this.state.value)
 
   onItemChange = (itemVal, i) => {

src/core/plugins/samples/fn.js

@@ -9,7 +9,7 @@ const primitives = {
   "number": () => 0,
   "number_float": () => 0.0,
   "integer": () => 0,
-  "boolean": () => true
+  "boolean": (schema) => typeof schema.default === "boolean" ? schema.default : true 
 }
 
 const primitive = (schema) => {
@@ -74,6 +74,10 @@ export const sampleFromSchema = (schema, config={}) => {
     return normalizeArray(schema["enum"])[0]
   }
 
+  if (type === "file") {
+    return
+  }
+
   return primitive(schema)
 }
 

src/core/plugins/spec/actions.js

@@ -92,28 +92,28 @@ export const resolveSpec = (json, url) => ({specActions, specSelectors, errActio
   let specStr = specSelectors.specStr()
 
   return resolve({fetch, spec: json, baseDoc: url, modelPropertyMacro, parameterMacro })
-  .then( ({spec, errors}) => {
-    errActions.clear({
-      type: "thrown"
-     })
+    .then( ({spec, errors}) => {
+      errActions.clear({
+        type: "thrown"
+      })
 
-    if(errors.length > 0) {
-      let preparedErrors = errors
-        .map(err => {
-          console.error(err)
-          err.line = err.fullPath ? getLineNumberForPath(specStr, err.fullPath) : null
-          err.path = err.fullPath ? err.fullPath.join(".") : null
-          err.level = "error"
-          err.type = "thrown"
-          err.source = "resolver"
-          Object.defineProperty(err, "message", { enumerable: true, value: err.message })
-          return err
-        })
-      errActions.newThrownErrBatch(preparedErrors)
-    }
+      if(errors.length > 0) {
+        let preparedErrors = errors
+          .map(err => {
+            console.error(err)
+            err.line = err.fullPath ? getLineNumberForPath(specStr, err.fullPath) : null
+            err.path = err.fullPath ? err.fullPath.join(".") : null
+            err.level = "error"
+            err.type = "thrown"
+            err.source = "resolver"
+            Object.defineProperty(err, "message", { enumerable: true, value: err.message })
+            return err
+          })
+        errActions.newThrownErrBatch(preparedErrors)
+      }
 
-    return specActions.updateResolved(spec)
-  })
+      return specActions.updateResolved(spec)
+    })
 }
 
 export const formatIntoYaml = () => ({specActions, specSelectors}) => {
@@ -207,8 +207,14 @@ export const executeRequest = (req) => ({fn, specActions, specSelectors}) => {
 
   specActions.setRequest(req.pathName, req.method, parsedRequest)
 
+  // track duration of request
+  const startTime = Date.now()
+
   return fn.execute(req)
-  .then( res => specActions.setResponse(req.pathName, req.method, res))
+  .then( res => {
+    res.duration = Date.now() - startTime
+    specActions.setResponse(req.pathName, req.method, res)
+  } )
   .catch( err => specActions.setResponse(req.pathName, req.method, { error: true, err: serializeError(err) } ) )
 }
 

src/core/plugins/spec/reducers.js

@@ -41,7 +41,7 @@ export default {
   [UPDATE_PARAM]: ( state, {payload} ) => {
     let { path, paramName, value, isXml } = payload
     return state.updateIn( [ "resolved", "paths", ...path, "parameters" ], fromJS([]), parameters => {
-      let index = parameters.findIndex( p => p.get( "name" ) === paramName )
+      const index = parameters.findIndex(p => p.get( "name" ) === paramName )
       if (!(value instanceof win.File)) {
         value = fromJSOrdered( value )
       }
@@ -75,7 +75,12 @@ export default {
   [SET_RESPONSE]: (state, { payload: { res, path, method } } ) =>{
     let result
     if ( res.error ) {
-      result = Object.assign({error: true}, res.err)
+      result = Object.assign({
+        error: true,
+        name: res.err.name,
+        message: res.err.message,
+        statusCode: res.err.statusCode
+      }, res.err.response)
     } else {
       result = res
     }
@@ -86,7 +91,7 @@ export default {
     let newState = state.setIn( [ "responses", path, method ], fromJSOrdered(result) )
 
     // ImmutableJS messes up Blob. Needs to reset its value.
-    if (res.data instanceof win.Blob) {
+    if (win.Blob && res.data instanceof win.Blob) {
       newState = newState.setIn( [ "responses", path, method, "text" ], res.data)
     }
     return newState

src/core/plugins/split-pane-mode/components/split-pane-mode.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 import SplitPane from "react-split-pane"
 import "./split-pane-mode.less"
 
@@ -23,9 +24,13 @@ export default class SplitPaneMode extends React.Component {
     children: [],
   };
 
+  initializeComponent = (c) => {
+    this.splitPane = c
+  }
+
   onDragFinished = () => {
     let { threshold, layoutActions } = this.props
-    let { position, draggedSize } = this.refs.splitPane.state
+    let { position, draggedSize } = this.splitPane.state
     this.draggedSize = draggedSize
 
     let nearLeftEdge = position <= threshold
@@ -62,7 +67,7 @@ export default class SplitPaneMode extends React.Component {
     return (
       <SplitPane
         disabledClass={""}
-        ref={"splitPane"}
+        ref={this.initializeComponent}
         split='vertical'
         defaultSize={"50%"}
         primary="second"

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

@@ -65,11 +65,11 @@ export const render = (getSystem, getStore, getComponent, getComponents, dom) =>
 }
 
 // Render try/catch wrapper
-const createClass = component => React.createClass({
+const createClass = component => class extends Component {
   render() {
     return component(this.props)
   }
-})
+}
 
 const Fallback = ({ name }) => <div style={{ // eslint-disable-line react/prop-types
     padding: "1em",

src/core/proptypes.js

@@ -1,4 +1,4 @@
-import { PropTypes } from "react"
+import PropTypes from "prop-types"
 
 // Takes a list and proptype, and returns a PropType.shape({ [item]: propType })
 const mapListToPropTypeShape = (list, propType) => PropTypes.shape(

src/core/system.js

@@ -279,7 +279,7 @@ export default class Store {
           action = {type: NEW_THROWN_ERR, error: true, payload: serializeError(e) }
         }
         finally{
-          return action
+          return action // eslint-disable-line no-unsafe-finally
         }
       }
 

src/core/utils.js

@@ -1,9 +1,9 @@
 import Im from "immutable"
-import shallowEqual from "shallowequal"
 
 import camelCase from "lodash/camelCase"
 import upperFirst from "lodash/upperFirst"
 import _memoize from "lodash/memoize"
+import find from "lodash/find"
 import some from "lodash/some"
 import eq from "lodash/eq"
 import { memoizedSampleFromSchema, memoizedCreateXMLExample } from "core/plugins/samples/fn"
@@ -343,7 +343,7 @@ export function highlight (el) {
         while (![
           1,                   //  0: whitespace
                                //  1: operator or braces
-          /[\/{}[(\-+*=<>:;|\\.,?!&@~]/[test](chr),
+          /[\/{}[(\-+*=<>:;|\\.,?!&@~]/[test](chr),   // eslint-disable-line no-useless-escape
           /[\])]/[test](chr),  //  2: closing brace
           /[$\w]/[test](chr),  //  3: (key)word
           chr == "/" &&        //  4: regex
@@ -418,11 +418,6 @@ export function pascalCaseFilename(filename) {
   return pascalCase(filename.replace(/\.[^./]*$/, ""))
 }
 
-// Only compare a set of props
-export function shallowEqualKeys(a,b, keys) {
-  return !!keys.find(key => !shallowEqual(a[key], b[key]))
-}
-
 // Check if ...
 // - new props
 // - If immutable, use .is()
@@ -455,15 +450,15 @@ export const propChecker = (props, nextProps, objectList=[], ignoreList=[]) => {
     || objectList.some( objectPropName => !eq(props[objectPropName], nextProps[objectPropName])))
 }
 
-const validateNumber = ( val ) => {
-  if ( !/^-?\d+(.?\d+)?$/.test(val)) {
+export const validateNumber = ( val ) => {
+  if ( !/^-?\d+(\.?\d+)?$/.test(val)) {
     return "Value must be a number"
   }
 }
 
-const validateInteger = ( val ) => {
+export const validateInteger = ( val ) => {
   if ( !/^-?\d+$/.test(val)) {
-    return "Value must be integer"
+    return "Value must be an integer"
   }
 }
 
@@ -474,13 +469,14 @@ export const validateParam = (param, isXml) => {
   let required = param.get("required")
   let type = param.get("type")
 
-  if ( required && (!value || (type==="array" && Array.isArray(value) && !value.length ))) {
+  let stringCheck = type === "string" && !value
+  let arrayCheck = type === "array" && Array.isArray(value) && !value.length
+  let listCheck = type === "array" && Im.List.isList(value) && !value.count()
+  if ( required && (stringCheck || arrayCheck || listCheck) ) {
     errors.push("Required field is not provided")
     return errors
   }
 
-  if ( !value ) return errors
-
   if ( type === "number" ) {
     let err = validateNumber(value)
     if (!err) return errors
@@ -593,3 +589,10 @@ export const filterConfigs = (configs, allowed) => {
 
     return filteredConfigs
 }
+
+// Is this really required as a helper? Perhaps. TODO: expose the system of presets.apis in docs, so we know what is supported
+export const shallowEqualKeys = (a,b, keys) => {
+  return !!find(keys, (key) => {
+    return eq(a[key], b[key])
+  })
+}

src/plugins/topbar/topbar.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 
 //import "./topbar.less"
 import Logo from "./logo_small.png"
@@ -7,7 +8,7 @@ export default class Topbar extends React.Component {
 
   constructor(props, context) {
     super(props, context)
-    this.state = { url: props.specSelectors.url() }
+    this.state = { url: props.specSelectors.url(), selectedIndex: 0 }
   }
 
   componentWillReceiveProps(nextProps) {
@@ -19,14 +20,68 @@ export default class Topbar extends React.Component {
     this.setState({url: value})
   }
 
-  downloadUrl = (e) => {
-    this.props.specActions.updateUrl(this.state.url)
-    this.props.specActions.download(this.state.url)
+  loadSpec = (url) => {
+    this.props.specActions.updateUrl(url)
+    this.props.specActions.download(url)
+  }
+
+  onUrlSelect =(e)=> {
+    let url = e.target.value || e.target.href
+    this.loadSpec(url)
+    this.setSelectedUrl(url)
     e.preventDefault()
   }
 
+  downloadUrl = (e) => {
+    this.loadSpec(this.state.url)
+    e.preventDefault()
+  }
+
+  setSelectedUrl = (selectedUrl) => {
+    const configs = this.props.getConfigs()
+    const urls = configs.urls || []
+
+    if(urls && urls.length) {
+      if(selectedUrl)
+      {
+        urls.forEach((spec, i) => {
+          if(spec.url === selectedUrl)
+            {
+              this.setState({selectedIndex: i})
+            }
+        })
+      }
+    }
+  }
+
+  componentWillMount() {
+    const configs = this.props.getConfigs()
+    const urls = configs.urls || []
+
+    if(urls && urls.length) {
+      let primaryName = configs["urls.primaryName"]
+      if(primaryName)
+      {
+        urls.forEach((spec, i) => {
+          if(spec.name === primaryName)
+            {
+              this.setState({selectedIndex: i})
+            }
+        })
+      }
+    }
+  }
+
+  componentDidMount() {
+    const urls = this.props.getConfigs().urls || []
+
+    if(urls && urls.length) {
+      this.loadSpec(urls[this.state.selectedIndex].url)
+    }
+  }
+
   render() {
-    let { getComponent, specSelectors } = this.props
+    let { getComponent, specSelectors, getConfigs } = this.props
     const Button = getComponent("Button")
     const Link = getComponent("Link")
 
@@ -36,22 +91,45 @@ export default class Topbar extends React.Component {
     let inputStyle = {}
     if(isFailed) inputStyle.color = "red"
     if(isLoading) inputStyle.color = "#aaa"
+
+    const { urls } = getConfigs()
+    let control = []
+    let formOnSubmit = null
+
+    if(urls) {
+      let rows = []
+      urls.forEach((link, i) => {
+        rows.push(<option key={i} value={link.url}>{link.name}</option>)
+      })
+
+      control.push(
+        <label className="select-label" htmlFor="select"><span>Select a spec</span>
+          <select id="select" disabled={isLoading} onChange={ this.onUrlSelect } value={urls[this.state.selectedIndex].url}>
+            {rows}
+          </select>
+        </label>
+      )
+    }
+    else {
+      formOnSubmit = this.downloadUrl
+      control.push(<input className="download-url-input" type="text" onChange={ this.onUrlChange } value={this.state.url} disabled={isLoading} style={inputStyle} />)
+      control.push(<Button className="download-url-button" onClick={ this.downloadUrl }>Explore</Button>)
+    }
+
     return (
-        <div className="topbar">
-          <div className="wrapper">
-            <div className="topbar-wrapper">
-              <Link href="#" title="Swagger UX">
-                <img height="30" width="30" src={ Logo } alt="Swagger UX"/>
-                <span>swagger</span>
-              </Link>
-              <form className="download-url-wrapper" onSubmit={this.downloadUrl}>
-                <input className="download-url-input" type="text" onChange={ this.onUrlChange } value={this.state.url} disabled={isLoading} style={inputStyle} />
-                <Button className="download-url-button" onClick={ this.downloadUrl }>Explore</Button>
-              </form>
-            </div>
+      <div className="topbar">
+        <div className="wrapper">
+          <div className="topbar-wrapper">
+            <Link href="#" title="Swagger UX">
+              <img height="30" width="30" src={ Logo } alt="Swagger UX"/>
+              <span>swagger</span>
+            </Link>
+            <form className="download-url-wrapper" onSubmit={formOnSubmit}>
+              {control}
+            </form>
           </div>
         </div>
-
+      </div>
     )
   }
 }
@@ -59,5 +137,6 @@ export default class Topbar extends React.Component {
 Topbar.propTypes = {
   specSelectors: PropTypes.object.isRequired,
   specActions: PropTypes.object.isRequired,
-  getComponent: PropTypes.func.isRequired
+  getComponent: PropTypes.func.isRequired,
+  getConfigs: PropTypes.func.isRequired
 }

src/plugins/topbar/topbar.less

@@ -1,11 +1,10 @@
 .swagger-ui {
-
   .topbar {
     background-color: #89bf04;
   }
 
   .topbar-wrapper {
-    padding: 0.7em
+    padding: 0.7em;
   }
 
   .topbar-logo__img {

src/polyfills.js

@@ -0,0 +1,2 @@
+// Promise global, Used ( at least ) by 'whatwg-fetch'. And required by IE 11
+require("core-js/fn/promise")

src/standalone/layout.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 
 export default class StandaloneLayout extends React.Component {
 

src/style/_models.scss

@@ -102,14 +102,7 @@ section.models
         h4
         {
             margin: 0 0 5px 0;
-
             border-bottom: 1px solid rgba(#3b4151, .3);
-
-
-            svg
-            {
-                transform: rotate(90deg);
-            }
         }
     }
     h4

src/style/_topbar.scss

@@ -6,7 +6,6 @@
     .topbar-wrapper
     {
         display: flex;
-
         align-items: center;
     }
     a
@@ -15,13 +14,13 @@
         font-weight: bold;
 
         display: flex;
+        align-items: center;
+        flex: 1;
 
         max-width: 300px;
 
         text-decoration: none;
 
-        flex: 1;
-        align-items: center;
         @include text_headline(#fff);
 
         span
@@ -34,8 +33,8 @@
     .download-url-wrapper
     {
         display: flex;
-
         flex: 3;
+        justify-content: flex-end;
 
         input[type=text]
         {
@@ -48,6 +47,38 @@
             outline: none;
         }
 
+        .select-label
+        {
+            display: flex;
+            align-items: center;
+
+            width: 100%;
+            max-width: 600px;
+            margin: 0;
+            span
+            {
+                font-size: 16px;
+
+                flex: 1;
+
+                padding: 0 10px 0 0;
+
+                text-align: right;
+            }
+
+            select
+            {
+                flex: 2;
+
+                width: 100%;
+
+                border: 2px solid #547f00;
+                outline: none;
+                box-shadow: none;
+            }
+        }
+
+
         .download-url-button
         {
             font-size: 16px;