Merge branch 'master' into feature/spec-path

.gitignore

@@ -2,9 +2,11 @@ node_modules
 .idea
 .deps_check
 .DS_Store
+.nyc_output
 npm-debug.log*
 .eslintcache
 package-lock.json
 *.iml
 selenium-debug.log
 test/e2e/db.json
+docs/_book

.npmignore

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

.travis.yml

@@ -1,12 +1,16 @@
 language: node_js
 node_js:
 - '6.9'
+cache:
+  directories:
+    - node_modules
 services:
   - docker
 branches:
   only:
   - master
   - /^v\d+\.\d+(\.\d+)?(-\S*)?$/
+install: "npm i && npm update"
 before_deploy:
   - npm run build
 env:

CONTRIBUTING.md

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

Dockerfile

@@ -13,6 +13,7 @@ ENV OAUTH_APP_NAME "**None**"
 ENV OAUTH_ADDITIONAL_PARAMS "**None**"
 ENV SWAGGER_JSON "/app/swagger.json"
 ENV PORT 80
+ENV BASE_URL ""
 
 RUN apk add --update nginx
 RUN mkdir -p /run/nginx

README.md

@@ -22,7 +22,7 @@ The OpenAPI Specification has undergone 5 revisions since initial creation in 20
 
 Swagger UI Version | Release Date | OpenAPI Spec compatibility | Notes
 ------------------ | ------------ | -------------------------- | -----
