first commit

Dockerfile

@@ -0,0 +1,32 @@
+# Looking for information on environment variables?
+# We don't declare them here — take a look at our docs.
+# https://github.com/swagger-api/swagger-ui/blob/master/docs/usage/configuration.md
+
+FROM nginx:1.19-alpine
+
+RUN apk --no-cache add nodejs
+
+LABEL maintainer="fehguy"
+
+ENV API_KEY "**None**"
+ENV SWAGGER_JSON "/app/swagger.json"
+ENV PORT 8080
+ENV BASE_URL ""
+ENV SWAGGER_JSON_URL ""
+
+COPY ./docker/nginx.conf ./docker/cors.conf /etc/nginx/
+
+# copy swagger files to the `/js` folder
+COPY ./dist/* /usr/share/nginx/html/
+COPY ./docker/run.sh /usr/share/nginx/
+COPY ./docker/configurator /usr/share/nginx/configurator
+
+RUN chmod +x /usr/share/nginx/run.sh && \
+    chmod -R a+rw /usr/share/nginx && \
+    chmod -R a+rw /etc/nginx && \
+    chmod -R a+rw /var && \
+    chmod -R a+rw /var/run
+
+EXPOSE 8080
+
+CMD ["sh", "/usr/share/nginx/run.sh"]

LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright 2020 SmartBear Software Inc.
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

README.md

@@ -0,0 +1,87 @@
+# <img src="https://raw.githubusercontent.com/swagger-api/swagger.io/wordpress/images/assets/SWU-logo-clr.png" width="300">
+
+[![NPM version](https://badge.fury.io/js/swagger-ui.svg)](http://badge.fury.io/js/swagger-ui)
+[![Build Status](https://jenkins.swagger.io/view/OSS%20-%20JavaScript/job/oss-swagger-ui-master/badge/icon?subject=jenkins%20build)](https://jenkins.swagger.io/view/OSS%20-%20JavaScript/job/oss-swagger-ui-master/)
+[![npm audit](https://jenkins.swagger.io/buildStatus/icon?job=oss-swagger-ui-security-audit&subject=npm%20audit)](https://jenkins.swagger.io/job/oss-swagger-ui-security-audit/lastBuild/console)
+![total GitHub contributors](https://img.shields.io/github/contributors-anon/swagger-api/swagger-ui.svg)
+
+![monthly npm installs](https://img.shields.io/npm/dm/swagger-ui.svg?label=npm%20downloads)
+![total docker pulls](https://img.shields.io/docker/pulls/swaggerapi/swagger-ui.svg)
+![monthly packagist installs](https://img.shields.io/packagist/dm/swagger-api/swagger-ui.svg?label=packagist%20installs)
+![gzip size](https://img.shields.io/bundlephobia/minzip/swagger-ui.svg?label=gzip%20size)
+
+**👉🏼 Want to score an easy open-source contribution?** Check out our [Good first issue](https://github.com/swagger-api/swagger-ui/issues?q=is%3Aissue+is%3Aopen+label%3A%22Good+first+issue%22) label.
+
+**🕰️ Looking for the older version of Swagger UI?** Refer to the [*2.x* branch](https://github.com/swagger-api/swagger-ui/tree/2.x).
+
+
+This repository publishes three different NPM modules:
+
+* [swagger-ui](https://www.npmjs.com/package/swagger-ui) is a traditional npm module intended for use in single-page applications that are capable of resolving dependencies (via Webpack, Browserify, etc).
+* [swagger-ui-dist](https://www.npmjs.com/package/swagger-ui-dist) is a dependency-free module that includes everything you need to serve Swagger UI in a server-side project, or a single-page application that can't resolve npm module dependencies.
+* [swagger-ui-react](https://www.npmjs.com/package/swagger-ui-react) is Swagger UI packaged as a React component for use in React applications.
+
+We strongly suggest that you use `swagger-ui` instead of `swagger-ui-dist` if you're building a single-page application, since `swagger-ui-dist` is significantly larger.
+
+If you are looking for plain ol' HTML/JS/CSS, [download the latest release](https://github.com/swagger-api/swagger-ui/releases/latest) and copy the contents of the `/dist` folder to your server.
+
+
+## Compatibility
+The OpenAPI Specification has undergone 5 revisions since initial creation in 2010.  Compatibility between Swagger UI and the OpenAPI Specification is as follows:
+
+Swagger UI Version | Release Date | OpenAPI Spec compatibility | Notes
+------------------ | ------------ | -------------------------- | -----
+3.18.3 | 2018-08-03 | 2.0, 3.0 | [tag v3.18.3](https://github.com/swagger-api/swagger-ui/tree/v3.18.3)
+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)
+2.0.24 | 2014-09-12 | 1.1, 1.2 | [tag v2.0.24](https://github.com/swagger-api/swagger-ui/tree/v2.0.24)
+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
+
+#### 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)
+
+#### Contributing
+- [Contributing](https://github.com/swagger-api/.github/blob/master/CONTRIBUTING.md)
+
+##### Integration Tests
+
+You will need JDK of version 7 or higher as instructed here
+https://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
+Swagger UI works in the latest versions of Chrome, Safari, Firefox, and Edge.
+
+### 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 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.
+
+## 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.

SECURITY.md

@@ -0,0 +1,21 @@
+# Security Policy
+
+If you believe you've found an exploitable security issue in Swagger UI,
+**please don't create a public issue**. 
+
+
+## Supported versions
+
+This is the list of versions of `swagger-ui` which are
+currently being supported with security updates.
+
+| Version  | Supported          | Notes                  |
+| -------- | ------------------ | ---------------------- |
+| 3.x      | :white_check_mark: |                        |
+| 2.x      | :x:                | End-of-life as of 2017 |
+
+## Reporting a vulnerability
+
+To report a vulnerability please send an email with the details to [security@swagger.io](mailto:security@swagger.io).
+
+We'll acknowledge receipt of your report ASAP, and set expectations on how we plan to handle it.

babel.config.js

@@ -0,0 +1,164 @@
+module.exports = {
+  "env": {
+    "commonjs": {
+      "presets": [
+        [
+          "@babel/preset-env",
+          {
+            "debug": false,
+            "modules": "commonjs",
+            "targets": {
+              "node": "8"
+            },
+            "forceAllTransforms": false,
+            "ignoreBrowserslistConfig": true
+          }
+        ],
+        "@babel/preset-react",
+      ],
+      "plugins": [
+        [
+          "@babel/plugin-transform-modules-commonjs",
+          {
+            "loose": true
+          }
+        ],
+        "@babel/proposal-class-properties",
+        "@babel/proposal-object-rest-spread",
+        "@babel/plugin-proposal-optional-chaining",
+      ]
+    },
+    "es": {
+      "presets": [
+        [
+          "@babel/preset-env",
+          {
+            "debug": false,
+            "modules": false
+          }
+        ],
+        "@babel/preset-react",
+      ],
+      "plugins": [
+        [
+          "@babel/plugin-transform-runtime",
+          {
+            "absoluteRuntime": false,
+            "corejs": 3,
+            "version": "^7.11.2"
+          }
+        ],
+        "@babel/proposal-class-properties",
+        "@babel/proposal-object-rest-spread",
+        "@babel/plugin-proposal-optional-chaining",
+      ]
+    },
+    "development": {
+      "presets": [
+        [
+          "@babel/env",
+          {
+            "targets": {
+              "browsers": [
+                /* benefit of C/S/FF/Edge only? */
+                "> 1%",
+                "last 2 versions",
+                "Firefox ESR",
+                "not dead"
+              ]
+            },
+            "useBuiltIns": false,
+            "corejs": { version: 3 }
+          }
+        ],
+        "@babel/preset-react"
+      ],
+      "plugins": [
+        [
+          "@babel/plugin-transform-runtime",
+          {
+            "corejs": 3,
+            "absoluteRuntime": false,
+            "version": "^7.11.2"
+          }
+        ],
+        "@babel/plugin-proposal-class-properties",
+        "@babel/plugin-proposal-optional-chaining",
+        [
+          "transform-react-remove-prop-types",
+          {
+            "additionalLibraries": [
+              "react-immutable-proptypes"
+            ]
+          }
+        ],
+        [
+          "babel-plugin-module-resolver",
+          {
+            "alias": {
+              "root": ".",
+              "components": "./src/core/components",
+              "containers": "./src/core/containers",
+              "core": "./src/core",
+              "plugins": "./src/plugins",
+              "img": "./src/img",
+              "corePlugins": "./src/core/plugins",
+              "less": "./src/less"
+            }
+          }
+        ]
+      ]
+    },
+    "test": {
+      "presets": [
+        [
+          "@babel/env",
+          {
+            "targets": {
+              "node": "10"
+            },
+            "useBuiltIns": false,
+            "corejs": { version: 3 }
+          }
+        ],
+        "@babel/preset-react"
+      ],
+      "plugins": [
+        [
+          "@babel/plugin-transform-runtime",
+          {
+            "corejs": 3,
+            "absoluteRuntime": false,
+            "version": "^7.11.2"
+          }
+        ],
+        "@babel/plugin-proposal-class-properties",
+        "@babel/plugin-proposal-optional-chaining",
+        [
+          "transform-react-remove-prop-types",
+          {
+            "additionalLibraries": [
+              "react-immutable-proptypes"
+            ]
+          }
+        ],
+        [
+          "babel-plugin-module-resolver",
+          {
+            "alias": {
+              "root": ".",
+              "components": "./src/core/components",
+              "containers": "./src/core/containers",
+              "core": "./src/core",
+              "plugins": "./src/plugins",
+              "img": "./src/img",
+              "corePlugins": "./src/core/plugins",
+              "less": "./src/less"
+            }
+          }
+        ]
+      ]
+    }
+  }
+}
+

composer.json

@@ -0,0 +1,40 @@
+{
+  "name": "swagger-api/swagger-ui",
+  "description": " Swagger UI is a collection of HTML, Javascript, and CSS assets that dynamically generate beautiful documentation from a Swagger-compliant API.",
+  "keywords": [
+    "Swagger",
+    "OpenAPI",
+    "specification",
+    "documentation",
+    "API",
+    "UI"
+  ],
+  "homepage": "http://swagger.io",
+  "license": "Apache-2.0",
+  "authors": [
+    {
+      "name": "Anna Bodnia",
+      "email": "anna.bodnia@gmail.com"
+    },
+    {
+      "name": "Buu Nguyen",
+      "email": "buunguyen@gmail.com"
+    },
+    {
+      "name": "Josh Ponelat",
+      "email": "jponelat@gmail.com"
+    },
+    {
+      "name": "Kyle Shockey",
+      "email": "kyleshockey1@gmail.com"
+    },
+    {
+      "name": "Robert Barnwell",
+      "email": "robert@robertismy.name"
+    },
+    {
+      "name": "Sahar Jafari",
+      "email": "shr.jafari@gmail.com"
+    }    
+  ]
+}

config/.eslintrc

@@ -0,0 +1,8 @@
+{
+  "rules": {
+    "import/no-unresolved": 0,
+    "import/extensions": 0,
+    "quotes": ["error", "single"],
+    "semi": ["error", "always"]
+  }
+}

config/jest/jest.artifact-es-bundle-core.config.js

@@ -0,0 +1,7 @@
+const path = require('path');
+
+module.exports = {
+  rootDir: path.join(__dirname, '..', '..'),
+  testEnvironment: 'jsdom',
+  testMatch: ['**/test/build-artifacts/es-bundle-core.js'],
+};

config/jest/jest.artifact-es-bundle.config.js

@@ -0,0 +1,7 @@
+const path = require('path');
+
+module.exports = {
+  rootDir: path.join(__dirname, '..', '..'),
+  testEnvironment: 'jsdom',
+  testMatch: ['**/test/build-artifacts/es-bundle.js'],
+};

config/jest/jest.artifact-umd-bundle.config.js

@@ -0,0 +1,7 @@
+const path = require('path');
+
+module.exports = {
+  rootDir: path.join(__dirname, '..', '..'),
+  testEnvironment: 'jsdom',
+  testMatch: ['**/test/build-artifacts/umd.js'],
+};

config/jest/jest.unit.config.js

@@ -0,0 +1,24 @@
+const path = require('path');
+
+module.exports = {
+  rootDir: path.join(__dirname, '..', '..'),
+  testEnvironment: 'jsdom',
+  testMatch: [
+    '**/test/unit/*.js?(x)',
+    '**/test/unit/**/*.js?(x)',
+  ],
+  // testMatch: ['**/test/unit/core/plugins/auth/actions.js'],
+  setupFilesAfterEnv: ['<rootDir>/test/unit/setup.js'],
+  testPathIgnorePatterns: [
+    '<rootDir>/node_modules/',
+    '<rootDir>/test/build-artifacts/',
+    '<rootDir>/test/mocha',
+    '<rootDir>/test/unit/setup.js',
+    '<rootDir>/test/unit/xss/anchor-target-rel/online-validator-badge.jsx',
+    '<rootDir>/test/unit/components/online-validator-badge.jsx',
+    '<rootDir>/test/unit/components/live-response.jsx',
+  ],
+  transformIgnorePatterns: [
+    '/node_modules/(?!(react-syntax-highlighter)/)'
+  ]
+};

cypress.json

@@ -0,0 +1,11 @@
+{
+  "fileServerFolder": "test/e2e-cypress/static",
+  "fixturesFolder": "test/e2e-cypress/fixtures",
+  "integrationFolder": "test/e2e-cypress/tests",
+  "pluginsFile": "test/e2e-cypress/plugins/index.js",
+  "screenshotsFolder": "test/e2e-cypress/screenshots",
+  "supportFile": "test/e2e-cypress/support/index.js",
+  "videosFolder": "test/e2e-cypress/videos",
+  "baseUrl": "http://localhost:3230/",
+  "video": false
+}

dev-helpers/index.html

