v3.10.0 (#4210)

* v3.10.0

* Fix Execute styling issue

* Rebuild dist

.github/pull_request_template.md

@@ -24,19 +24,32 @@
 
 
 
-### Types of changes
-<!--- What types of changes does your code introduce? Put an `x` in all the boxes that apply: -->
-- [ ] No code changes (changes to documentation, CI, metadata, etc)
-- [ ] Dependency changes (any modification to dependencies in `package.json`)
-- [ ] Bug fix (non-breaking change which fixes an issue)
-- [ ] New feature (non-breaking change which adds functionality)
-- [ ] Breaking change (fix or feature that would cause existing functionality to change)
-
-### Checklist:
+## Checklist
 <!--- Go over all the following points, and put an `x` in all the boxes that apply. -->
 <!--- If you're unsure about any of these, don't hesitate to ask. We're here to help! -->
-- [ ] My code follows the code style of this project.
-- [ ] My change requires a change to the documentation.
-- [ ] I have updated the documentation accordingly.
-- [ ] I have added tests to cover my changes.
+
+### My PR contains... 
+<!--- What types of changes does your code introduce? Put an `x` in all the boxes that apply: -->
+- [ ] No code changes (`src/` is unmodified: changes to documentation, CI, metadata, etc.)
+- [ ] Dependency changes (any modification to dependencies in `package.json`)
+- [ ] Bug fixes (non-breaking change which fixes an issue)
+- [ ] Improvements (misc. changes to existing features)
+- [ ] Features (non-breaking change which adds functionality)
+
+### My changes...
+- [ ] are breaking changes to a public API (config options, System API, major UI change, etc).
+- [ ] are breaking changes to a private API (Redux, component props, utility functions, etc.).
+- [ ] are breaking changes to a developer API (npm script behavior changes, new dev system dependencies, etc).
+- [ ] are not breaking changes.
+
+### Documentation
+- [ ] My changes do not require a change to the project documentation.
+- [ ] My changes require a change to the project documentation.
+- [ ] If yes to above: I have updated the documentation accordingly.
+
+### Automated tests
+- [ ] My changes can not or do not need to be tested.
+- [ ] My changes can and should be tested by unit and/or integration tests.
+- [ ] If yes to above: I have added tests to cover my changes.
+- [ ] If yes to above: I have taken care to cover edge cases in my tests.
 - [ ] All new and existing tests passed.

Dockerfile

@@ -5,6 +5,7 @@ MAINTAINER fehguy
 ENV VERSION "v2.2.10"
 ENV FOLDER "swagger-ui-2.2.10"
 ENV API_URL "http://petstore.swagger.io/v2/swagger.json"
+ENV API_URLS ""
 ENV API_KEY "**None**"
 ENV OAUTH_CLIENT_ID "**None**"
 ENV OAUTH_CLIENT_SECRET "**None**"

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.9.1 | 2018-01-12 | 2.0, 3.0 | [tag v3.9.1](https://github.com/swagger-api/swagger-ui/tree/v3.9.1)
+3.10.0 | 2018-02-09 | 2.0, 3.0 | [tag v3.10.0](https://github.com/swagger-api/swagger-ui/tree/v3.10.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)

docker-run.sh

@@ -53,7 +53,14 @@ if [[ -n "$VALIDATOR_URL" ]]; then
   unset TMP_VU
 fi
 
-# replace the PORT that nginx listens on if supplied
-if [[ -n "${PORT}" ]]; then sed -i "s|8080|${PORT}|g" /etc/nginx/nginx.conf; fi
+# replace `url` with `urls` option if API_URLS is set
+if [[ -n "$API_URLS" ]]; then
+    sed -i "s|url: .*,|urls: $API_URLS,|g" $INDEX_FILE
+fi
+
+# replace the PORT that nginx listens on if PORT is supplied
+if [[ -n "${PORT}" ]]; then 
+    sed -i "s|8080|${PORT}|g" /etc/nginx/nginx.conf
+fi
 
 exec nginx -g 'daemon off;'

docs/customization/custom-layout.md

@@ -20,16 +20,16 @@ class OperationsLayout extends React.Component {
 
     const Operations = getComponent("Operations", true)
 
-    return {
+    return (
       <div>
         <Operations />
       </div>
-    }
+    )
   }
 }
 
 // Create the plugin that provides our layout component
-const OperationsLayoutPlugin = function() {
+const OperationsLayoutPlugin = () => {
   return {
     components: {
       OperationsLayout: OperationsLayout
@@ -62,19 +62,19 @@ class AugmentingLayout extends React.Component {
 
     const BaseLayout = getComponent("BaseLayout", true)
 
-    return {
+    return (
       <div>
         <div className="myCustomHeader">
           <h1>I have a custom header above Swagger-UI!</h1>
         </div>
         <BaseLayout />
       </div>
-    }
+    )
   }
 }
 
 // Create the plugin that provides our layout component
-const AugmentingLayoutPlugin = function() {
+const AugmentingLayoutPlugin = () => {
   return {
     components: {
       AugmentingLayout: AugmentingLayout

docs/customization/plugin-api.md

@@ -4,12 +4,12 @@ A plugin is a function that returns an object - more specifically, the object ma
 
 ### Format
 
-A plugin return value may contain any of these keys, where `myStateKey` is a name for a piece of state:
+A plugin return value may contain any of these keys, where `stateKey` is a name for a piece of state:
 
 ```javascript
 {
   statePlugins: {
-    myStateKey: {
+    [stateKey]: {
       actions,
       reducers,
       selectors,
@@ -334,7 +334,7 @@ const MyWrapComponentPlugin = function(system) {
         if(props.number > 10) {
           return <div>
             <h3>Warning! Big number ahead.</h3>
-            <OriginalComponent {...props} />
+            <Original {...props} />
           </div>
         } else {
           return <Original {...props} />
@@ -353,7 +353,7 @@ const MyWrapComponentPlugin = function(system) {
           if(props.number > 10) {
             return <div>
               <h3>Warning! Big number ahead.</h3>
-              <OriginalComponent {...props} />
+              <Original {...props} />
             </div>
           } else {
             return <Original {...props} />

docs/usage/configuration.md

@@ -68,6 +68,7 @@ Parameter Name | Description
 `requestInterceptor` | `Function=(a => a)`. MUST be a function.  Function to intercept remote definition, Try-It-Out, and OAuth2 requests.  Accepts one argument requestInterceptor(request) and must return the potentially modified request.
 `responseInterceptor` |`Function=(a => a)`. MUST be a function.  Function to intercept remote definition, Try-It-Out, and OAuth2 responses.  Accepts one argument responseInterceptor(response) and must return the potentially modified response.
 `showMutatedRequest` | `Boolean=true`. If set to `true`, uses the mutated request returned from a requestInterceptor to produce the curl command in the UI, otherwise the request before the requestInterceptor was applied is used.
+`supportedSubmitMethods` | `Array=["get", "put", "post", "delete", "options", "head", "patch", "trace"]`. List of HTTP methods that have the Try it out feature enabled. An empty array disables Try it out for all operations. This does not filter the operations from the display.
 `validatorUrl` | `String="https://online.swagger.io/validator" OR null`. By default, Swagger-UI attempts to validate specs against swagger.io's online validator. You can use this parameter to set a different validator URL, for example for locally deployed validators ([Validator Badge](https://github.com/swagger-api/validator-badge)). Setting it to `null` will disable validation.
 
 ##### Macros

docs/usage/installation.md

@@ -27,7 +27,7 @@ The module's contents mirrors the `dist` folder you see in the Git repository. T
 
 ```javascript
 const express = require('express')
-const pathToSwaggerUi = require('swagger-ui').absolutePath()
+const pathToSwaggerUi = require('swagger-ui-dist').absolutePath()
 
 const app = express()
 
@@ -83,7 +83,7 @@ This will serve Swagger UI at `/swagger` instead of `/`.
 
 ### unpkg
 
-You can embed Swagger-UI's code directly in your HTML by using unkpg's interface:
+You can embed Swagger-UI's code directly in your HTML by using unpkg's interface:
 
 ```html
 <script src="//unpkg.com/swagger-ui-dist@3/swagger-ui-bundle.js"></script>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "swagger-ui",
-  "version": "3.9.1",
+  "version": "3.10.0",
   "main": "dist/swagger-ui.js",
   "repository": "git@github.com:swagger-api/swagger-ui.git",
   "contributors": [
@@ -82,7 +82,7 @@
     "scroll-to-element": "^2.0.0",
     "serialize-error": "2.0.0",
     "shallowequal": "0.2.2",
-    "swagger-client": "^3.4.5",
+    "swagger-client": "^3.4.11",
     "url-parse": "^1.1.8",
     "whatwg-fetch": "0.11.1",
     "worker-loader": "^0.7.1",

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

@@ -20,7 +20,9 @@ export default class AuthorizeOperationBtn extends React.Component {
     let { isAuthorized } = this.props
 
     return (
-      <button className={isAuthorized ? "authorization__btn locked" : "authorization__btn unlocked"} onClick={ this.onClick }>
+      <button className={isAuthorized ? "authorization__btn locked" : "authorization__btn unlocked"}
+        aria-label={isAuthorized ? "authorization button locked" : "authorization button unlocked"}
+        onClick={this.onClick}>
         <svg width="20" height="20">
           <use href={ isAuthorized ? "#locked" : "#unlocked" } xlinkHref={ isAuthorized ? "#locked" : "#unlocked" } />
         </svg>

src/core/components/live-response.jsx

@@ -53,7 +53,7 @@ export default class LiveResponse extends React.Component {
 
     const curlRequest = showMutatedRequest ? specSelectors.mutatedRequestFor(path, method) : specSelectors.requestFor(path, method)
     const status = response.get("status")
-    const url = response.get("url")
+    const url = curlRequest.get("url")
     const headers = response.get("headers").toJS()
     const notDocumented = response.get("notDocumented")
     const isError = response.get("error")

src/core/components/operation.jsx

@@ -248,7 +248,7 @@ export default class Operation extends PureComponent {
                     oas3Actions={oas3Actions}
                     specActions={ specActions }
                     produces={ produces }
-                    producesValue={ operation.get("produces_value") }
+                    producesValue={ specSelectors.currentProducesFor([path, method]) }
                     specPath={specPath.push("responses")}
                     path={ path }
                     method={ method }

src/core/components/operations.jsx

@@ -86,7 +86,7 @@ export default class Operations extends React.Component {
                         isShown={showTag}
                         path={tag}
                         text={tag} />
-                    { !tagDescription ? null :
+                    { !tagDescription ? <small></small> :
                         <small>
                           <Markdown source={tagDescription} />
                         </small>
@@ -108,7 +108,7 @@ export default class Operations extends React.Component {
                     }
                     </div>
 
-                    <button className="expand-operation" title="Expand operation" onClick={() => layoutActions.show(isShownKey, !showTag)}>
+                    <button className="expand-operation" title={showTag ? "Collapse operation": "Expand operation"} onClick={() => layoutActions.show(isShownKey, !showTag)}>
                       <svg className="arrow" width="20" height="20">
                         <use href={showTag ? "#large-arrow-down" : "#large-arrow"} xlinkHref={showTag ? "#large-arrow-down" : "#large-arrow"} />
                       </svg>

src/core/components/parameter-row.jsx

@@ -156,19 +156,19 @@ export default class ParameterRow extends Component {
 
           { (bodyParam || !isExecute) && isDisplayParamItemsEnum ?
             <Markdown source={
-                "<i>Available values</i> : " + paramItemsEnum.map(function(item) {
+                "<i>Available values</i>: " + paramItemsEnum.map(function(item) {
                     return item
-                  }).toArray()}/> 
+                  }).toArray().join(", ")}/>
             : null
           }
 
           { (bodyParam || !isExecute) && paramDefaultValue !== undefined ?
-            <Markdown source={"<i>Default value</i> : " + paramDefaultValue}/>
+            <Markdown source={"<i>Default value</i>: " + paramDefaultValue}/>
             : null
           }
 
           { (bodyParam || !isExecute) && paramExample !== undefined ?
-            <Markdown source={"<i>Example</i> : " + paramExample}/>
+            <Markdown source={"<i>Example</i>: " + paramExample}/>
             : null
           }
 
@@ -181,6 +181,7 @@ export default class ParameterRow extends Component {
                               required={ required }
                               description={param.get("description") ? `${param.get("name")} - ${param.get("description")}` : `${param.get("name")}`}
                               onChange={ this.onChangeWrapper }
+                              errors={ param.get("errors") }
                               schema={ isOAS3 && isOAS3() ? param.get("schema") : param }/>
           }
 

src/core/components/primitive-model.jsx

@@ -2,7 +2,7 @@ import React, { Component } from "react"
 import PropTypes from "prop-types"
 import { getExtensions } from "core/utils"
 
-const propStyle = { color: "#999", fontStyle: "italic" }
+const propStyle = { color: "#6b6b6b", fontStyle: "italic" }
 
 export default class Primitive extends Component {
   static propTypes = {

src/core/components/providers/markdown.jsx

@@ -29,10 +29,12 @@ Markdown.propTypes = {
 export default Markdown
 
 const sanitizeOptions = {
-    allowedTags: sanitize.defaults.allowedTags.concat([ "h1", "h2", "img" ]),
+    allowedTags: sanitize.defaults.allowedTags.concat([ "h1", "h2", "img", "span" ]),
     allowedAttributes: {
         ...sanitize.defaults.allowedAttributes,
-        "img": sanitize.defaults.allowedAttributes.img.concat(["title"])
+        "img": sanitize.defaults.allowedAttributes.img.concat(["title"]),
+        "td": [ "colspan" ],
+        "*": [ "class" ]
     },
     textFilter: function(text) {
         return text.replace(/"/g, "\"")

src/core/components/response-body.jsx

@@ -20,8 +20,41 @@ export default class ResponseBody extends React.Component {
     let body, bodyEl
     url = url || ""
 
-    // JSON
-    if (/json/i.test(contentType)) {
+    if (
+      /^application\/octet-stream/i.test(contentType) ||
+      (headers["Content-Disposition"] && (/attachment/i).test(headers["Content-Disposition"])) ||
+      (headers["content-disposition"] && (/attachment/i).test(headers["content-disposition"])) ||
+      (headers["Content-Description"] && (/File Transfer/i).test(headers["Content-Description"])) ||
+      (headers["content-description"] && (/File Transfer/i).test(headers["content-description"]))) {
+      // Download
+
+      const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
+
+      if (!isSafari && "Blob" in window) {
+        let type = contentType || "text/html"
+        let blob = (content instanceof Blob) ? content : new Blob([content], {type: type})
+        let href = window.URL.createObjectURL(blob)
+        let fileName = url.substr(url.lastIndexOf("/") + 1)
+        let download = [type, fileName, href].join(":")
+
+        // Use filename from response header,
+        // First check if filename is quoted (e.g. contains space), if no, fallback to not quoted check
+        let disposition = headers["content-disposition"] || headers["Content-Disposition"]
+        if (typeof disposition !== "undefined") {
+          let responseFilename = extractFileNameFromContentDispositionHeader(disposition)
+          if (responseFilename !== null) {
+            download = responseFilename
+          }
+        }
+
+        bodyEl = <div><a href={ href } download={ download }>{ "Download file" }</a></div>
+      } else {
+        bodyEl = <pre>Download headers detected but your browser does not support downloading binary via XHR (Blob).</pre>
+      }
+
+      // Anything else (CORS)
+    } else if (/json/i.test(contentType)) {
+      // JSON
       try {
         body = JSON.stringify(JSON.parse(content), null, "  ")
       } catch (error) {
@@ -53,40 +86,6 @@ export default class ResponseBody extends React.Component {
       // Audio
     } else if (/^audio\//i.test(contentType)) {
       bodyEl = <pre><audio controls><source src={ url } type={ contentType } /></audio></pre>
-
-      // Download
-    } else if (
-      /^application\/octet-stream/i.test(contentType) ||
-      (headers["Content-Disposition"] && (/attachment/i).test(headers["Content-Disposition"])) ||
-      (headers["content-disposition"] && (/attachment/i).test(headers["content-disposition"])) ||
-      (headers["Content-Description"] && (/File Transfer/i).test(headers["Content-Description"])) ||
-      (headers["content-description"] && (/File Transfer/i).test(headers["content-description"]))) {
-
-      const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
-
-      if (!isSafari && "Blob" in window) {
-        let type = contentType || "text/html"
-        let blob = (content instanceof Blob) ? content : new Blob([content], {type: type})
-        let href = window.URL.createObjectURL(blob)
-        let fileName = url.substr(url.lastIndexOf("/") + 1)
-        let download = [type, fileName, href].join(":")
-
-        // Use filename from response header, 
-        // First check if filename is quoted (e.g. contains space), if no, fallback to not quoted check
-        let disposition = headers["content-disposition"] || headers["Content-Disposition"]
-        if (typeof disposition !== "undefined") {
-          let responseFilename = extractFileNameFromContentDispositionHeader(disposition)
-          if (responseFilename !== null) {
-            download = responseFilename
-          }
-        }
-
-        bodyEl = <div><a href={ href } download={ download }>{ "Download file" }</a></div>
-      } else {
-        bodyEl = <pre>Download headers detected but your browser does not support downloading binary via XHR (Blob).</pre>
-      }
-
-      // Anything else (CORS)
     } else if (typeof content === "string") {
       bodyEl = <HighlightCode value={ content } />
     } else if ( content.size > 0 ) {

src/core/containers/OperationContainer.jsx

@@ -56,13 +56,13 @@ export default class OperationContainer extends PureComponent {
 
   mapStateToProps(nextState, props) {
     const { op, layoutSelectors, getConfigs } = props
-    const { docExpansion, deepLinking, displayOperationId, displayRequestDuration } = getConfigs()
+    const { docExpansion, deepLinking, displayOperationId, displayRequestDuration, supportedSubmitMethods } = 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 allowTryItOut = supportedSubmitMethods.indexOf(props.method) >= 0 && (typeof props.allowTryItOut === "undefined" ?
+      props.specSelectors.allowTryItOutFor(props.path, props.method) : props.allowTryItOut)
     const security = op.getIn(["operation", "security"]) || props.specSelectors.security()
 
     return {
@@ -82,27 +82,9 @@ export default class OperationContainer extends PureComponent {
   }
 
   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 =() => {

src/core/index.js

@@ -49,6 +49,16 @@ module.exports = function SwaggerUI(opts) {
     defaultModelExpandDepth: 1,
     defaultModelsExpandDepth: 1,
     showExtensions: false,
+    supportedSubmitMethods: [
+      "get",
+      "put",
+      "post",
+      "delete",
+      "options",
+      "head",
+      "patch",
+      "trace"
+    ],
 
     // 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

@@ -1,6 +1,7 @@
 import React, { PureComponent, Component } from "react"
 import PropTypes from "prop-types"
 import { List, fromJS } from "immutable"
+import ImPropTypes from "react-immutable-proptypes"
 //import "less/json-schema-form"
 
 const noop = ()=> {}
@@ -11,6 +12,7 @@ const JsonSchemaPropShape = {
   keyName: PropTypes.any,
   fn: PropTypes.object.isRequired,
   schema: PropTypes.object,
+  errors: ImPropTypes.list,
   required: PropTypes.bool,
   description: PropTypes.any
 }
@@ -20,7 +22,8 @@ const JsonSchemaDefaultProps = {
   onChange: noop,
   schema: {},
   keyName: "",
-  required: false
+  required: false,
+  errors: List()
 }
 
 export class JsonSchemaForm extends Component {
@@ -29,7 +32,7 @@ export class JsonSchemaForm extends Component {
   static defaultProps = JsonSchemaDefaultProps
 
   render() {
-    let { schema, value, onChange, getComponent, fn } = this.props
+    let { schema, errors, value, onChange, getComponent, fn } = this.props
 
     if(schema.toJS)
       schema = schema.toJS()
@@ -37,7 +40,7 @@ export class JsonSchemaForm extends Component {
     let { type, format="" } = schema
 
     let Comp = (format ? getComponent(`JsonSchema_${type}_${format}`) : getComponent(`JsonSchema_${type}`)) || getComponent("JsonSchema_string")
-    return <Comp { ...this.props } fn={fn} getComponent={getComponent} value={value} onChange={onChange} schema={schema}/>
+    return <Comp { ...this.props } errors={errors} fn={fn} getComponent={getComponent} value={value} onChange={onChange} schema={schema}/>
   }
 
 }
@@ -51,14 +54,15 @@ export class JsonSchema_string extends Component {
   }
   onEnumChange = (val) => this.props.onChange(val)
   render() {
-    let { getComponent, value, schema, required, description } = this.props
+    let { getComponent, value, schema, errors, required, description } = this.props
     let enumValue = schema["enum"]
-    let errors = schema.errors || []
+
+    errors = errors.toJS ? errors.toJS() : []
 
     if ( enumValue ) {
       const Select = getComponent("Select")
       return (<Select className={ errors.length ? "invalid" : ""}
-                      title={ errors.length ? errors  : ""}
+                      title={ errors.length ? errors : ""}
                       allowedValues={ enumValue }
                       value={ value }
                       allowEmptyValue={ !required }
@@ -70,14 +74,14 @@ export class JsonSchema_string extends Component {
     if (schema["type"] === "file") {
       return (<Input type="file"
                      className={ errors.length ? "invalid" : ""}
-                     title={ errors.length ? errors  : ""}
+                     title={ errors.length ? errors : ""}
                      onChange={ this.onChange }
                      disabled={isDisabled}/>)
     }
     else {
       return (<Input type={ schema.format === "password" ? "password" : "text" }
                      className={ errors.length ? "invalid" : ""}
-                     title={ errors.length ? errors  : ""}
+                     title={ errors.length ? errors : ""}
                      value={value}
                      placeholder={description}
                      onChange={ this.onChange }
@@ -131,9 +135,10 @@ export class JsonSchema_array extends PureComponent {
   }
 
   render() {
-    let { getComponent, required, schema, fn } = this.props
+    let { getComponent, required, schema, errors, fn } = this.props
+
+    errors = errors.toJS ? errors.toJS() : []
 
-    let errors = schema.errors || []
     let itemSchema = fn.inferSchema(schema.items)
 
     const JsonSchemaForm = getComponent("JsonSchemaForm")
@@ -145,7 +150,7 @@ export class JsonSchema_array extends PureComponent {
     if ( enumValue ) {
       const Select = getComponent("Select")
       return (<Select className={ errors.length ? "invalid" : ""}
-                      title={ errors.length ? errors  : ""}
+                      title={ errors.length ? errors : ""}
                       multiple={ true }
                       value={ value }
                       allowedValues={ enumValue }
@@ -160,7 +165,7 @@ export class JsonSchema_array extends PureComponent {
             let schema = Object.assign({}, itemSchema)
             if ( errors.length ) {
               let err = errors.filter((err) => err.index === i)
-              if (err.length) schema.errors = [ err[0].error + i ]
+              if (err.length) errors = [ err[0].error + i ]
             }
           return (
             <div key={i} className="json-schema-form-item">
@@ -182,12 +187,13 @@ export class JsonSchema_boolean extends Component {
 
   onEnumChange = (val) => this.props.onChange(val)
   render() {
-    let { getComponent, value, schema } = this.props
-    let errors = schema.errors || []
+    let { getComponent, value, errors, schema } = this.props
+    errors = errors.toJS ? errors.toJS() : []
+
     const Select = getComponent("Select")
 
     return (<Select className={ errors.length ? "invalid" : ""}
-                    title={ errors.length ? errors  : ""}
+                    title={ errors.length ? errors : ""}
                     value={ String(value) }
                     allowedValues={ fromJS(schema.enum || ["true", "false"]) }
                     allowEmptyValue={ !this.props.required }

src/core/plugins/auth/reducers.js

@@ -44,7 +44,7 @@ export default {
     let { auth, token } = payload
     let parsedAuth
 
-    auth.token = token
+    auth.token = Object.assign({}, token)
     parsedAuth = fromJS(auth)
 
     return state.setIn( [ "authorized", parsedAuth.get("name") ], parsedAuth )

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

@@ -35,7 +35,11 @@ export default class Servers extends React.Component {
     if(this.props.currentServer !== nextProps.currentServer) {
       // Server has changed, we may need to set default values
       let currentServerDefinition = servers
-        .find(v => v.get("url") === nextProps.currentServer) || OrderedMap()
+        .find(v => v.get("url") === nextProps.currentServer)
+
+      if(!currentServerDefinition) {
+        return this.setServer(servers.first().get("url"))
+      }
 
       let currentServerVariableDefs = currentServerDefinition.get("variables") || OrderedMap()
 
@@ -90,6 +94,7 @@ export default class Servers extends React.Component {
       getEffectiveServerValue
     } = this.props
 
+
     let currentServerDefinition = servers.find(v => v.get("url") === currentServer) || OrderedMap()
 
     let currentServerVariableDefs = currentServerDefinition.get("variables") || OrderedMap()

src/core/plugins/spec/actions.js

@@ -19,7 +19,7 @@ export const LOG_REQUEST = "spec_log_request"
 export const CLEAR_RESPONSE = "spec_clear_response"
 export const CLEAR_REQUEST = "spec_clear_request"
 export const CLEAR_VALIDATE_PARAMS = "spec_clear_validate_param"
-export const UPDATE_OPERATION_VALUE = "spec_update_operation_value"
+export const UPDATE_OPERATION_META_VALUE = "spec_update_operation_meta_value"
 export const UPDATE_RESOLVED = "spec_update_resolved"
 export const SET_SCHEME = "set_scheme"
 
@@ -150,14 +150,14 @@ export function clearValidateParams( payload ){
 
 export function changeConsumesValue(path, value) {
   return {
-    type: UPDATE_OPERATION_VALUE,
+    type: UPDATE_OPERATION_META_VALUE,
     payload:{ path, value, key: "consumes_value" }
   }
 }
 
 export function changeProducesValue(path, value) {
   return {
-    type: UPDATE_OPERATION_VALUE,
+    type: UPDATE_OPERATION_META_VALUE,
     payload:{ path, value, key: "produces_value" }
   }
 }

src/core/plugins/spec/reducers.js

@@ -12,7 +12,7 @@ import {
   SET_REQUEST,
   SET_MUTATED_REQUEST,
   UPDATE_RESOLVED,
-  UPDATE_OPERATION_VALUE,
+  UPDATE_OPERATION_META_VALUE,
   CLEAR_RESPONSE,
   CLEAR_REQUEST,
   CLEAR_VALIDATE_PARAMS,
@@ -52,8 +52,8 @@ export default {
   },
 
   [VALIDATE_PARAMS]: ( state, { payload: { pathMethod, isOAS3 } } ) => {
-    let operation = state.getIn( [ "resolved", "paths", ...pathMethod ] )
-    let isXml = /xml/i.test(operation.get("consumes_value"))
+    let meta = state.getIn( [ "meta", "paths", ...pathMethod ], fromJS({}) )
+    let isXml = /xml/i.test(meta.get("consumes_value"))
 
     return state.updateIn( [ "resolved", "paths", ...pathMethod, "parameters" ], fromJS([]), parameters => {
       return parameters.withMutations( parameters => {
@@ -68,7 +68,7 @@ export default {
     return state.updateIn( [ "resolved", "paths", ...pathMethod, "parameters" ], fromJS([]), parameters => {
       return parameters.withMutations( parameters => {
         for ( let i = 0, len = parameters.count(); i < len; i++ ) {
-          parameters.setIn([i, "errors"], fromJS({}))
+          parameters.setIn([i, "errors"], fromJS([]))
         }
       })
     })
@@ -107,12 +107,17 @@ export default {
     return state.setIn( [ "mutatedRequests", path, method ], fromJSOrdered(req))
   },
 
-  [UPDATE_OPERATION_VALUE]: (state, { payload: { path, value, key } }) => {
+  [UPDATE_OPERATION_META_VALUE]: (state, { payload: { path, value, key } }) => {
+    // path is a pathMethod tuple... can't change the name now.
     let operationPath = ["resolved", "paths", ...path]
+    let metaPath = ["meta", "paths", ...path]
+
     if(!state.getIn(operationPath)) {
+      // do nothing if the operation does not exist
       return state
     }
-    return state.setIn([...operationPath, key], fromJS(value))
+
+    return state.setIn([...metaPath, key], fromJS(value))
   },
 
   [CLEAR_RESPONSE]: (state, { payload: { path, method } } ) =>{

src/core/plugins/spec/selectors.js

@@ -306,10 +306,13 @@ export function parametersIncludeType(parameters, typeValue="") {
 export function contentTypeValues(state, pathMethod) {
   pathMethod = pathMethod || []
   let op = spec(state).getIn(["paths", ...pathMethod], fromJS({}))
+  let meta = state.getIn(["meta", "paths", ...pathMethod], fromJS({}))
+  let producesValue = currentProducesFor(state, pathMethod)
+
   const parameters = op.get("parameters") || new List()
 
   const requestContentType = (
-    op.get("consumes_value") ? op.get("consumes_value")
+    meta.get("consumes_value") ? meta.get("consumes_value")
       : parametersIncludeType(parameters, "file") ? "multipart/form-data"
       : parametersIncludeType(parameters, "formData") ? "application/x-www-form-urlencoded"
       : undefined
@@ -317,7 +320,7 @@ export function contentTypeValues(state, pathMethod) {
 
   return fromJS({
     requestContentType,
-    responseContentType: op.get("produces_value")
+    responseContentType: producesValue
   })
 }
 
@@ -327,6 +330,24 @@ export function operationConsumes(state, pathMethod) {
   return spec(state).getIn(["paths", ...pathMethod, "consumes"], fromJS({}))
 }
 
+// Get the currently selected produces value for an operation
+export function currentProducesFor(state, pathMethod) {
+  pathMethod = pathMethod || []
+
+  const operation = spec(state).getIn(["paths", ...pathMethod], null)
+
+  if(operation === null) {
+    // return nothing if the operation does not exist
+    return
+  }
+
+  const currentProducesValue = state.getIn(["meta", "paths", ...pathMethod, "produces_value"], null)
+  const firstProducesArrayItem = operation.getIn(["produces", 0], null)
+
+  return currentProducesValue || firstProducesArrayItem || "application/json"
+
+}
+
 export const operationScheme = ( state, path, method ) => {
   let url = state.get("url")
   let matchResult = url.match(/^([a-z][a-z0-9+\-.]*):/)

src/plugins/add-plugin.md

@@ -6,7 +6,7 @@ Plugins allow you to add
 - `statePlugins`
   - `selectors` - query the state
   - `reducers` - modify the state
-  - `actions` - fire and forget, that will eventually be handled by a reducer. You *can* rely on the result of async actions. But in general its not reccomended
+  - `actions` - fire and forget, that will eventually be handled by a reducer. You *can* rely on the result of async actions. But in general its not recommended
   - `wrapActions` - replace an action with a wrapped action (useful for hooking into existing `actions`)
 - `components` - React components
 - `fn` - commons functions

src/style/_buttons.scss

@@ -64,35 +64,12 @@
 
     &.execute
     {
-        animation: swagger-ui-pulse 2s infinite;
-        will-change: transform;
-        background-color: $btn-execute-background-color;
+        background-color: $btn-execute-background-color-alt;
         color: $btn-execute-font-color;
         border-color: $btn-execute-border-color;
     }
 }
 
-
-@keyframes swagger-ui-pulse
-{
-    0%
-    {
-        color: $btn-execute-font-color;
-        background: $btn-execute-background-color-alt;
-        box-shadow: 0 0 0 0 rgba($btn-execute-background-color-alt, .8);
-    }
-    70%
-    {
-        box-shadow: 0 0 0 5px rgba($btn-execute-background-color-alt, 0);
-    }
-    100%
-    {
-        color: $btn-execute-font-color;
-        background: $btn-execute-background-color-alt;
-        box-shadow: 0 0 0 0 rgba($btn-execute-background-color-alt, 0);
-    }
-}
-
 .btn-group
 {
     display: flex;

src/style/_layout.scss

@@ -4,6 +4,7 @@
     max-width: 1460px;
     margin: 0 auto;
     padding: 0 20px;
+    box-sizing: border-box;
 }
 
 .opblock-tag-section

src/style/_mixins.scss

@@ -171,4 +171,4 @@ $browser-context: 16;
     animation: shake .4s 1;
     border-color: $_color-delete;
     background: lighten($_color-delete, 35%);
-}
+}

src/style/_variables.scss

@@ -175,7 +175,7 @@ $section-models-border-color: $gray-custom-2 !default;
 
 $section-models-isopen-h4-border-bottom-color: $section-models-border-color !default;
 
-$section-models-h4-font-color: $gray-500 !default;
+$section-models-h4-font-color: $gray-600 !default;
 $section-models-h4-background-color-hover: $gray-base !default;
 
 $section-models-h5-font-color: $gray-500 !default;
@@ -188,7 +188,7 @@ $section-models-model-title-font-color: $gray-700 !default;
 
 $prop-type-font-color: #55a !default;
 
-$prop-format-font-color: $gray-300 !default;
+$prop-format-font-color: $gray-600 !default;
 
 // Tables
 

test/components/live-response.js

@@ -22,7 +22,7 @@ describe("<LiveResponse/>", function(){
       accept: "application/xml",
       mutated: "header"
     },
-    url: "http://petstore.swagger.io/v2/pet/1"
+    url: "http://mutated.petstore.swagger.io/v2/pet/1"
   })
 
   let requests = {
@@ -80,6 +80,9 @@ describe("<LiveResponse/>", function(){
       expect(curl.length).toEqual(1)
       expect(curl.props().request).toBe(requests[test.expected.request])
 
+      const expectedUrl = requests[test.expected.request].get("url")
+      expect(wrapper.find("div.request-url pre").text()).toEqual(expectedUrl)
+
     })
   })
 })

test/components/markdown.js

@@ -7,6 +7,18 @@ import { Markdown as OAS3Markdown } from "corePlugins/oas3/wrap-components/markd
 
 describe("Markdown component", function() {
     describe("Swagger 2.0", function() {
+        it("allows span elements with class attrib", function() {
+            const str = `<span class="method">ONE</span>`
+            const el = render(<Markdown source={str} />)
+            expect(el.html()).toEqual(`<div class="markdown"><p><span class="method">ONE</span></p>\n</div>`)
+        })
+
+        it("allows td elements with colspan attrib", function() {
+            const str = `<table><tr><td>ABC</td></tr></table>`
+            const el = render(<Markdown source={str} />)
+            expect(el.html()).toEqual(`<div class="markdown"><table><tr><td>ABC</td></tr></table></div>`)
+        })
+
         it("allows image elements", function() {
             const str = `![Image alt text](http://image.source "Image title")`
             const el = render(<Markdown source={str} />)

test/core/plugins/spec/reducer.js

@@ -5,9 +5,9 @@ import reducer from "corePlugins/spec/reducers"
 
 describe("spec plugin - reducer", function(){
 
-  describe("update operation value", function() {
-    it("should update the operation at the specified key", () => {
-      const updateOperationValue = reducer["spec_update_operation_value"]
+  describe("update operation meta value", function() {
+    it("should update the operation metadata at the specified key", () => {
+      const updateOperationValue = reducer["spec_update_operation_meta_value"]
 
       const state = fromJS({
         resolved: {
@@ -34,7 +34,15 @@ describe("spec plugin - reducer", function(){
           "paths": {
             "/pet": {
               "post": {
-                "description": "my operation",
+                "description": "my operation"
+              }
+            }
+          }
+        },
+        meta: {
+          paths: {
+            "/pet": {
+              post: {
                 "consumes_value": "application/json"
               }
             }
@@ -46,7 +54,7 @@ describe("spec plugin - reducer", function(){
     })
 
     it("shouldn't throw an error if we try to update the consumes_value of a null operation", () => {
-      const updateOperationValue = reducer["spec_update_operation_value"]
+      const updateOperationValue = reducer["spec_update_operation_meta_value"]
 
       const state = fromJS({
         resolved: {

test/core/plugins/spec/selectors.js

@@ -56,6 +56,13 @@ describe("spec plugin - selectors", function(){
       // Given
       let state = fromJS({
         resolved: {
+          paths: {
+            "/one": {
+              get: {}
+            }
+          }
+        },
+        meta: {
           paths: {
             "/one": {
               get: {
@@ -76,6 +83,71 @@ describe("spec plugin - selectors", function(){
       })
     })
 
+    it("should default to the first `produces` array value if current is not set", function(){
+      // Given
+      let state = fromJS({
+        resolved: {
+          paths: {
+            "/one": {
+              get: {
+                produces: [
+                  "application/xml",
+                  "application/whatever"
+                ]
+              }
+            }
+          }
+        },
+        meta: {
+          paths: {
+            "/one": {
+              get: {
+                "consumes_value": "one"
+              }
+            }
+          }
+        }
+      })
+
+      // When
+      let contentTypes = contentTypeValues(state, [ "/one", "get" ])
+      // Then
+      expect(contentTypes.toJS()).toEqual({
+        requestContentType: "one",
+        responseContentType: "application/xml"
+      })
+    })
+
+    it("should default to `application/json` if a default produces value is not available", function(){
+      // Given
+      let state = fromJS({
+        resolved: {
+          paths: {
+            "/one": {
+              get: {}
+            }
+          }
+        },
+        meta: {
+          paths: {
+            "/one": {
+              get: {
+                "consumes_value": "one"
+              }
+            }
+          }
+        }
+      })
+
+      // When
+      let contentTypes = contentTypeValues(state, [ "/one", "get" ])
+      // Then
+      expect(contentTypes.toJS()).toEqual({
+        requestContentType: "one",
+        responseContentType: "application/json"
+      })
+    })
+
     it("should prioritize consumes value first from an operation", function(){
       // Given
       let state = fromJS({
@@ -83,13 +155,21 @@ describe("spec plugin - selectors", function(){
           paths: {
             "/one": {
               get: {
-                "consumes_value": "one",
-                "parameters": [{  
+                "parameters": [{
                   "type": "file"
                 }],
               }
             }
           }
+        },
+        meta: {
+          paths: {
+            "/one": {
+              get: {
+                "consumes_value": "one",
+              }
+            }
+          }
         }
       })
 
@@ -106,7 +186,7 @@ describe("spec plugin - selectors", function(){
           paths: {
             "/one": {
               get: {
-                "parameters": [{  
+                "parameters": [{
                   "type": "file"
                 }],
               }
@@ -128,7 +208,7 @@ describe("spec plugin - selectors", function(){
           paths: {
             "/one": {
               get: {
-                "parameters": [{  
+                "parameters": [{
                   "type": "formData"
                 }],
               }
@@ -143,7 +223,7 @@ describe("spec plugin - selectors", function(){
       expect(contentTypes.toJS().requestContentType).toEqual("application/x-www-form-urlencoded")
     })
 
-    it("should be ok, if no operation found", function(){
+    it("should return nothing, if the operation does not exist", function(){
       // Given
       let state = fromJS({ })