-3.4.2 | 2017-10-30 | 2.0, 3.0 | [tag v3.4.2](https://github.com/swagger-api/swagger-ui/tree/v3.4.2)
+3.6.0 | 2017-12-01 | 2.0, 3.0 | [tag v3.5=6.0](https://github.com/swagger-api/swagger-ui/tree/v3.6.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)
@@ -30,35 +30,25 @@ Swagger UI Version | Release Date | OpenAPI Spec compatibility | Notes
 1.0.13 | 2013-03-08 | 1.1, 1.2 | [tag v1.0.13](https://github.com/swagger-api/swagger-ui/tree/v1.0.13)
 1.0.1 | 2011-10-11 | 1.0, 1.1 | [tag v1.0.1](https://github.com/swagger-api/swagger-ui/tree/v1.0.1)
 
+## Documentation
 
-### How to run
+#### Usage
+- [Installation](docs/usage/installation.md)
+- [Configuration](docs/usage/configuration.md)
+- [CORS](docs/usage/cors.md)
+- [OAuth2](docs/usage/oauth2.md)
+- [Deep Linking](docs/usage/deep-linking.md)
+- [Limitations](docs/usage/limitations.md)
+- [Version detection](docs/usage/version-detection.md)
 
-##### Easy start!  Docker
+#### Customization
-You can pull a pre-built docker image of the swagger-ui directly from Dockerhub:
+- [Overview](docs/customization/overview.md)
-
+- [Plugin API](docs/customization/plugin-api.md)
-```
+- [Custom layout](docs/customization/custom-layout.md)
-docker pull swaggerapi/swagger-ui
-docker run -p 80:8080 swaggerapi/swagger-ui
-```
-
-Will start nginx with swagger-ui on port 80.
-
-Or you can provide your own swagger.json on your host
-
-```
-docker run -p 80:8080 -e SWAGGER_JSON=/foo/swagger.json -v /bar:/foo swaggerapi/swagger-ui
-```
-
-##### Prerequisites
-- Node 6.x
-- NPM 3.x
-
-If you just want to see your specs, open `dist/index.html` in your browser directly from your filesystem.
-
-If you'd like to make modifications to the codebase, run the dev server with: `npm run dev`. A development server will open on `3200`.
-
-If you'd like to rebuild the `/dist` folder with your codebase changes, run `npm run build`.
 
+#### Development
+- [Setting up](docs/development/setting-up.md)
+- [Scripts](docs/development/scripts.md)
 
 ##### Integration Tests
 
@@ -67,193 +57,19 @@ http://nightwatchjs.org/gettingstarted#selenium-server-setup
 
 Integration tests can be run locally with `npm run e2e` - be sure you aren't running a dev server when testing!
 
-
+### Browser support
-##### Browser support
 Swagger UI works in the latest versions of Chrome, Safari, Firefox, Edge and IE11.
 
 ### Known Issues
 
 To help with the migration, here are the currently known issues with 3.X. This list will update regularly, and will not include features that were not implemented in previous versions.
 
-- Only part of the [parameters](#parameters) previously supported are available.
+- Only part of the parameters previously supported are available.
 - The JSON Form Editor is not implemented.
 - Support for `collectionFormat` is partial.
 - l10n (translations) is not implemented.
 - Relative path support for external files is not implemented.
 
-### Direct use of JS and CSS assets
-To include the JS, CSS and image assets directly into a webpage, use the [swagger-ui-dist](https://www.npmjs.com/package/swagger-ui-dist) package.
-The root directory of this package contains the contents of the _dist/_ directory of this repo.
-As a node module, `swagger-ui-dist` also exports the `swagger-ui-bundle` and `swagger-ui-standalone-preset` objects.
-
-### SwaggerUIBundle
-To use swagger-ui's bundles, you should take a look at the [source of swagger-ui html page](https://github.com/swagger-api/swagger-ui/blob/master/dist/index.html) and customize it. This basically requires you to instantiate a SwaggerUi object as below:
-
-```javascript
-  const ui = SwaggerUIBundle({
-      url: "http://petstore.swagger.io/v2/swagger.json",
-      dom_id: '#swagger-ui',
-      presets: [
-        SwaggerUIBundle.presets.apis,
-        SwaggerUIStandalonePreset
-      ],
-      plugins: [
-        SwaggerUIBundle.plugins.DownloadUrl
-      ],
-      layout: "StandaloneLayout"
-    })
-```
-
-#### OAuth2 configuration
-You can configure OAuth2 authorization by calling `initOAuth` method with passed configs under the instance of `SwaggerUIBundle`
-default `client_id` and `client_secret`, `realm`, an application name `appName`, `scopeSeparator`, `additionalQueryStringParams`,
-`useBasicAuthenticationWithAccessCodeGrant`.
-
-Config Name | Description
---- | ---
-client_id | Default clientId. MUST be a string
-client_secret | Default clientSecret. MUST be a string
-realm | realm query parameter (for oauth1) added to `authorizationUrl` and `tokenUrl` . MUST be a string
-appName | application name, displayed in authorization popup. MUST be a string
-scopeSeparator | scope separator for passing scopes, encoded before calling, default value is a space (encoded value `%20`). MUST be a string
-additionalQueryStringParams | Additional query parameters added to `authorizationUrl` and `tokenUrl`. MUST be an object
-useBasicAuthenticationWithAccessCodeGrant | Only activated for the `accessCode` flow.  During the `authorization_code` request to the `tokenUrl`, pass the [Client Password](https://tools.ietf.org/html/rfc6749#section-2.3.1) using the HTTP Basic Authentication scheme (`Authorization` header with `Basic base64encoded[client_id:client_secret]`).  The default is `false`
-
-```javascript
-const ui = SwaggerUIBundle({...})
-
-// Method can be called in any place after calling constructor SwaggerUIBundle
-ui.initOAuth({
-    clientId: "your-client-id",
-    clientSecret: "your-client-secret-if-required",
-    realm: "your-realms",
-    appName: "your-app-name",
-    scopeSeparator: " ",
-    additionalQueryStringParams: {test: "hello"}
-  })
-```
-
-If you'd like to use the bundle files via npm, check out the [`swagger-ui-dist` package](https://www.npmjs.com/package/swagger-ui-dist).
-
-#### Parameters
-
-Parameters with dots in their names are single strings used to organize subordinate parameters, and are not indicative of a nested structure.
-
-Parameter Name | Description
---- | ---
-url | The url pointing to API definition (normally `swagger.json` or `swagger.yaml`). Will be ignored if `urls` or `spec` is used.
-urls | An array of API definition objects (`{url: "<url>", name: "<name>"}`) used by Topbar plugin. When used and Topbar plugin is enabled, the `url` parameter will not be parsed. Names and URLs must be unique among all items in this array, since they're used as identifiers.
-urls.primaryName | When using `urls`, you can use this subparameter. If the value matches the name of a spec provided in `urls`, that spec will be displayed when Swagger-UI loads, instead of defaulting to the first spec in `urls`.
-spec | A JSON object describing the OpenAPI Specification. When used, the `url` parameter will not be parsed. This is useful for testing manually-generated specifications without hosting them.
-validatorUrl | 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.
-dom_id | The id of a dom element inside which SwaggerUi will put the user interface for swagger.
-domNode | The HTML DOM element inside which SwaggerUi will put the user interface for swagger. Overrides `dom_id`.
-oauth2RedirectUrl | OAuth redirect URL
-tagsSorter | Apply a sort to the tag list of each API. It can be 'alpha' (sort by paths alphanumerically) or a function (see [Array.prototype.sort()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) to learn how to write a sort function). Two tag name strings are passed to the sorter for each pass. Default is the order determined by Swagger-UI.
-operationsSorter | Apply a sort to the operation list of each API. It can be 'alpha' (sort by paths alphanumerically), 'method' (sort by HTTP method) or a function (see Array.prototype.sort() to know how sort function works). Default is the order returned by the server unchanged.
-defaultModelRendering | Controls how models are shown when the API is first rendered. (The user can always switch the rendering for a given model by clicking the 'Model' and 'Example Value' links.) It can be set to 'model' or 'example', and the default is 'example'.
-defaultModelExpandDepth | The default expansion depth for models.  The default value is 1.
-configUrl | Configs URL
-parameterMacro | MUST be a function. Function to set default value to parameters. Accepts two arguments parameterMacro(operation, parameter). Operation and parameter are objects passed for context, both remain immutable
-modelPropertyMacro | MUST be a function. Function to set default values to each property in model. Accepts one argument modelPropertyMacro(property), property is immutable
-docExpansion | Controls the default expansion setting for the operations and tags. It can be 'list' (expands only the tags), 'full' (expands the tags and operations) or 'none' (expands nothing). The default is 'list'.
-displayOperationId | Controls the display of operationId in operations list. The default is `false`.
-displayRequestDuration | Controls the display of the request duration (in milliseconds) for `Try it out` requests. The default is `false`.
-maxDisplayedTags | If set, limits the number of tagged operations displayed to at most this many. The default is to show all operations.
-filter | If set, enables filtering. The top bar will show an edit box that you can use to filter the tagged operations that are shown. Can be true/false to enable or disable, or an explicit filter string in which case filtering will be enabled using that string as the filter expression. Filtering is case sensitive matching the filter expression anywhere inside the tag.
-deepLinking | If set to `true`, enables dynamic deep linking for tags and operations. [Docs](https://github.com/swagger-api/swagger-ui/blob/master/docs/deep-linking.md)
-requestInterceptor | MUST be a function.  Function to intercept try-it-out requests.  Accepts one argument requestInterceptor(request) and must return the potentially modified request.
-responseInterceptor | MUST be a function.  Function to intercept try-it-out responses.  Accepts one argument responseInterceptor(response) and must return the potentially modified response.
-showMutatedRequest | If set to `true` (the default), uses the mutated request returned from a rquestInterceptor to produce the curl command in the UI, otherwise the request before the requestInterceptor was applied is used.
-
-### Plugins
-
-#### Topbar plugin
-Topbar plugin enables top bar with input for spec path and explore button or a dropdown if `urls` is used. By default the plugin is enabled, and to disable it you need to remove Topbar plugin from presets in `src/standalone/index.js`:
-
-```javascript
-let preset = [
-  // TopbarPlugin,
-  ConfigsPlugin,
-  () => {
-    return {
-      components: { StandaloneLayout }
-    }
-  }
-]
-```
-
-#### Configs plugin
-Configs plugin allows to fetch external configs instead of passing them to `SwaggerUIBundle`. Fetched configs support two formats: JSON or yaml. The plugin is enabled by default.
-There are three options of passing config:
-- add a query parameter `config` with URL to a server where the configs are hosted. For ex. http://petstore.swagger.io/?config=http://localhost:3001/config.yaml
-- add a config `configUrl` with URL to SwaggerUIBundle
-- change default configs in `swagger-config.yaml` *Note: after changing, the project must be re-built*
-
-These options can be used altogether, the order of inheritance is following (from the lowest priority to the highest):
-`swagger-config.yaml` -> config passed to `SwaggerUIBundle` -> config fetched from `configUrl` passed to `SwaggerUIBundle` -> config fetched from URL passed as a query parameter `config`
-
-## CORS Support
-
-CORS is a technique to prevent websites from doing bad things with your personal data.  Most browsers + JavaScript toolkits not only support CORS but enforce it, which has implications for your API server which supports Swagger.
-
-You can read about CORS here: http://www.w3.org/TR/cors.
-
-There are two cases where no action is needed for CORS support:
-
-1. swagger-ui is hosted on the same server as the application itself (same host *and* port).
-2. The application is located behind a proxy that enables the required CORS headers. This may already be covered within your organization.
-
-Otherwise, CORS support needs to be enabled for:
-
-1. Your Swagger docs. For Swagger 2.0 it's the `swagger.json`/`swagger.yaml` and any externally `$ref`ed docs.
-2. For the `Try it now` button to work, CORS needs to be enabled on your API endpoints as well.
-
-### Testing CORS Support
-
-You can verify CORS support with one of three techniques:
-
-- Curl your API and inspect the headers.  For instance:
-
-```bash
-$ curl -I "http://petstore.swagger.io/v2/swagger.json"
-HTTP/1.1 200 OK
-Date: Sat, 31 Jan 2015 23:05:44 GMT
-Access-Control-Allow-Origin: *
-Access-Control-Allow-Methods: GET, POST, DELETE, PUT, PATCH, OPTIONS
-Access-Control-Allow-Headers: Content-Type, api_key, Authorization
-Content-Type: application/json
-Content-Length: 0
-```
-
-This tells us that the petstore resource listing supports OPTIONS, and the following headers:  `Content-Type`, `api_key`, `Authorization`.
-
-- Try swagger-ui from your file system and look at the debug console.  If CORS is not enabled, you'll see something like this:
-
-```
-XMLHttpRequest cannot load http://sad.server.com/v2/api-docs. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
-```
-
-Swagger-UI cannot easily show this error state.
-
-- Using the http://www.test-cors.org website. Keep in mind this will show a successful result even if `Access-Control-Allow-Headers` is not available, which is still required for Swagger-UI to function properly.
-
-### Enabling CORS
-
-The method of enabling CORS depends on the server and/or framework you use to host your application. http://enable-cors.org provides information on how to enable CORS in some common web servers.
-
-Other servers/frameworks may provide you information on how to enable it specifically in their use case.
-
-### CORS and Header Parameters
-
-Swagger lets you easily send headers as parameters to requests.  The name of these headers *MUST* be supported in your CORS configuration as well.  From our example above:
-
-```
-Access-Control-Allow-Headers: Content-Type, api_key, Authorization
-```
-
-Only headers with these names will be allowed to be sent by Swagger-UI.
-
 ## Security contact
 
 Please disclose any security-related issues or vulnerabilities by emailing [security@swagger.io](mailto:security@swagger.io), instead of using the public issue tracker.

docker-run.sh

@@ -21,6 +21,16 @@ replace_or_delete_in_index () {
   fi
 }
 
+if [ "${BASE_URL}" ]; then
+  NGINX_WITH_BASE_URL="${NGINX_ROOT}${BASE_URL}"
+
+  mkdir -p ${NGINX_WITH_BASE_URL}
+  mv ${NGINX_ROOT}/*.* ${NGINX_WITH_BASE_URL}/
+
+  INDEX_FILE=$NGINX_WITH_BASE_URL/index.html
+  NGINX_ROOT=$NGINX_WITH_BASE_URL
+fi
+
 replace_in_index myApiKeyXXXX123456789 $API_KEY
 replace_or_delete_in_index your-client-id $OAUTH_CLIENT_ID
 replace_or_delete_in_index your-client-secret-if-required $OAUTH_CLIENT_SECRET

docs/README.md

@@ -0,0 +1,5 @@
+# Swagger-UI
+
+Welcome to the Swagger-UI documentation!
+
+A table of contents can be found at `SUMMARY.md`.

docs/SUMMARY.md

@@ -0,0 +1,17 @@
+#### Usage
+- [Installation](docs/usage/installation.md)
+- [Configuration](docs/usage/configuration.md)
+- [CORS](docs/usage/cors.md)
+- [OAuth2](docs/usage/oauth2.md)
+- [Deep Linking](docs/usage/deep-linking.md)
+- [Limitations](docs/usage/limitations.md)
+- [Version detection](docs/usage/version-detection.md)
+
+#### Customization
+- [Overview](docs/customization/overview.md)
+- [Plugin API](docs/customization/plugin-api.md)
+- [Custom layout](docs/customization/custom-layout.md)
+
+#### Development
+- [Setting up](docs/development/setting-up.md)
+- [Scripts](docs/development/scripts.md)

docs/book.json

@@ -0,0 +1,3 @@
+{
+  "title": "Swagger-UI"
+}

docs/customization/custom-layout.md

@@ -0,0 +1,92 @@
+# Creating a custom layout
+
+**Layouts** are a special type of component that Swagger-UI uses as the root component for the entire application. You can define custom layouts in order to have high-level control over what ends up on the page.
+
+By default, Swagger-UI uses `BaseLayout`, which is built into the application. You can specify a different layout to be used by passing the layout's name as the `layout` parameter to Swagger-UI. Be sure to provide your custom layout as a component to Swagger-UI.
+
+<br>
+
+For example, if you wanted to create a custom layout that only displayed operations, you could define an `OperationsLayout`:
+
+```js
+import React from "react"
+
+// Create the layout component
+class OperationsLayout extends React.Component {
+  render() {
+    const {
+      getComponent
+    } = this.props
+
+    const Operations = getComponent("Operations", true)
+
+    return {
+      <div>
+        <Operations />
+      </div>
+    }
+  }
+}
+
+// Create the plugin that provides our layout component
+const OperationsLayoutPlugin = function() {
+  return {
+    components: {
+      OperationsLayout: OperationsLayout
+    }
+  }
+}
+
+// Provide the plugin to Swagger-UI, and select OperationsLayout
+// as the layout for Swagger-UI
+SwaggerUI({
+  url: "http://petstore.swagger.io/v2/swagger.json",
+  plugins: [ OperationsLayoutPlugin ],
+  layout: "OperationsLayout"
+})
+```
+
+### Augmenting the default layout
+
+If you'd like to build around the `BaseLayout` instead of replacing it, you can pull the `BaseLayout` into your custom layout and use it:
+
+```js
+import React from "react"
+
+// Create the layout component
+class AugmentingLayout extends React.Component {
+  render() {
+    const {
+      getComponent
+    } = this.props
+
+    const BaseLayout = getComponent("BaseLayout", true)
+
+    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() {
+  return {
+    components: {
+      AugmentingLayout: AugmentingLayout
+    }
+  }
+}
+
+// Provide the plugin to Swagger-UI, and select AugmentingLayout
+// as the layout for Swagger-UI
+SwaggerUI({
+  url: "http://petstore.swagger.io/v2/swagger.json",
+  plugins: [ AugmentingLayoutPlugin ],
+  layout: "AugmentingLayout"
+})
+```

docs/customization/overview.md

@@ -0,0 +1,71 @@
+# Plugin system overview
+
+### Prior art
+
+Swagger-UI leans heavily on concepts and patterns found in React and Redux.
+
+If you aren't already familiar, here's some suggested reading:
+
+- [React: Quick Start (reactjs.org)](https://reactjs.org/docs/hello-world.html)
+- [Redux README (redux.js.org)](http://redux.js.org/)
+
+In the following documentation, we won't take the time to define the fundamentals covered in the resources above.
+
+> **Note**: Some of the examples in this section contain JSX, which is a syntax extension to JavaScript that is useful for writing React components.
+>
+> If you don't want to set up a build pipeline capable of translating JSX to JavaScript, take a look at [React without JSX (reactjs.org)](https://reactjs.org/docs/react-without-jsx.html). You can use our `system.React` reference to leverage React without needing to pull a copy into your project.
+
+### The System
+
+The _system_ is the heart of the Swagger-UI application. At runtime, it's a JavaScript object that holds many things:
+
+- React components
+- Bound Redux actions and reducers
+- Bound Reselect state selectors
+- System-wide collection of available components
+- Built-in helpers like `getComponent`, `makeMappedContainer`, and `getStore`
+- References to the React and Immutable.js libraries (`system.React`, `system.Im`)
+- User-defined helper functions
+
+The system is built up when Swagger-UI is called by iterating through ("compiling") each plugin that Swagger-UI has been given, through the `presets` and `plugins` configuration options.
+
+### Presets
+
+Presets are arrays of plugins, which are provided to Swagger-UI through the `presets` configuration option. All plugins within presets are compiled before any plugins provided via the `plugins` configuration option. Consider the following example:
+
+```javascript
+const MyPreset = [FirstPlugin, SecondPlugin, ThirdPlugin]
+
+SwaggerUI({
+  presets: [
+    MyPreset
+  ]
+})
+```
+
+By default, Swagger-UI includes the internal `ApisPreset`, which contains a set of plugins that provide baseline functionality for Swagger-UI. If you specify your own `presets` option, you need to add the ApisPreset manually, like so:
+
+```javascript
+SwaggerUI({
+  presets: [
+    SwaggerUI.presets.apis,
+    MyAmazingCustomPreset
+  ]
+})
+```
+
+The need to provide the `apis` preset when adding other presets is an artifact of Swagger-UI's original design, and will likely be removed in the next major version.
+
+### getComponent
+
+`getComponent` is a helper function injected into every container component, which is used to get references to components provided by the plugin system.
+
+All components should be loaded through `getComponent`, since it allows other plugins to modify the component. It is preferred over a conventional `import` statement.
+
+Container components in Swagger-UI can be loaded by passing `true` as the second argument to `getComponent`, like so:
+
+```javascript
+getComponent("ContainerComponentName", true)
+```
+
+This will map the current system as props to the component.

docs/customization/plugin-api.md

@@ -0,0 +1,355 @@
+# Plugins
+
+A plugin is a function that returns an object - more specifically, the object may contain functions and components that augment and modify Swagger-UI's functionality.
+
+### Format
+
+A plugin return value may contain any of these keys, where `myStateKey` is a name for a piece of state:
+
+```javascript
+{
+  statePlugins: {
+    myStateKey: {
+      actions,
+      reducers,
+      selectors,
+      wrapActions,
+      wrapSelectors
+    }
+  },
+  components: {},
+  wrapComponents: {},
+  fn: {}
+}
+```
+
+### System is provided to plugins
+
+Let's assume we have a plugin, `NormalPlugin`, that exposes a `doStuff` action under the `normal` state namespace.
+
+```javascript
+const ExtendingPlugin = function(system) {
+  return {
+    statePlugins: {
+      extending: {
+        actions: {
+          doExtendedThings: function(...args) {
+            // you can do other things in here if you want
+            return system.normalActions.doStuff(...args)
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+As you can see, each plugin is passed a reference to the `system` being built up. As long as `NormalPlugin` is compiled before `ExtendingPlugin`, this will work without any issues.
+
+There is no dependency management built into the plugin system, so if you create a plugin that relies on another, it is your responsibility to make sure that the dependent plugin is loaded _after_ the plugin being depended on.
+
+### Interfaces
+
+##### Actions
+
+```javascript
+const MyActionPlugin = () => {
+  return {
+    statePlugins: {
+      example: {
+        actions: {
+          updateFavoriteColor: (str) => {
+            return {
+              type: "EXAMPLE_SET_FAV_COLOR",
+              payload: str
+            }
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+Once an action has been defined, you can use it anywhere that you can get a system reference:
+
+```javascript
+// elsewhere
+system.exampleActions.updateFavoriteColor("blue")
+```
+
+The Action interface enables the creation of new Redux action creators within a piece of state in the Swagger-UI system.
+
+This action creator function will be exposed to container components as `exampleActions.updateFavoriteColor`. When this action creator is called, the return value (which should be a [Flux Standard Action](https://github.com/acdlite/flux-standard-action)) will be passed to the `example` reducer, which we'll define in the next section.
+
+For more information about the concept of actions in Redux, see the [Redux Actions documentation](http://redux.js.org/docs/basics/Actions.html).
+
+##### Reducers
+
+Reducers take a state (which is an [Immutable.js map](https://facebook.github.io/immutable-js/docs/#/Map)) and an action, and return a new state.
+
+Reducers must be provided to the system under the name of the action type that they handle, in this case, `EXAMPLE_SET_FAV_COLOR`.
+
+```javascript
+const MyReducerPlugin = function(system) {
+  return {
+    statePlugins: {
+      example: {
+        reducers: {
+          "EXAMPLE_SET_FAV_COLOR": (state, action) => {
+            // you're only working with the state under the namespace, in this case "example".
+            // So you can do what you want, without worrying about /other/ namespaces
+            return state.set("favColor", action.payload)
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+##### Selectors
+
+Selectors reach into their namespace's state to retrieve or derive data from the state.
+
+They're an easy way to keep logic in one place, and is preferred over passing state data directly into components.
+
+
+```javascript
+const MySelectorPlugin = function(system) {
+  return {
+    statePlugins: {
+      example: {
+        selectors: {
+          myFavoriteColor: (state) => state.get("favColor")
+        }
+      }
+    }
+  }
+}
+```
+
+You can also use the Reselect library to memoize your selectors, which is recommended for any selectors that will see heavy use, since Reselect automatically memoizes selector calls for you:
+
+```javascript
+import { createSelector } from "reselect"
+
+const MySelectorPlugin = function(system) {
+  return {
+    statePlugins: {
+      example: {
+        selectors: {
+          // this selector will be memoized after it is run once for a
+          // value of `state`
+          myFavoriteColor: createSelector((state) => state.get("favColor"))
+        }
+      }
+    }
+  }
+}
+```
+
+Once a selector has been defined, you can use it anywhere that you can get a system reference:
+```javascript
+system.exampleSelectors.myFavoriteColor() // gets `favColor` in state for you
+```
+
+##### Components
+
+You can provide a map of components to be integrated into the system.
+
+Be mindful of the key names for the components you provide, as you'll need to use those names to refer to the components elsewhere.
+
+```javascript
+class HelloWorldClass extends React.Component {
+  render() {
+    return <h1>Hello World!</h1>
+  }
+}
+
+const MyComponentPlugin = function(system) {
+  return {
+    components: {
+      HelloWorldClass: HelloWorldClass
+      // components can just be functions, these are called "stateless components"
+      HelloWorldStateless: () => <h1>Hello World!</h1>,
+    }
+  }
+}
+```
+
+```javascript
+// elsewhere
+const HelloWorldStateless = system.getComponent("HelloWorldStateless")
+const HelloWorldClass = system.getComponent("HelloWorldClass")
+```
+
+You can also "cancel out" any components that you don't want by creating a stateless component that always returns `null`:
+
+```javascript
+const NeverShowInfoPlugin = function(system) {
+  return {
+    components: {
+      info: () => null
+    }
+  }
+}
+```
+
+##### Wrap-Actions
+
+Wrap Actions allow you to override the behavior of an action in the system.
+
+They are function factories with the signature `(oriAction, system) => (...args) => result`.
+
+A Wrap Action's first argument is `oriAction`, which is the action being wrapped. It is your responsibility to call the `oriAction` - if you don't, the original action will not fire!
+
+This mechanism is useful for conditionally overriding built-in behaviors, or listening to actions.
+
+```javascript
+// FYI: in an actual Swagger-UI, `updateSpec` is already defined in the core code
+// it's just here for clarity on what's behind the scenes
+const MySpecPlugin = function(system) {
+  return {
+    statePlugins: {
+      spec: {
+        actions: {
+          updateSpec: (str) => {
+            return {
+              type: "SPEC_UPDATE_SPEC",
+              payload: str
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+// this plugin allows you to watch changes to the spec that is in memory
+const MyWrapActionPlugin = function(system) {
+  return {
+    statePlugins: {
+      spec: {
+        wrapActions: {
+          updateSpec: (oriAction, system) => (str) => {
+            // here, you can hand the value to some function that exists outside of Swagger-UI
+            console.log("Here is my API definition", str)
+            return oriAction(str) // don't forget! otherwise, Swagger-UI won't update
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+##### Wrap-Selectors
+
+Wrap Selectors allow you to override the behavior of a selector in the system.
+
+They are function factories with the signature `(oriSelector, system) => (state, ...args) => result`.
+
+This interface is useful for controlling what data flows into components. We use this in the core code to disable selectors based on the API definition's version.
+
+```javascript
+import { createSelector } from 'reselect'
+
+// FYI: in an actual Swagger-UI, the `url` spec selector is already defined
+// it's just here for clarity on what's behind the scenes
+const MySpecPlugin = function(system) {
+  return {
+    statePlugins: {
+      spec: {
+        selectors: {
+          url: createSelector(
+            state => state.get("url")
+          )
+        }
+      }
+    }
+  }
+}
+
+const MyWrapSelectorsPlugin = function(system) {
+  return {
+    statePlugins: {
+      spec: {
+        wrapSelectors: {
+          url: (oriSelector, system) => (state, ...args) => {
+            console.log('someone asked for the spec url!!! it is', state.get('url'))
+            // you can return other values here...
+            // but let's just enable the default behavior
+            return oriSelector(state, ...args)
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+##### Wrap-Components
+
+Wrap Components allow you to override a component registered within the system.
+
+Wrap Components are function factories with the signature `(OriginalComponent, system) => props => ReactElement`.
+
+```javascript
+const MyWrapBuiltinComponentPlugin = function(system) {
+  return {
+    wrapComponents: {
+      info: (Original, system) => (props) => {
+        return <div>
+          <h3>Hello world! I am above the Info component.</h3>
+          <Original {...props} />
+        </div>
+      }
+    }
+  }
+}
+```
+
+```javascript
+// Overriding a component from a plugin
+
+const MyNumberDisplayPlugin = function(system) {
+  return {
+    components: {
+      NumberDisplay: ({ number }) => <span>{number}</span>
+    }
+  }
+}
+
+const MyWrapComponentPlugin = function(system) {
+  return {
+    wrapComponents: {
+      NumberDisplay: (Original, system) => (props) => {
+        if(props.number > 10) {
+          return <div>
+            <h3>Warning! Big number ahead.</h3>
+          </div>
+        } else {
+          return <Original {...props} />
+        }
+      }
+    }
+  }
+}
+```
+
+##### fn
+
+The fn interface allows you to add helper functions to the system for use elsewhere.
+
+```javascript
+import leftPad from "left-pad"
+
+const MyFnPlugin = function(system) {
+  return {
+    fn: {
+      leftPad: leftPad
+    }
+  }
+}
+```

docs/development/scripts.md

@@ -0,0 +1,30 @@
+# Helpful scripts
+
+Any of the scripts below can be run by typing `npm run <script name>` in the project's root directory.
+
+### Developing
+Script name | Description
+--- | ---
+`dev` | Spawn a hot-reloading dev server on port 3200.
+`deps-check` | Generate a size and licensing report on Swagger-UI's dependencies.
+`lint` | Report ESLint style errors and warnings.
+`lint-errors` | Report ESLint style errors, without warnings.
+`lint-fix` | Attempt to fix style errors automatically.
+`watch` | Rebuild the core files in `/dist` when the source code changes. Useful for `npm link` with Swagger-Editor.
+
+### Building
+Script name | Description
+--- | ---
+`build` | Build a new set of JS and CSS assets, and output them to `/dist`.
+`build-bundle` | Build `swagger-ui-bundle.js` only.
+`build-core` | Build `swagger-ui.(js|css)` only.
+`build-standalone` | Build `swagger-ui-standalone-preset.js` only.
+
+### Testing
+Script name | Description
+--- | ---
+`test` | Run unit tests in Node and run ESLint in errors-only mode.
+`just-test` | Run unit tests in the browser with Karma.
+`just-test-in-node` | Run unit tests in Node.
+`just-check-coverage` | Generate a code coverage report with NYC.
+`e2e` | Run end-to-end tests (requires JDK and Selenium).

docs/development/setting-up.md

@@ -0,0 +1,24 @@
+# Setting up a dev environment
+
+Swagger-UI includes a development server that provides hot module reloading and unminified stack traces, for easier development.
+
+### Prerequisites
+
+- Node.js `6.0.0` or greater
+- npm `3.0.0` or greater
+- git, any version
+
+
+### Steps
+
+1. `git clone git@github.com:swagger-api/swagger-ui.git`
+2. `cd swagger-ui`
+3. `npm install`
+4. `npm run dev`
+5. Wait a bit
+6. Open http://localhost:3200/
+
+## Bonus points
+
+- Swagger-UI includes an ESLint rule definition. If you use a graphical editor, consider installing an ESLint plugin, which will point out syntax and style errors for you as you code.
+  - The linter runs as part of the PR test sequence, so don't think you can get away with not paying attention to it!

docs/usage/configuration.md

@@ -0,0 +1,77 @@
+# Configuration
+
+### How to configure
+
+Swagger-UI accepts configuration parameters in four locations.
+
+From lowest to highest precedence:
+- The `swagger-config.yaml` in the project root directory, if it exists, is baked into the application
+- configuration object passed as an argument to Swagger-UI (`SwaggerUI({ ... })`)
+- configuration document fetched from a specified `configUrl`
+- configuration items passed as key/value pairs in the URL query string
+
+
+### Parameters
+
+Parameters with dots in their names are single strings used to organize subordinate parameters, and are not indicative of a nested structure.
+
+For readability, parameters are grouped by category and sorted alphabetically.
+
+Type notations are formatted like so:
+- `String=""` means a String type with a default value of `""`.
+- `String=["a"*, "b", "c", "d"]` means a String type that can be `a`, `b`, `c`, or `d`, with the `*` indicating that `a` is the default value.
+
+##### Core
+
+Parameter Name | Description
+--- | ---
+`configUrl` | `String`. URL to fetch external configuration document from.
+`dom_id` |`String`, **REQUIRED** if `domNode` is not provided. The id of a dom element inside which SwaggerUi will put the user interface for swagger.
+`domNode` | `Element`, **REQUIRED** if `dom_id` is not provided. The HTML DOM element inside which SwaggerUi will put the user interface for swagger. Overrides `dom_id`.
+`spec` | `Object={}`. A JS object describing the OpenAPI Specification. When used, the `url` parameter will not be parsed. This is useful for testing manually-generated specifications without hosting them.
+`url` | `String`. The url pointing to API definition (normally `swagger.json` or `swagger.yaml`). Will be ignored if `urls` or `spec` is used.
+`urls` | `String`. An array of API definition objects (`{url: "<url>", name: "<name>"}`) used by Topbar plugin. When used and Topbar plugin is enabled, the `url` parameter will not be parsed. Names and URLs must be unique among all items in this array, since they're used as identifiers.
+`urls.primaryName` | `String`. When using `urls`, you can use this subparameter. If the value matches the name of a spec provided in `urls`, that spec will be displayed when Swagger-UI loads, instead of defaulting to the first spec in `urls`.
+
+##### Plugin system
+
+Read more about the plugin system in the [Customization documentation](/docs/customization/overview.md).
+
+Parameter Name | Description
+--- | ---
+`layout` | `String="BaseLayout"`. The name of a component available via the plugin system to use as the top-level layout for Swagger-UI.
+`plugins` | `Array=[]`. An array of plugin functions to use in Swagger-UI.
+`presets` | `Array=[SwaggerUI.presets.ApisPreset]`. An array of presets to use in Swagger-UI. Usually, you'll want to include `ApisPreset` if you use this option.
+
+##### Display
+
+Parameter Name | Description
+--- | ---
+`deepLinking` | `Boolean=false`. If set to `true`, enables deep linking for tags and operations. See the [Deep Linking documentation](/docs/usage/deep-linking.md) for more information.
+`displayOperationId` | `Boolean=false`. Controls the display of operationId in operations list. The default is `false`.
+`defaultModelExpandDepth` | `Number=1`. The default expansion depth for models.
+`defaultModelRendering` | `String=["example"*, "model"]`. Controls how models are shown when the API is first rendered. (The user can always switch the rendering for a given model by clicking the 'Model' and 'Example Value' links.)
+`displayRequestDuration` | `Boolean=false`. Controls the display of the request duration (in milliseconds) for Try-It-Out requests.
+`docExpansion` | `String=["list"*, "full", "none"]`. Controls the default expansion setting for the operations and tags. It can be 'list' (expands only the tags), 'full' (expands the tags and operations) or 'none' (expands nothing).
+`filter` | `Boolean=false OR String`. If set, enables filtering. The top bar will show an edit box that you can use to filter the tagged operations that are shown. Can be Boolean to enable or disable, or a string, in which case filtering will be enabled using that string as the filter expression. Filtering is case sensitive matching the filter expression anywhere inside the tag.
+`maxDisplayedTags` | `Number`. If set, limits the number of tagged operations displayed to at most this many. The default is to show all operations.
+`operationsSorter` | `Function=(a => a)`. Apply a sort to the operation list of each API. It can be 'alpha' (sort by paths alphanumerically), 'method' (sort by HTTP method) or a function (see Array.prototype.sort() to know how sort function works). Default is the order returned by the server unchanged.
+`showExtensions` | `Boolean=false`. Controls the display of vendor extension (`x-`) fields and values for Operations, Parameters, and Schema.
+`tagsSorter` | `Function=(a => a)`. Apply a sort to the tag list of each API. It can be 'alpha' (sort by paths alphanumerically) or a function (see [Array.prototype.sort()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) to learn how to write a sort function). Two tag name strings are passed to the sorter for each pass. Default is the order determined by Swagger-UI.
+
+##### Network
+
+Parameter Name | Description
+--- | ---
+`oauth2RedirectUrl` | `String`. OAuth redirect URL.
+`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.
+`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
+
+Parameter Name | Description
+--- | ---
+`modelPropertyMacro` | `Function`. Function to set default values to each property in model. Accepts one argument modelPropertyMacro(property), property is immutable
+`parameterMacro` | `Function`. Function to set default value to parameters. Accepts two arguments parameterMacro(operation, parameter). Operation and parameter are objects passed for context, both remain immutable

docs/usage/cors.md

@@ -0,0 +1,60 @@
+# CORS
+
+CORS is a technique to prevent websites from doing bad things with your personal data.  Most browsers + JavaScript toolkits not only support CORS but enforce it, which has implications for your API server which supports Swagger.
+
+You can read about CORS here: http://www.w3.org/TR/cors.
+
+There are two cases where no action is needed for CORS support:
+
+1. swagger-ui is hosted on the same server as the application itself (same host *and* port).
+2. The application is located behind a proxy that enables the required CORS headers. This may already be covered within your organization.
+
+Otherwise, CORS support needs to be enabled for:
+
+1. Your Swagger docs. For Swagger 2.0 it's the `swagger.json`/`swagger.yaml` and any externally `$ref`ed docs.
+2. For the `Try it now` button to work, CORS needs to be enabled on your API endpoints as well.
+
+### Testing CORS Support
+
+You can verify CORS support with one of three techniques:
+
+- Curl your API and inspect the headers.  For instance:
+
+```bash
+$ curl -I "http://petstore.swagger.io/v2/swagger.json"
+HTTP/1.1 200 OK
+Date: Sat, 31 Jan 2015 23:05:44 GMT
+Access-Control-Allow-Origin: *
+Access-Control-Allow-Methods: GET, POST, DELETE, PUT, PATCH, OPTIONS
+Access-Control-Allow-Headers: Content-Type, api_key, Authorization
+Content-Type: application/json
+Content-Length: 0
+```
+
+This tells us that the petstore resource listing supports OPTIONS, and the following headers:  `Content-Type`, `api_key`, `Authorization`.
+
+- Try swagger-ui from your file system and look at the debug console.  If CORS is not enabled, you'll see something like this:
+
+```
+XMLHttpRequest cannot load http://sad.server.com/v2/api-docs. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
+```
+
+Swagger-UI cannot easily show this error state.
+
+- Using the http://www.test-cors.org website. Keep in mind this will show a successful result even if `Access-Control-Allow-Headers` is not available, which is still required for Swagger-UI to function properly.
+
+### Enabling CORS
+
+The method of enabling CORS depends on the server and/or framework you use to host your application. http://enable-cors.org provides information on how to enable CORS in some common web servers.
+
+Other servers/frameworks may provide you information on how to enable it specifically in their use case.
+
+### CORS and Header Parameters
+
+Swagger lets you easily send headers as parameters to requests.  The name of these headers *MUST* be supported in your CORS configuration as well.  From our example above:
+
+```
+Access-Control-Allow-Headers: Content-Type, api_key, Authorization
+```
+
+Only headers with these names will be allowed to be sent by Swagger-UI.

docs/usage/deep-linking.md

@@ -1,4 +1,4 @@
-# Deep linking
+# `deepLinking` parameter
 
 Swagger-UI allows you to deeply link into tags and operations within a spec. When Swagger-UI is provided a URL fragment at runtime, it will automatically expand and scroll to a specified tag or operation.
 

docs/usage/installation.md

@@ -0,0 +1,93 @@
+# Installation
+
+## Distribution channels
+
+### NPM Registry
+
+We publish two modules to npm: **`swagger-ui`** and **`swagger-ui-dist`**.
+
+**`swagger-ui`** is meant for consumption by JavaScript web projects that include module bundlers, such as Webpack, Browserify, and Rollup. Its main file exports Swagger-UI's main function, and the module also includes a namespaced stylesheet at `swagger-ui/dist/swagger-ui.css`. Here's an example:
+
+```javascript
+import SwaggerUI from 'swagger-ui'
+// or use require, if you prefer
+const SwaggerUI = require('swagger-ui')
+
+SwaggerUI({
+  dom_id: '#myDomId'
+})
+```
+
+In contrast, **`swagger-ui-dist`** is meant for server-side projects that need assets to serve to clients. The module, when imported, includes an `absolutePath` helper function that returns the absolute filesystem path to where the `swagger-ui-dist` module is installed.
+
+_Note: we suggest using `swagger-ui` when your tooling makes it possible, as `swagger-ui-dist`
+will result in more code going across the wire._
+
+The module's contents mirrors the `dist` folder you see in the Git repository. The most useful file is `swagger-ui-bundle.js`, which is a build of Swagger-UI that includes all the code it needs to run in one file. The folder also has an `index.html` asset, to make it easy to serve Swagger-UI like so:
+
+```javascript
+const express = require('express')
+const pathToSwaggerUi = require('swagger-ui').absolutePath()
+
+const app = express()
+
+app.use(express.static(pathToSwaggerUi))
+
+app.listen(3000)
+```
+
+The module also exports `SwaggerUIBundle` and `SwaggerUIStandalonePreset`, so
+if you're in a JavaScript project that can't handle a tranditional npm module,
+you could do something like this:
+
+```js
+var SwaggerUIBundle = require('swagger-ui-dist').SwaggerUIBundle
+
+const ui = SwaggerUIBundle({
+    url: "http://petstore.swagger.io/v2/swagger.json",
+    dom_id: '#swagger-ui',
+    presets: [
+      SwaggerUIBundle.presets.apis,
+      SwaggerUIBundle.SwaggerUIStandalonePreset
+    ]
+    layout: "StandaloneLayout"
+  })
+```
+
+`SwaggerUIBundle` is equivalent to `SwaggerUI`.
+
+### Docker Hub
+
+You can pull a pre-built docker image of the swagger-ui directly from Dockerhub:
+
+```
+docker pull swaggerapi/swagger-ui
+docker run -p 80:8080 swaggerapi/swagger-ui
+```
+
+Will start nginx with swagger-ui on port 80.
+
+Or you can provide your own swagger.json on your host
+
+```
+docker run -p 80:8080 -e SWAGGER_JSON=/foo/swagger.json -v /bar:/foo swaggerapi/swagger-ui
+```
+
+The base URL of the web application can be changed by specifying the `BASE_URL` environment variable:
+
+```
+docker run -p 80:8080 -e BASE_URL=/swagger -e SWAGGER_JSON=/foo/swagger.json -v /bar:/foo swaggerapi/swagger-ui
+```
+
+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:
+
+```html
+<script src="//unpkg.com/swagger-ui-dist@3/swagger-ui-bundle.js">
+<!-- `SwaggerUIBundle` is now available on the page -->
+```
+
+See [unpkg's main page](https://unpkg.com/) for more information on how to use unpkg.

docs/usage/limitations.md

@@ -0,0 +1,38 @@
+# Limitations
+
+### Forbidden header names
+
+Some header names cannot be controlled by web applications, due to security
+features built into web browsers.
+
+Forbidden headers include:
+
+> - Accept-Charset
+> - Accept-Encoding
+> - Access-Control-Request-Headers
+> - Access-Control-Request-Method
+> - Connection
+> - Content-Length
+> - Cookie
+> - Cookie2
+> - Date
+> - DNT
+> - Expect
+> - Host
+> - Keep-Alive
+> - Origin
+> - Proxy-*
+> - Sec-*
+> - Referer
+> - TE
+> - Trailer
+> - Transfer-Encoding
+> - Upgrade
+> - Via
+>
+> _[Forbidden header names (developer.mozilla.org)](https://developer.mozilla.org/en-US/docs/Glossary/Forbidden_header_name)_
+
+The biggest impact of this is that OpenAPI 3.0 Cookie parameters cannot be
+controlled when running Swagger-UI in a browser.
+
+For more context, see [#3956](https://github.com/swagger-api/swagger-ui/issues/3956).

docs/usage/oauth2.md

@@ -0,0 +1,28 @@
+# OAuth2 configuration
+You can configure OAuth2 authorization by calling `initOAuth` method with passed configs under the instance of `SwaggerUIBundle`
+default `client_id` and `client_secret`, `realm`, an application name `appName`, `scopeSeparator`, `additionalQueryStringParams`,
+`useBasicAuthenticationWithAccessCodeGrant`.
+
+Config Name | Description
+--- | ---
+client_id | Default clientId. MUST be a string
+client_secret | Default clientSecret. MUST be a string
+realm | realm query parameter (for oauth1) added to `authorizationUrl` and `tokenUrl` . MUST be a string
+appName | application name, displayed in authorization popup. MUST be a string
+scopeSeparator | scope separator for passing scopes, encoded before calling, default value is a space (encoded value `%20`). MUST be a string
+additionalQueryStringParams | Additional query parameters added to `authorizationUrl` and `tokenUrl`. MUST be an object
+useBasicAuthenticationWithAccessCodeGrant | Only activated for the `accessCode` flow.  During the `authorization_code` request to the `tokenUrl`, pass the [Client Password](https://tools.ietf.org/html/rfc6749#section-2.3.1) using the HTTP Basic Authentication scheme (`Authorization` header with `Basic base64encoded[client_id:client_secret]`).  The default is `false`
+
+```javascript
+const ui = SwaggerUI({...})
+
+// Method can be called in any place after calling constructor SwaggerUIBundle
+ui.initOAuth({
+    clientId: "your-client-id",
+    clientSecret: "your-client-secret-if-required",
+    realm: "your-realms",
+    appName: "your-app-name",
+    scopeSeparator: " ",
+    additionalQueryStringParams: {test: "hello"}
+  })
+```

docs/usage/version-detection.md

@@ -9,7 +9,7 @@ To help you visually detect which version you're using, we've included supportin
 
 # Swagger-UI 3.X
 
-![Swagger-UI 3](images/swagger-ui3.png)
+![Swagger-UI 3](/docs/images/swagger-ui3.png)
 
 Some distinct identifiers to Swagger-UI 3.X:
 - The API version appears as a badge next to its title.
@@ -29,7 +29,7 @@ Note: This functionality was added in 3.0.8. If you're unable to execute it, you
 
 # Swagger-UI 2.X and under
 
-![Swagger-UI 2](images/swagger-ui2.png)
+![Swagger-UI 2](/docs/images/swagger-ui2.png)
 
 Some distinct identifiers to Swagger-UI 3.X:
 - The API version appears at the bottom of the page.

make-webpack-config.js

@@ -137,7 +137,7 @@ module.exports = function(rules, options) {
       }
     },
 
-  devtool: specialOptions.sourcemaps ? "nosource-source-map" : null,
+  devtool: specialOptions.sourcemaps ? "nosource-source-map" : false,
 
     plugins,
 

package.json

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

src/core/components/array-model.jsx

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

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

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

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

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

src/core/components/auth/auths.jsx

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

src/core/components/auth/oauth2.jsx

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

src/core/components/content-type.jsx

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

src/core/components/debug.jsx

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

src/core/components/errors.jsx

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

src/core/components/execute.jsx

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

src/core/components/headers.jsx

@@ -2,15 +2,19 @@ import React from "react"
 import PropTypes from "prop-types"
 import Im from "immutable"
 
+const propStyle = { color: "#999", fontStyle: "italic" }
+
 export default class Headers extends React.Component {
 
   static propTypes = {
-    headers: PropTypes.object.isRequired
+    headers: PropTypes.object.isRequired,
+    getComponent: PropTypes.func.isRequired
   };
 
   render() {
 
-    let { headers } = this.props
+    let { headers, getComponent } = this.props
+    const Property = getComponent("Property")
 
     if ( !headers || !headers.size )
       return null
@@ -32,10 +36,13 @@ export default class Headers extends React.Component {
               if(!Im.Map.isMap(header)) {
                 return null
               }
+              const type = header.getIn(["schema"]) ? header.getIn(["schema", "type"]) : header.getIn(["type"])
+              const schemaExample = header.getIn(["schema", "example"])
+
               return (<tr key={ key }>
                 <td className="header-col">{ key }</td>
                 <td className="header-col">{ header.get( "description" ) }</td>
-                <td className="header-col">{ header.get( "type" ) }</td>
+                <td className="header-col">{ type } { schemaExample ? <Property propKey={ "Example" } propVal={ schemaExample } propStyle={ propStyle } /> : null }</td>
               </tr>)
             }).toArray()
           }

src/core/components/layout-utils.jsx

@@ -1,6 +1,6 @@
 import React from "react"
 import PropTypes from "prop-types"
-import OriCollapse from "react-collapse"
+import { Collapse as OriCollapse } from "react-collapse"
 
 function xclass(...args) {
   return args.filter(a => !!a).join(" ").trim()
@@ -183,7 +183,7 @@ export class Select extends React.Component {
         { allowEmptyValue ? <option value="">--</option> : null }
         {
           allowedValues.map(function (item, key) {
-            return <option key={ key } value={ String(item) }>{ item }</option>
+            return <option key={ key } value={ String(item) }>{ String(item) }</option>
           })
         }
       </select>

src/core/components/layouts/base.jsx

@@ -94,8 +94,9 @@ export default class BaseLayout extends React.Component {
             ) : null }
 
             { servers && servers.size ? (
-              <div className="server-container">
+              <div className="global-server-container">
                 <Col className="servers wrapper" mobile={12}>
+                  <span className="servers-title">Server</span>
                   <Servers
                     servers={servers}
                     currentServer={oas3Selectors.selectedServer()}

src/core/components/live-response.jsx

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

src/core/components/model-example.jsx

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

src/core/components/model-wrapper.jsx

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

src/core/components/model.jsx

@@ -1,10 +1,12 @@
-import React, { Component } from "react"
+import React, { PureComponent } from "react"
+import ImPropTypes from "react-immutable-proptypes"
 import PropTypes from "prop-types"
 
-export default class Model extends Component {
+export default class Model extends PureComponent {
   static propTypes = {
-    schema: PropTypes.object.isRequired,
+    schema: ImPropTypes.orderedMap.isRequired,
     getComponent: PropTypes.func.isRequired,
+    getConfigs: PropTypes.func.isRequired,
     specSelectors: PropTypes.object.isRequired,
     name: PropTypes.string,
     isRef: PropTypes.bool,
@@ -30,7 +32,7 @@ export default class Model extends Component {
   }
 
   render () {
-    let { getComponent, specSelectors, schema, required, name, isRef, specPath } = this.props
+    let { getComponent, getConfigs, specSelectors, schema, required, name, isRef, specPath } = this.props
     const ObjectModel = getComponent("ObjectModel")
     const ArrayModel = getComponent("ArrayModel")
     const PrimitiveModel = getComponent("PrimitiveModel")
@@ -55,6 +57,7 @@ export default class Model extends Component {
         return <ObjectModel
           className="object" { ...this.props }
           specPath={specPath}
+          getConfigs={ getConfigs }
           schema={ schema }
           name={ name }
           deprecated={deprecated}
@@ -62,6 +65,7 @@ export default class Model extends Component {
       case "array":
         return <ArrayModel
           className="array" { ...this.props }
+          getConfigs={ getConfigs }
           schema={ schema }
           name={ name }
           deprecated={deprecated}
@@ -74,6 +78,7 @@ export default class Model extends Component {
         return <PrimitiveModel
           { ...this.props }
           getComponent={ getComponent }
+          getConfigs={ getConfigs }
           schema={ schema }
           name={ name }
           deprecated={deprecated}

src/core/components/models.jsx

@@ -38,6 +38,7 @@ export default class Models extends Component {
                      schema={ model }
                      specPath={[...specPathBase, name]}
                      getComponent={ getComponent }
+                     getConfigs={ getConfigs }
                      specSelectors={ specSelectors }/>
               </div>
           }).toArray()

src/core/components/object-model.jsx

@@ -9,6 +9,7 @@ export default class ObjectModel extends Component {
   static propTypes = {
     schema: PropTypes.object.isRequired,
     getComponent: PropTypes.func.isRequired,
+    getConfigs: PropTypes.func.isRequired,
     specSelectors: PropTypes.object.isRequired,
     name: PropTypes.string,
     isRef: PropTypes.bool,
@@ -18,9 +19,15 @@ export default class ObjectModel extends Component {
   }
 
   render(){
-    let { schema, name, isRef, getComponent, depth, specPath, expandDepth, ...otherProps } = this.props
+    let { schema, name, isRef, getComponent, getConfigs, depth, specPath, expandDepth, ...otherProps } = this.props
     let { specSelectors } = otherProps
 
+    if(!schema) {
+      return null
+    }
+
+    const { showExtensions } = getConfigs()
+
     let description = schema.get("description")
     let properties = schema.get("properties")
     let additionalProperties = schema.get("additionalProperties")
@@ -71,13 +78,14 @@ export default class ObjectModel extends Component {
               {
                 !(properties && properties.size) ? null : properties.entrySeq().map(
                     ([key, value]) => {
+                      let isDeprecated = isOAS3() && value.get("deprecated")
                       let isRequired = List.isList(requiredProperties) && requiredProperties.contains(key)
                       let propertyStyle = { verticalAlign: "top", paddingRight: "0.2em" }
                       if ( isRequired ) {
                         propertyStyle.fontWeight = "bold"
                       }
 
-                      return (<tr key={key}>
+                      return (<tr key={key} className={isDeprecated && "deprecated"}>
                         <td style={ propertyStyle }>
                           { key }{ isRequired && <span style={{ color: "red" }}>*</span> }
                         </td>
@@ -86,12 +94,37 @@ export default class ObjectModel extends Component {
                                  required={ isRequired }
                                  getComponent={ getComponent }
                                  specPath={[...specPath, "properties", key]}
+                                 getConfigs={ getConfigs }
                                  schema={ value }
                                  depth={ depth + 1 } />
                         </td>
                       </tr>)
                     }).toArray()
               }
+              {
+                // empty row befor extensions...
+                !showExtensions ? null : <tr>&nbsp;</tr>
+              }
+              {
+                !showExtensions ? null :
+                  schema.entrySeq().map(
+                    ([key, value]) => {
+                      if(key.slice(0,2) !== "x-") {
+                        return
+                      }
+
+                      const normalizedValue = !value ? null : value.toJS ? value.toJS() : value
+
+                      return (<tr key={key} style={{ color: "#777" }}>
+                        <td>
+                          { key }
+                        </td>
+                        <td style={{ verticalAlign: "top" }}>
+                          { JSON.stringify(normalizedValue) }
+                        </td>
+                      </tr>)
+                    }).toArray()
+              }
               {
                 !additionalProperties || !additionalProperties.size ? null
                   : <tr>
@@ -100,6 +133,7 @@ export default class ObjectModel extends Component {
                       <Model { ...otherProps } required={ false }
                              getComponent={ getComponent }
                              specPath={[...specPath, "additionalProperties"]}
+                             getConfigs={ getConfigs }
                              schema={ additionalProperties }
                              depth={ depth + 1 } />
                     </td>
@@ -114,6 +148,7 @@ export default class ObjectModel extends Component {
                         return <div key={k}><Model { ...otherProps } required={ false }
                                  getComponent={ getComponent }
                                  specPath={[...specPath, "anyOf", k]}
+                                 getConfigs={ getConfigs }
                                  schema={ schema }
                                  depth={ depth + 1 } /></div>
                       })}
@@ -129,6 +164,7 @@ export default class ObjectModel extends Component {
                         return <div key={k}><Model { ...otherProps } required={ false }
                                  getComponent={ getComponent }
                                  specPath={[...specPath, "oneOf", k]}
+                                 getConfigs={ getConfigs }
                                  schema={ schema }
                                  depth={ depth + 1 } /></div>
                       })}
@@ -140,13 +176,15 @@ export default class ObjectModel extends Component {
                   : <tr>
                     <td>{ "not ->" }</td>
                     <td>
-                      {not.map((schema, k) => {
+                      <div>
-                        return <div key={k}><Model { ...otherProps } required={ false }
+                        <Model { ...otherProps }
+                               required={ false }
                                getComponent={ getComponent }
-                                 specPath={[...specPath, "not", k]}
+                               specPath={[...specPath, "not"]}
-                                 schema={ schema }
+                               getConfigs={ getConfigs }
-                                 depth={ depth + 1 } /></div>
+                               schema={ not }
-                      })}
+                               depth={ depth + 1 } />
+                      </div>
                     </td>
                   </tr>
               }

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

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

src/core/components/operation-extensions.jsx

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

src/core/components/operation.jsx

@@ -1,139 +1,95 @@
 import React, { PureComponent } from "react"
 import PropTypes from "prop-types"
 import { getList } from "core/utils"
-import * as CustomPropTypes from "core/proptypes"
+import { getExtensions, sanitizeUrl } from "core/utils"
-import { sanitizeUrl } from "core/utils"
+import { Iterable } from "immutable"
-
-//import "less/opblock"
 
 export default class Operation extends PureComponent {
   static propTypes = {
-    path: PropTypes.string.isRequired,
-    method: PropTypes.string.isRequired,
-    operation: PropTypes.object.isRequired,
-    showSummary: PropTypes.bool,
-
-    isShownKey: CustomPropTypes.arrayOrString.isRequired,
     specPath: PropTypes.array.isRequired,
+    operation: PropTypes.instanceOf(Iterable).isRequired,
+    response: PropTypes.instanceOf(Iterable),
+    request: PropTypes.instanceOf(Iterable),
 
-    allowTryItOut: PropTypes.bool,
+    toggleShown: PropTypes.func.isRequired,
-
+    onTryoutClick: PropTypes.func.isRequired,
-    displayOperationId: PropTypes.bool,
+    onCancelClick: PropTypes.func.isRequired,
-    displayRequestDuration: PropTypes.bool,
+    onExecute: PropTypes.func.isRequired,
-
-    response: PropTypes.object,
-    request: PropTypes.object,
 
     getComponent: PropTypes.func.isRequired,
+    getConfigs: PropTypes.func.isRequired,
     authActions: PropTypes.object,
     authSelectors: PropTypes.object,
     specActions: PropTypes.object.isRequired,
     specSelectors: PropTypes.object.isRequired,
     oas3Actions: PropTypes.object.isRequired,
+    oas3Selectors: PropTypes.object.isRequired,
     layoutActions: PropTypes.object.isRequired,
     layoutSelectors: PropTypes.object.isRequired,
-    fn: PropTypes.object.isRequired,
+    fn: PropTypes.object.isRequired
-    getConfigs: PropTypes.func.isRequired
   }
 
   static defaultProps = {
-    showSummary: true,
+    operation: null,
     response: null,
-    allowTryItOut: true,
+    request: null
-    displayOperationId: false,
-    displayRequestDuration: false
-  }
-
-  constructor(props, context) {
-    super(props, context)
-    this.state = {
-      tryItOutEnabled: false
-    }
-  }
-
-  componentWillReceiveProps(nextProps) {
-    const defaultContentType = "application/json"
-    let { specActions, path, method, operation } = nextProps
-    let producesValue = operation.get("produces_value")
-    let produces = operation.get("produces")
-    let consumes = operation.get("consumes")
-    let consumesValue = operation.get("consumes_value")
-
-    if(nextProps.response !== this.props.response) {
-      this.setState({ executeInProgress: false })
-    }
-
-    if (producesValue === undefined) {
-      producesValue = produces && produces.size ? produces.first() : defaultContentType
-      specActions.changeProducesValue([path, method], producesValue)
-    }
-
-    if (consumesValue === undefined) {
-      consumesValue = consumes && consumes.size ? consumes.first() : defaultContentType
-      specActions.changeConsumesValue([path, method], consumesValue)
-    }
-  }
-
-  toggleShown =() => {
-    let { layoutActions, isShownKey } = this.props
-    layoutActions.show(isShownKey, !this.isShown())
-  }
-
-  isShown =() => {
-    let { layoutSelectors, isShownKey, getConfigs } = this.props
-    let { docExpansion } = getConfigs()
-
-    return layoutSelectors.isShown(isShownKey, docExpansion === "full" ) // Here is where we set the default
-  }
-
-  onTryoutClick =() => {
-    this.setState({tryItOutEnabled: !this.state.tryItOutEnabled})
-  }
-
-  onCancelClick =() => {
-    let { specActions, path, method } = this.props
-    this.setState({tryItOutEnabled: !this.state.tryItOutEnabled})
-    specActions.clearValidateParams([path, method])
-  }
-
-  onExecute = () => {
-    this.setState({ executeInProgress: true })
   }
 
   render() {
     let {
-      isShownKey,
       specPath,
-      path,
-      method,
-      operation,
-      showSummary,
       response,
       request,
-      allowTryItOut,
+      toggleShown,
-      displayOperationId,
+      onTryoutClick,
-      displayRequestDuration,
+      onCancelClick,
+      onExecute,
       fn,
       getComponent,
+      getConfigs,
       specActions,
       specSelectors,
       authActions,
       authSelectors,
-      getConfigs,
+      oas3Actions,
-      oas3Actions
+      oas3Selectors
     } = this.props
+    let operationProps = this.props.operation
 
-    let summary = operation.get("summary")
+    let {
-    let description = operation.get("description")
+      isShown,
-    let deprecated = operation.get("deprecated")
+      isAuthorized,
-    let externalDocs = operation.get("externalDocs")
+      jumpToKey,
+      path,
+      method,
+      op,
+      tag,
+      showSummary,
+      operationId,
+      allowTryItOut,
+      displayOperationId,
+      displayRequestDuration,
+      isDeepLinkingEnabled,
+      tryItOutEnabled,
+      executeInProgress
+    } = operationProps.toJS()
+
+    let {
+      summary,
+      description,
+      deprecated,
+      externalDocs,
+      schemes
+    } = op.operation
+
+    let operation = operationProps.getIn(["op", "operation"])
+    let security = operationProps.get("security")
     let responses = operation.get("responses")
-    let security = operation.get("security") || specSelectors.security()
     let produces = operation.get("produces")
-    let schemes = operation.get("schemes")
     let parameters = getList(operation, ["parameters"])
-    let operationId = operation.get("__originalOperationId")
     let operationScheme = specSelectors.operationScheme(path, method)
+    let isShownKey = ["operations", tag, operationId]
+    let extensions = getExtensions(operation)
 
     const Responses = getComponent("responses")
     const Parameters = getComponent( "parameters" )
@@ -144,10 +100,10 @@ export default class Operation extends PureComponent {
     const Collapse = getComponent( "Collapse" )
     const Markdown = getComponent( "Markdown" )
     const Schemes = getComponent( "schemes" )
+    const OperationServers = getComponent( "OperationServers" )
+    const OperationExt = getComponent( "OperationExt" )
 
-    const { deepLinking } = getConfigs()
+    const { showExtensions } = getConfigs()
-
-    const isDeepLinkingEnabled = deepLinking && deepLinking !== "false"
 
     // Merge in Live Response
     if(responses && response && response.size > 0) {
@@ -155,19 +111,17 @@ export default class Operation extends PureComponent {
       response = response.set("notDocumented", notDocumented)
     }
 
-    let { tryItOutEnabled } = this.state
-    let shown = this.isShown()
     let onChangeKey = [ path, method ] // Used to add values to _this_ operation ( indexed by path and method )
 
     return (
-        <div className={deprecated ? "opblock opblock-deprecated" : shown ? `opblock opblock-${method} is-open` : `opblock opblock-${method}`} id={isShownKey.join("-")} >
+        <div className={deprecated ? "opblock opblock-deprecated" : isShown ? `opblock opblock-${method} is-open` : `opblock opblock-${method}`} id={isShownKey.join("-")} >
-          <div className={`opblock-summary opblock-summary-${method}`} onClick={this.toggleShown} > {/*TODO: convert this into a component, that can be wrapped and pulled in with getComponent */}
+          <div className={`opblock-summary opblock-summary-${method}`} onClick={toggleShown} > /*TODO: convert this into a component, that can be wrapped and pulled in with getComponent */}
               <span className="opblock-summary-method">{method.toUpperCase()}</span>
               <span className={ deprecated ? "opblock-summary-path__deprecated" : "opblock-summary-path" } >
               <a
                 className="nostyle"
                 onClick={isDeepLinkingEnabled ? (e) => e.preventDefault() : null}
-                href={isDeepLinkingEnabled ? `#/${isShownKey[1]}/${isShownKey[2]}` : null}>
+                href={isDeepLinkingEnabled ? `#/${isShownKey.join("/")}` : null}>
                 <span>{path}</span>
               </a>
                 <JumpToPath path={specPath} /> {/*TODO: use wrapComponents here, swagger-ui doesn't care about jumpToPath */}
@@ -183,13 +137,17 @@ export default class Operation extends PureComponent {
 
             {
               (!security || !security.count()) ? null :
-                <AuthorizeOperationBtn authActions={ authActions }
+                <AuthorizeOperationBtn
-                  security={ security }
+                  isAuthorized={ isAuthorized }
-                  authSelectors={ authSelectors }/>
+                  onClick={() => {
+                    const applicableDefinitions = authSelectors.definitionsForRequirements(security)
+                    authActions.showDefinitions(applicableDefinitions)
+                  }}
+                />
             }
           </div>
 
-          <Collapse isOpened={shown}>
+          <Collapse isOpened={isShown}>
             <div className="opblock-body">
               { deprecated && <h4 className="opblock-title_normal"> Warning: Deprecated</h4>}
               { description &&
@@ -200,24 +158,25 @@ export default class Operation extends PureComponent {
                 </div>
               }
               {
-                externalDocs && externalDocs.get("url") ?
+                externalDocs && externalDocs.url ?
                 <div className="opblock-external-docs-wrapper">
                   <h4 className="opblock-title_normal">Find more details</h4>
                   <div className="opblock-external-docs">
                     <span className="opblock-external-docs__description">
-                      <Markdown source={ externalDocs.get("description") } />
+                      <Markdown source={ externalDocs.description } />
                     </span>
-                    <a className="opblock-external-docs__link" href={ sanitizeUrl(externalDocs.get("url")) }>{ externalDocs.get("url") }</a>
+                    <a target="_blank" className="opblock-external-docs__link" href={ sanitizeUrl(externalDocs.url) }>{ externalDocs.url }</a>
                   </div>
                 </div> : null
               }
+
               <Parameters
                 parameters={parameters}
                 specPath={[...specPath, "parameters"]}
                 operation={operation}
                 onChangeKey={onChangeKey}
-                onTryoutClick = { this.onTryoutClick }
+                onTryoutClick = { onTryoutClick }
-                onCancelClick = { this.onCancelClick }
+                onCancelClick = { onCancelClick }
                 tryItOutEnabled = { tryItOutEnabled }
                 allowTryItOut={allowTryItOut}
 
@@ -229,6 +188,21 @@ export default class Operation extends PureComponent {
                 getConfigs={ getConfigs }
               />
 
+              { !tryItOutEnabled ? null :
+                <OperationServers
+                  getComponent={getComponent}
+                  path={path}
+                  method={method}
+                  operationServers={operation.get("servers")}
+                  pathServers={specSelectors.paths().getIn([path, "servers"])}
+                  getSelectedServer={oas3Selectors.selectedServer}
+                  setSelectedServer={oas3Actions.setSelectedServer}
+                  setServerVariableValue={oas3Actions.setServerVariableValue}
+                  getServerVariable={oas3Selectors.serverVariableValue}
+                  getEffectiveServerValue={oas3Selectors.serverEffectiveValue}
+                />
+              }
+
               {!tryItOutEnabled || !allowTryItOut ? null : schemes && schemes.size ? <div className="opblock-schemes">
                     <Schemes schemes={ schemes }
                              path={ path }
@@ -242,25 +216,23 @@ export default class Operation extends PureComponent {
               { !tryItOutEnabled || !allowTryItOut ? null :
 
                   <Execute
-                    getComponent={getComponent}
                     operation={ operation }
                     specActions={ specActions }
                     specSelectors={ specSelectors }
                     path={ path }
                     method={ method }
-                    onExecute={ this.onExecute } />
+                    onExecute={ onExecute } />
               }
 
               { (!tryItOutEnabled || !response || !allowTryItOut) ? null :
                   <Clear
-                    onClick={ this.onClearClick }
                     specActions={ specActions }
                     path={ path }
                     method={ method }/>
               }
             </div>
 
-            {this.state.executeInProgress ? <div className="loading-container"><div className="loading"></div></div> : null}
+            {executeInProgress ? <div className="loading-container"><div className="loading"></div></div> : null}
 
               { !responses ? null :
                   <Responses
@@ -274,11 +246,16 @@ export default class Operation extends PureComponent {
                     specActions={ specActions }
                     produces={ produces }
                     producesValue={ operation.get("produces_value") }
-                    pathMethod={ [path, method] }
                     specPath={[...specPath, "responses"]}
+                    path={ path }
+                    method={ method }
                     displayRequestDuration={ displayRequestDuration }
                     fn={fn} />
               }
+
+              { !showExtensions || !extensions.size ? null :
+                <OperationExt extensions={ extensions } getComponent={ getComponent } />
+              }
             </div>
           </Collapse>
         </div>

src/core/components/operations.jsx

@@ -1,8 +1,13 @@
 import React from "react"
 import PropTypes from "prop-types"
-import { helpers } from "swagger-client"
 import { createDeepLinkPath, sanitizeUrl } from "core/utils"
-const { opId } = helpers
+
+const SWAGGER2_OPERATION_METHODS = [
+  "get", "put", "post", "delete", "options", "head", "patch"
+]
+
+const OAS3_OPERATION_METHODS = SWAGGER2_OPERATION_METHODS.concat(["trace"])
+
 
 export default class Operations extends React.Component {
 
@@ -21,28 +26,20 @@ export default class Operations extends React.Component {
   render() {
     let {
       specSelectors,
-      specActions,
-      oas3Actions,
       getComponent,
       layoutSelectors,
       layoutActions,
-      authActions,
+      getConfigs
-      authSelectors,
-      getConfigs,
-      fn
     } = this.props
 
     let taggedOps = specSelectors.taggedOperations()
 
-    const Operation = getComponent("operation")
+    const OperationContainer = getComponent("OperationContainer", true)
     const Collapse = getComponent("Collapse")
     const Markdown = getComponent("Markdown")
 
-    let showSummary = layoutSelectors.showSummary()
     let {
       docExpansion,
-      displayOperationId,
-      displayRequestDuration,
       maxDisplayedTags,
       deepLinking
     } = getConfigs()
@@ -120,47 +117,30 @@ export default class Operations extends React.Component {
                   <Collapse isOpened={showTag}>
                     {
                       operations.map( op => {
-
+                        const path = op.get("path")
-                        const path = op.get("path", "")
+                        const method = op.get("method")
-                        const method = op.get("method", "")
                         const specPath = ["paths", path, method]
 
-                        const operationId =
-                        op.getIn(["operation", "operationId"]) || op.getIn(["operation", "__originalOperationId"]) || opId(op.get("operation"), path, method) || op.get("id")
-                        const isShownKey = ["operations", createDeepLinkPath(tag), createDeepLinkPath(operationId)]
 
-                        const allowTryItOut = specSelectors.allowTryItOutFor(op.get("path"), op.get("method"))
+                        // FIXME: (someday) this logic should probably be in a selector,
-                        const response = specSelectors.responseFor(op.get("path"), op.get("method"))
+                        // but doing so would require further opening up
-                        const request = specSelectors.requestFor(op.get("path"), op.get("method"))
+                        // selectors to the plugin system, to allow for dynamic
+                        // overriding of low-level selectors that other selectors
+                        // rely on. --KS, 12/17
+                        const validMethods = specSelectors.isOAS3() ?
+                          OAS3_OPERATION_METHODS : SWAGGER2_OPERATION_METHODS
 
-                        return <Operation
+                        if(validMethods.indexOf(method) === -1) {
-                          {...op.toObject()}
+                          return null
+                        }
 
-                          isShownKey={isShownKey}
+                        return <OperationContainer
+                          key={`${path}-${method}`}
                           specPath={specPath}
-                          showSummary={showSummary}
+                          op={op}
-                          key={isShownKey}
+                          path={path}
-                          response={ response }
+                          method={method}
-                          request={ request }
+                          tag={tag}
-                          allowTryItOut={allowTryItOut}
-
-                          displayOperationId={displayOperationId}
-                          displayRequestDuration={displayRequestDuration}
-
-                          specActions={ specActions }
-                          specSelectors={ specSelectors }
-
-                          oas3Actions={oas3Actions}
-
-                          layoutActions={ layoutActions }
-                          layoutSelectors={ layoutSelectors }
-
-                          authActions={ authActions }
-                          authSelectors={ authSelectors }
-
-                          getComponent={ getComponent }
-                          fn={fn}
-                          getConfigs={ getConfigs }
                         />
                       }).toArray()
                     }

src/core/components/parameter-extension.jsx

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

src/core/components/parameter-row.jsx

@@ -2,6 +2,7 @@ import React, { Component } from "react"
 import { Map } from "immutable"
 import PropTypes from "prop-types"
 import win from "core/window"
+import { getExtensions } from "core/utils"
 
 export default class ParameterRow extends Component {
   static propTypes = {
@@ -73,6 +74,8 @@ export default class ParameterRow extends Component {
 
     let { isOAS3 } = specSelectors
 
+    const { showExtensions } = getConfigs()
+
     // const onChangeWrapper = (value) => onChange(param, value)
     const JsonSchemaForm = getComponent("JsonSchemaForm")
     const ParamBody = getComponent("ParamBody")
@@ -92,6 +95,7 @@ export default class ParameterRow extends Component {
 
     const ModelExample = getComponent("modelExample")
     const Markdown = getComponent("Markdown")
+    const ParameterExt = getComponent("ParameterExt")
 
     let schema = param.get("schema")
     let type = isOAS3 && isOAS3() ? param.getIn(["schema", "type"]) : param.get("type")
@@ -101,6 +105,7 @@ export default class ParameterRow extends Component {
     let itemType = param.getIn(isOAS3 && isOAS3() ? ["schema", "items", "type"] : ["items", "type"])
     let parameter = specSelectors.getParameter(pathMethod, param.get("name"), param.get("in"))
     let value = parameter ? parameter.get("value") : ""
+    let extensions = getExtensions(param)
 
     return (
       <tr>
@@ -114,6 +119,7 @@ export default class ParameterRow extends Component {
             { isOAS3 && isOAS3() && param.get("deprecated") ? "deprecated": null }
           </div>
           <div className="parameter__in">({ param.get("in") })</div>
+          { !showExtensions || !extensions.size ? null : extensions.map((v, key) => <ParameterExt key={`${key}-${v}`} xKey={key} xVal={v} /> )}
         </td>
 
         <td className="col parameters-col_description">

src/core/components/primitive-model.jsx

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

src/core/components/response-body.jsx

@@ -32,7 +32,8 @@ export default class ResponseBody extends React.Component {
       // XML
     } else if (/xml/i.test(contentType)) {
       body = formatXml(content, {
-        textNodesOnSameLine: true
+        textNodesOnSameLine: true,
+        indentor: "  "
       })
       bodyEl = <HighlightCode value={ body } />
 
@@ -56,9 +57,6 @@ export default class ResponseBody extends React.Component {
       (headers["Content-Description"] && (/File Transfer/i).test(headers["Content-Description"])) ||
       (headers["content-description"] && (/File Transfer/i).test(headers["content-description"]))) {
 
-      let contentLength = headers["content-length"] || headers["Content-Length"]
-      if ( !(+contentLength) ) return null
-
       const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
 
       if (!isSafari && "Blob" in window) {

src/core/components/response.jsx

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

src/core/components/responses.jsx

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

src/core/containers/OperationContainer.jsx

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

src/core/index.js

@@ -3,12 +3,12 @@ import deepExtend from "deep-extend"
 import System from "core/system"
 import win from "core/window"
 import ApisPreset from "core/presets/apis"
+
 import * as AllPlugins from "core/plugins/all"
 import { parseSearch } from "core/utils"
 
-if (process.env.NODE_ENV !== "production") {
+if (process.env.NODE_ENV !== "production" && typeof window !== "undefined") {
-  const Perf = require("react-addons-perf")
+  win.Perf = require("react-addons-perf")
-  window.Perf = Perf
 }
 
 // eslint-disable-next-line no-undef
@@ -47,6 +47,7 @@ module.exports = function SwaggerUI(opts) {
     showMutatedRequest: true,
     defaultModelRendering: "example",
     defaultModelExpandDepth: 1,
+    showExtensions: false,
 
     // Initial set of plugins ( TODO rename this, or refactor - we don't need presets _and_ plugins. Its just there for performance.
     // Instead, we can compile the first plugin ( it can be a collection of plugins ), then batch the rest.

src/core/json-schema-components.js

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

src/core/plugins/auth/actions.js

@@ -73,7 +73,7 @@ export const authorizePassword = ( auth ) => ( { authActions } ) => {
   let { schema, name, username, password, passwordType, clientId, clientSecret } = auth
   let form = {
     grant_type: "password",
-    scope: encodeURIComponent(auth.scopes.join(scopeSeparator))
+    scope: auth.scopes.join(scopeSeparator)
   }
   let query = {}
   let headers = {}
@@ -139,7 +139,7 @@ export const authorizeAccessCodeWithBasicAuthentication = ( { auth, redirectUrl
   return authActions.authorizeRequest({body: buildFormData(form), name, url: schema.get("tokenUrl"), auth, headers})
 }
 
-export const authorizeRequest = ( data ) => ( { fn, authActions, errActions, authSelectors } ) => {
+export const authorizeRequest = ( data ) => ( { fn, getConfigs, authActions, errActions, authSelectors } ) => {
   let { body, query={}, headers={}, name, url, auth } = data
   let { additionalQueryStringParams } = authSelectors.getConfigs() || {}
   let fetchUrl = url
@@ -158,7 +158,9 @@ export const authorizeRequest = ( data ) => ( { fn, authActions, errActions, aut
     method: "post",
     headers: _headers,
     query: query,
-    body: body
+    body: body,
+    requestInterceptor: getConfigs().requestInterceptor,
+    responseInterceptor: getConfigs().responseInterceptor
   })
   .then(function (response) {
     let token = JSON.parse(response.data)

src/core/plugins/auth/selectors.js

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

src/core/plugins/err/actions.js

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

src/core/plugins/err/reducers.js

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

src/core/plugins/oas3/actions.js

@@ -7,10 +7,10 @@ export const UPDATE_REQUEST_CONTENT_TYPE = "oas3_set_request_content_type"
 export const UPDATE_RESPONSE_CONTENT_TYPE = "oas3_set_response_content_type"
 export const UPDATE_SERVER_VARIABLE_VALUE = "oas3_set_server_variable_value"
 
-export function setSelectedServer (selectedServerUrl) {
+export function setSelectedServer (selectedServerUrl, namespace) {
   return {
     type: UPDATE_SELECTED_SERVER,
-    payload: selectedServerUrl
+    payload: {selectedServerUrl, namespace}
   }
 }
 
@@ -28,16 +28,16 @@ export function setRequestContentType ({ value, pathMethod }) {
   }
 }
 
-export function setResponseContentType ({ value, pathMethod }) {
+export function setResponseContentType ({ value, path, method }) {
   return {
     type: UPDATE_RESPONSE_CONTENT_TYPE,
-    payload: { value, pathMethod }
+    payload: { value, path, method }
   }
 }
 
-export function setServerVariableValue ({ server, key, val }) {
+export function setServerVariableValue ({ server, namespace, key, val }) {
   return {
     type: UPDATE_SERVER_VARIABLE_VALUE,
-    payload: { server, key, val }
+    payload: { server, namespace, key, val }
   }
 }

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

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

src/core/plugins/oas3/components/index.js

@@ -4,6 +4,7 @@ import OperationLink from "./operation-link.jsx"
 import Servers from "./servers"
 import RequestBodyEditor from "./request-body-editor"
 import HttpAuth from "./http-auth"
+import OperationServers from "./operation-servers"
 
 export default {
   Callbacks,
@@ -11,5 +12,6 @@ export default {
   RequestBody,
   Servers,
   RequestBodyEditor,
+  OperationServers,
   operationLink: OperationLink
 }

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

@@ -0,0 +1,102 @@
+import React from "react"
+import PropTypes from "prop-types"
+import ImPropTypes from "react-immutable-proptypes"
+
+export default class OperationServers extends React.Component {
+  static propTypes = {
+    // for self
+    path: PropTypes.string.isRequired,
+    method: PropTypes.string.isRequired,
+    operationServers: ImPropTypes.list,
+    pathServers: ImPropTypes.list,
+    setSelectedServer: PropTypes.func.isRequired,
+    setServerVariableValue: PropTypes.func.isRequired,
+    getSelectedServer: PropTypes.func.isRequired,
+    getServerVariable: PropTypes.func.isRequired,
+    getEffectiveServerValue: PropTypes.func.isRequired,
+
+    // utils
+    getComponent: PropTypes.func.isRequired
+  }
+
+  setSelectedServer = (server) => {
+    const { path, method } = this.props
+    // FIXME: we should be keeping up with this in props/state upstream of us
+    // instead of cheating™ with `forceUpdate`
+    this.forceUpdate()
+    return this.props.setSelectedServer(server, `${path}:${method}`)
+  }
+
+  setServerVariableValue = (obj) => {
+    const { path, method } = this.props
+    // FIXME: we should be keeping up with this in props/state upstream of us
+    // instead of cheating™ with `forceUpdate`
+    this.forceUpdate()
+    return this.props.setServerVariableValue({
+      ...obj,
+      namespace: `${path}:${method}`
+    })
+  }
+
+  getSelectedServer = () => {
+    const { path, method } = this.props
+    return this.props.getSelectedServer(`${path}:${method}`)
+  }
+
+  getServerVariable = (server, key) => {
+    const { path, method } = this.props
+    return this.props.getServerVariable({
+      namespace: `${path}:${method}`,
+      server
+    }, key)
+  }
+
+  getEffectiveServerValue = (server) => {
+    const { path, method } = this.props
+    return this.props.getEffectiveServerValue({
+      server,
+      namespace: `${path}:${method}`
+    })
+  }
+
+  render() {
+    const {
+      // for self
+      operationServers,
+      pathServers,
+
+      // util
+      getComponent
+    } = this.props
+
+    if(!operationServers && !pathServers) {
+      return null
+    }
+
+    const Servers = getComponent("Servers")
+
+    const serversToDisplay = operationServers || pathServers
+    const displaying = operationServers ? "operation" : "path"
+
+    return <div className="opblock-section operation-servers">
+      <div className="opblock-section-header">
+        <div className="tab-header">
+          <h4 className="opblock-title">Servers</h4>
+        </div>
+      </div>
+      <div className="opblock-description-wrapper">
+        <h4 className="message">
+          These {displaying}-level options override the global server options.
+        </h4>
+        <Servers
+          servers={serversToDisplay}
+          currentServer={this.getSelectedServer()}
+          setSelectedServer={this.setSelectedServer}
+          setServerVariableValue={this.setServerVariableValue}
+          getServerVariable={this.getServerVariable}
+          getEffectiveServerValue={this.getEffectiveServerValue}
+          />
+      </div>
+    </div>
+  }
+}

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

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

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

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

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

@@ -15,7 +15,11 @@ export default class Servers extends React.Component {
   }
 
   componentDidMount() {
-    let { servers } = this.props
+    let { servers, currentServer } = this.props
+
+    if(currentServer) {
+      return
+    }
 
     //fire 'change' event to set default 'value' of select
     this.setServer(servers.first().get("url"))
@@ -93,9 +97,8 @@ export default class Servers extends React.Component {
     let shouldShowVariableUI = currentServerVariableDefs.size !== 0
 
     return (
-      <div>
+      <div className="servers">
         <label htmlFor="servers">
-          <span className="servers-title">Servers</span>
           <select onChange={ this.onServerChange }>
             { servers.valueSeq().map(
               ( server ) =>
@@ -109,13 +112,14 @@ export default class Servers extends React.Component {
         </label>
         { shouldShowVariableUI ?
           <div>
-          <h4>Server variables</h4>
+
             <div className={"computed-url"}>
               Computed URL:
               <code>
                 {getEffectiveServerValue(currentServer)}
               </code>
             </div>
+            <h4>Server variables</h4>
             <table>
               <tbody>
                 {

src/core/plugins/oas3/reducers.js

@@ -7,8 +7,9 @@ import {
 } from "./actions"
 
 export default {
-  [UPDATE_SELECTED_SERVER]: (state, { payload: selectedServerUrl } ) =>{
+  [UPDATE_SELECTED_SERVER]: (state, { payload: { selectedServerUrl, namespace } } ) =>{
-    return state.setIn( [ "selectedServer" ], selectedServerUrl)
+    const path = namespace ? [ namespace, "selectedServer"] : [ "selectedServer"]
+    return state.setIn( path, selectedServerUrl)
   },
   [UPDATE_REQUEST_BODY_VALUE]: (state, { payload: { value, pathMethod } } ) =>{
     let [path, method] = pathMethod
@@ -18,11 +19,11 @@ export default {
     let [path, method] = pathMethod
     return state.setIn( [ "requestData", path, method, "requestContentType" ], value)
   },
-  [UPDATE_RESPONSE_CONTENT_TYPE]: (state, { payload: { value, pathMethod } } ) =>{
+  [UPDATE_RESPONSE_CONTENT_TYPE]: (state, { payload: { value, path, method } } ) =>{
-    let [path, method] = pathMethod
     return state.setIn( [ "requestData", path, method, "responseContentType" ], value)
   },
-  [UPDATE_SERVER_VARIABLE_VALUE]: (state, { payload: { server, key, val } } ) =>{
+  [UPDATE_SERVER_VARIABLE_VALUE]: (state, { payload: { server, namespace, key, val } } ) =>{
-    return state.setIn( [ "serverVariableValues", server, key ], val)
+    const path = namespace ? [ namespace, "serverVariableValues", server, key ] : [ "serverVariableValues", server, key ]
+    return state.setIn(path, val)
   },
 }

src/core/plugins/oas3/selectors.js

@@ -15,8 +15,9 @@ function onlyOAS3(selector) {
   }
 }
 
-export const selectedServer = onlyOAS3(state => {
+export const selectedServer = onlyOAS3((state, namespace) => {
-    return state.getIn(["selectedServer"]) || ""
+    const path = namespace ? [namespace, "selectedServer"] : ["selectedServer"]
+    return state.getIn(path) || ""
   }
 )
 
@@ -35,19 +36,68 @@ export const responseContentType = onlyOAS3((state, path, method) => {
   }
 )
 
-export const serverVariableValue = onlyOAS3((state, server, key) => {
+export const serverVariableValue = onlyOAS3((state, locationData, key) => {
-    return state.getIn(["serverVariableValues", server, key]) || null
+    let path
+
+    // locationData may take one of two forms, for backwards compatibility
+    // Object: ({server, namespace?}) or String:(server)
+    if(typeof locationData !== "string") {
+      const { server, namespace } = locationData
+      if(namespace) {
+        path = [namespace, "serverVariableValues", server, key]
+      } else {
+        path = ["serverVariableValues", server, key]
+      }
+    } else {
+      const server = locationData
+      path = ["serverVariableValues", server, key]
+    }
+
+    return state.getIn(path) || null
   }
 )
 
-export const serverVariables = onlyOAS3((state, server) => {
+export const serverVariables = onlyOAS3((state, locationData) => {
-    return state.getIn(["serverVariableValues", server]) || OrderedMap()
+    let path
+
+    // locationData may take one of two forms, for backwards compatibility
+    // Object: ({server, namespace?}) or String:(server)
+    if(typeof locationData !== "string") {
+      const { server, namespace } = locationData
+      if(namespace) {
+        path = [namespace, "serverVariableValues", server]
+      } else {
+        path = ["serverVariableValues", server]
+      }
+    } else {
+      const server = locationData
+      path = ["serverVariableValues", server]
+    }
+
+    return state.getIn(path) || OrderedMap()
   }
 )
 
-export const serverEffectiveValue = onlyOAS3((state, server) => {
+export const serverEffectiveValue = onlyOAS3((state, locationData) => {
-    let varValues = state.getIn(["serverVariableValues", server]) || OrderedMap()
+    var varValues, serverValue
-    let str = server
+
+    // locationData may take one of two forms, for backwards compatibility
+    // Object: ({server, namespace?}) or String:(server)
+    if(typeof locationData !== "string") {
+      const { server, namespace } = locationData
+      serverValue = server
+      if(namespace) {
+        varValues = state.getIn([namespace, "serverVariableValues", serverValue])
+      } else {
+        varValues = state.getIn(["serverVariableValues", serverValue])
+      }
+    } else {
+      serverValue = locationData
+      varValues = state.getIn(["serverVariableValues", serverValue])
+    }
+
+    varValues = varValues || OrderedMap()
+    let str = serverValue
 
     varValues.map((val, key) => {
       str = str.replace(new RegExp(`{${key}}`, "g"), val)

src/core/plugins/oas3/spec-extensions/wrap-selectors.js

@@ -48,6 +48,10 @@ export const definitions = onlyOAS3(createSelector(
   spec => spec.getIn(["components", "schemas"]) || Map()
 ))
 
+export const hasHost = onlyOAS3((state) => {
+  return spec(state).hasIn(["servers", 0])
+})
+
 export const securityDefinitions = onlyOAS3(createSelector(
   spec,
   spec => spec.getIn(["components", "securitySchemes"]) || null

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

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

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

@@ -22,6 +22,7 @@ class Parameters extends Component {
     specActions: PropTypes.object.isRequired,
     operation: PropTypes.object.isRequired,
     getComponent: PropTypes.func.isRequired,
+    getConfigs: PropTypes.func.isRequired,
     specSelectors: PropTypes.object.isRequired,
     oas3Actions: PropTypes.object.isRequired,
     oas3Selectors: PropTypes.object.isRequired,
@@ -87,6 +88,7 @@ class Parameters extends Component {
 
       fn,
       getComponent,
+      getConfigs,
       specSelectors,
       oas3Actions,
       oas3Selectors,
@@ -142,6 +144,7 @@ class Parameters extends Component {
                       <ParameterRow fn={ fn }
                         getComponent={ getComponent }
                         specPath={[...specPath, i]}
+                        getConfigs={ getConfigs }
                         param={ parameter }
                         key={ parameter.get( "name" ) }
                         onChange={ this.onChange }

src/core/plugins/spec/actions.js

@@ -17,7 +17,7 @@ export const SET_MUTATED_REQUEST = "spec_set_mutated_request"
 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 CLEAR_VALIDATE_PARAMS = "spec_clear_validate_param"
 export const UPDATE_OPERATION_VALUE = "spec_update_operation_value"
 export const UPDATE_RESOLVED = "spec_update_resolved"
 export const SET_SCHEME = "set_scheme"
@@ -161,7 +161,7 @@ export const validateParams = ( payload, isOAS3 ) =>{
 
 export function clearValidateParams( payload ){
   return {
-    type: ClEAR_VALIDATE_PARAMS,
+    type: CLEAR_VALIDATE_PARAMS,
     payload:{ pathMethod: payload }
   }
 }
@@ -228,9 +228,18 @@ export const executeRequest = (req) =>
     }
 
     if(specSelectors.isOAS3()) {
-      // OAS3 request feature support
+      const namespace = `${pathName}:${method}`
-      req.server = oas3Selectors.selectedServer()
+
-      req.serverVariables = oas3Selectors.serverVariables(req.server).toJS()
+      req.server = oas3Selectors.selectedServer(namespace) || oas3Selectors.selectedServer()
+
+      const namespaceVariables = oas3Selectors.serverVariables({
+        server: req.server,
+        namespace
+      }).toJS()
+      const globalVariables = oas3Selectors.serverVariables({ server: req.server }).toJS()
+
+      req.serverVariables = Object.keys(namespaceVariables).length ? namespaceVariables : globalVariables
+
       req.requestContentType = oas3Selectors.requestContentType(pathName, method)
       req.responseContentType = oas3Selectors.responseContentType(pathName, method) || "*/*"
       const requestBody = oas3Selectors.requestBodyValue(pathName, method)

src/core/plugins/spec/reducers.js

@@ -15,7 +15,7 @@ import {
   UPDATE_OPERATION_VALUE,
   CLEAR_RESPONSE,
   CLEAR_REQUEST,
-  ClEAR_VALIDATE_PARAMS,
+  CLEAR_VALIDATE_PARAMS,
   SET_SCHEME
 } from "./actions"
 
@@ -64,7 +64,7 @@ export default {
       })
     })
   },
-  [ClEAR_VALIDATE_PARAMS]: ( state, { payload:  { pathMethod } } ) => {
+  [CLEAR_VALIDATE_PARAMS]: ( state, { payload:  { pathMethod } } ) => {
     return state.updateIn( [ "resolved", "paths", ...pathMethod, "parameters" ], fromJS([]), parameters => {
       return parameters.withMutations( parameters => {
         for ( let i = 0, len = parameters.count(); i < len; i++ ) {

src/core/plugins/spec/selectors.js

@@ -4,8 +4,6 @@ import { fromJS, Set, Map, OrderedMap, List } from "immutable"
 
 const DEFAULT_TAG = "default"
 
-const OPERATION_METHODS = ["get", "put", "post", "delete", "options", "head", "patch"]
-
 const state = state => {
   return state || Map()
 }
@@ -97,9 +95,6 @@ export const operations = createSelector(
         return {}
       }
       path.forEach((operation, method) => {
-        if(OPERATION_METHODS.indexOf(method) === -1) {
-          return
-        }
         list = list.push(fromJS({
           path: pathName,
           method,

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

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

src/core/presets/base.js

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

src/core/system.js

@@ -1,3 +1,4 @@
+import React from "react"
 import { createStore, applyMiddleware, bindActionCreators, compose } from "redux"
 import Im, { fromJS, Map } from "immutable"
 import deepExtend from "deep-extend"
@@ -97,7 +98,8 @@ export default class Store {
       getComponents: this.getComponents.bind(this),
       getState: this.getStore().getState,
       getConfigs: this._getConfigs.bind(this),
-      Im
+      Im,
+      React
     }, this.system.rootInjects || {})
   }
 
@@ -264,8 +266,9 @@ export default class Store {
 
     dispatch = dispatch || this.getStore().dispatch
 
-    const process = creator =>{
+    const actions = this.getActions()
 
+    const process = creator =>{
       if( typeof( creator ) !== "function" ) {
         return objMap(creator, prop => process(prop))
       }
@@ -284,13 +287,12 @@ export default class Store {
       }
 
     }
-    return objMap(this.getActions(), actionCreator => bindActionCreators( process( actionCreator ), dispatch ) )
+    return objMap(actions, actionCreator => bindActionCreators( process( actionCreator ), dispatch ) )
   }
 
   getMapStateToProps() {
     return () => {
-      let obj = Object.assign({}, this.getSystem())
+      return Object.assign({}, this.getSystem())
-      return obj
     }
   }
 
@@ -334,18 +336,23 @@ function systemExtend(dest={}, src={}) {
   // Parses existing components in the system, and prepares them for wrapping via getComponents
   if(src.wrapComponents) {
     objMap(src.wrapComponents, (wrapperFn, key) => {
-      const ori = dest.components[key]
+      const ori = dest.components && dest.components[key]
       if(ori && Array.isArray(ori)) {
         dest.components[key] = ori.concat([wrapperFn])
+        delete src.wrapComponents[key]
       } else if(ori) {
         dest.components[key] = [ori, wrapperFn]
-      } else {
+        delete src.wrapComponents[key]
-        dest.components[key] = null
       }
     })
 
+    if(!Object.keys(src.wrapComponents).length) {
+      // only delete wrapComponents if we've matched all of our wrappers to components
+      // this handles cases where the component to wrap may be out of our scope,
+      // but a higher recursive `combinePlugins` call will be able to handle it.
       delete src.wrapComponents
     }
+  }
 
 
   // Account for wrapActions, make it an array and append to it

src/core/utils.js

@@ -459,6 +459,13 @@ export const validateMinLength = (val, min) => {
   }
 }
 
+export const validatePattern = (val, rxPattern) => {
+  var patt = new RegExp(rxPattern)
+  if (!patt.test(val)) {
+      return "Value must follow pattern " + rxPattern
+  }
+}
+
 // validation of parameters before execute
 export const validateParam = (param, isXml, isOAS3 = false) => {
   let errors = []
@@ -466,12 +473,17 @@ export const validateParam = (param, isXml, isOAS3 = false) => {
   let required = param.get("required")
 
   let paramDetails = isOAS3 ? param.get("schema") : param
+
+  if(!paramDetails) return errors
+
   let maximum = paramDetails.get("maximum")
   let minimum = paramDetails.get("minimum")
   let type = paramDetails.get("type")
   let format = paramDetails.get("format")
   let maxLength = paramDetails.get("maxLength")
   let minLength = paramDetails.get("minLength")
+  let pattern = paramDetails.get("pattern")
+
 
   /*
     If the parameter is required OR the parameter has a value (meaning optional, but filled in)
@@ -479,14 +491,24 @@ export const validateParam = (param, isXml, isOAS3 = false) => {
     Only bother validating the parameter if the type was specified.
   */
   if ( type && (required || value) ) {
-    // These checks should evaluate to true if the parameter's value is valid
+    // These checks should evaluate to true if there is a parameter
-    let stringCheck = type === "string" && value && !validateString(value)
+    let stringCheck = type === "string" && value
     let arrayCheck = type === "array" && Array.isArray(value) && value.length
     let listCheck = type === "array" && Im.List.isList(value) && value.count()
     let fileCheck = type === "file" && value instanceof win.File
-    let booleanCheck = type === "boolean" && !validateBoolean(value)
+    let booleanCheck = type === "boolean" && (value || value === false)
-    let numberCheck = type === "number" && !validateNumber(value) // validateNumber returns undefined if the value is a number
+    let numberCheck = type === "number" && (value || value === 0)
-    let integerCheck = type === "integer" && !validateInteger(value) // validateInteger returns undefined if the value is an integer
+    let integerCheck = type === "integer" && (value || value === 0)
+
+    if ( required && !(stringCheck || arrayCheck || listCheck || fileCheck || booleanCheck || numberCheck || integerCheck) ) {
+      errors.push("Required field is not provided")
+      return errors
+    }
+
+    if (pattern) {
+      let err = validatePattern(value, pattern)
+      if (err) errors.push(err)
+    }
 
     if (maxLength || maxLength === 0) {
       let err = validateMaxLength(value, maxLength)
@@ -498,11 +520,6 @@ export const validateParam = (param, isXml, isOAS3 = false) => {
       if (err) errors.push(err)
     }
 
-    if ( required && !(stringCheck || arrayCheck || listCheck || fileCheck || booleanCheck || numberCheck || integerCheck) ) {
-      errors.push("Required field is not provided")
-      return errors
-    }
-
     if (maximum || maximum === 0) {
       let err = validateMaximum(value, maximum)
       if (err) errors.push(err)
@@ -590,7 +607,10 @@ export const getSampleSchema = (schema, contentType="", config={}) => {
 
 export const parseSearch = () => {
   let map = {}
-  let search = window.location.search
+  let search = win.location.search
+
+  if(!search)
+    return {}
 
   if ( search != "" ) {
     let params = search.substr(1).split("&")
@@ -678,3 +698,5 @@ export function getAcceptControllingResponse(responses) {
 
 export const createDeepLinkPath = (str) => typeof str == "string" || str instanceof String ? str.trim().replace(/\s/g, "_") : ""
 export const escapeDeepLinkPath = (str) => cssEscape( createDeepLinkPath(str) )
+
+export const getExtensions = (defObj) => defObj.filter((v, k) => /^x-/.test(k))

src/plugins/topbar/topbar.jsx

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

src/polyfills.js

@@ -1,5 +1,10 @@
 // Promise global, Used ( at least ) by 'whatwg-fetch'. And required by IE 11
 
-if(!window.Promise) {
+if(typeof Promise === "undefined") {
   require("core-js/fn/promise")
 }
+
+// Required by IE 11
+if(!String.prototype.startsWith) {
+  require("core-js/es6/string")
+}

src/style/_authorize.scss

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

src/style/_buttons.scss

@@ -65,6 +65,7 @@
     &.execute
     {
         animation: swagger-ui-pulse 2s infinite;
+        will-change: transform;
         background-color: $btn-execute-background-color;
         color: $btn-execute-font-color;
         border-color: $btn-execute-border-color;

src/style/_layout.scss

@@ -565,6 +565,7 @@
         p
         {
             margin: 0;
+            @include text_code($response-col-description-inner-markdown-font-color);
         }
 
         a
@@ -575,6 +576,12 @@
                 color: $response-col-description-inner-markdown-link-font-color-hover;
             }
         }
+
+        th
+        {
+            @include text_code($response-col-description-inner-markdown-font-color);
+            border-bottom: 1px solid $response-col-description-inner-markdown-font-color;
+        }
     }
 }
 
@@ -643,78 +650,6 @@
     }
 }
 
-.server-container
-{
-    margin: 0 0 20px 0;
-    padding: 30px 0;
-
-    background: $server-container-background-color;
-    box-shadow: 0 1px 2px 0 rgba($server-container-box-shadow-color,.15);
-
-    .computed-url {
-      margin: 2em 0;
-
-      code {
-        color: $server-container-computed-url-code-font-color;
-        display: inline-block;
-        padding: 4px;
-        font-size: 16px;
-        margin: 0 1em;
-        font-style: italic;
-      }
-    }
-
-    .servers
-    {
-        display: flex;
-        align-items: center;
-
-        .servers-title {
-          margin-right: 1em;
-        }
-
-         > label
-        {
-            font-size: 12px;
-
-            display: flex;
-            flex-direction: column;
-
-            margin: -20px 15px 0 0;
-
-            @include text_headline();
-
-            select
-            {
-                min-width: 130px;
-            }
-        }
-
-        table {
-            tr {
-                width: 30em;
-            }
-            td {
-                display: inline-block;
-                max-width: 15em;
-                vertical-align: middle;
-                padding-top: 10px;
-                padding-bottom: 10px;
-
-                &:first-of-type {
-                  padding-right: 2em;
-                }
-
-                input {
-                    width: 100%;
-                    height: 100%;
-                }
-            }
-        }
-    }
-}
-
-
 .loading-container
 {
     padding: 40px 0 60px;

src/style/_models.scss

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

src/style/_servers.scss

@@ -0,0 +1,74 @@
+.servers
+{
+     > label
+    {
+        font-size: 12px;
+
+        margin: -20px 15px 0 0;
+
+        @include text_headline();
+
+        select
+        {
+            min-width: 130px;
+        }
+    }
+
+    h4.message {
+      padding-bottom: 2em;
+    }
+
+    table {
+        tr {
+            width: 30em;
+        }
+        td {
+            display: inline-block;
+            max-width: 15em;
+            vertical-align: middle;
+            padding-top: 10px;
+            padding-bottom: 10px;
+
+            &:first-of-type {
+              padding-right: 2em;
+            }
+
+            input {
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
+
+    .computed-url {
+      margin: 2em 0;
+
+      code {
+        display: inline-block;
+        padding: 4px;
+        font-size: 16px;
+        margin: 0 1em;
+      }
+    }
+}
+
+
+.global-server-container
+{
+    margin: 0 0 20px 0;
+    padding: 30px 0;
+
+    background: $server-container-background-color;
+    box-shadow: 0 1px 2px 0 rgba($server-container-box-shadow-color,.15);
+
+    .servers-title {
+      line-height: 2em;
+      font-weight: bold;
+    }
+}
+
+.operation-servers {
+  h4.message {
+    margin-bottom: 2em;
+  }
+}

src/style/_table.scss

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

src/style/main.scss

@@ -9,6 +9,7 @@
     @import 'form';
     @import 'modal';
     @import 'models';
+    @import 'servers';
     @import 'table';
     @import 'topbar';
     @import 'information';

test/components/json-schema-form.js

@@ -0,0 +1,154 @@
+/* eslint-env mocha */
+import React from "react"
+import expect, { createSpy } from "expect"
+import { Select, Input } from "components/layout-utils"
+import { render } from "enzyme"
+import * as JsonSchemaComponents from "core/json-schema-components"
+import { JsonSchemaForm } from "core/json-schema-components"
+
+const components = {...JsonSchemaComponents, Select, Input}
+
+const getComponentStub = (name) => {
+  if(components[name]) return components[name]
+
+  return null
+}
+
+describe("<JsonSchemaForm/>", function(){
+  describe("strings", function() {
+    it("should render the correct options for a string enum parameter", function(){
+
+      let props = {
+        getComponent: getComponentStub,
+        value: "",
+        onChange: () => {},
+        keyName: "",
+        fn: {},
+        schema: {
+          type: "string",
+          enum: ["one", "two"]
+        }
+      }
+
+      let wrapper = render(<JsonSchemaForm {...props}/>)
+
+      expect(wrapper.find("select").length).toEqual(1)
+      expect(wrapper.find("select option").length).toEqual(3)
+      expect(wrapper.find("select option").eq(0).text()).toEqual("--")
+      expect(wrapper.find("select option").eq(1).text()).toEqual("one")
+      expect(wrapper.find("select option").eq(2).text()).toEqual("two")
+    })
+
+    it("should render the correct options for a required string enum parameter", function(){
+
+      let props = {
+        getComponent: getComponentStub,
+        value: "",
+        onChange: () => {},
+        keyName: "",
+        fn: {},
+        required: true,
+        schema: {
+          type: "string",
+          enum: ["one", "two"]
+        }
+      }
+
+      let wrapper = render(<JsonSchemaForm {...props}/>)
+
+      expect(wrapper.find("select").length).toEqual(1)
+      expect(wrapper.find("select option").length).toEqual(2)
+      expect(wrapper.find("select option").eq(0).text()).toEqual("one")
+      expect(wrapper.find("select option").eq(1).text()).toEqual("two")
+    })
+  })
+  describe("booleans", function() {
+    it("should render the correct options for a boolean parameter", function(){
+
+      let props = {
+        getComponent: getComponentStub,
+        value: "",
+        onChange: () => {},
+        keyName: "",
+        fn: {},
+        schema: {
+          type: "boolean"
+        }
+      }
+
+      let wrapper = render(<JsonSchemaForm {...props}/>)
+
+      expect(wrapper.find("select").length).toEqual(1)
+      expect(wrapper.find("select option").length).toEqual(3)
+      expect(wrapper.find("select option").eq(0).text()).toEqual("--")
+      expect(wrapper.find("select option").eq(1).text()).toEqual("true")
+      expect(wrapper.find("select option").eq(2).text()).toEqual("false")
+    })
+
+    it("should render the correct options for a required enum boolean parameter", function(){
+
+      let props = {
+        getComponent: getComponentStub,
+        value: "",
+        onChange: () => {},
+        keyName: "",
+        fn: {},
+        required: true,
+        schema: {
+          type: "boolean",
+          enum: ["true"]
+        }
+      }
+
+      let wrapper = render(<JsonSchemaForm {...props}/>)
+
+      expect(wrapper.find("select").length).toEqual(1)
+      expect(wrapper.find("select option").length).toEqual(1)
+      expect(wrapper.find("select option").first().text()).toEqual("true")
+    })
+  })
+  describe("unknown types", function() {
+    it("should render unknown types as strings", function(){
+
+      let props = {
+        getComponent: getComponentStub,
+        value: "yo",
+        onChange: () => {},
+        keyName: "",
+        fn: {},
+        schema: {
+          type: "NotARealType"
+        }
+      }
+
+
+      let wrapper = render(<JsonSchemaForm {...props}/>)
+
+      expect(wrapper.find("input").length).toEqual(1)
+      // expect(wrapper.find("select input").length).toEqual(1)
+      // expect(wrapper.find("select option").first().text()).toEqual("true")
+    })
+
+    it("should render unknown types as strings when a format is passed", function(){
+
+      let props = {
+        getComponent: getComponentStub,
+        value: "yo",
+        onChange: () => {},
+        keyName: "",
+        fn: {},
+        schema: {
+          type: "NotARealType",
+          format: "NotARealFormat"
+        }
+      }
+
+
+      let wrapper = render(<JsonSchemaForm {...props}/>)
+
+      expect(wrapper.find("input").length).toEqual(1)
+      // expect(wrapper.find("select input").length).toEqual(1)
+      // expect(wrapper.find("select option").first().text()).toEqual("true")
+    })
+  })
+})

test/components/object-model.js

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

test/components/operations.js

@@ -0,0 +1,123 @@
+/* eslint-env mocha */
+import React from "react"
+import expect, { createSpy } from "expect"
+import { render } from "enzyme"
+import { fromJS } from "immutable"
+import Operations from "components/operations"
+import {Collapse} from "components/layout-utils"
+
+const components = {
+  Collapse,
+  OperationContainer: ({ path, method }) => <span className="mocked-op" id={`${path}-${method}`} />
+}
+
+describe("<Operations/>", function(){
+  it("should render a Swagger2 `get` method, but not a `trace` or `foo` method", function(){
+
+    let props = {
+      fn: {},
+      specActions: {},
+      layoutActions: {},
+      getComponent: (name)=> {
+        return components[name] || null
+      },
+      getConfigs: () => {
+        return {}
+      },
+      specSelectors: {
+        isOAS3() { return false },
+        taggedOperations() {
+          return fromJS({
+          "default": {
+            "operations": [
+              {
+                "path": "/pets/{id}",
+                "method": "get"
+              },
+              {
+                "path": "/pets/{id}",
+                "method": "trace"
+              },
+              {
+                "path": "/pets/{id}",
+                "method": "foo"
+              },
+            ]
+          }
+        })
+        },
+      },
+      layoutSelectors: {
+        currentFilter() {
+          return null
+        },
+        isShown() {
+          return true
+        },
+        show() {
+          return true
+        }
+      }
+    }
+
+    let wrapper = render(<Operations {...props}/>)
+
+    expect(wrapper.find("span.mocked-op").length).toEqual(1)
+    expect(wrapper.find("span.mocked-op").eq(0).attr("id")).toEqual("/pets/{id}-get")
+  })
+
+  it("should render an OAS3 `get` and `trace` method, but not a `foo` method", function(){
+
+    let props = {
+      fn: {},
+      specActions: {},
+      layoutActions: {},
+      getComponent: (name)=> {
+        return components[name] || null
+      },
+      getConfigs: () => {
+        return {}
+      },
+      specSelectors: {
+        isOAS3() { return true },
+        taggedOperations() {
+          return fromJS({
+          "default": {
+            "operations": [
+              {
+                "path": "/pets/{id}",
+                "method": "get"
+              },
+              {
+                "path": "/pets/{id}",
+                "method": "trace"
+              },
+              {
+                "path": "/pets/{id}",
+                "method": "foo"
+              },
+            ]
+          }
+        })
+        },
+      },
+      layoutSelectors: {
+        currentFilter() {
+          return null
+        },
+        isShown() {
+          return true
+        },
+        show() {
+          return true
+        }
+      }
+    }
+
+    let wrapper = render(<Operations {...props}/>)
+
+    expect(wrapper.find("span.mocked-op").length).toEqual(2)
+    expect(wrapper.find("span.mocked-op").eq(0).attr("id")).toEqual("/pets/{id}-get")
+    expect(wrapper.find("span.mocked-op").eq(1).attr("id")).toEqual("/pets/{id}-trace")
+  })
+})

test/components/primitive-model.js

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

test/core/plugins/auth/selectors.js

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

test/core/plugins/oas3/state-integration.js

@@ -0,0 +1,359 @@
+import expect from "expect"
+import { fromJS, OrderedMap } from "immutable"
+
+import {
+  selectedServer,
+  serverVariableValue,
+  serverVariables,
+  serverEffectiveValue
+} from "corePlugins/oas3/selectors"
+
+import reducers from "corePlugins/oas3/reducers"
+
+import {
+  setSelectedServer,
+  setServerVariableValue,
+} from "corePlugins/oas3/actions"
+
+describe("OAS3 plugin - state", function() {
+  describe("action + reducer + selector integration", function() {
+    describe("selectedServer", function() {
+      it("should set and get a global selectedServer", function() {
+        const state = new OrderedMap()
+        const system = {
+          // needed to handle `onlyOAS3` wrapper
+          getSystem() {
+            return {
+              specSelectors: {
+                specJson: () => {
+                  return fromJS({ openapi: "3.0.0" })
+                }
+              }
+            }
+          }
+        }
+
+        // Create the action
+        const action = setSelectedServer("http://google.com")
+
+        // Collect the new state
+        const newState = reducers["oas3_set_servers"](state, action)
+
+        // Get the value with the selector
+        const res = selectedServer(newState)(system)
+
+        expect(res).toEqual("http://google.com")
+      })
+
+      it("should set and get a namespaced selectedServer", function() {
+        const state = fromJS({
+          selectedServer: "http://yahoo.com"
+        })
+        const system = {
+          // needed to handle `onlyOAS3` wrapper
+          getSystem() {
+            return {
+              specSelectors: {
+                specJson: () => {
+                  return fromJS({ openapi: "3.0.0" })
+                }
+              }
+            }
+          }
+        }
+
+        // Create the action
+        const action = setSelectedServer("http://google.com", "myOperation")
+
+        // Collect the new state
+        const newState = reducers["oas3_set_servers"](state, action)
+
+        // Get the value with the selector
+        const res = selectedServer(newState, "myOperation")(system)
+
+        // Get the global selected server
+        const globalRes = selectedServer(newState)(system)
+
+        expect(res).toEqual("http://google.com")
+        expect(globalRes).toEqual("http://yahoo.com")
+      })
+    })
+
+    describe("serverVariableValue", function() {
+      it("should set and get a global serverVariableValue", function() {
+        const state = new OrderedMap()
+        const system = {
+          // needed to handle `onlyOAS3` wrapper
+          getSystem() {
+            return {
+              specSelectors: {
+                specJson: () => {
+                  return fromJS({ openapi: "3.0.0" })
+                }
+              }
+            }
+          }
+        }
+
+        // Create the action
+        const action = setServerVariableValue({
+          server: "google.com",
+          key: "foo",
+          val: "bar"
+        })
+
+        // Collect the new state
+        const newState = reducers["oas3_set_server_variable_value"](state, action)
+
+        // Get the value with the selector
+        const res = serverVariableValue(newState, "google.com", "foo")(system)
+
+        expect(res).toEqual("bar")
+      })
+      it("should set and get a namespaced serverVariableValue", function() {
+        const state = fromJS({
+          serverVariableValues: {
+            "google.com": {
+              foo: "123"
+            }
+          }
+        })
+        const system = {
+          // needed to handle `onlyOAS3` wrapper
+          getSystem() {
+            return {
+              specSelectors: {
+                specJson: () => {
+                  return fromJS({ openapi: "3.0.0" })
+                }
+              }
+            }
+          }
+        }
+
+        // Create the action
+        const action = setServerVariableValue({
+          namespace: "myOperation",
+          server: "google.com",
+          key: "foo",
+          val: "bar"
+        })
+
+        // Collect the new state
+        const newState = reducers["oas3_set_server_variable_value"](state, action)
+
+        // Get the value with the selector
+        const res = serverVariableValue(newState, {
+          namespace: "myOperation",
+          server: "google.com"
+        }, "foo")(system)
+
+        // Get the global value, to cross-check
+        const globalRes = serverVariableValue(newState, {
+          server: "google.com"
+        }, "foo")(system)
+
+        expect(res).toEqual("bar")
+        expect(globalRes).toEqual("123")
+      })
+    })
+
+    describe("serverVariables", function() {
+      it("should set and get global serverVariables", function() {
+        const state = new OrderedMap()
+        const system = {
+          // needed to handle `onlyOAS3` wrapper
+          getSystem() {
+            return {
+              specSelectors: {
+                specJson: () => {
+                  return fromJS({ openapi: "3.0.0" })
+                }
+              }
+            }
+          }
+        }
+
+        // Create the action
+        const action = setServerVariableValue({
+          server: "google.com",
+          key: "foo",
+          val: "bar"
+        })
+
+        // Collect the new state
+        const newState = reducers["oas3_set_server_variable_value"](state, action)
+
+        // Get the value with the selector
+        const res = serverVariables(newState, "google.com", "foo")(system)
+
+        expect(res.toJS()).toEqual({
+          foo: "bar"
+        })
+      })
+
+      it("should set and get namespaced serverVariables", function() {
+        const state = fromJS({
+          serverVariableValues: {
+            "google.com": {
+              foo: "123"
+            }
+          }
+        })
+
+        const system = {
+          // needed to handle `onlyOAS3` wrapper
+          getSystem() {
+            return {
+              specSelectors: {
+                specJson: () => {
+                  return fromJS({ openapi: "3.0.0" })
+                }
+              }
+            }
+          }
+        }
+
+        // Create the action
+        const action = setServerVariableValue({
+          namespace: "myOperation",
+          server: "google.com",
+          key: "foo",
+          val: "bar"
+        })
+
+        // Collect the new state
+        const newState = reducers["oas3_set_server_variable_value"](state, action)
+
+        // Get the value with the selector
+        const res = serverVariables(newState, {
+          namespace: "myOperation",
+          server: "google.com"
+        }, "foo")(system)
+
+        // Get the global value, to cross-check
+        const globalRes = serverVariables(newState, {
+          server: "google.com"
+        }, "foo")(system)
+
+        expect(res.toJS()).toEqual({
+          foo: "bar"
+        })
+
+        expect(globalRes.toJS()).toEqual({
+          foo: "123"
+        })
+      })
+    })
+    describe("serverEffectiveValue", function() {
+        it("should set variable values and compute a URL for a namespaced server", function() {
+          const state = fromJS({
+            serverVariableValues: {
+              "google.com/{foo}": {
+                foo: "123"
+              }
+            }
+          })
+
+          const system = {
+            // needed to handle `onlyOAS3` wrapper
+            getSystem() {
+              return {
+                specSelectors: {
+                  specJson: () => {
+                    return fromJS({ openapi: "3.0.0" })
+                  }
+                }
+              }
+            }
+          }
+
+          // Create the action
+          const action = setServerVariableValue({
+            namespace: "myOperation",
+            server: "google.com/{foo}",
+            key: "foo",
+            val: "bar"
+          })
+
+          // Collect the new state
+          const newState = reducers["oas3_set_server_variable_value"](state, action)
+
+          // Get the value with the selector
+          const res = serverEffectiveValue(newState, {
+            namespace: "myOperation",
+            server: "google.com/{foo}"
+          })(system)
+
+          // Get the global value, to cross-check
+          const globalRes = serverEffectiveValue(newState, {
+            server: "google.com/{foo}"
+          })(system)
+
+          expect(res).toEqual("google.com/bar")
+
+          expect(globalRes).toEqual("google.com/123")
+        })
+      })
+
+  })
+  describe("selectors", function() {
+    describe("serverEffectiveValue", function() {
+      it("should compute global serverEffectiveValues", function() {
+        const state = fromJS({
+          serverVariableValues: {
+            "google.com/{foo}/{bar}": {
+              foo: "123",
+              bar: "456"
+            }
+          }
+        })
+        const system = {
+          // needed to handle `onlyOAS3` wrapper
+          getSystem() {
+            return {
+              specSelectors: {
+                specJson: () => {
+                  return fromJS({ openapi: "3.0.0" })
+                }
+              }
+            }
+          }
+        }
+
+        // Get the value with the selector
+        const res = serverEffectiveValue(state, "google.com/{foo}/{bar}")(system)
+
+        expect(res).toEqual("google.com/123/456")
+      })
+
+      it("should handle multiple variable instances", function() {
+        const state = fromJS({
+          serverVariableValues: {
+            "google.com/{foo}/{foo}/{bar}": {
+              foo: "123",
+              bar: "456"
+            }
+          }
+        })
+        const system = {
+          // needed to handle `onlyOAS3` wrapper
+          getSystem() {
+            return {
+              specSelectors: {
+                specJson: () => {
+                  return fromJS({ openapi: "3.0.0" })
+                }
+              }
+            }
+          }
+        }
+
+        // Get the value with the selector
+        const res = serverEffectiveValue(state, "google.com/{foo}/{foo}/{bar}")(system)
+
+        expect(res).toEqual("google.com/123/123/456")
+      })
+    })
+  })
+})