@@ -0,0 +1,73 @@
+<!-- HTML for dev server -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Swagger UI</title>
+  <link rel="stylesheet" type="text/css" href="./swagger-ui.css" >
+  <link rel="icon" type="image/png" href="./favicon-32x32.png" sizes="32x32" />
+  <link rel="icon" type="image/png" href="./favicon-16x16.png" sizes="16x16" />
+  <style>
+    html
+    {
+      box-sizing: border-box;
+      overflow: -moz-scrollbars-vertical;
+      overflow-y: scroll;
+    }
+
+    *,
+    *:before,
+    *:after
+    {
+      box-sizing: inherit;
+    }
+
+    body
+    {
+      margin:0;
+      background: #fafafa;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="swagger-ui"></div>
+
+  <script src="./swagger-ui-bundle.js" charset="UTF-8"> </script>
+  <script src="./swagger-ui-standalone-preset.js" charset="UTF-8"> </script>
+  <script>
+    window.onload = function() {
+      window["SwaggerUIBundle"] = window["swagger-ui-bundle"]
+      window["SwaggerUIStandalonePreset"] = window["swagger-ui-standalone-preset"]
+      // Build a system
+      const ui = SwaggerUIBundle({
+        url: "https://petstore.swagger.io/v2/swagger.json",
+        dom_id: '#swagger-ui',
+        presets: [
+          SwaggerUIBundle.presets.apis,
+          SwaggerUIStandalonePreset
+        ],
+        plugins: [
+          SwaggerUIBundle.plugins.DownloadUrl
+        ],
+        layout: "StandaloneLayout"
+      })
+
+      window.ui = ui
+
+      ui.initOAuth({
+        clientId: "your-client-id",
+        clientSecret: "your-client-secret-if-required",
+        realm: "your-realms",
+        appName: "your-app-name",
+        scopeSeparator: " ",
+        scopes: "openid profile email phone address",
+        additionalQueryStringParams: {},
+        usePkceWithAuthorizationCodeGrant: false
+      })
+    }
+  </script>
+</body>
+
+</html>

dev-helpers/oauth2-redirect.html

@@ -0,0 +1,71 @@
+<!doctype html>
+<html lang="en-US">
+<body>
+</body>
+</html>
+<script>
+    'use strict';
+    function run () {
+        var oauth2 = window.opener.swaggerUIRedirectOauth2;
+        var sentState = oauth2.state;
+        var redirectUrl = oauth2.redirectUrl;
+        var isValid, qp, arr;
+
+        if (/code|token|error/.test(window.location.hash)) {
+            qp = window.location.hash.substring(1);
+        } else {
+            qp = location.search.substring(1);
+        }
+
+        arr = qp.split("&")
+        arr.forEach(function (v,i,_arr) { _arr[i] = '"' + v.replace('=', '":"') + '"';})
+        qp = qp ? JSON.parse('{' + arr.join() + '}',
+                function (key, value) {
+                    return key === "" ? value : decodeURIComponent(value)
+                }
+        ) : {}
+
+        isValid = qp.state === sentState
+
+        if ((
+          oauth2.auth.schema.get("flow") === "accessCode"||
+          oauth2.auth.schema.get("flow") === "authorizationCode"
+        ) && !oauth2.auth.code) {
+            if (!isValid) {
+                oauth2.errCb({
+                    authId: oauth2.auth.name,
+                    source: "auth",
+                    level: "warning",
+                    message: "Authorization may be unsafe, passed state was changed in server Passed state wasn't returned from auth server"
+                });
+            }
+
+            if (qp.code) {
+                delete oauth2.state;
+                oauth2.auth.code = qp.code;
+                oauth2.callback({auth: oauth2.auth, redirectUrl: redirectUrl});
+            } else {
+                let oauthErrorMsg
+                if (qp.error) {
+                    oauthErrorMsg = "["+qp.error+"]: " +
+                        (qp.error_description ? qp.error_description+ ". " : "no accessCode received from the server. ") +
+                        (qp.error_uri ? "More info: "+qp.error_uri : "");
+                }
+
+                oauth2.errCb({
+                    authId: oauth2.auth.name,
+                    source: "auth",
+                    level: "error",
+                    message: oauthErrorMsg || "[Authorization failed]: no accessCode received from the server"
+                });
+            }
+        } else {
+            oauth2.callback({auth: oauth2.auth, token: qp, isValid: isValid, redirectUrl: redirectUrl});
+        }
+        window.close();
+    }
+
+    window.addEventListener('DOMContentLoaded', function () {
+      run();
+    });
+</script>

dist/index.html

@@ -0,0 +1,60 @@
+<!-- HTML for static distribution bundle build -->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Swagger UI</title>
+    <link rel="stylesheet" type="text/css" href="./swagger-ui.css" >
+    <link rel="icon" type="image/png" href="./favicon-32x32.png" sizes="32x32" />
+    <link rel="icon" type="image/png" href="./favicon-16x16.png" sizes="16x16" />
+    <style>
+      html
+      {
+        box-sizing: border-box;
+        overflow: -moz-scrollbars-vertical;
+        overflow-y: scroll;
+      }
+
+      *,
+      *:before,
+      *:after
+      {
+        box-sizing: inherit;
+      }
+
+      body
+      {
+        margin:0;
+        background: #fafafa;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div id="swagger-ui"></div>
+
+    <script src="./swagger-ui-bundle.js" charset="UTF-8"> </script>
+    <script src="./swagger-ui-standalone-preset.js" charset="UTF-8"> </script>
+    <script>
+    window.onload = function() {
+      // Begin Swagger UI call region
+      const ui = SwaggerUIBundle({
+        url: "http://hc-live.com/api/index/index",
+        dom_id: '#swagger-ui',
+        deepLinking: true,
+        presets: [
+          SwaggerUIBundle.presets.apis,
+          SwaggerUIStandalonePreset
+        ],
+        plugins: [
+          SwaggerUIBundle.plugins.DownloadUrl
+        ],
+        layout: "StandaloneLayout"
+      })
+      // End Swagger UI call region
+
+      window.ui = ui
+    }
+  </script>
+  </body>
+</html>

dist/oauth2-redirect.html

@@ -0,0 +1,74 @@
+<!doctype html>
+<html lang="en-US">
+<head>
+    <title>Swagger UI: OAuth2 Redirect</title>
+</head>
+<body>
+</body>
+</html>
+<script>
+    'use strict';
+    function run () {
+        var oauth2 = window.opener.swaggerUIRedirectOauth2;
+        var sentState = oauth2.state;
+        var redirectUrl = oauth2.redirectUrl;
+        var isValid, qp, arr;
+
+        if (/code|token|error/.test(window.location.hash)) {
+            qp = window.location.hash.substring(1);
+        } else {
+            qp = location.search.substring(1);
+        }
+
+        arr = qp.split("&")
+        arr.forEach(function (v,i,_arr) { _arr[i] = '"' + v.replace('=', '":"') + '"';})
+        qp = qp ? JSON.parse('{' + arr.join() + '}',
+                function (key, value) {
+                    return key === "" ? value : decodeURIComponent(value)
+                }
+        ) : {}
+
+        isValid = qp.state === sentState
+
+        if ((
+          oauth2.auth.schema.get("flow") === "accessCode"||
+          oauth2.auth.schema.get("flow") === "authorizationCode"
+        ) && !oauth2.auth.code) {
+            if (!isValid) {
+                oauth2.errCb({
+                    authId: oauth2.auth.name,
+                    source: "auth",
+                    level: "warning",
+                    message: "Authorization may be unsafe, passed state was changed in server Passed state wasn't returned from auth server"
+                });
+            }
+
+            if (qp.code) {
+                delete oauth2.state;
+                oauth2.auth.code = qp.code;
+                oauth2.callback({auth: oauth2.auth, redirectUrl: redirectUrl});
+            } else {
+                let oauthErrorMsg
+                if (qp.error) {
+                    oauthErrorMsg = "["+qp.error+"]: " +
+                        (qp.error_description ? qp.error_description+ ". " : "no accessCode received from the server. ") +
+                        (qp.error_uri ? "More info: "+qp.error_uri : "");
+                }
+
+                oauth2.errCb({
+                    authId: oauth2.auth.name,
+                    source: "auth",
+                    level: "error",
+                    message: oauthErrorMsg || "[Authorization failed]: no accessCode received from the server"
+                });
+            }
+        } else {
+            oauth2.callback({auth: oauth2.auth, token: qp, isValid: isValid, redirectUrl: redirectUrl});
+        }
+        window.close();
+    }
+
+    window.addEventListener('DOMContentLoaded', function () {
+      run();
+    });
+</script>

docker/configurator/helpers.js

@@ -0,0 +1,13 @@
+module.exports.indent = function indent(str, len, fromLine = 0) {
+
+  return str
+    .split("\n")
+    .map((line, i) => {
+      if (i + 1 >= fromLine) {
+        return `${Array(len + 1).join(" ")}${line}`
+      } else {
+        return line
+      }
+    })
+    .join("\n")
+}

docker/configurator/index.js

@@ -0,0 +1,49 @@
+const fs = require("fs")
+const path = require("path")
+
+const translator = require("./translator")
+const oauthBlockBuilder = require("./oauth")
+const indent = require("./helpers").indent
+
+const START_MARKER = "// Begin Swagger UI call region"
+const END_MARKER = "// End Swagger UI call region"
+
+const targetPath = path.normalize(process.cwd() + "/" + process.argv[2])
+
+const originalHtmlContent = fs.readFileSync(targetPath, "utf8")
+
+const startMarkerIndex = originalHtmlContent.indexOf(START_MARKER)
+const endMarkerIndex = originalHtmlContent.indexOf(END_MARKER)
+
+const beforeStartMarkerContent = originalHtmlContent.slice(0, startMarkerIndex)
+const afterEndMarkerContent = originalHtmlContent.slice(
+  endMarkerIndex + END_MARKER.length
+)
+
+if (startMarkerIndex < 0 || endMarkerIndex < 0) {
+  console.error("ERROR: Swagger UI was unable to inject Docker configuration data!")
+  console.error("!      This can happen when you provide custom HTML to Swagger UI.")
+  console.error("!  ")
+  console.error("!      In order to solve this, add the `Begin Swagger UI call region`")
+  console.error("!      and `End Swagger UI call region` markers to your HTML.")
+  console.error("!      See the repository for an example:")
+  console.error("!      https://github.com/swagger-api/swagger-ui/blob/02758b8125dbf38763cfd5d4f91c7c803e9bd0ad/dist/index.html#L40-L54")
+  console.error("!  ")
+  console.error("!      If you're seeing this message and aren't using custom HTML,")
+  console.error("!      this message may be a bug. Please file an issue:")
+  console.error("!      https://github.com/swagger-api/swagger-ui/issues/new/choose")
+  process.exit(0)
+}
+
+fs.writeFileSync(
+  targetPath,
+  `${beforeStartMarkerContent}
+      ${START_MARKER}
+      const ui = SwaggerUIBundle({
+        ${indent(translator(process.env, { injectBaseConfig: true }), 8, 2)}
+      })
+      
+      ${indent(oauthBlockBuilder(process.env), 6, 2)}
+      ${END_MARKER}
+${afterEndMarkerContent}`
+)

docker/configurator/oauth.js

@@ -0,0 +1,51 @@
+const translator = require("./translator")
+const indent = require("./helpers").indent
+
+const oauthBlockSchema = {
+  OAUTH_CLIENT_ID: {
+    type: "string",
+    name: "clientId"
+  },
+  OAUTH_CLIENT_SECRET: {
+    type: "string",
+    name: "clientSecret",
+    onFound: () => console.warn("Swagger UI warning: don't use `OAUTH_CLIENT_SECRET` in production!")
+  },
+  OAUTH_REALM: {
+    type: "string",
+    name: "realm"
+  },
+  OAUTH_APP_NAME: {
+    type: "string",
+    name: "appName"
+  },
+  OAUTH_SCOPE_SEPARATOR: {
+    type: "string",
+    name: "scopeSeparator"
+  },
+  OAUTH_SCOPES: {
+    type: "string",
+    name: "scopes"
+  },
+  OAUTH_ADDITIONAL_PARAMS: {
+    type: "object",
+    name: "additionalQueryStringParams"
+  },
+  OAUTH_USE_PKCE: {
+    type: "boolean",
+    name: "usePkceWithAuthorizationCodeGrant"
+  }
+}
+
+module.exports = function oauthBlockBuilder(env) {
+  const translatorResult = translator(env, { schema: oauthBlockSchema })
+
+  if(translatorResult) {
+    return (
+      `ui.initOAuth({
+${indent(translatorResult, 2)}
+})`)
+  }
+
+  return ``
+}

docker/configurator/translator.js

@@ -0,0 +1,104 @@
+// Converts an object of environment variables into a Swagger UI config object
+const configSchema = require("./variables")
+
+const defaultBaseConfig = {
+  url: {
+    value: "https://petstore.swagger.io/v2/swagger.json",
+    schema: {
+      type: "string",
+      base: true
+    }
+  },
+  dom_id: {
+    value: "#swagger-ui",
+    schema: {
+      type: "string",
+      base: true
+    }
+  },
+  deepLinking: {
+    value: "true",
+    schema: {
+      type: "boolean",
+      base: true
+    }
+  },
+  presets: {
+    value: `[\n  SwaggerUIBundle.presets.apis,\n  SwaggerUIStandalonePreset\n]`,
+    schema: {
+      type: "array",
+      base: true
+    }
+  },
+  plugins: {
+    value: `[\n  SwaggerUIBundle.plugins.DownloadUrl\n]`,
+    schema: {
+      type: "array",
+      base: true
+    }
+  },
+  layout: {
+    value: "StandaloneLayout",
+    schema: {
+      type: "string",
+      base: true
+    }
+  }
+}
+
+function objectToKeyValueString(env, { injectBaseConfig = false, schema = configSchema, baseConfig = defaultBaseConfig } = {}) {
+  let valueStorage = injectBaseConfig ? Object.assign({}, baseConfig) : {}
+  const keys = Object.keys(env)
+
+  // Compute an intermediate representation that holds candidate values and schemas.
+  // 
+  // This is useful for deduping between multiple env keys that set the same
+  // config variable.
+
+  keys.forEach(key => {
+    const varSchema = schema[key]
+    const value = env[key]
+    
+    if(!varSchema) return
+
+    if(varSchema.onFound) {
+      varSchema.onFound()
+    }
+
+    const storageContents = valueStorage[varSchema.name]
+
+    if(storageContents) {
+      if (varSchema.legacy === true && !storageContents.schema.base) {
+        // If we're looking at a legacy var, it should lose out to any already-set value
+        // except for base values
+        return
+      }
+      delete valueStorage[varSchema.name]
+    }
+
+    valueStorage[varSchema.name] = {
+      value,
+      schema: varSchema
+    }
+  })
+
+  // Compute a key:value string based on valueStorage's contents.
+
+  let result = ""
+
+  Object.keys(valueStorage).forEach(key => {
+    const value = valueStorage[key]
+    
+    const escapedName = /[^a-zA-Z0-9]/.test(key) ? `"${key}"` : key 
+
+    if (value.schema.type === "string") {
+      result += `${escapedName}: "${value.value}",\n`
+    } else {
+      result += `${escapedName}: ${value.value === "" ? `undefined` : value.value},\n`
+    }
+  })
+
+  return result.trim()
+}
+
+module.exports = objectToKeyValueString

docker/configurator/variables.js

@@ -0,0 +1,113 @@
+const standardVariables = {
+  CONFIG_URL: {
+    type: "string",
+    name: "configUrl"
+  },
+  DOM_ID: {
+    type: "string",
+    name: "dom_id"
+  },
+  SPEC: {
+    type: "object",
+    name: "spec"
+  },
+  URL: {
+    type: "string",
+    name: "url"
+  },
+  URLS: {
+    type: "array",
+    name: "urls"
+  },
+  URLS_PRIMARY_NAME: {
+    type: "string",
+    name: "urls.primaryName"
+  },
+  LAYOUT: {
+    type: "string",
+    name: "layout"
+  },
+  DEEP_LINKING: {
+    type: "boolean",
+    name: "deepLinking"
+  },
+  DISPLAY_OPERATION_ID: {
+    type: "boolean",
+    name: "displayOperationId"
+  },
+  DEFAULT_MODELS_EXPAND_DEPTH: {
+    type: "number",
+    name: "defaultModelsExpandDepth"
+  },
+  DEFAULT_MODEL_EXPAND_DEPTH: {
+    type: "number",
+    name: "defaultModelExpandDepth"
+  },
+  DEFAULT_MODEL_RENDERING: {
+    type: "string",
+    name: "defaultModelRendering"
+  },
+  DISPLAY_REQUEST_DURATION: {
+    type: "boolean",
+    name: "displayRequestDuration"
+  },
+  DOC_EXPANSION: {
+    type: "string",
+    name: "docExpansion"
+  },
+  FILTER: {
+    type: "string",
+    name: "filter"
+  },
+  MAX_DISPLAYED_TAGS: {
+    type: "number",
+    name: "maxDisplayedTags"
+  },
+  SHOW_EXTENSIONS: {
+    type: "boolean",
+    name: "showExtensions"
+  },
+  SHOW_COMMON_EXTENSIONS: {
+    type: "boolean",
+    name: "showCommonExtensions"
+  },
+  USE_UNSAFE_MARKDOWN: {
+    type: "boolean",
+    name: "useUnsafeMarkdown"
+  },
+  OAUTH2_REDIRECT_URL: {
+    type: "string",
+    name: "oauth2RedirectUrl"
+  },
+  SHOW_MUTATED_REQUEST: {
+    type: "boolean",
+    name: "showMutatedRequest"
+  },
+  SUPPORTED_SUBMIT_METHODS: {
+    type: "array",
+    name: "supportedSubmitMethods"
+  },
+  VALIDATOR_URL: {
+    type: "string",
+    name: "validatorUrl"
+  },
+  WITH_CREDENTIALS: {
+    type: "boolean",
+    name: "withCredentials",
+  }
+}
+
+const legacyVariables = {
+  API_URL: {
+    type: "string",
+    name: "url",
+    legacy: true
+  },
+  API_URLS: {
+    type: "array",
+    name: "urls",
+    legacy: true
+  }
+}
+
+module.exports = Object.assign({}, standardVariables, legacyVariables)

docker/cors.conf

@@ -0,0 +1,14 @@
+add_header 'Access-Control-Allow-Origin' '*' always;
+add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
+#
+# Custom headers and headers various browsers *should* be OK with but aren't
+#
+add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type' always;
+#
+# Tell client that this pre-flight info is valid for 20 days
+#
+add_header 'Access-Control-Max-Age' $access_control_max_age always;
+
+if ($request_method = OPTIONS) {
+  return 204;
+}

docker/nginx.conf

@@ -0,0 +1,47 @@
+worker_processes      1;
+
+events {
+  worker_connections  1024;
+}
+
+http {
+  include             mime.types;
+  default_type        application/octet-stream;
+
+  sendfile on;
+
+  keepalive_timeout   65;
+
+  gzip on;
+  gzip_static on;
+  gzip_disable "msie6";
+
+  gzip_vary on;
+  gzip_types text/plain text/css application/javascript;
+
+  map $request_method $access_control_max_age {
+    OPTIONS 1728000; # 20 days
+  }
+  server_tokens off; # Hide Nginx version
+
+  server {
+    listen            8080;
+    server_name       localhost;
+    index             index.html index.htm;
+
+    location / {
+      absolute_redirect off;
+      alias            /usr/share/nginx/html/;
+      expires 1d;
+
+      location ~* \.(?:json|yml|yaml)$ {
+        #SWAGGER_ROOT
+        expires -1;
+
+        include cors.conf;
+      }
+
+      include cors.conf;
+    }
+  }
+}

docker/run.sh

@@ -0,0 +1,66 @@
+#! /bin/sh
+
+set -e
+BASE_URL=${BASE_URL:-/}
+NGINX_ROOT=/usr/share/nginx/html
+INDEX_FILE=$NGINX_ROOT/index.html
+NGINX_CONF=/etc/nginx/nginx.conf
+
+node /usr/share/nginx/configurator $INDEX_FILE
+
+replace_in_index () {
+  if [ "$1" != "**None**" ]; then
+    sed -i "s|/\*||g" $INDEX_FILE
+    sed -i "s|\*/||g" $INDEX_FILE
+    sed -i "s|$1|$2|g" $INDEX_FILE
+  fi
+}
+
+replace_or_delete_in_index () {
+  if [ -z "$2" ]; then
+    sed -i "/$1/d" $INDEX_FILE
+  else
+    replace_in_index $1 $2
+  fi
+}
+
+if [[ "${BASE_URL}" != "/" ]]; then
+  sed -i "s|location / {|location $BASE_URL {|g" $NGINX_CONF
+fi
+
+replace_in_index myApiKeyXXXX123456789 $API_KEY
+
+if [ "$SWAGGER_JSON_URL" ]; then
+  sed -i "s|https://petstore.swagger.io/v2/swagger.json|$SWAGGER_JSON_URL|g" $INDEX_FILE
+  sed -i "s|http://example.com/api|$SWAGGER_JSON_URL|g" $INDEX_FILE
+fi
+
+if [[ -f "$SWAGGER_JSON" ]]; then
+  cp -s "$SWAGGER_JSON" "$NGINX_ROOT"
+  REL_PATH="./$(basename $SWAGGER_JSON)"
+
+  if [[ -z "$SWAGGER_ROOT" ]]; then
+    SWAGGER_ROOT="$(dirname $SWAGGER_JSON)"
+  fi
+
+  if [[ "$BASE_URL" != "/" ]]
+  then
+    BASE_URL=$(echo $BASE_URL | sed 's/\/$//')
+    sed -i \
+      "s|#SWAGGER_ROOT|rewrite ^$BASE_URL(/.*)$ \$1 break;\n        #SWAGGER_ROOT|" \
+      $NGINX_CONF
+  fi
+  sed -i "s|#SWAGGER_ROOT|root $SWAGGER_ROOT/;|g" $NGINX_CONF
+
+  sed -i "s|https://petstore.swagger.io/v2/swagger.json|$REL_PATH|g" $INDEX_FILE
+  sed -i "s|http://example.com/api|$REL_PATH|g" $INDEX_FILE
+fi
+
+# replace the PORT that nginx listens on if PORT is supplied
+if [[ -n "${PORT}" ]]; then
+    sed -i "s|8080|${PORT}|g" $NGINX_CONF
+fi
+
+find $NGINX_ROOT -type f -regex ".*\.\(html\|js\|css\)" -exec sh -c "gzip < {} > {}.gz" \;
+
+exec nginx -g 'daemon off;'

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](usage/installation.md)
+- [Configuration](usage/configuration.md)
+- [CORS](usage/cors.md)
+- [OAuth2](usage/oauth2.md)
+- [Deep Linking](usage/deep-linking.md)
+- [Limitations](usage/limitations.md)
+- [Version detection](usage/version-detection.md)
+
+#### Customization
+- [Overview](customization/overview.md)
+- [Plugin API](customization/plugin-api.md)
+- [Custom layout](customization/custom-layout.md)
+
+#### Development
+- [Setting up](development/setting-up.md)
+- [Scripts](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 = () => {
+  return {
+    components: {
+      OperationsLayout: OperationsLayout
+    }
+  }
+}
+
+// Provide the plugin to Swagger-UI, and select OperationsLayout
+// as the layout for Swagger-UI
+SwaggerUI({
+  url: "https://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 = () => {
+  return {
+    components: {
+      AugmentingLayout: AugmentingLayout
+    }
+  }
+}
+
+// Provide the plugin to Swagger-UI, and select AugmentingLayout
+// as the layout for Swagger-UI
+SwaggerUI({
+  url: "https://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/plug-points.md

@@ -0,0 +1,43 @@
+# Plug points
+
+Swagger UI exposes most of its internal logic through the plugin system.
+
+Often, it is beneficial to override the core internals to achieve custom behavior.
+
+### Note: Semantic Versioning
+
+Swagger UI's internal APIs are _not_ part of our public contract, which means that they can change without the major version change.
+
+If your custom plugins wrap, extend, override, or consume any internal core APIs, we recommend specifying a specific minor version of Swagger UI to use in your application, because they will _not_ change between patch versions.
+
+If you're installing Swagger UI via NPM, for example, you can do this by using a tilde:
+
+```js
+{
+  "dependencies": {
+    "swagger-ui": "~3.11.0"
+  }
+}
+```
+
+### `fn.opsFilter`
+
+When using the `filter` option, tag names will be filtered by the user-provided value. If you'd like to customize this behavior, you can override the default `opsFilter` function.
+
+For example, you can implement a multiple-phrase filter:
+
+```js
+const MultiplePhraseFilterPlugin = function() {
+  return {
+    fn: {
+      opsFilter: (taggedOps, phrase) => {
+        const phrases = phrase.split(", ")
+
+        return taggedOps.filter((val, key) => {
+          return phrases.some(item => key.indexOf(item) > -1)
+        })
+      }
+    }
+  }
+}
+```

docs/customization/plugin-api.md

@@ -0,0 +1,455 @@
+# 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.
+
+### Note: Semantic Versioning 
+
+Swagger UI's internal APIs are _not_ part of our public contract, which means that they can change without the major version change.
+
+If your custom plugins wrap, extend, override, or consume any internal core APIs, we recommend specifying a specific minor version of Swagger UI to use in your application, because they will _not_ change between patch versions.
+
+If you're installing Swagger UI via NPM, for example, you can do this by using a tilde:
+
+```js
+{
+  "dependencies": {
+    "swagger-ui": "~3.11.0"
+  }
+}
+```
+
+### Format
+
+A plugin return value may contain any of these keys, where `stateKey` is a name for a piece of state:
+
+```javascript
+{
+  statePlugins: {
+    [stateKey]: {
+      actions,
+      reducers,
+      selectors,
+      wrapActions,
+      wrapSelectors
+    }
+  },
+  components: {},
+  wrapComponents: {},
+  rootInjects: {},
+  afterLoad: (system) => {},
+  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, then returns 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 are 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
+    }
+  }
+}
+```
+
+You can use `config.failSilently` if you don't want a warning when a component doesn't exist in the system.
+
+Be mindful of `getComponent` arguments order. In the example below, the boolean `false` refers to presence of a container, and the 3rd argument is the config object used to suppress the missing component warning.
+```javascript
+const thisVariableWillBeNull = getComponent("not_real", false, { failSilently: true })
+```
+
+#### 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`. If you'd prefer to provide a React component class, `(OriginalComponent, system) => ReactClass` works as well.
+
+```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>
+      }
+    }
+  }
+}
+```
+
+Here's another example that includes a code sample of a component that will be wrapped:
+
+```javascript
+/////  Overriding a component from a plugin
+
+// Here's our normal, unmodified component.
+const MyNumberDisplayPlugin = function(system) {
+  return {
+    components: {
+      NumberDisplay: ({ number }) => <span>{number}</span>
+    }
+  }
+}
+
+// Here's a component wrapper defined as a function.
+const MyWrapComponentPlugin = function(system) {
+  return {
+    wrapComponents: {
+      NumberDisplay: (Original, system) => (props) => {
+        if(props.number > 10) {
+          return <div>
+            <h3>Warning! Big number ahead.</h3>
+            <Original {...props} />
+          </div>
+        } else {
+          return <Original {...props} />
+        }
+      }
+    }
+  }
+}
+
+// Alternatively, here's the same component wrapper defined as a class.
+const MyWrapComponentPlugin = function(system) {
+  return {
+    wrapComponents: {
+      NumberDisplay: (Original, system) => class WrappedNumberDisplay extends React.component {
+        render() {
+          if(props.number > 10) {
+            return <div>
+              <h3>Warning! Big number ahead.</h3>
+              <Original {...props} />
+            </div>
+          } else {
+            return <Original {...props} />
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+#### `rootInjects`
+
+The `rootInjects` interface allows you to inject values at the top level of the system.
+
+This interface takes an object, which will be merged in with the top-level system object at runtime.
+
+```js
+const MyRootInjectsPlugin = function(system) {
+  return {
+    rootInjects: {
+      myConstant: 123,
+      myMethod: (...params) => console.log(...params)
+    }
+  }
+}
+```
+
+#### `afterLoad`
+
+The `afterLoad` plugin method allows you to get a reference to the system after your plugin has been registered.
+
+This interface is used in the core code to attach methods that are driven by bound selectors or actions. You can also use it to execute logic that requires your plugin to already be ready, for example fetching initial data from a remote endpoint and passing it to an action your plugin creates.
+
+The plugin context, which is bound to `this`, is undocumented, but below is an example of how to attach a bound action as a top-level method:
+
+```javascript
+const MyMethodProvidingPlugin = function() {
+  return {
+    afterLoad(system) {
+      // at this point in time, your actions have been bound into the system
+      // so you can do things with them
+      this.rootInjects = this.rootInjects || {}
+      this.rootInjects.myMethod = system.exampleActions.updateFavoriteColor
+    },
+    statePlugins: {
+      example: {
+        actions: {
+          updateFavoriteColor: (str) => {
+            return {
+              type: "EXAMPLE_SET_FAV_COLOR",
+              payload: str
+            }
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+#### 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,39 @@
+# 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 (commonJS). 
+`build-core` | Build `swagger-ui.(js\|css)` only (commonJS).
+`build-standalone` | Build `swagger-ui-standalone-preset.js` only (commonJS).
+`build-stylesheets` | Build `swagger-ui.css` only.
+`build:es:bundle` | Build `swagger-ui-es-bundle.js` only (es2015).
+`build:es:bundle:core` | Build `swagger-ui-es-bundle-core.js` only (es2015).
+
+### Testing
+Script name | Description
+--- | ---
+`test` | Run unit tests in Node, run Cypress end-to-end tests, and run ESLint in errors-only mode.
+`just-test-in-node` | Run Mocha unit tests in Node.
+`test:unit-jest` | Run Jest unit tests in Node.
+`e2e` | Run end-to-end tests (requires JDK and Selenium).
+`e2e-cypress` | Run end-to-end browser tests with Cypress.
+`dev-e2e-cypress` | Dev mode, open Cypress runner and manually select tests to run.
+`lint` | Run ESLint test
+`test:artifact` | Run list of bundle artifact tests in Jest
+`test:artifact:umd:bundle` | Run unit test that confirms `swagger-ui-bundle` exports as a Function
+`test:artifact:es:bundle` | Run unit test that confirms `swagger-ui-es-bundle` exports as a Function
+`test:artifact:es:bundle:core` | Run unit test that confirms `swagger-ui-es-bundle-core` exports as a Function

docs/development/setting-up.md

@@ -0,0 +1,51 @@
+# Setting up a dev environment
+
+Swagger UI includes a development server that provides hot module reloading and unminified stack traces, for easier development.
+
+### Prerequisites
+
+- git, any version
+- NPM 6.x
+
+Generally, we recommend the following guidelines from [Node.js Releases](https://nodejs.org/en/about/releases/) to only use Active LTS or Maintenance LTS releases.
+
+Current Node.js Active LTS:
+- Node.js 12.x
+- NPM 6.x
+
+Current Node.js Maintenance LTS:
+- Node.js 10.x
+- NPM 6.x
+
+Unsupported Node.js LTS that should still work:
+- Node.js 8.13.0 or greater
+- NPM 6.x
+
+### Steps
+
+1. `git clone https://github.com/swagger-api/swagger-ui.git`
+2. `cd swagger-ui`
+3. `npm run dev`
+4. Wait a bit
+5. Open http://localhost:3200/
+
+### Using your own local api definition with local dev build
+
+You can specify a local file in `dev-helpers/index.html` by changing the `url` parameter. This local file MUST be located in the `dev-helpers` directory or a subdirectory. As a convenience and best practice, we recommend that you create a subdirectory, `dev-helpers/examples`, which is already specified in `.gitignore`.
+
+replace
+```
+url: "https://petstore.swagger.io/v2/swagger.json",
+```
+
+with
+```
+url: "./examples/your-local-api-definition.yaml",
+```
+
+Files in `dev-helpers` should NOT be committed to git. The exception is if you are fixing something in `index.html` or `oauth2-redirect.html`, or introducing a new support file.
+
+## 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/samples/webpack-getting-started/README.md

@@ -0,0 +1,14 @@
+
+### Demo of Swagger UI with Webpack.
+
+This `webpack-getting-started` sample is for reference only.
+
+It includes CSS and OAuth configuration.
+
+`_sample_package.json` is a placeholder sample. You should rename this file, per `Usage` section below, and you should also verify and update this sample's `@latest` compared to the `swagger-ui@latest`
+
+
+#### Usage
+    rename `_sample_package.json` to `package.json`
+    npm install
+    npm start

docs/samples/webpack-getting-started/_sample_package.json

@@ -0,0 +1,26 @@
+{
+  "name": "swagger-ui-webpack-getting-started",
+  "version": "0.0.1",
+  "description": "A simple setup of Swagger UI with Webpack",
+  "scripts": {
+    "build": "webpack",
+    "start": "webpack-dev-server --open"
+  },
+  "author": "Shaun Luttin",
+  "license": "Apache-2.0",
+  "devDependencies": {
+    "clean-webpack-plugin": "^1.0.1",
+    "copy-webpack-plugin": "^4.6.0",
+    "html-webpack-plugin": "^3.2.0",
+    "webpack": "^4.29.3",
+    "webpack-cli": "^3.2.3",
+    "webpack-dev-server": "^3.1.14"
+  },
+  "dependencies": {
+    "css-loader": "^2.1.0",
+    "json-loader": "^0.5.7",
+    "style-loader": "^0.23.1",
+    "swagger-ui": "^3.20.7",
+    "yaml-loader": "^0.5.0"
+  }
+}

docs/samples/webpack-getting-started/index.html

@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Getting Started</title>
+</head>
+<body>
+  <div id="swagger"></div>
+</body>
+</html>

docs/samples/webpack-getting-started/src/index.js

@@ -0,0 +1,15 @@
+import SwaggerUI from 'swagger-ui'
+import 'swagger-ui/dist/swagger-ui.css';
+
+const spec = require('./swagger-config.yaml');
+
+const ui = SwaggerUI({
+  spec,
+  dom_id: '#swagger',
+});
+
+ui.initOAuth({
+  appName: "Swagger UI Webpack Demo",
+  // See https://demo.identityserver.io/ for configuration details.
+  clientId: 'implicit'
+});

docs/samples/webpack-getting-started/src/swagger-config.yaml

@@ -0,0 +1,30 @@
+openapi: "3.0.0"
+info:
+  version: "0.0.1"
+  title: "Swagger UI Webpack Setup"
+  description: "Demonstrates Swagger UI with Webpack including CSS and OAuth"
+servers:
+  - url: "https://demo.identityserver.io/api"
+    description: "Identity Server test API"
+components:
+  securitySchemes:
+    # See https://demo.identityserver.io/ for configuration details.
+    identity_server_auth:
+      type: oauth2
+      flows:
+        implicit:
+          authorizationUrl: "https://demo.identityserver.io/connect/authorize"
+          scopes:
+            api: "api"
+security:
+  - identity_server_auth:
+    - api
+paths:
+  /test:
+    get:
+      summary: "Runs a test request against the Identity Server demo API"
+      responses:
+        401:
+          description: "Unauthorized"
+        200:
+          description: "OK"

docs/samples/webpack-getting-started/webpack.config.js

@@ -0,0 +1,51 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CleanWebpackPlugin = require('clean-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+const outputPath = path.resolve(__dirname, 'dist');
+
+module.exports = {
+  mode: 'development',
+  entry: {
+    app: './src/index.js',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.yaml$/,
+        use: [
+          { loader: 'json-loader' },
+          { loader: 'yaml-loader' }
+        ]
+      },
+      {
+        test: /\.css$/,
+        use: [
+          { loader: 'style-loader' },
+          { loader: 'css-loader' },
+        ]
+      }
+    ]
+  },
+  plugins: [
+    new CleanWebpackPlugin([
+      outputPath
+    ]),
+    new CopyWebpackPlugin([
+      {
+        // Copy the Swagger OAuth2 redirect file to the project root;
+        // that file handles the OAuth2 redirect after authenticating the end-user.
+        from: 'node_modules/swagger-ui/dist/oauth2-redirect.html',
+        to: './'
+      }
+    ]),
+    new HtmlWebpackPlugin({
+      template: 'index.html'
+    })
+  ],
+  output: {
+    filename: '[name].bundle.js',
+    path: outputPath,
+  }
+};

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 "https://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.
+
+- Use the http://www.test-cors.org website to verify CORS support. 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 UI 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

@@ -0,0 +1,36 @@
+# `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.
+
+## Usage
+
+👉🏼 Add `deepLinking: true` to your Swagger UI configuration to enable this functionality. This is demonstrated in [`dist/index.html`](https://github.com/swagger-api/swagger-ui/blob/master/dist/index.html).
+
+When you expand a tag or operation, Swagger UI will automatically update its URL fragment with a deep link to the item.
+Conversely, when you collapse a tag or operation, Swagger UI will clear the URL fragment.
+
+You can also right-click a tag name or operation path to copy a link to that tag or operation.
+
+#### Fragment format
+
+The fragment is formatted in one of two ways:
+
+- `#/{tagName}`, to trigger the focus of a specific tag
+- `#/{tagName}/{operationId}`, to trigger the focus of a specific operation within a tag
+
+`operationId` is the explicit operationId provided in the spec, if one exists.
+Otherwise, Swagger UI generates an implicit operationId by combining the operation's path and method, while escaping non-alphanumeric characters.
+
+## FAQ
+
+> I'm using Swagger UI in an application that needs control of the URL fragment. How do I disable deep-linking?
+
+This functionality is disabled by default, but you can pass `deepLinking: false` into Swagger UI as a configuration item to be sure.
+
+> Can I link to multiple tags or operations?
+
+No, this is not supported.
+
+> Can I collapse everything except the operation or tag I'm linking to?
+
+Sure - use `docExpansion: none` to collapse all tags and operations. Your deep link will take precedence over the setting, so only the tag or operation you've specified will be expanded.

docs/usage/installation.md

@@ -0,0 +1,111 @@
+# 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'
+})
+```
+
+See the [Webpack Getting Started](../samples/webpack-getting-started) sample for details.
+
+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 mirror 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-dist').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 traditional npm module,
+you could do something like this:
+
+```js
+var SwaggerUIBundle = require('swagger-ui-dist').SwaggerUIBundle
+
+const ui = SwaggerUIBundle({
+    url: "https://petstore.swagger.io/v2/swagger.json",
+    dom_id: '#swagger-ui',
+    presets: [
+      SwaggerUIBundle.presets.apis,
+      SwaggerUIBundle.SwaggerUIStandalonePreset
+    ],
+    layout: "StandaloneLayout"
+  })
+```
+
+`SwaggerUIBundle` is equivalent to `SwaggerUI`.
+
+### Docker
+
+You can pull a pre-built docker image of the swagger-ui directly from Docker Hub:
+
+```
+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 `/`.
+
+For more information on controlling Swagger UI through the Docker image, see the Docker section of the [Configuration documentation](configuration.md#docker).
+
+### unpkg 
+
+You can embed Swagger UI's code directly in your HTML by using unpkg's interface:
+
+```html
+<script src="https://unpkg.com/swagger-ui-dist@3/swagger-ui-bundle.js" charset="UTF-8"></script>
+<!-- `SwaggerUIBundle` is now available on the page -->
+```
+
+See [unpkg's main page](https://unpkg.com/) for more information on how to use unpkg.
+
+### Static files without HTTP or HTML
+
+Once swagger-ui has successfully generated the `/dist` directory, you can copy this to your own file system and host from there. 
+
+## Plain old HTML/CSS/JS (Standalone)
+
+The folder `/dist` includes all the HTML, CSS and JS files needed to run SwaggerUI on a static website or CMS, without requiring NPM.
+
+1. Download the [latest release](https://github.com/swagger-api/swagger-ui/releases/latest).
+1. Copy the contents of the `/dist` folder to your server.
+1. Open `index.html` in your HTML editor and replace "https://petstore.swagger.io/v2/swagger.json" with the URL for your OpenAPI 3.0 spec.
+
+

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,30 @@
+# OAuth 2.0 configuration
+You can configure OAuth 2.0 authorization by calling the `initOAuth` method.
+
+Property name | Docker variable |  Description
+--- | --- | ------
+clientId | `OAUTH_CLIENT_ID` | Default clientId. MUST be a string
+clientSecret | `OAUTH_CLIENT_SECRET` | **🚨 Never use this parameter in your production environment. It exposes cruicial security information. This feature is intended for dev/test environments only. 🚨** <br>Default clientSecret. MUST be a string
+realm | `OAUTH_REALM` |realm query parameter (for oauth1) added to `authorizationUrl` and `tokenUrl`. MUST be a string
+appName | `OAUTH_APP_NAME` |application name, displayed in authorization popup. MUST be a string
+scopeSeparator | `OAUTH_SCOPE_SEPARATOR` |scope separator for passing scopes, encoded before calling, default value is a space (encoded value `%20`). MUST be a string
+scopes | `OAUTH_SCOPES` |string array or scope separator (i.e. space) separated string of initially selected oauth scopes, default is empty array
+additionalQueryStringParams | `OAUTH_ADDITIONAL_PARAMS` |Additional query parameters added to `authorizationUrl` and `tokenUrl`. MUST be an object
+useBasicAuthenticationWithAccessCodeGrant | _Unavailable_ |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 base64encode(client_id + client_secret)`).  The default is `false`
+usePkceWithAuthorizationCodeGrant | `OAUTH_USE_PKCE` | Only applies to `authorizatonCode` flows. [Proof Key for Code Exchange](https://tools.ietf.org/html/rfc7636) brings enhanced security for OAuth public clients. 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: " ",
+    scopes: "openid profile",
+    additionalQueryStringParams: {test: "hello"},
+    usePkceWithAuthorizationCodeGrant: true
+  })
+```

docs/usage/version-detection.md

@@ -0,0 +1,54 @@
+# Detecting your Swagger UI version
+
+At times, you're going to need to know which version of Swagger UI you use.
+
+The first step would be to detect which major version you currently use, as the method of detecting the version has changed. If your Swagger UI has been heavily modified and you cannot detect from the look and feel which major version you use, you'd have to try both methods to get the exact version.
+
+To help you visually detect which version you're using, we've included supporting images.
+
+
+# Swagger UI 3.x
+
+![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.
+- If there are schemes or authorizations, they'd appear in a bar above the operations.
+- Try it out functionality is not enabled by default.
+- All the response codes in the operations appear at after the parameters.
+- There's a models section after the operations.
+
+If you've determined this is the version you have, to find the exact version:
+- Open your browser's web console (changes between browsers)
+- Type `JSON.stringify(versions)` in the console and execute the call.
+- The result should look similar to `swaggerUi : Object { version: "3.1.6", gitRevision: "g786cd47", gitDirty: true, … }`.
+- The version taken from that example would be `3.1.6`.
+
+Note: This functionality was added in 3.0.8. If you're unable to execute it, you're likely to use an older version, and in that case the first step would be to upgrade.
+
+
+# Swagger UI 2.x and under
+
+![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.
+- Schemes are not rendered.
+- Authorization, if rendered, will appear next to the navigation bar.
+- Try it out functionality is enabled by default.
+- The successful response code would appear above the parameters, the rest below them.
+- There's no models section after the operations.
+
+If you've determined this is the version you have, to find the exact version:
+- Navigate to the sources of the UI. Either on your disk or via the view page source functionality in your browser.
+- Find an open the `swagger-ui.js`
+- At the top of the page, there would be a comment containing the exact version of Swagger UI. This example shows version `2.2.9`:
+
+```
+/**
+ * swagger-ui - Swagger UI is a dependency-free collection of HTML, JavaScript, and CSS assets that dynamically generate beautiful documentation from a Swagger-compliant API
+ * @version v2.2.9
+ * @link http://swagger.io
+ * @license Apache-2.0
+ */
+ ```

flavors/swagger-ui-react/README.md

@@ -0,0 +1,132 @@
+# `swagger-ui-react`
+
+[![NPM version](https://badge.fury.io/js/swagger-ui-react.svg)](http://badge.fury.io/js/swagger-ui-react)
+
+`swagger-ui-react` is a flavor of Swagger UI suitable for use in React applications.
+
+It has a few differences from the main version of Swagger UI:
+* Declares `react` and `react-dom` as peerDependencies instead of production dependencies
+* Exports a component instead of a constructor function
+
+Versions of this module mirror the version of Swagger UI included in the distribution.
+
+## Quick start
+
+Install `swagger-ui-react`:
+
+```
+$ npm i --save swagger-ui-react
+```
+
+Use it in your React application:
+
+```js
+import SwaggerUI from "swagger-ui-react"
+import "swagger-ui-react/swagger-ui.css"
+
+export default App = () => <SwaggerUI url="https://petstore.swagger.io/v2/swagger.json" />
+```
+
+## Props
+
+These props map to [Swagger UI configuration options](https://github.com/swagger-api/swagger-ui/blob/master/docs/usage/configuration.md) of the same name.
+
+#### `spec`: PropTypes.object
+
+An OpenAPI document respresented as a JavaScript object, JSON string, or YAML string for Swagger UI to display.
+
+⚠️ Don't use this in conjunction with `url` - unpredictable behavior may occur.
+
+#### `url`: PropTypes.string
+
+Remote URL to an OpenAPI document that Swagger UI will fetch, parse, and display.
+
+⚠️ Don't use this in conjunction with `spec` - unpredictable behavior may occur.
+
+#### `layout`: PropTypes.string
+
+The name of a component available via the plugin system to use as the top-level layout for Swagger UI. The default value is `BaseLayout`.
+
+⚠️ This prop is currently only applied once, on mount. Changes to this prop's value will not be propagated to the underlying Swagger UI instance. A future version of this module will remove this limitation, and the change will not be considered a breaking change.
+
+#### `onComplete`: PropTypes.func
+
+> `(system) => void`
+
+A callback function that is triggered when Swagger-UI finishes rendering an OpenAPI document.
+
+Swagger UI's `system` object is passed as an argument.
+
+#### `requestInterceptor`: PropTypes.func
+
+> `req => req` or `req => Promise<req>`.
+
+A function that accepts a request object, and returns either a request object
+or a Promise that resolves to a request object.
+
+#### `responseInterceptor`: PropTypes.func
+
+> `res => res` or `res => Promise<res>`.
+
+A function that accepts a response object, and returns either a response object
+or a Promise that resolves to a response object.
+
+#### `docExpansion`: PropTypes.oneOf(['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). The default value is 'list'.
+
+⚠️ This prop is currently only applied once, on mount. Changes to this prop's value will not be propagated to the underlying Swagger UI instance. A future version of this module will remove this limitation, and the change will not be considered a breaking change.
+
+#### `defaultModelExpandDepth`: PropTypes.number
+
+The default expansion depth for models (set to -1 completely hide the models).
+
+⚠️ This prop is currently only applied once, on mount. Changes to this prop's value will not be propagated to the underlying Swagger UI instance. A future version of this module will remove this limitation, and the change will not be considered a breaking change.
+
+#### `displayOperationId`: PropTypes.bool
+
+Controls the display of operationId in operations list. The default is false.
+
+⚠️ This prop is currently only applied once, on mount. Changes to this prop's value will not be propagated to the underlying Swagger UI instance. A future version of this module will remove this limitation, and the change will not be considered a breaking change.
+
+#### `plugins`: PropTypes.arrayOf(PropTypes.object),
+
+An array of objects that augment and modify Swagger UI's functionality. See Swagger UI's [Plugin API](https://github.com/swagger-api/swagger-ui/blob/master/docs/customization/plugin-api.md) for more details.
+
+⚠️ This prop is currently only applied once, on mount. Changes to this prop's value will not be propagated to the underlying Swagger UI instance. A future version of this module will remove this limitation, and the change will not be considered a breaking change.
+
+#### `supportedSubmitMethods`: PropTypes.arrayOf(PropTypes.oneOf(['get', 'put', 'post', 'delete', 'options', 'head', 'patch', 'trace']))
+
+HTTP methods that have the Try it out feature enabled. An empty array disables Try it out for all operations. This does not filter the operations from the display.
+
+⚠️ This prop is currently only applied once, on mount. Changes to this prop's value will not be propagated to the underlying Swagger UI instance. A future version of this module will remove this limitation, and the change will not be considered a breaking change.
+
+#### `showMutatedRequest`: PropTypes.bool
+
+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.
+
+⚠️ This prop is currently only applied once, on mount. Changes to this prop's value will not be propagated to the underlying Swagger UI instance. A future version of this module will remove this limitation, and the change will not be considered a breaking change.
+
+#### `presets`: PropTypes.arrayOf(PropTypes.func),
+
+An array of functions that augment and modify Swagger UI's functionality. See Swagger UI's [Plugin API](https://github.com/swagger-api/swagger-ui/blob/master/docs/customization/plugin-api.md) for more details.
+
+⚠️ This prop is currently only applied once, on mount. Changes to this prop's value will not be propagated to the underlying Swagger UI instance. A future version of this module will remove this limitation, and the change will not be considered a breaking change.
+
+## Limitations
+
+* Not all configuration bindings are available.
+* Some props are only applied on mount, and cannot be updated reliably.
+* OAuth redirection handling is not supported.
+* Topbar/Standalone mode is not supported.
+* Custom plugins are not supported.
+
+We intend to address these limitations based on user demand, so please open an issue or pull request if you have a specific request.
+
+## Notes
+
+* The `package.json` in the same folder as this README is _not_ the manifest that should be used for releases - another manifest is generated at build-time and can be found in `./dist/`.
+
+---
+
+For anything else, check the [Swagger-UI](https://github.com/swagger-api/swagger-ui) repository.

flavors/swagger-ui-react/index.js

@@ -0,0 +1,113 @@
+import React from "react"
+import PropTypes from "prop-types"
+import swaggerUIConstructor, {presets} from "./swagger-ui"
+export default class SwaggerUI extends React.Component {
+  constructor (props) {
+    super(props)
+    this.SwaggerUIComponent = null
+    this.system = null
+  }
+
+  componentDidMount() {
+    const ui = swaggerUIConstructor({
+      plugins: this.props.plugins,
+      spec: this.props.spec,
+      url: this.props.url,
+      layout: this.props.layout,
+      defaultModelsExpandDepth: this.props.defaultModelsExpandDepth,
+      presets: [presets.apis,...this.props.presets],
+      requestInterceptor: this.requestInterceptor,
+      responseInterceptor: this.responseInterceptor,
+      onComplete: this.onComplete,
+      docExpansion: this.props.docExpansion,
+      supportedSubmitMethods: this.props.supportedSubmitMethods,
+      defaultModelExpandDepth: this.props.defaultModelExpandDepth,
+      displayOperationId: this.props.displayOperationId,
+      showMutatedRequest: typeof this.props.showMutatedRequest === "boolean" ? this.props.showMutatedRequest : true,
+      deepLinking: typeof this.props.deepLinking === "boolean" ? this.props.deepLinking : false,
+    })
+
+    this.system = ui
+    this.SwaggerUIComponent = ui.getComponent("App", "root")
+
+    this.forceUpdate()
+  }
+
+  render() {
+    return this.SwaggerUIComponent ? <this.SwaggerUIComponent /> : null
+  }
+
+  componentDidUpdate(prevProps) {
+    if(this.props.url !== prevProps.url) {
+      // flush current content
+      this.system.specActions.updateSpec("")
+
+      if(this.props.url) {
+        // update the internal URL
+        this.system.specActions.updateUrl(this.props.url)
+        // trigger remote definition fetch
+        this.system.specActions.download(this.props.url)
+      }
+    }
+
+    if(this.props.spec !== prevProps.spec && this.props.spec) {
+      if(typeof this.props.spec === "object") {
+        this.system.specActions.updateSpec(JSON.stringify(this.props.spec))
+      } else {
+        this.system.specActions.updateSpec(this.props.spec)
+      }
+    }
+  }
+
+  requestInterceptor = (req) => {
+    if (typeof this.props.requestInterceptor === "function") {
+      return this.props.requestInterceptor(req)
+    }
+    return req
+  }
+
+  responseInterceptor = (res) => {
+    if (typeof this.props.responseInterceptor === "function") {
+      return this.props.responseInterceptor(res)
+    }
+    return res
+  }
+
+  onComplete = () => {
+    if (typeof this.props.onComplete === "function") {
+      return this.props.onComplete(this.system)
+    }
+  }
+}
+
+SwaggerUI.propTypes = {
+  spec: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object,
+  ]),
+  url: PropTypes.string,
+  layout: PropTypes.string,
+  requestInterceptor: PropTypes.func,
+  responseInterceptor: PropTypes.func,
+  onComplete: PropTypes.func,
+  docExpansion: PropTypes.oneOf(["list", "full", "none"]),
+  supportedSubmitMethods: PropTypes.arrayOf(
+    PropTypes.oneOf(["get", "put", "post", "delete", "options", "head", "patch", "trace"])
+    ),
+  plugins: PropTypes.arrayOf(PropTypes.object),
+  displayOperationId: PropTypes.bool,
+  showMutatedRequest: PropTypes.bool,
+  defaultModelExpandDepth: PropTypes.number,
+  defaultModelsExpandDepth: PropTypes.number,
+  presets: PropTypes.arrayOf(PropTypes.func),
+  deepLinking: PropTypes.bool,
+}
+
+SwaggerUI.defaultProps = {
+  layout: "BaseLayout",
+  supportedSubmitMethods: ["get", "put", "post", "delete", "options", "head", "patch", "trace"],
+  docExpansion: "list",
+  defaultModelsExpandDepth: 1,
+  presets: [],
+  deepLinking: false,
+}

flavors/swagger-ui-react/release/create-manifest.js

@@ -0,0 +1,9 @@
+var jsonMerger = require("json-merger")
+var fs = require("fs")
+var result = jsonMerger.mergeFiles(["../../../package.json", "template.json"])
+
+if(process.env.REACT_FLAVOR_VERSION_IDENTIFIER) {
+  result.version = process.env.REACT_FLAVOR_VERSION_IDENTIFIER
+}
+
+process.stdout.write(JSON.stringify(result, null, 2))

flavors/swagger-ui-react/release/run.sh

@@ -0,0 +1,33 @@
+# Deploy `swagger-ui-react` to npm.
+
+# https://www.peterbe.com/plog/set-ex
+set -ex
+
+# Parameter Expansion: http://stackoverflow.com/questions/6393551/what-is-the-meaning-of-0-in-a-bash-script
+cd "${0%/*}"
+
+mkdir -p ../dist
+
+# Copy UI's dist files to our directory
+cp ../../../dist/swagger-ui.js ../dist
+cp ../../../dist/swagger-ui-es-bundle.js ../dist
+cp ../../../dist/swagger-ui.css ../dist
+
+# Create a releasable package manifest
+node create-manifest.js > ../dist/package.json
+
+# Transpile our top-level component
+../../../node_modules/.bin/cross-env BABEL_ENV=commonjs ../../../node_modules/.bin/babel --config-file ../../../babel.config.js ../index.js > ../dist/commonjs.js
+../../../node_modules/.bin/cross-env BABEL_ENV=es ../../../node_modules/.bin/babel --config-file ../../../babel.config.js ../index.js > ../dist/index.js
+
+# Copy our README into the dist folder for npm
+cp ../README.md ../dist
+
+# Run the release from the dist folder
+cd ../dist
+
+if [ "$PUBLISH_FLAVOR_REACT" = "true" ] ; then
+  npm publish .
+else
+  npm pack .
+fi

flavors/swagger-ui-react/release/template.json

@@ -0,0 +1,46 @@
+{
+  "dependencies": {
+    "react": {
+      "$remove": true
+    },
+    "react-dom": {
+      "$remove": true
+    }
+  },
+  "scripts": {
+    "$remove": true
+  },
+  "devDependencies": {
+    "$remove": true
+  },
+  "bundlesize": {
+    "$remove": true
+  },
+  "nyc": {
+    "$remove": true
+  },
+  "browserslist": {
+    "$remove": true
+  },
+  "config": {
+    "$remove": true
+  },
+  "name": "swagger-ui-react",
+  "main": "commonjs.js",
+  "module": "index.js",
+  "repository": "git@github.com:swagger-api/swagger-ui.git",
+  "contributors": [
+    "(in alphabetical order)",
+    "Anna Bodnia <anna.bodnia@gmail.com>",
+    "Buu Nguyen <buunguyen@gmail.com>",
+    "Josh Ponelat <jponelat@gmail.com>",
+    "Kyle Shockey <kyleshockey1@gmail.com>",
+    "Robert Barnwell <robert@robertismy.name>",
+    "Sahar Jafari <shr.jafari@gmail.com>"
+  ],
+  "license": "Apache-2.0",
+  "peerDependencies": {
+    "react": ">=15.6.2",
+    "react-dom": ">=15.6.2"
+  }
+}

package.json

@@ -0,0 +1,191 @@
+{
+  "name": "swagger-ui",
+  "version": "3.38.0",
+  "main": "dist/swagger-ui.js",
+  "module": "dist/swagger-ui-es-bundle.js",
+  "homepage": "https://github.com/swagger-api/swagger-ui",
+  "repository": "git@github.com:swagger-api/swagger-ui.git",
+  "contributors": [
+    "(in alphabetical order)",
+    "Anna Bodnia <anna.bodnia@gmail.com>",
+    "Buu Nguyen <buunguyen@gmail.com>",
+    "Josh Ponelat <jponelat@gmail.com>",
+    "Kyle Shockey <kyleshockey@gmail.com>",
+    "Robert Barnwell <robert@robertismy.name>",
+    "Sahar Jafari <shr.jafari@gmail.com>"
+  ],
+  "license": "Apache-2.0",
+  "scripts": {
+    "automated-release": "release-it -VV --config ./release/.release-it.json",
+    "build": "run-p --aggregate-output build-core build-bundle build-standalone build-stylesheets build:es:bundle build:es:bundle:core",
+    "build-bundle": "webpack --colors --config webpack/bundle.babel.js",
+    "build-core": "webpack --colors --config webpack/core.babel.js",
+    "build-standalone": "webpack --colors --config webpack/standalone.babel.js",
+    "build-stylesheets": "webpack --colors --config webpack/stylesheets.babel.js",
+    "build:es:bundle": "webpack --colors --config webpack/es-bundle.babel.js",
+    "build:es:bundle:core": "webpack --colors --config webpack/es-bundle-core.babel.js",
+    "predev": "npm install",
+    "dev": "webpack-dev-server --config webpack/dev.babel.js",
+    "deps-license": "license-checker --production --csv --out $npm_package_config_deps_check_dir/licenses.csv && license-checker --development --csv --out $npm_package_config_deps_check_dir/licenses-dev.csv",
+    "deps-size": "webpack -p --config webpack/bundle.babel.js --json | webpack-bundle-size-analyzer >| $npm_package_config_deps_check_dir/sizes.txt",
+    "deps-check": "run-s deps-license deps-size",
+    "lint": "eslint --cache --ext \".js,.jsx\" src test",
+    "lint-errors": "eslint --cache --quiet --ext \".js,.jsx\" src test",
+    "lint-fix": "eslint --cache --ext \".js,.jsx\" src test --fix",
+    "test": "run-s just-test-in-node test:unit-jest e2e-cypress lint-errors",
+    "test-in-node": "run-s lint-errors just-test-in-node",
+    "just-test-in-node": "cross-env BABEL_ENV=test mocha \"test/mocha/**/*.{js,jsx}\"",
+    "test-e2e-cypress": "cypress run",
+    "test-e2e-selenium": "sleep 3 && nightwatch test/e2e-selenium/scenarios/ --config test/e2e-selenium/nightwatch.json",
+    "test:artifact": "run-s test:artifact:umd:bundle test:artifact:es:bundle test:artifact:es:bundle:core",
+    "test:artifact:umd:bundle": "npm run build-bundle && cross-env BABEL_ENV=commonjs jest --config ./config/jest/jest.artifact-umd-bundle.config.js",
+    "test:artifact:es:bundle": "npm run build:es:bundle && cross-env BABEL_ENV=commonjs jest --config ./config/jest/jest.artifact-es-bundle.config.js",
+    "test:artifact:es:bundle:core": "npm run build:es:bundle:core && cross-env BABEL_ENV=commonjs jest --config ./config/jest/jest.artifact-es-bundle-core.config.js",
+    "test:unit-jest": "cross-env BABEL_ENV=test jest --config ./config/jest/jest.unit.config.js",
+    "e2e-initial-render": "nightwatch test/e2e-selenium/scenarios/ --config test/e2e-selenium/nightwatch.json --group initial-render",
+    "mock-api": "json-server --watch test/e2e-selenium/db.json --port 3204",
+    "hot-e2e-cypress-server": "webpack-dev-server --config webpack/dev-e2e.babel.js --content-base test/e2e-cypress/static",
+    "hot-e2e-selenium-server": "webpack-dev-server --config webpack/dev-e2e.babel.js --content-base test/e2e-selenium/static",
+    "e2e-cypress": "run-p -r hot-e2e-cypress-server mock-api test-e2e-cypress",
+    "dev-e2e-cypress-open": "cypress open",
+    "dev-e2e-cypress": "run-p -r hot-e2e-cypress-server mock-api dev-e2e-cypress-open",
+    "e2e-selenium": "run-p -r hot-e2e-selenium-server mock-api test-e2e-selenium",
+    "open-static": "node -e \"require('open')('http://localhost:3002')\"",
+    "security-audit": "run-s -sc security-audit:all security-audit:prod",
+    "security-audit:prod": "npm-audit-ci-wrapper -p -t low",
+    "security-audit:all": "npm-audit-ci-wrapper -t moderate",
+    "serve-static": "http-server dist/ -i -a 0.0.0.0 -p 3002",
+    "start": "npm-run-all --parallel serve-static open-static"
+  },
+  "dependencies": {
+    "@babel/runtime-corejs3": "^7.11.2",
+    "@braintree/sanitize-url": "^5.0.0",
+    "@kyleshockey/object-assign-deep": "^0.4.2",
+    "@kyleshockey/xml": "^1.0.2",
+    "base64-js": "^1.5.1",
+    "classnames": "^2.2.6",
+    "css.escape": "1.5.1",
+    "deep-extend": "0.6.0",
+    "dompurify": "^2.2.3",
+    "ieee754": "^1.1.13",
+    "immutable": "^3.x.x",
+    "js-file-download": "^0.4.12",
+    "js-yaml": "^3.13.1",
+    "lodash": "^4.17.19",
+    "memoizee": "^0.4.12",
+    "prop-types": "^15.7.2",
+    "randombytes": "^2.1.0",
+    "react": "=15.7.0",
+    "react-copy-to-clipboard": "5.0.1",
+    "react-debounce-input": "^3.2.3",
+    "react-dom": "=15.7.0",
+    "react-immutable-proptypes": "2.2.0",
+    "react-immutable-pure-component": "^1.1.1",
+    "react-inspector": "^2.3.0",
+    "react-motion": "^0.5.2",
+    "react-redux": "=4.4.10",
+    "react-syntax-highlighter": "^15.4.3",
+    "redux": "=3.7.2",
+    "redux-immutable": "3.1.0",
+    "remarkable": "^2.0.1",
+    "reselect": "^4.0.0",
+    "serialize-error": "^2.1.0",
+    "sha.js": "^2.4.11",
+    "swagger-client": "^3.12.1",
+    "url-parse": "^1.4.7",
+    "xml-but-prettier": "^1.0.1",
+    "zenscroll": "^4.0.2"
+  },
+  "devDependencies": {
+    "@babel/cli": "=7.12.10",
+    "@babel/core": "=7.12.10",
+    "@babel/plugin-proposal-class-properties": "=7.12.1",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "=7.12.1",
+    "@babel/plugin-proposal-optional-chaining": "=7.12.7",
+    "@babel/plugin-transform-runtime": "=7.12.10",
+    "@babel/preset-env": "=7.12.10",
+    "@babel/preset-react": "=7.12.10",
+    "@babel/register": "=7.12.10",
+    "@commitlint/cli": "^11.0.0",
+    "@commitlint/config-conventional": "^11.0.0",
+    "@jest/globals": "=26.6.2",
+    "@release-it/conventional-changelog": "=1.1.4",
+    "autoprefixer": "^9.0.0",
+    "babel-eslint": "^10.0.0",
+    "babel-loader": "^8.1.0",
+    "babel-plugin-lodash": "=3.3.4",
+    "babel-plugin-module-resolver": "=4.0.0",
+    "babel-plugin-transform-react-remove-prop-types": "=0.4.24",
+    "body-parser": "^1.19.0",
+    "bundlesize": "^0.18.0",
+    "chromedriver": "^87.0.0",
+    "copy-webpack-plugin": "^7.0.0",
+    "cors": "^2.8.5",
+    "cross-env": "=7.0.3",
+    "css-loader": "=5.0.1",
+    "cssnano": "=4.1.10",
+    "cypress": "=5.6.0",
+    "dedent": "^0.7.0",
+    "deepmerge": "^4.0.0",
+    "enzyme": "^2.7.1",
+    "eslint": "^4.1.1",
+    "eslint-plugin-import": "^2.21.1",
+    "eslint-plugin-jest": "=24.1.3",
+    "eslint-plugin-mocha": "^8.0.0",
+    "eslint-plugin-react": "^7.20.0",
+    "esm": "=3.2.25",
+    "expect": "^1.20.2",
+    "express": "^4.17.1",
+    "file-loader": "^6.0.0",
+    "git-describe": "^4.0.4",
+    "http-server": "^0.12.3",
+    "husky": "=4.3.6",
+    "ignore-assets-webpack-plugin": "^2.0.1",
+    "inspectpack": "=4.5.2",
+    "jest": "=25.5.4",
+    "jsdom": "=15.2.1",
+    "json-loader": "^0.5.7",
+    "json-merger": "^1.1.2",
+    "json-server": "=0.16.3",
+    "less": "^3.11.2",
+    "license-checker": "^25.0.0",
+    "lint-staged": "=10.5.3",
+    "mini-css-extract-plugin": "^1.0.0",
+    "mocha": "=7.2.0",
+    "nightwatch": "^1.3.6",
+    "node-sass": "^4.14.1",
+    "npm-audit-ci-wrapper": "^3.0.0",
+    "npm-run-all": "^4.1.5",
+    "oauth2-server": "^2.4.1",
+    "open": "^7.0.4",
+    "postcss": "=8.2.1",
+    "postcss-loader": "=4.1.0",
+    "postcss-preset-env": "=6.7.0",
+    "prettier": "^2.0.0",
+    "raw-loader": "^4.0.0",
+    "react-test-renderer": "^15.5.4",
+    "release-it": "=13.7.1",
+    "rimraf": "^3.0.0",
+    "sass-loader": "^7.1.0",
+    "selenium-server-standalone-jar": "^3.141.5",
+    "source-map-support": "^0.5.19",
+    "tachyons-sass": "^4.9.5",
+    "terser-webpack-plugin": "^4.0.0",
+    "url-loader": "^2.3.0",
+    "webpack": "^4.43.0",
+    "webpack-bundle-size-analyzer": "^3.1.0",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.11.0",
+    "webpack-stats-plugin": "=1.0.2"
+  },
+  "config": {
+    "deps_check_dir": ".deps_check"
+  },
+  "bundlesize": [
+    {
+      "path": "./dist/swagger-ui-bundle.js",
+      "maxSize": "1 MB",
+      "compression": "none"
+    }
+  ]
+}

release/.release-it.json

@@ -0,0 +1,28 @@
+{
+  "hooks": {
+    "before:bump": [
+      "./release/check-for-breaking-changes.sh ${latestVersion} ${version}",
+      "npm update swagger-client",
+      "npm test"
+    ],
+    "after:bump": ["npm run build"],
+    "after:release": "export GIT_TAG=v${version} && echo GIT_TAG=v${version} > release/.version"
+  },
+  "git": {
+    "requireUpstream": false,
+    "changelog": "./release/get-changelog.sh",
+    "commitMessage": "chore(release): cut the v${version} release",
+    "tagName": "v${version}",
+    "push": false
+  },
+  "github": {
+    "release": true,
+    "releaseName": "Swagger UI v${version} Released!",
+    "draft": true
+  },
+  "plugins": {
+    "@release-it/conventional-changelog": {
+      "preset": "angular"
+    }
+  }
+}

release/check-for-breaking-changes.sh

@@ -0,0 +1,14 @@
+#!/bin/bash
+CURRENT_VERSION=$1
+NEXT_VERSION=$2
+CURRENT_MAJOR=${CURRENT_VERSION:0:1}
+NEXT_MAJOR=${NEXT_VERSION:0:1}
+
+if [ "$CURRENT_MAJOR" -ne "$NEXT_MAJOR" ] ; 
+  then if [ "$BREAKING_OKAY" = "true" ];
+    then echo "breaking change detected but BREAKING_OKAY is set; continuing." && exit 0;
+    else echo "breaking change detected and BREAKING_OKAY is not set; aborting." && exit 1;
+  fi;
+fi;
+
+echo "next version is not a breaking change; continuing."; 

release/get-changelog.sh

@@ -0,0 +1,5 @@
+echo "_No release summary included._\n\n#### Changelog\n"
+
+PREV_RELEASE_REF=$(git log --pretty=oneline | grep ' release: ' | head -n 2 | tail -n 1 | cut -f 1 -d " ")
+
+git log --pretty=oneline $PREV_RELEASE_REF..HEAD | awk '{ $1=""; print}' | sed -e 's/^[ \t]*//' | sed 's/^feat/0,feat/' | sed 's/^improve/1,improve/' | sed 's/^fix/2,fix/'| sort | sed 's/^[0-2],//' | sed 's/^/* /'

renovate.json

@@ -0,0 +1,45 @@
+{
+  "extends": [
+    "config:base"
+  ],
+  "packageRules": [
+    {
+      "managers": ["npm"],
+      "commitMessage": "{{{commitMessagePrefix}}} {{{commitMessageTopic}}}{{{commitMessageExtra}}} {{{commitMessageSuffix}}}",
+      "commitMessageTopic": "{{depName}}",
+      "commitMessageExtra": "{{#if isMajor}} v{{{newMajor}}}{{else}}{{#if isSingleVersion}}@{{{toVersion}}}{{else}}@{{{newValue}}}{{/if}}{{/if}}"
+    },
+    {
+      "packagePatterns": [
+        "*"
+      ],
+      "rangeStrategy": "replace",
+      "semanticCommitType": "housekeeping"
+    },
+    {
+      "depTypeList": [
+        "devDependencies"
+      ],
+      "rangeStrategy": "update-lockfile",
+      "semanticCommitScope": "dev-deps",
+      "automerge": true,
+      "major": {
+        "automerge": false
+      }
+    },
+    {
+      "depTypeList": [
+        "peerDependencies"
+      ],
+      "rangeStrategy": "widen",
+      "semanticCommitScope": "peer-deps"
+    },
+    {
+      "packagePatterns": ["^react"],
+      "enabled": false
+    }
+  ],
+  "ignorePaths": ["swagger-ui-dist-package/package.json"],
+  "ignoreDeps": ["release-it", "@release-it/conventional-changelog"],
+  "prConcurrentLimit": 3
+}

snapcraft.yaml

@@ -0,0 +1,28 @@
+name: swagger-ui
+version: master
+summary: The World's Most Popular API Framework
+description: |
+  Swagger UI is part of the Swagger project. The Swagger project allows you to
+  produce, visualize and consume your OWN RESTful services. No proxy or 3rd
+  party services required. Do it your own way.
+
+  Swagger UI is a dependency-free collection of HTML, Javascript, and CSS
+  assets that dynamically generate beautiful documentation and sandbox from a
+  Swagger-compliant API. Because Swagger UI has no dependencies, you can host
+  it in any server environment, or on your local machine.
+
+grade: devel
+confinement: strict
+
+apps:
+  swagger-ui:
+    command: sh -c \"cd $SNAP/lib/node_modules/swagger-ui/dist && http-server -a localhost -p 8080\"
+    daemon: simple
+    plugs: [network, network-bind]
+
+parts:
+  swagger-ui:
+    source: .
+    plugin: nodejs
+    npm-run: [build]
+    node-packages: [handlebars, http-server]

src/.eslintrc

@@ -0,0 +1,10 @@
+{
+  "rules": {
+    "import/no-extraneous-dependencies": [
+      2,
+      {
+        "devDependencies": false
+      }
+    ]
+  }
+}

src/core/brace-snippets-yaml.js

@@ -0,0 +1,6 @@
+/* global ace */
+ace.define("ace/snippets/yaml",
+  ["require","exports","module"], function(e,t,n){ // eslint-disable-line no-unused-vars
+    t.snippetText=undefined
+    t.scope="yaml"
+  })

src/core/components/app.jsx

@@ -0,0 +1,28 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+export default class App extends React.Component {
+
+  getLayout() {
+    let { getComponent, layoutSelectors } = this.props
+    const layoutName = layoutSelectors.current()
+    const Component = getComponent(layoutName, true)
+    return Component ? Component : ()=> <h1> No layout defined for &quot;{layoutName}&quot; </h1>
+  }
+
+  render() {
+    const Layout = this.getLayout()
+
+    return (
+      <Layout/>
+    )
+  }
+}
+
+App.propTypes = {
+  getComponent: PropTypes.func.isRequired,
+  layoutSelectors: PropTypes.object.isRequired,
+}
+
+App.defaultProps = {
+}

src/core/components/array-model.jsx

@@ -0,0 +1,70 @@
+import React, { Component } from "react"
+import PropTypes from "prop-types"
+import ImPropTypes from "react-immutable-proptypes"
+
+const propClass = "property"
+
+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,
+    displayName: PropTypes.string,
+    required: PropTypes.bool,
+    expandDepth: PropTypes.number,
+    specPath: ImPropTypes.list.isRequired,
+    depth: PropTypes.number,
+    includeReadOnly: PropTypes.bool,
+    includeWriteOnly: PropTypes.bool,
+  }
+
+  render(){
+    let { getComponent, getConfigs, schema, depth, expandDepth, name, displayName, specPath } = this.props
+    let description = schema.get("description")
+    let items = schema.get("items")
+    let title = schema.get("title") || displayName || name
+    let properties = schema.filter( ( v, key) => ["type", "items", "description", "$$ref"].indexOf(key) === -1 )
+
+    const Markdown = getComponent("Markdown", true)
+    const ModelCollapse = getComponent("ModelCollapse")
+    const Model = getComponent("Model")
+    const Property = getComponent("Property")
+
+    const titleEl = title &&
+      <span className="model-title">
+        <span className="model-title__text">{ title }</span>
+      </span>
+
+    /*
+    Note: we set `name={null}` in <Model> below because we don't want
+    the name of the current Model passed (and displayed) as the name of the array element Model
+    */
+
+    return <span className="model">
+      <ModelCollapse title={titleEl} expanded={ depth <= expandDepth } collapsedContent="[...]">
+        [
+          {
+            properties.size ? properties.entrySeq().map( ( [ key, v ] ) => <Property key={`${key}-${v}`} propKey={ key } propVal={ v } propClass={ propClass } />) : null
+          }
+          {
+            !description ? (properties.size ? <div className="markdown"></div> : null) :
+              <Markdown source={ description } />
+          }
+          <span>
+            <Model
+              { ...this.props }
+              getConfigs={ getConfigs }
+              specPath={specPath.push("items")}
+              name={null}
+              schema={ items }
+              required={ false }
+              depth={ depth + 1 }
+            />
+          </span>
+        ]
+      </ModelCollapse>
+    </span>
+  }
+}

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

@@ -0,0 +1,85 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+export default class ApiKeyAuth extends React.Component {
+  static propTypes = {
+    authorized: PropTypes.object,
+    getComponent: PropTypes.func.isRequired,
+    errSelectors: PropTypes.object.isRequired,
+    schema: PropTypes.object.isRequired,
+    name: PropTypes.string.isRequired,
+    onChange: PropTypes.func
+  }
+
+  constructor(props, context) {
+    super(props, context)
+    let { name, schema } = this.props
+    let value = this.getValue()
+
+    this.state = {
+      name: name,
+      schema: schema,
+      value: value
+    }
+  }
+
+  getValue () {
+    let { name, authorized } = this.props
+
+    return authorized && authorized.getIn([name, "value"])
+  }
+
+  onChange =(e) => {
+    let { onChange } = this.props
+    let value = e.target.value
+    let newState = Object.assign({}, this.state, { value: value })
+
+    this.setState(newState)
+    onChange(newState)
+  }
+
+  render() {
+    let { schema, getComponent, errSelectors, name } = this.props
+    const Input = getComponent("Input")
+    const Row = getComponent("Row")
+    const Col = getComponent("Col")
+    const AuthError = getComponent("authError")
+    const Markdown = getComponent("Markdown", true)
+    const JumpToPath = getComponent("JumpToPath", true)
+    let value = this.getValue()
+    let errors = errSelectors.allErrors().filter( err => err.get("authId") === name)
+
+    return (
+      <div>
+        <h4>
+          <code>{ name || schema.get("name") }</code>&nbsp;
+          (apiKey)
+          <JumpToPath path={[ "securityDefinitions", name ]} />
+        </h4>
+        { value && <h6>Authorized</h6>}
+        <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>
+        <Row>
+          <label>Value:</label>
+          {
+            value ? <code> ****** </code>
+                  : <Col><Input type="text" onChange={ this.onChange } autoFocus/></Col>
+          }
+        </Row>
+        {
+          errors.valueSeq().map( (error, key) => {
+            return <AuthError error={ error }
+                              key={ key }/>
+          } )
+        }
+      </div>
+    )
+  }
+}

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

@@ -0,0 +1,62 @@
+import React from "react"
+import PropTypes from "prop-types"
+import ImPropTypes from "react-immutable-proptypes"
+
+export default class Auths extends React.Component {
+  static propTypes = {
+    schema: ImPropTypes.orderedMap.isRequired,
+    name: PropTypes.string.isRequired,
+    onAuthChange: PropTypes.func.isRequired,
+    authorized: ImPropTypes.orderedMap.isRequired
+  }
+
+  render() {
+    let {
+      schema,
+      name,
+      getComponent,
+      onAuthChange,
+      authorized,
+      errSelectors
+    } = this.props
+    const ApiKeyAuth = getComponent("apiKeyAuth")
+    const BasicAuth = getComponent("basicAuth")
+
+    let authEl
+
+    const type = schema.get("type")
+
+    switch(type) {
+      case "apiKey": authEl = <ApiKeyAuth key={ name }
+                                        schema={ schema }
+                                        name={ name }
+                                        errSelectors={ errSelectors }
+                                        authorized={ authorized }
+                                        getComponent={ getComponent }
+                                        onChange={ onAuthChange } />
+        break
+      case "basic": authEl = <BasicAuth key={ name }
+                                      schema={ schema }
+                                      name={ name }
+                                      errSelectors={ errSelectors }
+                                      authorized={ authorized }
+                                      getComponent={ getComponent }
+                                      onChange={ onAuthChange } />
+        break
+      default: authEl = <div key={ name }>Unknown security definition type { type }</div>
+    }
+
+    return (<div key={`${name}-jump`}>
+      { authEl }
+    </div>)
+  }
+
+  static propTypes = {
+    errSelectors: PropTypes.object.isRequired,
+    getComponent: PropTypes.func.isRequired,
+    authSelectors: PropTypes.object.isRequired,
+    specSelectors: PropTypes.object.isRequired,
+    authActions: PropTypes.object.isRequired,
+    definitions: ImPropTypes.iterable.isRequired
+  }
+}

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

@@ -0,0 +1,60 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+export default class AuthorizationPopup extends React.Component {
+  close =() => {
+    let { authActions } = this.props
+
+    authActions.showDefinitions(false)
+  }
+
+  render() {
+    let { authSelectors, authActions, getComponent, errSelectors, specSelectors, fn: { AST = {} } } = this.props
+    let definitions = authSelectors.shownDefinitions()
+    const Auths = getComponent("auths")
+
+    return (
+      <div className="dialog-ux">
+        <div className="backdrop-ux"></div>
+        <div className="modal-ux">
+          <div className="modal-dialog-ux">
+            <div className="modal-ux-inner">
+              <div className="modal-ux-header">
+                <h3>Available authorizations</h3>
+                <button type="button" className="close-modal" onClick={ this.close }>
+                  <svg width="20" height="20">
+                    <use href="#close" xlinkHref="#close" />
+                  </svg>
+                </button>
+              </div>
+              <div className="modal-ux-content">
+
+                {
+                  definitions.valueSeq().map(( definition, key ) => {
+                    return <Auths key={ key }
+                                  AST={AST}
+                                  definitions={ definition }
+                                  getComponent={ getComponent }
+                                  errSelectors={ errSelectors }
+                                  authSelectors={ authSelectors }
+                                  authActions={ authActions }
+                                  specSelectors={ specSelectors }/>
+                  })
+                }
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  static propTypes = {
+    fn: PropTypes.object.isRequired,
+    getComponent: PropTypes.func.isRequired,
+    authSelectors: PropTypes.object.isRequired,
+    specSelectors: PropTypes.object.isRequired,
+    errSelectors: PropTypes.object.isRequired,
+    authActions: PropTypes.object.isRequired,
+  }
+}

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

@@ -0,0 +1,30 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+export default class AuthorizeBtn extends React.Component {
+  static propTypes = {
+    onClick: PropTypes.func,
+    isAuthorized: PropTypes.bool,
+    showPopup: PropTypes.bool,
+    getComponent: PropTypes.func.isRequired
+  }
+
+  render() {
+    let { isAuthorized, showPopup, onClick, getComponent } = this.props
+
+    //must be moved out of button component
+    const AuthorizationPopup = getComponent("authorizationPopup", true)
+
+    return (
+      <div className="auth-wrapper">
+        <button className={isAuthorized ? "btn authorize locked" : "btn authorize unlocked"} onClick={onClick}>
+          <span>Authorize</span>
+          <svg width="20" height="20">
+            <use href={ isAuthorized ? "#locked" : "#unlocked" } xlinkHref={ isAuthorized ? "#locked" : "#unlocked" } />
+          </svg>
+        </button>
+      { showPopup && <AuthorizationPopup /> }
+      </div>
+    )
+  }
+}

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

@@ -0,0 +1,33 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+export default class AuthorizeOperationBtn extends React.Component {
+    static propTypes = {
+      isAuthorized: PropTypes.bool.isRequired,
+      onClick: PropTypes.func
+    }
+
+  onClick =(e) => {
+    e.stopPropagation()
+    let { onClick } = this.props
+
+    if(onClick) {
+      onClick()
+    }
+  }
+
+  render() {
+    let { isAuthorized } = this.props
+
+    return (
+      <button className={isAuthorized ? "authorization__btn locked" : "authorization__btn unlocked"}
+        aria-label={isAuthorized ? "authorization button locked" : "authorization button unlocked"}
+        onClick={this.onClick}>
+        <svg width="20" height="20">
+          <use href={ isAuthorized ? "#locked" : "#unlocked" } xlinkHref={ isAuthorized ? "#locked" : "#unlocked" } />
+        </svg>
+      </button>
+
+    )
+  }
+}

src/core/components/auth/auths.jsx

@@ -0,0 +1,130 @@
+import React from "react"
+import PropTypes from "prop-types"
+import ImPropTypes from "react-immutable-proptypes"
+
+export default class Auths extends React.Component {
+  static propTypes = {
+    definitions: PropTypes.object.isRequired,
+    getComponent: PropTypes.func.isRequired,
+    authSelectors: PropTypes.object.isRequired,
+    authActions: PropTypes.object.isRequired,
+    specSelectors: PropTypes.object.isRequired
+  }
+
+  constructor(props, context) {
+    super(props, context)
+
+    this.state = {}
+  }
+
+  onAuthChange =(auth) => {
+    let { name } = auth
+
+    this.setState({ [name]: auth })
+  }
+
+  submitAuth =(e) => {
+    e.preventDefault()
+
+    let { authActions } = this.props
+    authActions.authorizeWithPersistOption(this.state)
+  }
+
+  logoutClick =(e) => {
+    e.preventDefault()
+
+    let { authActions, definitions } = this.props
+    let auths = definitions.map( (val, key) => {
+      return key
+    }).toArray()
+
+    this.setState(auths.reduce((prev, auth) => {
+      prev[auth] = ""
+      return prev
+    }, {}))
+
+    authActions.logoutWithPersistOption(auths)
+  }
+
+  close =(e) => {
+    e.preventDefault()
+    let { authActions } = this.props
+
+    authActions.showDefinitions(false)
+  }
+
+  render() {
+    let { definitions, getComponent, authSelectors, errSelectors } = this.props
+    const AuthItem = getComponent("AuthItem")
+    const Oauth2 = getComponent("oauth2", true)
+    const Button = getComponent("Button")
+
+    let authorized = authSelectors.authorized()
+
+    let authorizedAuth = definitions.filter( (definition, key) => {
+      return !!authorized.get(key)
+    })
+
+    let nonOauthDefinitions = definitions.filter( schema => schema.get("type") !== "oauth2")
+    let oauthDefinitions = definitions.filter( schema => schema.get("type") === "oauth2")
+
+    return (
+      <div className="auth-container">
+        {
+          !!nonOauthDefinitions.size && <form onSubmit={ this.submitAuth }>
+            {
+              nonOauthDefinitions.map( (schema, name) => {
+                return <AuthItem
+                  key={name}
+                  schema={schema}
+                  name={name}
+                  getComponent={getComponent}
+                  onAuthChange={this.onAuthChange}
+                  authorized={authorized}
+                  errSelectors={errSelectors}
+                  />
+              }).toArray()
+            }
+            <div className="auth-btn-wrapper">
+              {
+                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>
+              }
+              <Button className="btn modal-btn auth btn-done" onClick={ this.close }>Close</Button>
+            </div>
+          </form>
+        }
+
+        {
+          oauthDefinitions && oauthDefinitions.size ? <div>
+          <div className="scope-def">
+            <p>Scopes are used to grant an application different levels of access to data on behalf of the end user. Each API may declare one or more scopes.</p>
+            <p>API requires the following scopes. Select which ones you want to grant to Swagger UI.</p>
+          </div>
+            {
+              definitions.filter( schema => schema.get("type") === "oauth2")
+                .map( (schema, name) =>{
+                  return (<div key={ name }>
+                    <Oauth2 authorized={ authorized }
+                            schema={ schema }
+                            name={ name } />
+                  </div>)
+                }
+                ).toArray()
+            }
+          </div> : null
+        }
+
+      </div>
+    )
+  }
+
+  static propTypes = {
+    errSelectors: PropTypes.object.isRequired,
+    getComponent: PropTypes.func.isRequired,
+    authSelectors: PropTypes.object.isRequired,
+    specSelectors: PropTypes.object.isRequired,
+    authActions: PropTypes.object.isRequired,
+    definitions: ImPropTypes.iterable.isRequired
+  }
+}

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

@@ -0,0 +1,100 @@
+import React from "react"
+import PropTypes from "prop-types"
+import ImPropTypes from "react-immutable-proptypes"
+
+export default class BasicAuth extends React.Component {
+  static propTypes = {
+    authorized: PropTypes.object,
+    getComponent: PropTypes.func.isRequired,
+    schema: PropTypes.object.isRequired,
+    onChange: PropTypes.func.isRequired
+  }
+
+  constructor(props, context) {
+    super(props, context)
+    let { schema, name } = this.props
+
+    let value = this.getValue()
+    let username = value.username
+
+    this.state = {
+      name: name,
+      schema: schema,
+      value: !username ? {} : {
+        username: username
+      }
+    }
+  }
+
+  getValue () {
+    let { authorized, name } = this.props
+
+    return authorized && authorized.getIn([name, "value"]) || {}
+  }
+
+  onChange =(e) => {
+    let { onChange } = this.props
+    let { value, name } = e.target
+
+    let newValue = this.state.value
+    newValue[name] = value
+
+    this.setState({ value: newValue })
+
+    onChange(this.state)
+  }
+
+  render() {
+    let { schema, getComponent, name, errSelectors } = this.props
+    const Input = getComponent("Input")
+    const Row = getComponent("Row")
+    const Col = getComponent("Col")
+    const AuthError = getComponent("authError")
+    const JumpToPath = getComponent("JumpToPath", true)
+    const Markdown = getComponent("Markdown", true)
+    let username = this.getValue().username
+    let errors = errSelectors.allErrors().filter( err => err.get("authId") === name)
+
+    return (
+      <div>
+        <h4>Basic authorization<JumpToPath path={[ "securityDefinitions", name ]} /></h4>
+        { username && <h6>Authorized</h6> }
+        <Row>
+          <Markdown source={ schema.get("description") } />
+        </Row>
+        <Row>
+          <label>Username:</label>
+          {
+            username ? <code> { username } </code>
+                     : <Col><Input type="text" required="required" name="username" onChange={ this.onChange } autoFocus/></Col>
+          }
+        </Row>
+        <Row>
+          <label>Password:</label>
+            {
+              username ? <code> ****** </code>
+                       : <Col><Input autoComplete="new-password"
+                                     name="password"
+                                     type="password"
+                                     onChange={ this.onChange }/></Col>
+            }
+        </Row>
+        {
+          errors.valueSeq().map( (error, key) => {
+            return <AuthError error={ error }
+                              key={ key }/>
+          } )
+        }
+      </div>
+    )
+  }
+
+  static propTypes = {
+    name: PropTypes.string.isRequired,
+    errSelectors: PropTypes.object.isRequired,
+    getComponent: PropTypes.func.isRequired,
+    onChange: PropTypes.func,
+    schema: ImPropTypes.map,
+    authorized: ImPropTypes.map
+  }
+}

src/core/components/auth/error.jsx

@@ -0,0 +1,24 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+export default class AuthError extends React.Component {
+
+  static propTypes = {
+    error: PropTypes.object.isRequired
+  }
+
+  render() {
+    let { error } = this.props
+
+    let level = error.get("level")
+    let message = error.get("message")
+    let source = error.get("source")
+
+    return (
+      <div className="errors">
+        <b>{ source } { level }</b>
+        <span>{ message }</span>
+      </div>
+    )
+  }
+}

src/core/components/auth/oauth2.jsx

@@ -0,0 +1,277 @@
+import React from "react"
+import PropTypes from "prop-types"
+import oauth2Authorize from "core/oauth2-authorize"
+
+export default class Oauth2 extends React.Component {
+  static propTypes = {
+    name: PropTypes.string,
+    authorized: PropTypes.object,
+    getComponent: PropTypes.func.isRequired,
+    schema: PropTypes.object.isRequired,
+    authSelectors: PropTypes.object.isRequired,
+    authActions: PropTypes.object.isRequired,
+    errSelectors: PropTypes.object.isRequired,
+    oas3Selectors: PropTypes.object.isRequired,
+    specSelectors: PropTypes.object.isRequired,
+    errActions: PropTypes.object.isRequired,
+    getConfigs: PropTypes.any
+  }
+
+  constructor(props, context) {
+    super(props, context)
+    let { name, schema, authorized, authSelectors } = this.props
+    let auth = authorized && authorized.get(name)
+    let authConfigs = authSelectors.getConfigs() || {}
+    let username = auth && auth.get("username") || ""
+    let clientId = auth && auth.get("clientId") || authConfigs.clientId || ""
+    let clientSecret = auth && auth.get("clientSecret") || authConfigs.clientSecret || ""
+    let passwordType = auth && auth.get("passwordType") || "basic"
+    let scopes = auth && auth.get("scopes") || authConfigs.scopes || []
+    if (typeof scopes === "string") {
+      scopes = scopes.split(authConfigs.scopeSeparator || " ")
+    }
+
+    this.state = {
+      appName: authConfigs.appName,
+      name: name,
+      schema: schema,
+      scopes: scopes,
+      clientId: clientId,
+      clientSecret: clientSecret,
+      username: username,
+      password: "",
+      passwordType: passwordType
+    }
+  }
+
+  close = (e) => {
+    e.preventDefault()
+    let { authActions } = this.props
+
+    authActions.showDefinitions(false)
+  }
+
+  authorize =() => {
+    let { authActions, errActions, getConfigs, authSelectors, oas3Selectors } = this.props
+    let configs = getConfigs()
+    let authConfigs = authSelectors.getConfigs()
+
+    errActions.clear({authId: name,type: "auth", source: "auth"})
+    oauth2Authorize({
+      auth: this.state,
+      currentServer: oas3Selectors.serverEffectiveValue(oas3Selectors.selectedServer()),
+      authActions,
+      errActions,
+      configs,
+      authConfigs
+    })
+  }
+
+  onScopeChange =(e) => {
+    let { target } = e
+    let { checked } = target
+    let scope = target.dataset.value
+
+    if ( checked && this.state.scopes.indexOf(scope) === -1 ) {
+      let newScopes = this.state.scopes.concat([scope])
+      this.setState({ scopes: newScopes })
+    } else if ( !checked && this.state.scopes.indexOf(scope) > -1) {
+      this.setState({ scopes: this.state.scopes.filter((val) => val !== scope) })
+    }
+  }
+
+  onInputChange =(e) => {
+    let { target : { dataset : { name }, value } } = e
+    let state = {
+      [name]: value
+    }
+
+    this.setState(state)
+  }
+
+  selectScopes =(e) => {
+    if (e.target.dataset.all) {
+      this.setState({
+        scopes: Array.from((this.props.schema.get("allowedScopes") || this.props.schema.get("scopes")).keys())
+      })
+    } else {
+      this.setState({ scopes: [] })
+    }
+  }
+
+  logout =(e) => {
+    e.preventDefault()
+    let { authActions, errActions, name } = this.props
+
+    errActions.clear({authId: name, type: "auth", source: "auth"})
+    authActions.logoutWithPersistOption([ name ])
+  }
+
+  render() {
+    let {
+      schema, getComponent, authSelectors, errSelectors, name, specSelectors
+    } = this.props
+    const Input = getComponent("Input")
+    const Row = getComponent("Row")
+    const Col = getComponent("Col")
+    const Button = getComponent("Button")
+    const AuthError = getComponent("authError")
+    const JumpToPath = getComponent("JumpToPath", true)
+    const Markdown = getComponent("Markdown", true)
+    const InitializedInput = getComponent("InitializedInput")
+
+    const { isOAS3 } = specSelectors
+
+    let oidcUrl = isOAS3() ? schema.get("openIdConnectUrl") : null
+
+    // Auth type consts
+    const IMPLICIT = "implicit"
+    const PASSWORD = "password"
+    const ACCESS_CODE = isOAS3() ? (oidcUrl ? "authorization_code" : "authorizationCode") : "accessCode"
+    const APPLICATION = isOAS3() ? (oidcUrl ? "client_credentials" : "clientCredentials") : "application"
+
+    let flow = schema.get("flow")
+    let scopes = schema.get("allowedScopes") || schema.get("scopes")
+    let authorizedAuth = authSelectors.authorized().get(name)
+    let isAuthorized = !!authorizedAuth
+    let errors = errSelectors.allErrors().filter( err => err.get("authId") === name)
+    let isValid = !errors.filter( err => err.get("source") === "validation").size
+    let description = schema.get("description")
+
+    return (
+      <div>
+        <h4>{name} (OAuth2, { schema.get("flow") }) <JumpToPath path={[ "securityDefinitions", name ]} /></h4>
+        { !this.state.appName ? null : <h5>Application: { this.state.appName } </h5> }
+        { description && <Markdown source={ schema.get("description") } /> }
+
+        { isAuthorized && <h6>Authorized</h6> }
+
+        { oidcUrl && <p>OpenID Connect URL: <code>{ oidcUrl }</code></p> }
+        { ( flow === IMPLICIT || flow === ACCESS_CODE ) && <p>Authorization URL: <code>{ schema.get("authorizationUrl") }</code></p> }
+        { ( flow === PASSWORD || flow === ACCESS_CODE || flow === APPLICATION ) && <p>Token URL:<code> { schema.get("tokenUrl") }</code></p> }
+        <p className="flow">Flow: <code>{ schema.get("flow") }</code></p>
+
+        {
+          flow !== PASSWORD ? null
+            : <Row>
+              <Row>
+                <label htmlFor="oauth_username">username:</label>
+                {
+                  isAuthorized ? <code> { this.state.username } </code>
+                    : <Col tablet={10} desktop={10}>
+                      <input id="oauth_username" type="text" data-name="username" onChange={ this.onInputChange } autoFocus/>
+                    </Col>
+                }
+              </Row>
+              {
+
+              }
+              <Row>
+                <label htmlFor="oauth_password">password:</label>
+                {
+                  isAuthorized ? <code> ****** </code>
+                    : <Col tablet={10} desktop={10}>
+                      <input id="oauth_password" type="password" data-name="password" onChange={ this.onInputChange }/>
+                    </Col>
+                }
+              </Row>
+              <Row>
+                <label htmlFor="password_type">Client credentials location:</label>
+                {
+                  isAuthorized ? <code> { this.state.passwordType } </code>
+                    : <Col tablet={10} desktop={10}>
+                      <select id="password_type" data-name="passwordType" onChange={ this.onInputChange }>
+                        <option value="basic">Authorization header</option>
+                        <option value="request-body">Request body</option>
+                      </select>
+                    </Col>
+                }
+              </Row>
+            </Row>
+        }
+        {
+          ( flow === APPLICATION || flow === IMPLICIT || flow === ACCESS_CODE || flow === PASSWORD ) &&
+          ( !isAuthorized || isAuthorized && this.state.clientId) && <Row>
+            <label htmlFor="client_id">client_id:</label>
+            {
+              isAuthorized ? <code> ****** </code>
+                           : <Col tablet={10} desktop={10}>
+                               <InitializedInput id="client_id"
+                                      type="text"
+                                      required={ flow === PASSWORD }
+                                      initialValue={ this.state.clientId }
+                                      data-name="clientId"
+                                      onChange={ this.onInputChange }/>
+                             </Col>
+            }
+          </Row>
+        }
+
+        {
+          ( (flow === APPLICATION || flow === ACCESS_CODE || flow === PASSWORD) && <Row>
+            <label htmlFor="client_secret">client_secret:</label>
+            {
+              isAuthorized ? <code> ****** </code>
+                           : <Col tablet={10} desktop={10}>
+                               <InitializedInput id="client_secret"
+                                      initialValue={ this.state.clientSecret }
+                                      type="password"
+                                      data-name="clientSecret"
+                                      onChange={ this.onInputChange }/>
+                             </Col>
+            }
+
+          </Row>
+        )}
+
+        {
+          !isAuthorized && scopes && scopes.size ? <div className="scopes">
+            <h2>
+              Scopes:
+              <a onClick={this.selectScopes} data-all={true}>select all</a>
+              <a onClick={this.selectScopes}>select none</a>
+            </h2>
+            { scopes.map((description, name) => {
+              return (
+                <Row key={ name }>
+                  <div className="checkbox">
+                    <Input data-value={ name }
+                          id={`${name}-${flow}-checkbox-${this.state.name}`}
+                           disabled={ isAuthorized }
+                           checked={ this.state.scopes.includes(name) }
+                           type="checkbox"
+                           onChange={ this.onScopeChange }/>
+                         <label htmlFor={`${name}-${flow}-checkbox-${this.state.name}`}>
+                           <span className="item"></span>
+                           <div className="text">
+                             <p className="name">{name}</p>
+                             <p className="description">{description}</p>
+                           </div>
+                         </label>
+                  </div>
+                </Row>
+              )
+              }).toArray()
+            }
+          </div> : null
+        }
+
+        {
+          errors.valueSeq().map( (error, key) => {
+            return <AuthError error={ error }
+                              key={ key }/>
+          } )
+        }
+        <div className="auth-btn-wrapper">
+        { isValid &&
+          ( isAuthorized ? <Button className="btn modal-btn auth authorize" onClick={ this.logout }>Logout</Button>
+        : <Button className="btn modal-btn auth authorize" onClick={ this.authorize }>Authorize</Button>
+          )
+        }
+          <Button className="btn modal-btn auth btn-done" onClick={ this.close }>Close</Button>
+        </div>
+
+      </div>
+    )
+  }
+}

src/core/components/clear.jsx

@@ -0,0 +1,25 @@
+import React, { Component } from "react"
+import PropTypes from "prop-types"
+
+export default class Clear extends Component {
+
+  onClick =() => {
+    let { specActions, path, method } = this.props
+    specActions.clearResponse( path, method )
+    specActions.clearRequest( path, method )
+  }
+
+  render(){
+    return (
+      <button className="btn btn-clear opblock-control__btn" onClick={ this.onClick }>
+        Clear
+      </button>
+    )
+  }
+
+  static propTypes = {
+    specActions: PropTypes.object.isRequired,
+    path: PropTypes.string.isRequired,
+    method: PropTypes.string.isRequired,
+  }
+}

src/core/components/content-type.jsx

@@ -0,0 +1,58 @@
+import React from "react"
+import PropTypes from "prop-types"
+import ImPropTypes from "react-immutable-proptypes"
+import { fromJS } from "immutable"
+
+const noop = ()=>{}
+
+export default class ContentType extends React.Component {
+
+  static propTypes = {
+    contentTypes: PropTypes.oneOfType([ImPropTypes.list, ImPropTypes.set, ImPropTypes.seq]),
+    value: PropTypes.string,
+    onChange: PropTypes.func,
+    className: PropTypes.string
+  }
+
+  static defaultProps = {
+    onChange: noop,
+    value: null,
+    contentTypes: fromJS(["application/json"]),
+  }
+
+  componentDidMount() {
+    // Needed to populate the form, initially
+    if(this.props.contentTypes) {
+      this.props.onChange(this.props.contentTypes.first())
+    }
+  }
+
+  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() {
+    let { contentTypes, className, value } = this.props
+
+    if ( !contentTypes || !contentTypes.size )
+      return null
+
+    return (
+      <div className={ "content-type-wrapper " + ( className || "" ) }>
+        <select className="content-type" value={value || ""} onChange={this.onChangeWrapper} >
+          { contentTypes.map( (val) => {
+            return <option key={ val } value={ val }>{ val }</option>
+          }).toArray()}
+        </select>
+      </div>
+    )
+  }
+}

src/core/components/curl.jsx

@@ -0,0 +1,45 @@
+import React from "react"
+import PropTypes from "prop-types"
+import curlify from "core/curlify"
+import { CopyToClipboard } from "react-copy-to-clipboard"
+import {SyntaxHighlighter, getStyle} from "core/syntax-highlighting"
+import get from "lodash/get"
+
+export default class Curl extends React.Component {
+  static propTypes = {
+    getConfigs: PropTypes.func.isRequired,
+    request: PropTypes.object.isRequired
+  }
+
+  render() {
+    let { request, getConfigs } = this.props
+    let curl = curlify(request)
+
+    const config = getConfigs()
+
+    const curlBlock = get(config, "syntaxHighlight.activated")
+      ? <SyntaxHighlighter
+          language="bash"
+          className="curl microlight"
+          onWheel={this.preventYScrollingBeyondElement}
+          style={getStyle(get(config, "syntaxHighlight.theme"))}
+          >
+          {curl}
+        </SyntaxHighlighter>
+      :
+      <textarea readOnly={true} className="curl" value={curl}></textarea>
+
+    return (
+      <div className="curl-command">
+        <h4>Curl</h4>
+        <div className="copy-to-clipboard">
+            <CopyToClipboard text={curl}><button/></CopyToClipboard>
+        </div>
+        <div>
+          {curlBlock}
+        </div>
+      </div>
+    )
+  }
+
+}

src/core/components/debug.jsx

@@ -0,0 +1,51 @@
+import React from "react"
+import PropTypes from "prop-types"
+import { presets } from "react-motion"
+import ObjectInspector from "react-inspector"
+
+export default class Debug extends React.Component {
+
+  constructor() {
+    super()
+    this.state = {
+      jsonDumpOpen: false
+    }
+    this.toggleJsonDump = (e) => {
+      e.preventDefault()
+      this.setState({jsonDumpOpen: !this.state.jsonDumpOpen})
+    }
+  }
+
+  plusOrMinus(bool) {
+    return bool ? "-" : "+"
+  }
+
+  render() {
+
+    let { getState, getComponent } = this.props
+
+    window.props = this.props
+
+    const Collapse = getComponent("Collapse")
+
+    return (
+      <div className="info">
+        <h3><a onClick={this.toggleJsonDump}> {this.plusOrMinus(this.state.jsonDumpOpen)} App </a></h3>
+
+        <Collapse isOpened={this.state.jsonDumpOpen} springConfig={presets.noWobble}>
+
+           <ObjectInspector data={getState().toJS() || {}} name="state" initialExpandedPaths={["state"]}/>
+
+        </Collapse>
+
+
+      </div>
+    )
+  }
+
+}
+
+Debug.propTypes = {
+  getState: PropTypes.func.isRequired,
+  getComponent: PropTypes.func.isRequired,
+}

src/core/components/deep-link.jsx

@@ -0,0 +1,20 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+export const DeepLink = ({ enabled, path, text }) => {
+    return (
+        <a className="nostyle"
+          onClick={enabled ? (e) => e.preventDefault() : null}
+          href={enabled ? `#/${path}` : null}>
+          <span>{text}</span>
+        </a>
+    )
+}
+DeepLink.propTypes = {
+  enabled: PropTypes.bool,
+  isShown: PropTypes.bool,
+  path: PropTypes.string,
+  text: PropTypes.string
+}
+
+export default DeepLink

src/core/components/enum-model.jsx

@@ -0,0 +1,19 @@
+import React from "react"
+import ImPropTypes from "react-immutable-proptypes"
+
+const EnumModel = ({ value, getComponent }) => {
+  let ModelCollapse = getComponent("ModelCollapse")
+  let collapsedContent = <span>Array [ { value.count() } ]</span>
+  return <span className="prop-enum">
+    Enum:<br />
+    <ModelCollapse collapsedContent={ collapsedContent }>
+      [ { value.join(", ") } ]
+    </ModelCollapse>
+  </span>
+}
+EnumModel.propTypes = {
+  value: ImPropTypes.iterable,
+  getComponent: ImPropTypes.func
+}
+
+export default EnumModel

src/core/components/errors.jsx

@@ -0,0 +1,136 @@
+import React from "react"
+import PropTypes from "prop-types"
+import { List } from "immutable"
+
+export default class Errors extends React.Component {
+
+  static propTypes = {
+    editorActions: PropTypes.object,
+    errSelectors: PropTypes.object.isRequired,
+    layoutSelectors: PropTypes.object.isRequired,
+    layoutActions: PropTypes.object.isRequired,
+    getComponent: PropTypes.func.isRequired,
+  }
+
+  render() {
+    let { editorActions, errSelectors, layoutSelectors, layoutActions, getComponent } = this.props
+
+    const Collapse = getComponent("Collapse")
+
+    if(editorActions && editorActions.jumpToLine) {
+      var jumpToLine = editorActions.jumpToLine
+    }
+
+    let errors = errSelectors.allErrors()
+
+    // all thrown errors, plus error-level everything else
+    let allErrorsToDisplay = errors.filter(err => err.get("type") === "thrown" ? true :err.get("level") === "error")
+
+    if(!allErrorsToDisplay || allErrorsToDisplay.count() < 1) {
+      return null
+    }
+
+    let isVisible = layoutSelectors.isShown(["errorPane"], true)
+    let toggleVisibility = () => layoutActions.show(["errorPane"], !isVisible)
+
+    let sortedJSErrors = allErrorsToDisplay.sortBy(err => err.get("line"))
+
+    return (
+      <pre className="errors-wrapper">
+        <hgroup className="error">
+          <h4 className="errors__title">Errors</h4>
+          <button className="btn errors__clear-btn" onClick={ toggleVisibility }>{ isVisible ? "Hide" : "Show" }</button>
+        </hgroup>
+        <Collapse isOpened={ isVisible } animated >
+          <div className="errors">
+            { sortedJSErrors.map((err, i) => {
+              let type = err.get("type")
+              if(type === "thrown" || type === "auth") {
+                return <ThrownErrorItem key={ i } error={ err.get("error") || err } jumpToLine={jumpToLine} />
+              }
+              if(type === "spec") {
+                return <SpecErrorItem key={ i } error={ err } jumpToLine={jumpToLine} />
+              }
+            }) }
+          </div>
+        </Collapse>
+      </pre>
+      )
+    }
+}
+
+const ThrownErrorItem = ( { error, jumpToLine } ) => {
+  if(!error) {
+    return null
+  }
+  let errorLine = error.get("line")
+
+  return (
+    <div className="error-wrapper">
+      { !error ? null :
+        <div>
+          <h4>{ (error.get("source") && error.get("level")) ?
+            toTitleCase(error.get("source")) + " " + error.get("level") : "" }
+          { error.get("path") ? <small> at {error.get("path")}</small>: null }</h4>
+          <span className="message thrown">
+            { error.get("message") }
+          </span>
+          <div className="error-line">
+            { errorLine && jumpToLine ? <a onClick={jumpToLine.bind(null, errorLine)}>Jump to line { errorLine }</a> : null }
+          </div>
+        </div>
+      }
+    </div>
+    )
+  }
+
+const SpecErrorItem = ( { error, jumpToLine } ) => {
+  let locationMessage = null
+
+  if(error.get("path")) {
+    if(List.isList(error.get("path"))) {
+      locationMessage = <small>at { error.get("path").join(".") }</small>
+    } else {
+      locationMessage = <small>at { error.get("path") }</small>
+    }
+  } else if(error.get("line") && !jumpToLine) {
+    locationMessage = <small>on line { error.get("line") }</small>
+  }
+
+  return (
+    <div className="error-wrapper">
+      { !error ? null :
+        <div>
+          <h4>{ toTitleCase(error.get("source")) + " " + error.get("level") }&nbsp;{ locationMessage }</h4>
+          <span className="message">{ error.get("message") }</span>
+          <div className="error-line">
+            { jumpToLine ? (
+              <a onClick={jumpToLine.bind(null, error.get("line"))}>Jump to line { error.get("line") }</a>
+            ) : null }
+          </div>
+        </div>
+      }
+    </div>
+    )
+  }
+
+function toTitleCase(str) {
+  return (str || "")
+    .split(" ")
+    .map(substr => substr[0].toUpperCase() + substr.slice(1))
+    .join(" ")
+}
+
+ThrownErrorItem.propTypes = {
+  error: PropTypes.object.isRequired,
+  jumpToLine: PropTypes.func
+}
+
+ThrownErrorItem.defaultProps = {
+  jumpToLine: null
+}
+
+SpecErrorItem.propTypes = {
+  error: PropTypes.object.isRequired,
+  jumpToLine: PropTypes.func
+}

src/core/components/example.jsx

@@ -0,0 +1,43 @@
+/**
+ * @prettier
+ */
+
+import React from "react"
+import PropTypes from "prop-types"
+import ImPropTypes from "react-immutable-proptypes"
+import { stringify } from "core/utils"
+
+export default function Example(props) {
+  const { example, showValue, getComponent, getConfigs } = props
+
+  const Markdown = getComponent("Markdown", true)
+  const HighlightCode = getComponent("highlightCode")
+
+  if(!example) return null
+
+  return (
+    <div className="example">
+      {example.get("description") ? (
+        <section className="example__section">
+          <div className="example__section-header">Example Description</div>
+          <p>
+            <Markdown source={example.get("description")} />
+          </p>
+        </section>
+      ) : null}
+      {showValue && example.has("value") ? (
+        <section className="example__section">
+          <div className="example__section-header">Example Value</div>
+          <HighlightCode getConfigs={ getConfigs } value={stringify(example.get("value"))} />
+        </section>
+      ) : null}
+    </div>
+  )
+}
+
+Example.propTypes = {
+  example: ImPropTypes.map.isRequired,
+  showValue: PropTypes.bool,
+  getComponent: PropTypes.func.isRequired,
+  getConfigs: PropTypes.func.getConfigs,
+}

src/core/components/examples-select-value-retainer.jsx

@@ -0,0 +1,222 @@
+/**
+ * @prettier
+ */
+import React from "react"
+import { Map, List } from "immutable"
+import PropTypes from "prop-types"
+import ImPropTypes from "react-immutable-proptypes"
+
+import { stringify } from "core/utils"
+
+// This stateful component lets us avoid writing competing values (user
+// modifications vs example values) into global state, and the mess that comes
+// with that: tracking which of the two values are currently used for
+// Try-It-Out, which example a modified value came from, etc...
+//
+// The solution here is to retain the last user-modified value in
+// ExamplesSelectValueRetainer's component state, so that our global state can stay
+// clean, always simply being the source of truth for what value should be both
+// displayed to the user and used as a value during request execution.
+//
+// This approach/tradeoff was chosen in order to encapsulate the particular
+// logic of Examples within the Examples component tree, and to avoid
+// regressions within our current implementation elsewhere (non-Examples
+// definitions, OpenAPI 2.0, etc). A future refactor to global state might make
+// this component unnecessary.
+//
+// TL;DR: this is not our usual approach, but the choice was made consciously.
+
+// Note that `currentNamespace` isn't currently used anywhere!
+
+const stringifyUnlessList = input =>
+  List.isList(input) ? input : stringify(input)
+
+export default class ExamplesSelectValueRetainer extends React.PureComponent {
+  static propTypes = {
+    examples: ImPropTypes.map,
+    onSelect: PropTypes.func,
+    updateValue: PropTypes.func, // mechanism to update upstream value
+    getComponent: PropTypes.func.isRequired,
+    currentUserInputValue: PropTypes.any,
+    currentKey: PropTypes.string,
+    currentNamespace: PropTypes.string,
+    // (also proxies props for Examples)
+  }
+
+  static defaultProps = {
+    examples: Map({}),
+    currentNamespace: "__DEFAULT__NAMESPACE__",
+    onSelect: (...args) =>
+      console.log( // eslint-disable-line no-console
+        "ExamplesSelectValueRetainer: no `onSelect` function was provided",
+        ...args
+      ),
+    updateValue: (...args) =>
+      console.log( // eslint-disable-line no-console
+        "ExamplesSelectValueRetainer: no `updateValue` function was provided",
+        ...args
+      ),
+  }
+
+  constructor(props) {
+    super(props)
+
+    const valueFromExample = this._getCurrentExampleValue()
+
+    this.state = {
+      // user edited: last value that came from the world around us, and didn't
+      // match the current example's value
+      // internal: last value that came from user selecting an Example
+      [props.currentNamespace]: Map({
+        lastUserEditedValue: this.props.currentUserInputValue,
+        lastDownstreamValue: valueFromExample,
+        isModifiedValueSelected:
+          // valueFromExample !== undefined &&
+          this.props.currentUserInputValue !== valueFromExample,
+      }),
+    }
+  }
+
+  _getStateForCurrentNamespace = () => {
+    const { currentNamespace } = this.props
+
+    return (this.state[currentNamespace] || Map()).toObject()
+  }
+
+  _setStateForCurrentNamespace = obj => {
+    const { currentNamespace } = this.props
+
+    return this._setStateForNamespace(currentNamespace, obj)
+  }
+
+  _setStateForNamespace = (namespace, obj) => {
+    const oldStateForNamespace = this.state[namespace] || Map()
+    const newStateForNamespace = oldStateForNamespace.mergeDeep(obj)
+    return this.setState({
+      [namespace]: newStateForNamespace,
+    })
+  }
+
+  _isCurrentUserInputSameAsExampleValue = () => {
+    const { currentUserInputValue } = this.props
+
+    const valueFromExample = this._getCurrentExampleValue()
+
+    return valueFromExample === currentUserInputValue
+  }
+
+  _getValueForExample = (exampleKey, props) => {
+    // props are accepted so that this can be used in componentWillReceiveProps,
+    // which has access to `nextProps`
+    const { examples } = props || this.props
+    return stringifyUnlessList(
+      (examples || Map({})).getIn([exampleKey, "value"])
+    )
+  }
+
+  _getCurrentExampleValue = props => {
+    // props are accepted so that this can be used in componentWillReceiveProps,
+    // which has access to `nextProps`
+    const { currentKey } = props || this.props
+    return this._getValueForExample(currentKey, props || this.props)
+  }
+
+  _onExamplesSelect = (key, { isSyntheticChange } = {}, ...otherArgs) => {
+    const { onSelect, updateValue, currentUserInputValue } = this.props
+    const { lastUserEditedValue } = this._getStateForCurrentNamespace()
+
+    const valueFromExample = this._getValueForExample(key)
+
+    if (key === "__MODIFIED__VALUE__") {
+      updateValue(stringifyUnlessList(lastUserEditedValue))
+      return this._setStateForCurrentNamespace({
+        isModifiedValueSelected: true,
+      })
+    }
+
+    if (typeof onSelect === "function") {
+      onSelect(key, { isSyntheticChange }, ...otherArgs)
+    }
+
+    this._setStateForCurrentNamespace({
+      lastDownstreamValue: valueFromExample,
+      isModifiedValueSelected:
+        isSyntheticChange &&
+        !!currentUserInputValue &&
+        currentUserInputValue !== valueFromExample,
+    })
+
+    // we never want to send up value updates from synthetic changes
+    if (isSyntheticChange) return
+
+    if (typeof updateValue === "function") {
+      updateValue(stringifyUnlessList(valueFromExample))
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    // update `lastUserEditedValue` as new currentUserInput values come in
+
+    const { currentUserInputValue: newValue, examples, onSelect } = nextProps
+
+    const {
+      lastUserEditedValue,
+      lastDownstreamValue,
+    } = this._getStateForCurrentNamespace()
+
+    const valueFromCurrentExample = this._getValueForExample(
+      nextProps.currentKey,
+      nextProps
+    )
+
+    const exampleMatchingNewValue = examples.find(
+      example =>
+        example.get("value") === newValue ||
+        // sometimes data is stored as a string (e.g. in Request Bodies), so
+        // let's check against a stringified version of our example too
+        stringify(example.get("value")) === newValue
+    )
+
+    if (exampleMatchingNewValue) {
+      onSelect(examples.keyOf(exampleMatchingNewValue), {
+        isSyntheticChange: true,
+      })
+    } else if (
+      newValue !== this.props.currentUserInputValue && // value has changed
+      newValue !== lastUserEditedValue && // value isn't already tracked
+      newValue !== lastDownstreamValue // value isn't what we've seen on the other side
+    ) {
+      this._setStateForNamespace(nextProps.currentNamespace, {
+        lastUserEditedValue: nextProps.currentUserInputValue,
+        isModifiedValueSelected: newValue !== valueFromCurrentExample,
+      })
+    }
+  }
+
+  render() {
+    const { currentUserInputValue, examples, currentKey, getComponent } = this.props
+    const {
+      lastDownstreamValue,
+      lastUserEditedValue,
+      isModifiedValueSelected,
+    } = this._getStateForCurrentNamespace()
+
+    const ExamplesSelect = getComponent("ExamplesSelect")
+
+    return (
+      <ExamplesSelect
+        examples={examples}
+        currentExampleKey={currentKey}
+        onSelect={this._onExamplesSelect}
+        isModifiedValueAvailable={
+          !!lastUserEditedValue && lastUserEditedValue !== lastDownstreamValue
+        }
+        isValueModified={
+          currentUserInputValue !== undefined &&
+          isModifiedValueSelected &&
+          currentUserInputValue !== this._getCurrentExampleValue()
+        }
+      />
+    )
+  }
+}

src/core/components/examples-select.jsx

@@ -0,0 +1,138 @@
+/**
+ * @prettier
+ */
+
+import React from "react"
+import Im from "immutable"
+import PropTypes from "prop-types"
+import ImPropTypes from "react-immutable-proptypes"
+
+export default class ExamplesSelect extends React.PureComponent {
+  static propTypes = {
+    examples: ImPropTypes.map.isRequired,
+    onSelect: PropTypes.func,
+    currentExampleKey: PropTypes.string,
+    isModifiedValueAvailable: PropTypes.bool,
+    isValueModified: PropTypes.bool,
+    showLabels: PropTypes.bool,
+  }
+
+  static defaultProps = {
+    examples: Im.Map({}),
+    onSelect: (...args) =>
+      console.log( // eslint-disable-line no-console
+        // FIXME: remove before merging to master...
+        `DEBUG: ExamplesSelect was not given an onSelect callback`,
+        ...args
+      ),
+    currentExampleKey: null,
+    showLabels: true,
+  }
+
+  _onSelect = (key, { isSyntheticChange = false } = {}) => {
+    if (typeof this.props.onSelect === "function") {
+      this.props.onSelect(key, {
+        isSyntheticChange,
+      })
+    }
+  }
+
+  _onDomSelect = e => {
+    if (typeof this.props.onSelect === "function") {
+      const element = e.target.selectedOptions[0]
+      const key = element.getAttribute("value")
+
+      this._onSelect(key, {
+        isSyntheticChange: false,
+      })
+    }
+  }
+
+  getCurrentExample = () => {
+    const { examples, currentExampleKey } = this.props
+
+    const currentExamplePerProps = examples.get(currentExampleKey)
+
+    const firstExamplesKey = examples.keySeq().first()
+    const firstExample = examples.get(firstExamplesKey)
+
+    return currentExamplePerProps || firstExample || Map({})
+  }
+
+  componentDidMount() {
+    // this is the not-so-great part of ExamplesSelect... here we're
+    // artificially kicking off an onSelect event in order to set a default
+    // value in state. the consumer has the option to avoid this by checking
+    // `isSyntheticEvent`, but we should really be doing this in a selector.
+    // TODO: clean this up
+    // FIXME: should this only trigger if `currentExamplesKey` is nullish?
+    const { onSelect, examples } = this.props
+
+    if (typeof onSelect === "function") {
+      const firstExample = examples.first()
+      const firstExampleKey = examples.keyOf(firstExample)
+
+      this._onSelect(firstExampleKey, {
+        isSyntheticChange: true,
+      })
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const { currentExampleKey, examples } = nextProps
+    if (examples !== this.props.examples && !examples.has(currentExampleKey)) {
+      // examples have changed from under us, and the currentExampleKey is no longer
+      // valid.
+      const firstExample = examples.first()
+      const firstExampleKey = examples.keyOf(firstExample)
+
+      this._onSelect(firstExampleKey, {
+        isSyntheticChange: true,
+      })
+    }
+  }
+
+  render() {
+    const {
+      examples,
+      currentExampleKey,
+      isValueModified,
+      isModifiedValueAvailable,
+      showLabels,
+    } = this.props
+
+    return (
+      <div className="examples-select">
+        {
+          showLabels ? (
+            <span className="examples-select__section-label">Examples: </span>
+          ) : null
+        }
+        <select
+          onChange={this._onDomSelect}
+          value={
+            isModifiedValueAvailable && isValueModified
+              ? "__MODIFIED__VALUE__"
+              : (currentExampleKey || "")
+          }
+        >
+          {isModifiedValueAvailable ? (
+            <option value="__MODIFIED__VALUE__">[Modified value]</option>
+          ) : null}
+          {examples
+            .map((example, exampleName) => {
+              return (
+                <option
+                  key={exampleName} // for React
+                  value={exampleName} // for matching to select's `value`
+                >
+                  {example.get("summary") || exampleName}
+                </option>
+              )
+            })
+            .valueSeq()}
+        </select>
+      </div>
+    )
+  }
+}

src/core/components/execute.jsx

@@ -0,0 +1,101 @@
+import React, { Component } from "react"
+import PropTypes from "prop-types"
+
+export default class Execute extends Component {
+
+  static propTypes = {
+    specSelectors: PropTypes.object.isRequired,
+    specActions: PropTypes.object.isRequired,
+    operation: PropTypes.object.isRequired,
+    path: PropTypes.string.isRequired,
+    method: PropTypes.string.isRequired,
+    oas3Selectors: PropTypes.object.isRequired,
+    oas3Actions: PropTypes.object.isRequired,
+    onExecute: PropTypes.func
+  }
+
+  handleValidateParameters = () => {
+    let { specSelectors, specActions, path, method } = this.props
+    specActions.validateParams([path, method])
+    return specSelectors.validateBeforeExecute([path, method])
+  }
+
+  handleValidateRequestBody = () => {
+    let { path, method, specSelectors, oas3Selectors, oas3Actions } = this.props
+    let validationErrors = {
+      missingBodyValue: false,
+      missingRequiredKeys: [] 
+    }
+    // context: reset errors, then (re)validate
+    oas3Actions.clearRequestBodyValidateError({ path, method })
+    let oas3RequiredRequestBodyContentType = specSelectors.getOAS3RequiredRequestBodyContentType([path, method])
+    let oas3RequestBodyValue = oas3Selectors.requestBodyValue(path, method)
+    let oas3ValidateBeforeExecuteSuccess = oas3Selectors.validateBeforeExecute([path, method])
+    let oas3RequestContentType = oas3Selectors.requestContentType(path, method)
+
+    if (!oas3ValidateBeforeExecuteSuccess) {
+      validationErrors.missingBodyValue = true
+      oas3Actions.setRequestBodyValidateError({ path, method, validationErrors })
+      return false
+    }
+    if (!oas3RequiredRequestBodyContentType) {
+      return true
+    }
+    let missingRequiredKeys = oas3Selectors.validateShallowRequired({
+      oas3RequiredRequestBodyContentType,
+      oas3RequestContentType,
+      oas3RequestBodyValue
+    })
+    if (!missingRequiredKeys || missingRequiredKeys.length < 1) {
+      return true
+    }
+    missingRequiredKeys.forEach((missingKey) => {
+      validationErrors.missingRequiredKeys.push(missingKey)
+    })
+    oas3Actions.setRequestBodyValidateError({ path, method, validationErrors })
+    return false
+  }
+
+  handleValidationResultPass = () => {
+    let { specActions, operation, path, method } = this.props
+    if (this.props.onExecute) {
+      // loading spinner
+      this.props.onExecute()
+    }
+    specActions.execute({ operation, path, method })
+  }
+
+  handleValidationResultFail = () => {
+    let { specActions, path, method } = this.props
+    // deferred by 40ms, to give element class change time to settle.
+    specActions.clearValidateParams([path, method])
+    setTimeout(() => {
+      specActions.validateParams([path, method])
+    }, 40)
+  }
+
+  handleValidationResult = (isPass) => {
+    if (isPass) {
+      this.handleValidationResultPass()
+    } else {
+      this.handleValidationResultFail()
+    }
+  }
+
+  onClick = () => {
+    let paramsResult = this.handleValidateParameters()
+    let requestBodyResult = this.handleValidateRequestBody()
+    let isPass = paramsResult && requestBodyResult
+    this.handleValidationResult(isPass)
+  }
+
+  onChangeProducesWrapper = ( val ) => this.props.specActions.changeProducesValue([this.props.path, this.props.method], val)
+
+  render(){
+    return (
+        <button className="btn execute opblock-control__btn" onClick={ this.onClick }>
+          Execute
+        </button>
+    )
+  }
+}

src/core/components/footer.jsx

@@ -0,0 +1,9 @@
+import React from "react"
+
+export default class Footer extends React.Component {
+  render() {
+    return (
+      <div className="footer"></div>
+    )
+  }
+}