v3.10.0 (#4210)

* v3.10.0

* Fix Execute styling issue

* Rebuild dist

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.3 | 2018-01-26 | 2.0, 3.0 | [tag v3.9.3](https://github.com/swagger-api/swagger-ui/tree/v3.9.3)
+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)

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,

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "swagger-ui",
-  "version": "3.9.3",
+  "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.6",
+    "swagger-client": "^3.4.11",
     "url-parse": "^1.1.8",
     "whatwg-fetch": "0.11.1",
     "worker-loader": "^0.7.1",

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/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/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 {

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/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/_variables.scss

@@ -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} />)