release: 3.9.1 (#4106)

* fix(core-components): make `onToggle` a non-required prop in ModelCollapse

* release: 3.9.1

.agignore

@@ -0,0 +1 @@
+dist/

.babelrc

@@ -9,6 +9,10 @@
     [
       "module-alias",
       [
+        {
+          "expose": "root",
+          "src": "."
+        },
         {
           "expose": "components",
           "src": "src/core/components"
@@ -17,6 +21,10 @@
           "expose": "core",
           "src": "src/core"
         },
+        {
+          "expose": "plugins",
+          "src": "src/plugins"
+        },
         {
           "expose": "img",
           "src": "src/img"

.dockerignore

@@ -0,0 +1,7 @@
+/.git
+/.github
+/dev-helpers
+/docs
+/src
+/swagger-ui-dist-package
+/test

.github/issue_template.md

@@ -18,7 +18,7 @@ or anything that violates the specifications.
 <!--- Provide a general summary of the issue in the title above -->
 
 <!--- 
-  If you aren't sure what Swagger-UI version, see this guide: https://github.com/swagger-api/swagger-ui/blob/master/docs/version-detection.md
+  If you aren't sure what Swagger-UI version, see this guide: https://github.com/swagger-api/swagger-ui/blob/master/docs/usage/version-detection.md
 --->
 
 

.npmignore

@@ -4,6 +4,8 @@
 !package.json
 !dist/swagger-ui.js
 !dist/swagger-ui.js.map
+!dist/swagger-ui-standalone-preset.js
+!dist/swagger-ui-standalone-preset.js.map
 !dist/swagger-ui.css
 !dist/swagger-ui.css.map
 !dist/oauth2-redirect.html

CONTRIBUTING.md

@@ -52,3 +52,7 @@ _Adapted from [How to Write a Git Commit Message](https://chris.beams.io/posts/g
 - **Don't** include any changes to files in the `dist/` directory - we update those files only during releases.
 - **Don't** mention maintainers in your original PR body - we probably would've seen it anyway, so it just increases the noise in our inboxes. Do feel free to ping maintainers if a week has passed and you've heard nothing from us.
 - **Don't** open PRs for custom functionality that only serves a small subset of our users - custom functionality should be implemented outside of our codebase, via a plugin.
+
+#### Merging pull requests
+- **Do** use GitHub's `Squash and merge` strategy.
+- **Do** follow the [Conventional Commits](https://conventionalcommits.org) standard format for your squash commit.

Dockerfile

@@ -12,7 +12,7 @@ ENV OAUTH_REALM "**None**"
 ENV OAUTH_APP_NAME "**None**"
 ENV OAUTH_ADDITIONAL_PARAMS "**None**"
 ENV SWAGGER_JSON "/app/swagger.json"
-ENV PORT 80
+ENV PORT 8080
 ENV BASE_URL ""
 
 RUN apk add --update nginx

LICENSE

@@ -1,4 +1,4 @@
-Copyright 2017 SmartBear Software
+Copyright 2018 SmartBear Software
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.

README.md

@@ -22,7 +22,7 @@ The OpenAPI Specification has undergone 5 revisions since initial creation in 20
 
 Swagger UI Version | Release Date | OpenAPI Spec compatibility | Notes
 ------------------ | ------------ | -------------------------- | -----
-3.6.1 | 2017-12-01 | 2.0, 3.0 | [tag v3.6.1](https://github.com/swagger-api/swagger-ui/tree/v3.6.1)
+3.9.1 | 2018-01-12 | 2.0, 3.0 | [tag v3.9.1](https://github.com/swagger-api/swagger-ui/tree/v3.9.1)
 3.0.21 | 2017-07-26 | 2.0 | [tag v3.0.21](https://github.com/swagger-api/swagger-ui/tree/v3.0.21)
 2.2.10 | 2017-01-04 | 1.1, 1.2, 2.0 | [tag v2.2.10](https://github.com/swagger-api/swagger-ui/tree/v2.2.10)
 2.1.5 | 2016-07-20 | 1.1, 1.2, 2.0 | [tag v2.1.5](https://github.com/swagger-api/swagger-ui/tree/v2.1.5)

docker-run.sh

@@ -2,6 +2,7 @@
 
 set -e
 
+BASE_URL=${BASE_URL:-/}
 NGINX_ROOT=/usr/share/nginx/html
 INDEX_FILE=$NGINX_ROOT/index.html
 
@@ -22,13 +23,7 @@ replace_or_delete_in_index () {
 }
 
 if [ "${BASE_URL}" ]; then
-  NGINX_WITH_BASE_URL="${NGINX_ROOT}${BASE_URL}"
-
-  mkdir -p ${NGINX_WITH_BASE_URL}
-  mv ${NGINX_ROOT}/*.* ${NGINX_WITH_BASE_URL}/
-
-  INDEX_FILE=$NGINX_WITH_BASE_URL/index.html
-  NGINX_ROOT=$NGINX_WITH_BASE_URL
+  sed -i "s|location .* {|location $BASE_URL {|g" /etc/nginx/nginx.conf
 fi
 
 replace_in_index myApiKeyXXXX123456789 $API_KEY
@@ -41,7 +36,7 @@ if [ "$OAUTH_ADDITIONAL_PARAMS" != "**None**" ]; then
 fi
 
 if [[ -f $SWAGGER_JSON ]]; then
-  cp $SWAGGER_JSON $NGINX_ROOT
+  cp -s $SWAGGER_JSON $NGINX_ROOT
   REL_PATH="./$(basename $SWAGGER_JSON)"
   sed -i "s|http://petstore.swagger.io/v2/swagger.json|$REL_PATH|g" $INDEX_FILE
   sed -i "s|http://example.com/api|$REL_PATH|g" $INDEX_FILE
@@ -58,4 +53,7 @@ if [[ -n "$VALIDATOR_URL" ]]; then
   unset TMP_VU
 fi
 
+# replace the PORT that nginx listens on if supplied
+if [[ -n "${PORT}" ]]; then sed -i "s|8080|${PORT}|g" /etc/nginx/nginx.conf; fi
+
 exec nginx -g 'daemon off;'

docs/customization/plugin-api.md

@@ -19,7 +19,9 @@ A plugin return value may contain any of these keys, where `myStateKey` is a nam
   },
   components: {},
   wrapComponents: {},
-  fn: {}
+  rootInjects: {},
+  afterLoad: (system) => {},
+  fn: {},
 }
 ```
 
@@ -293,7 +295,7 @@ const MyWrapSelectorsPlugin = function(system) {
 
 Wrap Components allow you to override a component registered within the system.
 
-Wrap Components are function factories with the signature `(OriginalComponent, system) => props => ReactElement`.
+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) {
@@ -310,9 +312,12 @@ const MyWrapBuiltinComponentPlugin = function(system) {
 }
 ```
 
-```javascript
-// Overriding a component from a plugin
+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: {
@@ -321,6 +326,7 @@ const MyNumberDisplayPlugin = function(system) {
   }
 }
 
+// Here's a component wrapper defined as a function.
 const MyWrapComponentPlugin = function(system) {
   return {
     wrapComponents: {
@@ -328,6 +334,7 @@ const MyWrapComponentPlugin = function(system) {
         if(props.number > 10) {
           return <div>
             <h3>Warning! Big number ahead.</h3>
+            <OriginalComponent {...props} />
           </div>
         } else {
           return <Original {...props} />
@@ -336,6 +343,76 @@ const MyWrapComponentPlugin = function(system) {
     }
   }
 }
+
+// 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>
+              <OriginalComponent {...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

docs/usage/configuration.md

@@ -49,8 +49,9 @@ Parameter Name | Description
 --- | ---
 `deepLinking` | `Boolean=false`. If set to `true`, enables deep linking for tags and operations. See the [Deep Linking documentation](/docs/usage/deep-linking.md) for more information.
 `displayOperationId` | `Boolean=false`. Controls the display of operationId in operations list. The default is `false`.
-`defaultModelExpandDepth` | `Number=1`. The default expansion depth for models.
-`defaultModelRendering` | `String=["example"*, "model"]`. Controls how models are shown when the API is first rendered. (The user can always switch the rendering for a given model by clicking the 'Model' and 'Example Value' links.)
+`defaultModelsExpandDepth` | `Number=1`. The default expansion depth for models (set to -1 completely hide the models).
+`defaultModelExpandDepth` | `Number=1`. The default expansion depth for the model on the model-example section.
+`defaultModelRendering` | `String=["example"*, "model"]`. Controls how the model is shown when the API is first rendered. (The user can always switch the rendering for a given model by clicking the 'Model' and 'Example Value' links.)
 `displayRequestDuration` | `Boolean=false`. Controls the display of the request duration (in milliseconds) for Try-It-Out requests.
 `docExpansion` | `String=["list"*, "full", "none"]`. Controls the default expansion setting for the operations and tags. It can be 'list' (expands only the tags), 'full' (expands the tags and operations) or 'none' (expands nothing).
 `filter` | `Boolean=false OR String`. If set, enables filtering. The top bar will show an edit box that you can use to filter the tagged operations that are shown. Can be Boolean to enable or disable, or a string, in which case filtering will be enabled using that string as the filter expression. Filtering is case sensitive matching the filter expression anywhere inside the tag.

docs/usage/installation.md

@@ -37,7 +37,7 @@ app.listen(3000)
 ```
 
 The module also exports `SwaggerUIBundle` and `SwaggerUIStandalonePreset`, so
-if you're in a JavaScript project that can't handle a tranditional npm module,
+if you're in a JavaScript project that can't handle a traditional npm module,
 you could do something like this:
 
 ```js
@@ -49,7 +49,7 @@ const ui = SwaggerUIBundle({
     presets: [
       SwaggerUIBundle.presets.apis,
       SwaggerUIBundle.SwaggerUIStandalonePreset
-    ]
+    ],
     layout: "StandaloneLayout"
   })
 ```
@@ -86,7 +86,7 @@ This will serve Swagger UI at `/swagger` instead of `/`.
 You can embed Swagger-UI's code directly in your HTML by using unkpg's interface:
 
 ```html
-<script src="//unpkg.com/swagger-ui-dist@3/swagger-ui-bundle.js">
+<script src="//unpkg.com/swagger-ui-dist@3/swagger-ui-bundle.js"></script>
 <!-- `SwaggerUIBundle` is now available on the page -->
 ```
 

nginx.conf

@@ -15,10 +15,11 @@ http {
   server {
     listen            8080;
     server_name       localhost;
+    index             index.html index.htm;
 
     location / {
-      root            /usr/share/nginx/html;
-      index           index.html index.htm;
+      alias            /usr/share/nginx/html/;
+
       if ($request_method = 'OPTIONS') {
           add_header 'Access-Control-Allow-Origin' '*';
           add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "swagger-ui",
-  "version": "3.6.1",
+  "version": "3.9.1",
   "main": "dist/swagger-ui.js",
   "repository": "git@github.com:swagger-api/swagger-ui.git",
   "contributors": [
@@ -67,6 +67,7 @@
     "react-height": "^2.0.0",
     "react-hot-loader": "1.3.1",
     "react-immutable-proptypes": "2.1.0",
+    "react-immutable-pure-component": "^1.1.1",
     "react-markdown": "^2.5.0",
     "react-motion": "^0.5.2",
     "react-object-inspector": "0.2.1",
@@ -81,13 +82,14 @@
     "scroll-to-element": "^2.0.0",
     "serialize-error": "2.0.0",
     "shallowequal": "0.2.2",
-    "swagger-client": "^3.4.1",
+    "swagger-client": "^3.4.5",
     "url-parse": "^1.1.8",
     "whatwg-fetch": "0.11.1",
     "worker-loader": "^0.7.1",
     "xml": "1.0.1",
     "xml-but-prettier": "^1.0.1",
-    "yaml-js": "0.2.0"
+    "yaml-js": "0.2.0",
+    "zenscroll": "4.0.0"
   },
   "devDependencies": {
     "autoprefixer": "7.1.1",

src/core/components/array-model.jsx

@@ -1,5 +1,6 @@
 import React, { Component } from "react"
 import PropTypes from "prop-types"
+import ImPropTypes from "react-immutable-proptypes"
 
 const propStyle = { color: "#999", fontStyle: "italic" }
 
@@ -12,7 +13,7 @@ export default class ArrayModel extends Component {
     name: PropTypes.string,
     required: PropTypes.bool,
     expandDepth: PropTypes.number,
-    specPath: PropTypes.array.isRequired,
+    specPath: ImPropTypes.list.isRequired,
     depth: PropTypes.number
   }
 
@@ -39,7 +40,7 @@ export default class ArrayModel extends Component {
     */
 
     return <span className="model">
-      <ModelCollapse title={titleEl} collapsed={ depth > expandDepth } collapsedContent="[...]">
+      <ModelCollapse title={titleEl} expanded={ depth <= expandDepth } collapsedContent="[...]">
         [
           {
             properties.size ? properties.entrySeq().map( ( [ key, v ] ) => <Property key={`${key}-${v}`} propKey={ key } propVal={ v } propStyle={ propStyle } />) : null
@@ -48,7 +49,17 @@ export default class ArrayModel extends Component {
             !description ? null :
               <Markdown source={ description } />
           }
-          <span><Model { ...this.props } getConfigs={ getConfigs } specPath={[...specPath, "items"]} name={null} schema={ items } required={ false } depth={ depth + 1 } /></span>
+          <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/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/layout-utils.jsx

@@ -57,6 +57,9 @@ export class Col extends React.Component {
     let classesAr = []
 
     for (let device in DEVICES) {
+      if (!DEVICES.hasOwnProperty(device)) {
+        continue
+      }
       let deviceClass = DEVICES[device]
       if(device in this.props) {
         let val = this.props[device]

src/core/components/layouts/base.jsx

@@ -61,7 +61,18 @@ export default class BaseLayout extends React.Component {
     const isSpecEmpty = !specSelectors.specStr()
 
     if(isSpecEmpty) {
-      return <h4>No spec provided.</h4>
+      let loadingMessage
+      if(isLoading) {
+        loadingMessage = <div className="loading"></div>
+      } else {
+        loadingMessage = <h4>No API definition provided.</h4>
+      }
+
+      return <div className="swagger-ui">
+        <div className="loading-container">
+          {loadingMessage}
+        </div>
+      </div>
     }
 
     return (

src/core/components/model-collapse.jsx

@@ -4,31 +4,48 @@ import PropTypes from "prop-types"
 export default class ModelCollapse extends Component {
   static propTypes = {
     collapsedContent: PropTypes.any,
-    collapsed: PropTypes.bool,
+    expanded: PropTypes.bool,
     children: PropTypes.any,
-    title: PropTypes.element
+    title: PropTypes.element,
+    modelName: PropTypes.string,
+    onToggle: PropTypes.func
   }
 
   static defaultProps = {
     collapsedContent: "{...}",
-    collapsed: true,
-    title: null
+    expanded: false,
+    title: null,
+    onToggle: () => {}
   }
 
   constructor(props, context) {
     super(props, context)
 
-    let { collapsed, collapsedContent } = this.props
+    let { expanded, collapsedContent } = this.props
 
     this.state = {
-      collapsed: collapsed !== undefined ? collapsed : ModelCollapse.defaultProps.collapsed,
+      expanded : expanded,
       collapsedContent: collapsedContent || ModelCollapse.defaultProps.collapsedContent
     }
   }
 
+  componentWillReceiveProps(nextProps){
+
+    if(this.props.expanded!= nextProps.expanded){
+        this.setState({expanded: nextProps.expanded})
+    }
+
+  }
+
   toggleCollapsed=()=>{
+
+
+    if(this.props.onToggle){
+      this.props.onToggle(this.props.modelName,!this.state.expanded)
+    }
+
     this.setState({
-      collapsed: !this.state.collapsed
+      expanded: !this.state.expanded
     })
   }
 
@@ -38,10 +55,10 @@ export default class ModelCollapse extends Component {
       <span>
         { title && <span onClick={this.toggleCollapsed} style={{ "cursor": "pointer" }}>{title}</span> }
         <span onClick={ this.toggleCollapsed } style={{ "cursor": "pointer" }}>
-          <span className={ "model-toggle" + ( this.state.collapsed ? " collapsed" : "" ) }></span>
+          <span className={ "model-toggle" + ( this.state.expanded ? "" : " collapsed" ) }></span>
         </span>
-        { this.state.collapsed ? this.state.collapsedContent : this.props.children }
+        { this.state.expanded ? this.props.children :this.state.collapsedContent }
       </span>
     )
   }
-}
+}

src/core/components/model-example.jsx

@@ -1,5 +1,6 @@
 import React from "react"
 import PropTypes from "prop-types"
+import ImPropTypes from "react-immutable-proptypes"
 
 export default class ModelExample extends React.Component {
   static propTypes = {
@@ -9,7 +10,7 @@ export default class ModelExample extends React.Component {
     example: PropTypes.any.isRequired,
     isExecute: PropTypes.bool,
     getConfigs: PropTypes.func.isRequired,
-    specPath: PropTypes.array.isRequired,
+    specPath: ImPropTypes.list.isRequired,
   }
 
   constructor(props, context) {

src/core/components/model-wrapper.jsx

@@ -1,22 +1,41 @@
 import React, { Component, } from "react"
 import PropTypes from "prop-types"
+//import layoutActions from "actions/layout"
+
+
+export default class ModelWrapper extends Component {
+
 
-export default class ModelComponent extends Component {
   static propTypes = {
     schema: PropTypes.object.isRequired,
     name: PropTypes.string,
     getComponent: PropTypes.func.isRequired,
     getConfigs: PropTypes.func.isRequired,
     specSelectors: PropTypes.object.isRequired,
-    expandDepth: PropTypes.number
+    expandDepth: PropTypes.number,
+    layoutActions: PropTypes.object,
+    layoutSelectors: PropTypes.object.isRequired
+  }
+
+  onToggle = (name,isShown) => {
+    // If this prop is present, we'll have deepLinking for it
+    if(this.props.layoutActions) {
+      this.props.layoutActions.show(["models", name],isShown)
+    }
   }
 
   render(){
     let { getComponent, getConfigs } = this.props
     const Model = getComponent("Model")
 
+    let expanded
+    if(this.props.layoutSelectors) {
+      // If this is prop is present, we'll have deepLinking for it
+      expanded = this.props.layoutSelectors.isShown(["models",this.props.name])
+    }
+
     return <div className="model-box">
-      <Model { ...this.props } getConfigs={ getConfigs } depth={ 1 } expandDepth={ this.props.expandDepth || 0 }/>
+      <Model { ...this.props } getConfigs={ getConfigs } expanded={expanded} depth={ 1 } onToggle={ this.onToggle } expandDepth={ this.props.expandDepth || 0 }/>
     </div>
   }
 }

src/core/components/model.jsx

@@ -1,8 +1,9 @@
-import React, { PureComponent } from "react"
+import React from "react"
+import ImmutablePureComponent from "react-immutable-pure-component"
 import ImPropTypes from "react-immutable-proptypes"
 import PropTypes from "prop-types"
 
-export default class Model extends PureComponent {
+export default class Model extends ImmutablePureComponent {
   static propTypes = {
     schema: ImPropTypes.orderedMap.isRequired,
     getComponent: PropTypes.func.isRequired,
@@ -13,7 +14,7 @@ export default class Model extends PureComponent {
     required: PropTypes.bool,
     expandDepth: PropTypes.number,
     depth: PropTypes.number,
-    specPath: PropTypes.array.isRequired,
+    specPath: ImPropTypes.list.isRequired,
   }
 
   getModelName =( ref )=> {

src/core/components/models.jsx

@@ -1,4 +1,5 @@
 import React, { Component } from "react"
+import Im from "immutable"
 import PropTypes from "prop-types"
 
 export default class Models extends Component {
@@ -13,15 +14,15 @@ export default class Models extends Component {
   render(){
     let { specSelectors, getComponent, layoutSelectors, layoutActions, getConfigs } = this.props
     let definitions = specSelectors.definitions()
-    let { docExpansion, defaultModelExpandDepth } = getConfigs()
-    let showModels = layoutSelectors.isShown("models", docExpansion === "full" || docExpansion === "list" )
+    let { docExpansion, defaultModelsExpandDepth } = getConfigs()
+    if (!definitions.size || defaultModelsExpandDepth < 0) return null
+
+    let showModels = layoutSelectors.isShown("models", defaultModelsExpandDepth > 0 && docExpansion !== "none")
     const specPathBase = specSelectors.isOAS3() ? ["components", "schemas"] : ["definitions"]
 
     const ModelWrapper = getComponent("ModelWrapper")
     const Collapse = getComponent("Collapse")
 
-    if (!definitions.size) return null
-
     return <section className={ showModels ? "models is-open" : "models"}>
       <h4 onClick={() => layoutActions.show("models", !showModels)}>
         <span>Models</span>
@@ -32,14 +33,17 @@ export default class Models extends Component {
       <Collapse isOpened={showModels}>
         {
           definitions.entrySeq().map( ( [ name, model ])=>{
-            return <div className="model-container" key={ `models-section-${name}` }>
+
+            return <div id={ `model-${name}` } className="model-container" key={ `models-section-${name}` }>
               <ModelWrapper name={ name }
-                     expandDepth={ defaultModelExpandDepth }
+                     expandDepth={ defaultModelsExpandDepth }
                      schema={ model }
-                     specPath={[...specPathBase, name]}
+                     specPath={Im.List([...specPathBase, name])}
                      getComponent={ getComponent }
-                     getConfigs={ getConfigs }
-                     specSelectors={ specSelectors }/>
+                     specSelectors={ specSelectors }
+                     getConfigs = {getConfigs}
+                     layoutSelectors = {layoutSelectors}
+                     layoutActions = {layoutActions}/>
               </div>
           }).toArray()
         }

src/core/components/object-model.jsx

@@ -1,6 +1,7 @@
 import React, { Component, } from "react"
 import PropTypes from "prop-types"
 import { List } from "immutable"
+import ImPropTypes from "react-immutable-proptypes"
 
 const braceOpen = "{"
 const braceClose = "}"
@@ -10,18 +11,19 @@ export default class ObjectModel extends Component {
     schema: PropTypes.object.isRequired,
     getComponent: PropTypes.func.isRequired,
     getConfigs: PropTypes.func.isRequired,
+    expanded: PropTypes.bool,
+    onToggle: PropTypes.func,
     specSelectors: PropTypes.object.isRequired,
     name: PropTypes.string,
     isRef: PropTypes.bool,
     expandDepth: PropTypes.number,
     depth: PropTypes.number,
-    specPath: PropTypes.object.isRequired
+    specPath: ImPropTypes.list.isRequired
   }
 
   render(){
-    let { schema, name, isRef, getComponent, getConfigs, depth, specPath, expandDepth, ...otherProps } = this.props
-    let { specSelectors } = otherProps
-
+    let { schema, name, isRef, getComponent, getConfigs, depth, onToggle, expanded, specPath, ...otherProps } = this.props
+    let { specSelectors,expandDepth } = otherProps
     const { isOAS3 } = specSelectors
 
     if(!schema) {
@@ -61,7 +63,13 @@ export default class ObjectModel extends Component {
     </span>
 
     return <span className="model">
-      <ModelCollapse title={titleEl} collapsed={ depth > expandDepth } collapsedContent={ collapsedContent }>
+      <ModelCollapse
+        modelName={name}
+        title={titleEl}
+        onToggle = {onToggle}
+        expanded={ expanded ? true : depth <= expandDepth }
+        collapsedContent={ collapsedContent }>
+
          <span className="brace-open object">{ braceOpen }</span>
           {
             !isRef ? null : <JumpToPathSection />
@@ -95,7 +103,7 @@ export default class ObjectModel extends Component {
                           <Model key={ `object-${name}-${key}_${value}` } { ...otherProps }
                                  required={ isRequired }
                                  getComponent={ getComponent }
-                                 specPath={[...specPath, "properties", key]}
+                                 specPath={specPath.push("properties", key)}
                                  getConfigs={ getConfigs }
                                  schema={ value }
                                  depth={ depth + 1 } />
@@ -134,7 +142,7 @@ export default class ObjectModel extends Component {
                     <td>
                       <Model { ...otherProps } required={ false }
                              getComponent={ getComponent }
-                             specPath={[...specPath, "additionalProperties"]}
+                             specPath={specPath.push("additionalProperties")}
                              getConfigs={ getConfigs }
                              schema={ additionalProperties }
                              depth={ depth + 1 } />
@@ -149,7 +157,7 @@ export default class ObjectModel extends Component {
                       {anyOf.map((schema, k) => {
                         return <div key={k}><Model { ...otherProps } required={ false }
                                  getComponent={ getComponent }
-                                 specPath={[...specPath, "anyOf", k]}
+                                 specPath={specPath.push("anyOf", k)}
                                  getConfigs={ getConfigs }
                                  schema={ schema }
                                  depth={ depth + 1 } /></div>
@@ -165,7 +173,7 @@ export default class ObjectModel extends Component {
                       {oneOf.map((schema, k) => {
                         return <div key={k}><Model { ...otherProps } required={ false }
                                  getComponent={ getComponent }
-                                 specPath={[...specPath, "oneOf", k]}
+                                 specPath={specPath.push("oneOf", k)}
                                  getConfigs={ getConfigs }
                                  schema={ schema }
                                  depth={ depth + 1 } /></div>
@@ -182,7 +190,7 @@ export default class ObjectModel extends Component {
                         <Model { ...otherProps }
                                required={ false }
                                getComponent={ getComponent }
-                               specPath={[...specPath, "not"]}
+                               specPath={specPath.push("not")}
                                getConfigs={ getConfigs }
                                schema={ not }
                                depth={ depth + 1 } />

src/core/components/operation.jsx

@@ -2,11 +2,12 @@ import React, { PureComponent } from "react"
 import PropTypes from "prop-types"
 import { getList } from "core/utils"
 import { getExtensions, sanitizeUrl } from "core/utils"
-import { Iterable } from "immutable"
+import { Iterable, List } from "immutable"
+import ImPropTypes from "react-immutable-proptypes"
 
 export default class Operation extends PureComponent {
   static propTypes = {
-    specPath: PropTypes.array.isRequired,
+    specPath: ImPropTypes.list.isRequired,
     operation: PropTypes.instanceOf(Iterable).isRequired,
     response: PropTypes.instanceOf(Iterable),
     request: PropTypes.instanceOf(Iterable),
@@ -33,7 +34,7 @@ export default class Operation extends PureComponent {
     operation: null,
     response: null,
     request: null,
-    specPath: []
+    specPath: List()
   }
 
   render() {
@@ -102,12 +103,13 @@ export default class Operation extends PureComponent {
     const Schemes = getComponent( "schemes" )
     const OperationServers = getComponent( "OperationServers" )
     const OperationExt = getComponent( "OperationExt" )
+    const DeepLink = getComponent( "DeepLink" )
 
     const { showExtensions } = getConfigs()
 
     // Merge in Live Response
     if(responses && response && response.size > 0) {
-      let notDocumented = !responses.get(String(response.get("status")))
+      let notDocumented = !responses.get(String(response.get("status"))) && !responses.get("default")
       response = response.set("notDocumented", notDocumented)
     }
 
@@ -120,12 +122,11 @@ export default class Operation extends PureComponent {
               and pulled in with getComponent */}
               <span className="opblock-summary-method">{method.toUpperCase()}</span>
               <span className={ deprecated ? "opblock-summary-path__deprecated" : "opblock-summary-path" } >
-              <a
-                className="nostyle"
-                onClick={isDeepLinkingEnabled ? (e) => e.preventDefault() : null}
-                href={isDeepLinkingEnabled ? `#/${isShownKey.join("/")}` : null}>
-                <span>{path}</span>
-              </a>
+              <DeepLink
+                  enabled={isDeepLinkingEnabled}
+                  isShown={isShown}
+                  path={`${isShownKey.join("/")}`}
+                  text={path} />
                 <JumpToPath path={specPath} /> {/*TODO: use wrapComponents here, swagger-ui doesn't care about jumpToPath */}
               </span>
 
@@ -174,7 +175,7 @@ export default class Operation extends PureComponent {
 
               <Parameters
                 parameters={parameters}
-                specPath={[...specPath, "parameters"]}
+                specPath={specPath.push("parameters")}
                 operation={operation}
                 onChangeKey={onChangeKey}
                 onTryoutClick = { onTryoutClick }
@@ -248,7 +249,7 @@ export default class Operation extends PureComponent {
                     specActions={ specActions }
                     produces={ produces }
                     producesValue={ operation.get("produces_value") }
-                    specPath={[...specPath, "responses"]}
+                    specPath={specPath.push("responses")}
                     path={ path }
                     method={ method }
                     displayRequestDuration={ displayRequestDuration }

src/core/components/operations.jsx

@@ -1,5 +1,6 @@
 import React from "react"
 import PropTypes from "prop-types"
+import Im from "immutable"
 import { createDeepLinkPath, sanitizeUrl } from "core/utils"
 
 const SWAGGER2_OPERATION_METHODS = [
@@ -37,6 +38,7 @@ export default class Operations extends React.Component {
     const OperationContainer = getComponent("OperationContainer", true)
     const Collapse = getComponent("Collapse")
     const Markdown = getComponent("Markdown")
+    const DeepLink = getComponent("DeepLink")
 
     let {
       docExpansion,
@@ -79,12 +81,11 @@ export default class Operations extends React.Component {
                     onClick={() => layoutActions.show(isShownKey, !showTag)}
                     className={!tagDescription ? "opblock-tag no-desc" : "opblock-tag" }
                     id={isShownKey.join("-")}>
-                    <a
-                      className="nostyle"
-                      onClick={isDeepLinkingEnabled ? (e) => e.preventDefault() : null}
-                      href= {isDeepLinkingEnabled ? `#/${tag}` : null}>
-                      <span>{tag}</span>
-                    </a>
+                    <DeepLink
+                        enabled={isDeepLinkingEnabled}
+                        isShown={showTag}
+                        path={tag}
+                        text={tag} />
                     { !tagDescription ? null :
                         <small>
                           <Markdown source={tagDescription} />
@@ -119,7 +120,7 @@ export default class Operations extends React.Component {
                       operations.map( op => {
                         const path = op.get("path")
                         const method = op.get("method")
-                        const specPath = ["paths", path, method]
+                        const specPath = Im.List(["paths", path, method])
 
 
                         // FIXME: (someday) this logic should probably be in a selector,

src/core/components/param-body.jsx

@@ -47,7 +47,7 @@ export default class ParamBody extends PureComponent {
 
   updateValues = (props) => {
     let { specSelectors, pathMethod, param, isExecute, consumesValue="" } = props
-    let parameter = specSelectors ? specSelectors.getParameter(pathMethod, param.get("name"), param.get("in")) : {}
+    let parameter = specSelectors ? specSelectors.getParameter(pathMethod, param.get("name"), param.get("in")) : fromJS({})
     let isXml = /xml/i.test(consumesValue)
     let isJson = /json/i.test(consumesValue)
     let paramValue = isXml ? parameter.get("value_xml") : parameter.get("value")

src/core/components/parameter-row.jsx

@@ -1,6 +1,7 @@
 import React, { Component } from "react"
 import { Map } from "immutable"
 import PropTypes from "prop-types"
+import ImPropTypes from "react-immutable-proptypes"
 import win from "core/window"
 import { getExtensions } from "core/utils"
 
@@ -15,7 +16,7 @@ export default class ParameterRow extends Component {
     specSelectors: PropTypes.object.isRequired,
     pathMethod: PropTypes.array.isRequired,
     getConfigs: PropTypes.func.isRequired,
-    specPath: PropTypes.array.isRequired,
+    specPath: ImPropTypes.list.isRequired
   }
 
   constructor(props, context) {
@@ -107,6 +108,34 @@ export default class ParameterRow extends Component {
     let value = parameter ? parameter.get("value") : ""
     let extensions = getExtensions(param)
 
+
+    let paramItems // undefined
+    let paramItemsEnum // undefined
+    let isDisplayParamItemsEnum = false
+    if ( param !== undefined ) {
+      paramItems = param.get("items")
+    }
+    if ( paramItems !== undefined ) {
+      paramItemsEnum = param.get("items").get("enum")
+    }
+    if ( paramItemsEnum !== undefined ) {
+      if (paramItemsEnum.size > 0) {
+        isDisplayParamItemsEnum = true
+      }
+    }
+
+    // Default and Example Value for readonly doc
+    let paramDefaultValue // undefined
+    let paramExample // undefined
+    if ( param !== undefined ) {
+      paramDefaultValue = param.get("default")
+      paramExample = param.get("example")
+    }
+
+    if (isDisplayParamItemsEnum) { // if we have an array, default value is in "items"
+      paramDefaultValue = paramItems.get("default")
+    }
+
     return (
       <tr>
         <td className="col parameters-col_name">
@@ -124,6 +153,25 @@ export default class ParameterRow extends Component {
 
         <td className="col parameters-col_description">
           <Markdown source={ param.get("description") }/>
+
+          { (bodyParam || !isExecute) && isDisplayParamItemsEnum ?
+            <Markdown source={
+                "<i>Available values</i> : " + paramItemsEnum.map(function(item) {
+                    return item
+                  }).toArray()}/> 
+            : null
+          }
+
+          { (bodyParam || !isExecute) && paramDefaultValue !== undefined ?
+            <Markdown source={"<i>Default value</i> : " + paramDefaultValue}/>
+            : null
+          }
+
+          { (bodyParam || !isExecute) && paramExample !== undefined ?
+            <Markdown source={"<i>Example</i> : " + paramExample}/>
+            : null
+          }
+
           {(isFormData && !isFormDataSupported) && <div>Error: your browser does not support FormData</div>}
 
           { bodyParam || !isExecute ? null
@@ -139,7 +187,7 @@ export default class ParameterRow extends Component {
 
           {
             bodyParam && schema ? <ModelExample getComponent={ getComponent }
-                                                specPath={[...specPath, "schema"]}
+                                                specPath={specPath.push("schema")}
                                                 getConfigs={ getConfigs }
                                                 isExecute={ isExecute }
                                                 specSelectors={ specSelectors }

src/core/components/parameters.jsx

@@ -21,7 +21,7 @@ export default class Parameters extends Component {
     onChangeKey: PropTypes.array,
     pathMethod: PropTypes.array.isRequired,
     getConfigs: PropTypes.func.isRequired,
-    specPath: PropTypes.array.isRequired,
+    specPath: ImPropTypes.list.isRequired,
   }
 
 
@@ -98,7 +98,7 @@ export default class Parameters extends Component {
                   eachMap(parameters, (parameter, i) => (
                     <ParameterRow
                       fn={ fn }
-                      specPath={[...specPath, i]}
+                      specPath={specPath.push(i.toString())}
                       getComponent={ getComponent }
                       getConfigs={ getConfigs }
                       param={ parameter }

src/core/components/response-body.jsx

@@ -2,6 +2,7 @@ import React from "react"
 import PropTypes from "prop-types"
 import formatXml from "xml-but-prettier"
 import lowerCase from "lodash/lowerCase"
+import { extractFileNameFromContentDispositionHeader } from "core/utils"
 
 export default class ResponseBody extends React.Component {
 
@@ -43,7 +44,11 @@ export default class ResponseBody extends React.Component {
 
       // Image
     } else if (/^image\//i.test(contentType)) {
-      bodyEl = <img style={{ maxWidth: "100%" }} src={ window.URL.createObjectURL(content) } />
+      if(contentType.includes("svg")) {
+        bodyEl = <div> { content } </div>
+      } else {
+        bodyEl = <img style={{ maxWidth: "100%" }} src={ window.URL.createObjectURL(content) } />
+      }
 
       // Audio
     } else if (/^audio\//i.test(contentType)) {
@@ -66,12 +71,13 @@ export default class ResponseBody extends React.Component {
         let fileName = url.substr(url.lastIndexOf("/") + 1)
         let download = [type, fileName, href].join(":")
 
-        // Use filename from response header
+        // Use filename from response header, 
+        // First check if filename is quoted (e.g. contains space), if no, fallback to not quoted check
         let disposition = headers["content-disposition"] || headers["Content-Disposition"]
         if (typeof disposition !== "undefined") {
-          let responseFilename = /filename=([^;]*);?/i.exec(disposition)
-          if (responseFilename !== null && responseFilename.length > 1) {
-            download = responseFilename[1]
+          let responseFilename = extractFileNameFromContentDispositionHeader(disposition)
+          if (responseFilename !== null) {
+            download = responseFilename
           }
         }
 

src/core/components/response.jsx

@@ -1,7 +1,8 @@
 import React from "react"
 import PropTypes from "prop-types"
+import ImPropTypes from "react-immutable-proptypes"
 import cx from "classnames"
-import { fromJS, Seq, Iterable } from "immutable"
+import { fromJS, Seq, Iterable, List } from "immutable"
 import { getSampleSchema, fromJSOrdered } from "core/utils"
 
 const getExampleComponent = ( sampleResponse, examples, HighlightCode ) => {
@@ -47,7 +48,7 @@ export default class Response extends React.Component {
     getComponent: PropTypes.func.isRequired,
     getConfigs: PropTypes.func.isRequired,
     specSelectors: PropTypes.object.isRequired,
-    specPath: PropTypes.array.isRequired,
+    specPath: ImPropTypes.list.isRequired,
     fn: PropTypes.object.isRequired,
     contentType: PropTypes.string,
     controlsAcceptHeader: PropTypes.bool,
@@ -99,7 +100,7 @@ export default class Response extends React.Component {
     var schema, specPathWithPossibleSchema
 
     if(isOAS3()) {
-      const schemaPath = ["content", this.state.responseContentType, "schema"]
+      const schemaPath = List(["content", this.state.responseContentType, "schema"])
       const oas3SchemaForContentType = response.getIn(schemaPath)
       sampleResponse = oas3SchemaForContentType ? getSampleSchema(oas3SchemaForContentType.toJS(), this.state.responseContentType, {
         includeReadOnly: true
@@ -108,7 +109,7 @@ export default class Response extends React.Component {
       specPathWithPossibleSchema = oas3SchemaForContentType ? schemaPath : specPath
     } else {
       schema = inferSchema(response.toJS()) // TODO: don't convert back and forth. Lets just stick with immutable for inferSchema
-      specPathWithPossibleSchema = response.has("schema") ? [...specPath, "schema"] : specPath
+      specPathWithPossibleSchema = response.has("schema") ? specPath.push("schema") : specPath
       sampleResponse = schema ? getSampleSchema(schema, contentType, {
         includeReadOnly: true,
         includeWriteOnly: true // writeOnly has no filtering effect in swagger 2.0

src/core/components/responses.jsx

@@ -1,6 +1,7 @@
 import React from "react"
-import PropTypes from "prop-types"
 import { fromJS, Iterable } from "immutable"
+import PropTypes from "prop-types"
+import ImPropTypes from "react-immutable-proptypes"
 import { defaultStatusCode, getAcceptControllingResponse } from "core/utils"
 
 export default class Responses extends React.Component {
@@ -17,7 +18,7 @@ export default class Responses extends React.Component {
     specSelectors: PropTypes.object.isRequired,
     specActions: PropTypes.object.isRequired,
     oas3Actions: PropTypes.object.isRequired,
-    specPath: PropTypes.array.isRequired,
+    specPath: ImPropTypes.list.isRequired,
     fn: PropTypes.object.isRequired
   }
 
@@ -120,7 +121,7 @@ export default class Responses extends React.Component {
                   let className = tryItOutResponse && tryItOutResponse.get("status") == code ? "response_current" : ""
                   return (
                     <Response key={ code }
-                              specPath={[...specPath, code]}
+                              specPath={specPath.push(code)}
                               isDefault={defaultCode === code}
                               fn={fn}
                               className={ className }

src/core/containers/OperationContainer.jsx

@@ -1,5 +1,6 @@
 import React, { PureComponent } from "react"
 import PropTypes from "prop-types"
+import ImPropTypes from "react-immutable-proptypes"
 import { helpers } from "swagger-client"
 import { Iterable, fromJS } from "immutable"
 
@@ -31,8 +32,7 @@ export default class OperationContainer extends PureComponent {
     request: PropTypes.instanceOf(Iterable),
     security: PropTypes.instanceOf(Iterable),
     isDeepLinkingEnabled: PropTypes.bool.isRequired,
-    specPath: PropTypes.array.isRequired,
-
+    specPath: ImPropTypes.list.isRequired,
     getComponent: PropTypes.func.isRequired,
     authActions: PropTypes.object,
     oas3Actions: PropTypes.object,

src/core/index.js

@@ -47,6 +47,7 @@ module.exports = function SwaggerUI(opts) {
     showMutatedRequest: true,
     defaultModelRendering: "example",
     defaultModelExpandDepth: 1,
+    defaultModelsExpandDepth: 1,
     showExtensions: false,
 
     // Initial set of plugins ( TODO rename this, or refactor - we don't need presets _and_ plugins. Its just there for performance.
@@ -91,6 +92,20 @@ module.exports = function SwaggerUI(opts) {
     }, constructorConfig.initialState)
   }
 
+  if(constructorConfig.initialState) {
+    // if the user sets a key as `undefined`, that signals to us that we
+    // should delete the key entirely.
+    // known usage: Swagger-Editor validate plugin tests
+    for (var key in constructorConfig.initialState) {
+      if(
+        constructorConfig.initialState.hasOwnProperty(key)
+        && constructorConfig.initialState[key] === undefined
+      ) {
+        delete storeConfigs.state[key]
+      }
+    }
+  }
+
   let inlinePlugin = ()=> {
     return {
       fn: constructorConfig.fn,
@@ -104,8 +119,6 @@ module.exports = function SwaggerUI(opts) {
 
   var system = store.getSystem()
 
-  system.initOAuth = system.authActions.configureAuth
-
   const downloadSpec = (fetchedConfig) => {
     if(typeof constructorConfig !== "object") {
       return system
@@ -137,6 +150,9 @@ module.exports = function SwaggerUI(opts) {
     } else if(mergedConfig.dom_id) {
       let domNode = document.querySelector(mergedConfig.dom_id)
       system.render(domNode, "App")
+    } else if(mergedConfig.dom_id === null || mergedConfig.domNode === null) {
+      // do nothing
+      // this is useful for testing that does not need to do any rendering
     } else {
       console.error("Skipped rendering: no `dom_id` or `domNode` was specified")
     }

src/core/oauth2-authorize.js

@@ -46,7 +46,7 @@ export default function authorize ( { auth, authActions, errActions, configs, au
       authId: name,
       source: "validation",
       level: "error",
-      message: "oauth2RedirectUri configuration is not passed. Oauth2 authorization cannot be performed."
+      message: "oauth2RedirectUrl configuration is not passed. Oauth2 authorization cannot be performed."
     })
     return
   }

src/core/plugins/ast/ast.js

@@ -103,30 +103,30 @@ export function positionRangeForPath(yaml, path) {
 
   let ast = cachedCompose(yaml)
 
-  // simply walks the tree using current path recursively to the point that
+  // simply walks the tree using astValue path recursively to the point that
   // path is empty.
   return find(ast)
 
-  function find(current) {
-    if (current.tag === MAP_TAG) {
-      for (i = 0; i < current.value.length; i++) {
-        var pair = current.value[i]
+  function find(astValue, astKeyValue) {
+    if (astValue.tag === MAP_TAG) {
+      for (i = 0; i < astValue.value.length; i++) {
+        var pair = astValue.value[i]
         var key = pair[0]
         var value = pair[1]
 
         if (key.value === path[0]) {
           path.shift()
-          return find(value)
+          return find(value, key)
         }
       }
     }
 
-    if (current.tag === SEQ_TAG) {
-      var item = current.value[path[0]]
+    if (astValue.tag === SEQ_TAG) {
+      var item = astValue.value[path[0]]
 
       if (item && item.tag) {
         path.shift()
-        return find(item)
+        return find(item, astKeyValue)
       }
     }
 
@@ -135,17 +135,35 @@ export function positionRangeForPath(yaml, path) {
       return invalidRange
     }
 
-    return {
-      /* jshint camelcase: false */
+    const range = {
       start: {
-        line: current.start_mark.line,
-        column: current.start_mark.column
+        line: astValue.start_mark.line,
+        column: astValue.start_mark.column,
+        pointer: astValue.start_mark.pointer,
       },
       end: {
-        line: current.end_mark.line,
-        column: current.end_mark.column
+        line: astValue.end_mark.line,
+        column: astValue.end_mark.column,
+        pointer: astValue.end_mark.pointer,
       }
     }
+
+    if(astKeyValue) {
+      // eslint-disable-next-line camelcase
+      range.key_start = {
+        line: astKeyValue.start_mark.line,
+        column: astKeyValue.start_mark.column,
+        pointer: astKeyValue.start_mark.pointer,
+      }
+      // eslint-disable-next-line camelcase
+      range.key_end = {
+        line: astKeyValue.end_mark.line,
+        column: astKeyValue.end_mark.column,
+        pointer: astKeyValue.end_mark.pointer,
+      }
+    }
+
+    return range
   }
 }
 

src/core/plugins/auth/index.js

@@ -5,6 +5,10 @@ import * as specWrapActionReplacements from "./spec-wrap-actions"
 
 export default function() {
   return {
+    afterLoad(system) {
+      this.rootInjects = this.rootInjects || {}
+      this.rootInjects.initOAuth = system.authActions.configureAuth
+    },
     statePlugins: {
       auth: {
         reducers,

src/core/plugins/configs/index.js

@@ -1,5 +1,5 @@
 import YAML from "js-yaml"
-import yamlConfig from "../../../swagger-config.yaml"
+import yamlConfig from "root/swagger-config.yaml"
 import * as actions from "./actions"
 import * as selectors from "./selectors"
 import reducers from "./reducers"

src/core/plugins/deep-linking/spec-wrap-actions.js

@@ -1,8 +1,7 @@
-import scrollTo from "scroll-to-element"
+import zenscroll from "zenscroll"
 import { escapeDeepLinkPath } from "core/utils"
 
-const SCROLL_OFFSET = -5
-let hasHashBeenParsed = false
+let hasHashBeenParsed = false //TODO this forces code to only run once which may prevent scrolling if page not refreshed
 
 
 export const updateResolved = (ori, { layoutActions, getConfigs }) => (...args) => {
@@ -12,7 +11,6 @@ export const updateResolved = (ori, { layoutActions, getConfigs }) => (...args)
   if(!isDeepLinkingEnabled || isDeepLinkingEnabled === "false") {
     return
   }
-
   if(window.location.hash && !hasHashBeenParsed ) {
     let hash = window.location.hash.slice(1) // # is first character
 
@@ -30,21 +28,35 @@ export const updateResolved = (ori, { layoutActions, getConfigs }) => (...args)
 
     let [tag, operationId] = hash.split("/")
 
+    let swaggerUI = document.querySelector(".swagger-ui")
+    let myScroller = zenscroll.createScroller(swaggerUI)
+
+    let target
+
     if(tag && operationId) {
       // Pre-expand and scroll to the operation
       layoutActions.show(["operations-tag", tag], true)
       layoutActions.show(["operations", tag, operationId], true)
 
-      scrollTo(`#operations-${escapeDeepLinkPath(tag)}-${escapeDeepLinkPath(operationId)}`, {
-        offset: SCROLL_OFFSET
-      })
+      target = document
+        .getElementById(`operations-${escapeDeepLinkPath(tag)}-${escapeDeepLinkPath(operationId)}`)
     } else if(tag) {
       // Pre-expand and scroll to the tag
       layoutActions.show(["operations-tag", tag], true)
 
-      scrollTo(`#operations-tag-${escapeDeepLinkPath(tag)}`, {
-        offset: SCROLL_OFFSET
-      })
+      target = document.getElementById(`operations-tag-${escapeDeepLinkPath(tag)}`)
+    }
+
+
+    if(target) {
+      myScroller.to(target)
+      setTimeout(() => {
+        // Backup functionality: if we're still at the top of the document,
+        // scroll on the entire page (not within the Swagger-UI container)
+        if(zenscroll.getY() === 0) {
+          zenscroll.to(target)
+        }
+      }, 50)
     }
   }
 

src/core/plugins/download-url.js

@@ -26,7 +26,7 @@ export default function downloadUrlPlugin (toolbox) {
       function next(res) {
         if(res instanceof Error || res.status >= 400) {
           specActions.updateLoadingStatus("failed")
-          return errActions.newThrownErr( new Error(res.statusText + " " + url) )
+          return errActions.newThrownErr( new Error((res.message || res.statusText) + " " + url) )
         }
         specActions.updateLoadingStatus("success")
         specActions.updateSpec(res.text)

src/core/plugins/err/actions.js

@@ -7,10 +7,10 @@ export const NEW_SPEC_ERR_BATCH = "err_new_spec_err_batch"
 export const NEW_AUTH_ERR = "err_new_auth_err"
 export const CLEAR = "err_clear"
 
-export function newThrownErr(err, action) {
+export function newThrownErr(err) {
   return {
       type: NEW_THROWN_ERR,
-      payload: { action, error: serializeError(err) }
+      payload: serializeError(err)
   }
 }
 

src/core/plugins/err/error-transformers/hook.js

@@ -1,26 +1,13 @@
 import reduce from "lodash/reduce"
-let request = require.context("./transformers/", true, /\.js$/)
-let errorTransformers = []
+import * as NotOfType from "./transformers/not-of-type"
+import * as ParameterOneOf from "./transformers/parameter-oneof"
+import * as StripInstance from "./transformers/strip-instance"
 
-request.keys().forEach( function( key ){
-  if( key === "./hook.js" ) {
-    return
-  }
-
-  if( !key.match(/js$/) ) {
-    return
-  }
-
-  if( key.slice(2).indexOf("/") > -1) {
-    // skip files in subdirs
-    return
-  }
-
-  errorTransformers.push({
-    name: toTitleCase(key).replace(".js", "").replace("./", ""),
-    transform: request(key).transform
-  })
-})
+const errorTransformers = [
+  NotOfType,
+  ParameterOneOf,
+  StripInstance
+]
 
 export default function transformErrors (errors, system) {
   let inputs = {
@@ -47,10 +34,3 @@ export default function transformErrors (errors, system) {
     })
 
 }
-
-function toTitleCase(str) {
-  return str
-    .split("-")
-    .map(substr => substr[0].toUpperCase() + substr.slice(1))
-    .join("")
-}

src/core/plugins/layout/actions.js

@@ -37,17 +37,3 @@ export function changeMode(thing, mode="") {
     payload: {thing, mode}
   }
 }
-
-
-// export function onlyShow(thing, shown=true) {
-//   thing = normalizeArray(thing)
-//   if(thing.length < 2)
-//     throw new Error("layoutActions.onlyShow only works, when `thing` is an array with length > 1")
-//   return {
-//     type: ONLY_SHOW,
-//     payload: {thing, shown}
-//   }
-// }
-
-
-

src/core/plugins/layout/reducers.js

@@ -1,3 +1,4 @@
+import { fromJS } from "immutable"
 import {
   UPDATE_LAYOUT,
   UPDATE_FILTER,
@@ -12,9 +13,14 @@ export default {
   [UPDATE_FILTER]: (state, action) => state.set("filter", action.payload),
 
   [SHOW]: (state, action) => {
-    let thing = action.payload.thing
-    let shown = action.payload.shown
-    return state.setIn(["shown"].concat(thing), shown)
+    const isShown = action.payload.shown
+    // This is one way to serialize an array, another (preferred) is to convert to json-pointer
+    // TODO: use json-pointer serilization instead of fromJS(...), for performance
+    const thingToShow = fromJS(action.payload.thing)
+    // This is a map of paths to bools
+    // eg: [one, two] => true
+    // eg: [one] => false
+    return state.update("shown", fromJS({}), a => a.set(thingToShow, isShown))
   },
 
   [UPDATE_MODE]: (state, action) => {
@@ -24,4 +30,3 @@ export default {
   }
 
 }
-

src/core/plugins/layout/selectors.js

@@ -1,5 +1,6 @@
 import { createSelector } from "reselect"
 import { normalizeArray } from "core/utils"
+import { fromJS } from "immutable"
 
 const state = state => state
 
@@ -9,7 +10,7 @@ export const currentFilter = state => state.get("filter")
 
 export const isShown = (state, thing, def) => {
   thing = normalizeArray(thing)
-  return Boolean(state.getIn(["shown", ...thing], def))
+  return state.get("shown", fromJS({})).get(fromJS(thing), def)
 }
 
 export const whatMode = (state, thing, def="") => {
@@ -21,4 +22,3 @@ export const showSummary = createSelector(
   state,
   state => !isShown(state, "editor")
 )
-

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

@@ -38,7 +38,7 @@ const RequestBody = ({
       expandDepth={1}
       isExecute={isExecute}
       schema={mediaTypeValue.get("schema")}
-      specPath={[...specPath, "content", contentType]}
+      specPath={specPath.push("content", contentType)}
       example={<RequestBodyEditor
         requestBody={requestBody}
         onChange={onChange}

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

@@ -72,10 +72,10 @@ export const servers = onlyOAS3(createSelector(
 
 export const isOAS3 = (ori, system) => () => {
   const spec = system.getSystem().specSelectors.specJson()
-  return isOAS3Helper(spec)
+  return isOAS3Helper(Map.isMap(spec) ? spec : Map())
 }
 
 export const isSwagger2 = (ori, system) => () => {
   const spec = system.getSystem().specSelectors.specJson()
-  return isSwagger2Helper(spec)
+  return isSwagger2Helper(Map.isMap(spec) ? spec : Map())
 }

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

@@ -29,7 +29,7 @@ class Parameters extends Component {
     fn: PropTypes.object.isRequired,
     tryItOutEnabled: PropTypes.bool,
     allowTryItOut: PropTypes.bool,
-    specPath: PropTypes.array.isRequired,
+    specPath: ImPropTypes.list.isRequired,
     onTryoutClick: PropTypes.func,
     onCancelClick: PropTypes.func,
     onChangeKey: PropTypes.array,
@@ -107,7 +107,7 @@ class Parameters extends Component {
     const { isOAS3 } = specSelectors
 
     const requestBody = operation.get("requestBody")
-    const requestBodySpecPath = [...specPath.slice(0, -1), "requestBody"] // remove the "parameters" part
+    const requestBodySpecPath = specPath.slice(0, -1).push("requestBody") // remove the "parameters" part
 
     return (
       <div className="opblock-section">
@@ -143,7 +143,7 @@ class Parameters extends Component {
                     eachMap(parameters, (parameter, i) => (
                       <ParameterRow fn={ fn }
                         getComponent={ getComponent }
-                        specPath={[...specPath, i]}
+                        specPath={specPath.push(i)}
                         getConfigs={ getConfigs }
                         param={ parameter }
                         key={ parameter.get( "name" ) }

src/core/plugins/samples/fn.js

@@ -181,6 +181,9 @@ export const sampleXmlFromSchema = (schema, config={}) => {
     example = example || {}
 
     for (let propName in props) {
+      if (!props.hasOwnProperty(propName)) {
+        continue
+      }
       if ( props[propName].readOnly && !includeReadOnly ) {
         continue
       }

src/core/plugins/spec/actions.js

@@ -1,6 +1,7 @@
 import YAML from "js-yaml"
 import parseUrl from "url-parse"
 import serializeError from "serialize-error"
+import isString from "lodash/isString"
 import { isJSONObject } from "core/utils"
 
 // Actions conform to FSA (flux-standard-actions)
@@ -22,22 +23,16 @@ export const UPDATE_OPERATION_VALUE = "spec_update_operation_value"
 export const UPDATE_RESOLVED = "spec_update_resolved"
 export const SET_SCHEME = "set_scheme"
 
-export function updateSpec(spec) {
-  if(spec instanceof Error) {
-    return {type: UPDATE_SPEC, error: true, payload: spec}
-  }
+const toStr = (str) => isString(str) ? str : ""
 
+export function updateSpec(spec) {
+  const cleanSpec = (toStr(spec)).replace(/\t/g, "  ")
   if(typeof spec === "string") {
     return {
       type: UPDATE_SPEC,
-      payload: spec.replace(/\t/g, "  ") || ""
+      payload: cleanSpec
     }
   }
-
-  return {
-    type: UPDATE_SPEC,
-    payload: ""
-  }
 }
 
 export function updateResolved(spec) {
@@ -52,9 +47,6 @@ export function updateUrl(url) {
 }
 
 export function updateJsonSpec(json) {
-  if(!json || typeof json !== "object") {
-    throw new Error("updateJson must only accept a simple JSON object")
-  }
   return {type: UPDATE_JSON, payload: json}
 }
 
@@ -76,7 +68,10 @@ export const parseToJson = (str) => ({specActions, specSelectors, errActions}) =
       line: e.mark && e.mark.line ? e.mark.line + 1 : undefined
     })
   }
-  return specActions.updateJsonSpec(json)
+  if(json && typeof json === "object") {
+    return specActions.updateJsonSpec(json)
+  }
+  return {}
 }
 
 export const resolveSpec = (json, url) => ({specActions, specSelectors, errActions, fn: { fetch, resolve, AST }, getConfigs}) => {
@@ -110,8 +105,7 @@ export const resolveSpec = (json, url) => ({specActions, specSelectors, errActio
       errActions.clear({
         type: "thrown"
       })
-
-      if(errors.length > 0) {
+      if(Array.isArray(errors) && errors.length > 0) {
         let preparedErrors = errors
           .map(err => {
             console.error(err)
@@ -130,18 +124,6 @@ export const resolveSpec = (json, url) => ({specActions, specSelectors, errActio
     })
 }
 
-export const formatIntoYaml = () => ({specActions, specSelectors}) => {
-  let { specStr } = specSelectors
-  let { updateSpec } = specActions
-
-  try {
-    let yaml = YAML.safeDump(YAML.safeLoad(specStr()), {indent: 2})
-    updateSpec(yaml)
-  } catch(e) {
-    updateSpec(e)
-  }
-}
-
 export function changeParam( path, paramName, paramIn, value, isXml ){
   return {
     type: UPDATE_PARAM,

src/core/plugins/spec/selectors.js

@@ -4,6 +4,10 @@ import { fromJS, Set, Map, OrderedMap, List } from "immutable"
 
 const DEFAULT_TAG = "default"
 
+const OPERATION_METHODS = [
+  "get", "put", "post", "delete", "options", "head", "patch", "trace"
+]
+
 const state = state => {
   return state || Map()
 }
@@ -95,6 +99,9 @@ export const operations = createSelector(
         return {}
       }
       path.forEach((operation, method) => {
+        if(OPERATION_METHODS.indexOf(method) < 0) {
+          return
+        }
         list = list.push(fromJS({
           path: pathName,
           method,
@@ -256,10 +263,11 @@ export const allowTryItOutFor = () => {
 
 // Get the parameter value by parameter name
 export function getParameter(state, pathMethod, name, inType) {
+  pathMethod = pathMethod || []
   let params = spec(state).getIn(["paths", ...pathMethod, "parameters"], fromJS([]))
-  return params.filter( (p) => {
+  return params.find( (p) => {
     return Map.isMap(p) && p.get("name") === name && p.get("in") === inType
-  }).first()
+  }) || Map() // Always return a map
 }
 
 export const hasHost = createSelector(
@@ -272,6 +280,7 @@ export const hasHost = createSelector(
 
 // Get the parameter values, that the user filled out
 export function parameterValues(state, pathMethod, isXml) {
+  pathMethod = pathMethod || []
   let params = spec(state).getIn(["paths", ...pathMethod, "parameters"], fromJS([]))
   return params.reduce( (hash, p) => {
     let value = isXml && p.get("in") === "body" ? p.get("value_xml") : p.get("value")
@@ -295,6 +304,7 @@ export function parametersIncludeType(parameters, typeValue="") {
 
 // Get the consumes/produces value that the user selected
 export function contentTypeValues(state, pathMethod) {
+  pathMethod = pathMethod || []
   let op = spec(state).getIn(["paths", ...pathMethod], fromJS({}))
   const parameters = op.get("parameters") || new List()
 
@@ -313,6 +323,7 @@ export function contentTypeValues(state, pathMethod) {
 
 // Get the consumes/produces by path
 export function operationConsumes(state, pathMethod) {
+  pathMethod = pathMethod || []
   return spec(state).getIn(["paths", ...pathMethod, "consumes"], fromJS({}))
 }
 
@@ -329,6 +340,7 @@ export const canExecuteScheme = ( state, path, method ) => {
 }
 
 export const validateBeforeExecute = ( state, pathMethod ) => {
+  pathMethod = pathMethod || []
   let params = spec(state).getIn(["paths", ...pathMethod, "parameters"], fromJS([]))
   let isValid = true
 

src/core/plugins/split-pane-mode/components/index.js

@@ -1,17 +0,0 @@
-import { pascalCaseFilename } from "core/utils"
-
-const request = require.context(".", true, /\.jsx?$/)
-
-request.keys().forEach( function( key ){
-  if( key === "./index.js" ) {
-    return
-  }
-
-  // if( key.slice(2).indexOf("/") > -1) {
-  //   // skip files in subdirs
-  //   return
-  // }
-
-  let mod = request(key)
-  module.exports[pascalCaseFilename(key)] = mod.default ? mod.default : mod
-})

src/core/plugins/split-pane-mode/index.js

@@ -1,5 +1,4 @@
-import * as components from "./components"
-
+import SplitPaneMode from "./components/split-pane-mode"
 export default function SplitPaneModePlugin() {
   return {
     // statePlugins: {
@@ -9,6 +8,8 @@ export default function SplitPaneModePlugin() {
     //   }
     // },
 
-    components,
+    components: {
+      SplitPaneMode
+    }
   }
 }

src/core/presets/base.js

@@ -10,7 +10,7 @@ import auth from "core/plugins/auth"
 import util from "core/plugins/util"
 import SplitPaneModePlugin from "core/plugins/split-pane-mode"
 import downloadUrlPlugin from "core/plugins/download-url"
-import configsPlugin from "plugins/configs"
+import configsPlugin from "core/plugins/configs"
 import deepLinkingPlugin from "core/plugins/deep-linking"
 
 import OperationContainer from "core/containers/OperationContainer"
@@ -61,6 +61,7 @@ import PrimitiveModel from "core/components/primitive-model"
 import Property from "core/components/property"
 import TryItOutButton from "core/components/try-it-out-button"
 import VersionStamp from "core/components/version-stamp"
+import DeepLink from "core/components/deep-link"
 
 import Markdown from "core/components/providers/markdown"
 
@@ -121,7 +122,8 @@ export default function() {
       OperationExt,
       OperationExtRow,
       ParameterExt,
-      OperationContainer
+      OperationContainer,
+      DeepLink
     }
   }
 

src/core/system.js

@@ -18,7 +18,6 @@ function createStoreWithMiddleware(rootReducer, initialState, getSystem) {
     // createLogger( {
     //   stateTransformer: state => state && state.toJS()
     // } ),
-    // errorLog(getSystem), Need to properly handle errors that occur during a render. Ie: let them be...
     systemThunkMiddleware( getSystem )
   ]
 
@@ -68,6 +67,12 @@ export default class Store {
     if(rebuild) {
       this.buildSystem()
     }
+
+    const needAnotherRebuild = callAfterLoad.call(this.system, plugins, this.getSystem())
+
+    if(needAnotherRebuild) {
+      this.buildSystem()
+    }
   }
 
   buildSystem(buildReducer=true) {
@@ -170,7 +175,7 @@ export default class Store {
                 if(!isFn(newAction)) {
                   throw new TypeError("wrapActions needs to return a function that returns a new function (ie the wrapped action)")
                 }
-                return newAction
+                return wrapWithTryCatch(newAction)
               }, action || Function.prototype)
             })
           }
@@ -250,11 +255,11 @@ export default class Store {
 
       return objMap(obj, (fn) => {
         return (...args) => {
-          let res = fn.apply(null, [getNestedState(), ...args])
+          let res = wrapWithTryCatch(fn).apply(null, [getNestedState(), ...args])
 
           //  If a selector returns a function, give it the system - for advanced usage
           if(typeof(res) === "function")
-            res = res(getSystem())
+            res = wrapWithTryCatch(res)(getSystem())
 
           return res
         }
@@ -320,6 +325,25 @@ function combinePlugins(plugins, toolbox) {
   return {}
 }
 
+function callAfterLoad(plugins, system, { hasLoaded } = {}) {
+  let calledSomething = hasLoaded
+  if(isObject(plugins) && !isArray(plugins)) {
+    if(typeof plugins.afterLoad === "function") {
+      calledSomething = true
+      wrapWithTryCatch(plugins.afterLoad).call(this, system)
+    }
+  }
+
+  if(isFunc(plugins))
+    return callAfterLoad.call(this, plugins(system), system, { hasLoaded: calledSomething })
+
+  if(isArray(plugins)) {
+    return plugins.map(plugin => callAfterLoad.call(this, plugin, system, { hasLoaded: calledSomething }))
+  }
+
+  return calledSomething
+}
+
 // Wraps deepExtend, to account for certain fields, being wrappers.
 // Ie: we need to convert some fields into arrays, and append to them.
 // Rather than overwrite
@@ -411,14 +435,36 @@ function makeReducer(reducerObj) {
     if(!reducerObj)
       return state
 
-    let redFn = reducerObj[action.type]
+    let redFn = (reducerObj[action.type])
     if(redFn) {
-      return redFn(state, action)
+      const res = wrapWithTryCatch(redFn)(state, action)
+      // If the try/catch wrapper kicks in, we'll get null back...
+      // in that case, we want to avoid making any changes to state
+      return res === null ? state : res
     }
     return state
   }
 }
 
+function wrapWithTryCatch(fn, {
+  logErrors = true
+} = {}) {
+  if(typeof fn !== "function") {
+    return fn
+  }
+
+  return function(...args) {
+    try {
+      return fn.call(this, ...args)
+    } catch(e) {
+      if(logErrors) {
+        console.error(e)
+      }
+      return null
+    }
+  }
+}
+
 function configureStore(rootReducer, initialState, getSystem) {
   const store = createStoreWithMiddleware(rootReducer, initialState, getSystem)
 

src/core/utils.js

@@ -126,15 +126,6 @@ export function systemThunkMiddleware(getSystem) {
   }
 }
 
-export const errorLog = getSystem => () => next => action => {
-  try{
-    next( action )
-  }
-  catch( e ) {
-    getSystem().errActions.newThrownErr( e, action )
-  }
-}
-
 export function defaultStatusCode ( responses ) {
   let codes = responses.keySeq()
   return codes.contains(DEFAULT_REPONSE_KEY) ? DEFAULT_REPONSE_KEY : codes.filter( key => (key+"")[0] === "2").sort().first()
@@ -351,6 +342,17 @@ export function mapToList(map, keyNames="key", collectedKeys=Im.Map()) {
   return list
 }
 
+export function extractFileNameFromContentDispositionHeader(value){
+  let responseFilename = /filename="([^;]*);?"/i.exec(value)
+  if (responseFilename === null) {
+    responseFilename = /filename=([^;]*);?/i.exec(value)
+  }
+  if (responseFilename !== null && responseFilename.length > 1) {
+    return responseFilename[1]
+  }
+  return null  
+}
+
 // PascalCase, aka UpperCamelCase
 export function pascalCase(str) {
   return upperFirst(camelCase(str))
@@ -442,6 +444,7 @@ export const validateDateTime = (val) => {
 }
 
 export const validateGuid = (val) => {
+    val = val.toString().toLowerCase()
     if (!/^[{(]?[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}[)}]?$/.test(val)) {
         return "Value must be a Guid"
     }
@@ -616,6 +619,9 @@ export const parseSearch = () => {
     let params = search.substr(1).split("&")
 
     for (let i in params) {
+      if (!params.hasOwnProperty(i)) {
+        continue
+      }
       i = params[i].split("=")
       map[decodeURIComponent(i[0])] = decodeURIComponent(i[1])
     }

src/plugins/index.js

@@ -1,17 +1,7 @@
-import { pascalCaseFilename } from "js/utils"
+import Configs from "./configs"
+import Topbar from "./topbar"
 
-const request = require.context(".", true, /\.jsx?$/)
-
-request.keys().forEach( function( key ){
-  if( key === "./index.js" ) {
-    return
-  }
-
-  // if( key.slice(2).indexOf("/") > -1) {
-  //   // skip files in subdirs
-  //   return
-  // }
-
-  let mod = request(key)
-  module.exports[pascalCaseFilename(key)] = mod.default ? mod.default : mod
-})
+export default {
+  Configs,
+  Topbar
+}

src/polyfills.js

@@ -1,6 +1,8 @@
 // Promise global, Used ( at least ) by 'whatwg-fetch'. And required by IE 11
 
-if(typeof Promise === "undefined") {
+import win from "core/window"
+
+if(typeof win.Promise === "undefined") {
   require("core-js/fn/promise")
 }
 

src/standalone/index.js

@@ -1,6 +1,6 @@
 import StandaloneLayout from "./layout"
 import TopbarPlugin from "plugins/topbar"
-import ConfigsPlugin from "plugins/configs"
+import ConfigsPlugin from "corePlugins/configs"
 
 // the Standalone preset
 

src/standalone/layout.jsx

@@ -1,3 +1,5 @@
+
+
 import React from "react"
 import PropTypes from "prop-types"
 
@@ -14,7 +16,7 @@ export default class StandaloneLayout extends React.Component {
   }
 
   render() {
-    let { getComponent, specSelectors } = this.props
+    let { getComponent, specSelectors, errSelectors } = this.props
 
     let Container = getComponent("Container")
     let Row = getComponent("Row")
@@ -25,6 +27,8 @@ export default class StandaloneLayout extends React.Component {
     const OnlineValidatorBadge = getComponent("onlineValidatorBadge", true)
 
     const loadingStatus = specSelectors.loadingStatus()
+    const lastErr = errSelectors.lastError()
+    const lastErrMsg = lastErr ? lastErr.get("message") : ""
 
     return (
 
@@ -32,17 +36,25 @@ export default class StandaloneLayout extends React.Component {
         { Topbar ? <Topbar /> : null }
         { loadingStatus === "loading" &&
           <div className="info">
-            <h4 className="title">Loading...</h4>
+            <div className="loading-container">
+              <div className="loading"></div>
+            </div>
           </div>
         }
         { loadingStatus === "failed" &&
           <div className="info">
-            <h4 className="title">Failed to load spec.</h4>
+            <div className="loading-container">
+              <h4 className="title">Failed to load API definition.</h4>
+              <p>{lastErrMsg}</p>
+            </div>            
           </div>
         }
         { loadingStatus === "failedConfig" &&
           <div className="info" style={{ maxWidth: "880px", marginLeft: "auto", marginRight: "auto", textAlign: "center" }}>
-            <h4 className="title">Failed to load config.</h4>
+            <div className="loading-container">
+              <h4 className="title">Failed to load remote configuration.</h4>
+              <p>{lastErrMsg}</p>
+            </div>
           </div>
         }
         { !loadingStatus || loadingStatus === "success" && <BaseLayout /> }

src/style/_layout.scss

@@ -653,6 +653,13 @@
 .loading-container
 {
     padding: 40px 0 60px;
+    margin-top: 1em;
+    min-height: 1px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+
     .loading
     {
         position: relative;

src/style/_table.scss

@@ -84,15 +84,6 @@ table
 
 .parameters-col_description
 {
-    p
-    {
-        font-size: 14px;
-
-        margin: 0;
-
-        @include text_body();
-    }
-
     input[type=text]
     {
         width: 100%;

test/components/models.js

@@ -32,18 +32,18 @@ describe("<Models/>", function(){
     layoutActions: {},
     getConfigs: () => ({
       docExpansion: "list",
-      defaultModelExpandDepth: 0
+      defaultModelsExpandDepth: 0
     })
   }
 
 
-  it("passes defaultModelExpandDepth to ModelWrapper", function(){
+  it("passes defaultModelsExpandDepth to ModelWrapper", function(){
     // When
     let wrapper = shallow(<Models {...props}/>)
 
     // Then should render tabs
     expect(wrapper.find("ModelCollapse").length).toEqual(1)
-    expect(wrapper.find("ModelComponent").length).toBeGreaterThan(0)
+    expect(wrapper.find("ModelWrapper").length).toBeGreaterThan(0)
     wrapper.find("ModelComponent").forEach((modelWrapper) => {
       expect(modelWrapper.props().expandDepth).toBe(0)
     })

test/components/object-model.js

@@ -1,7 +1,7 @@
 import React from "react"
 import expect from "expect"
 import { shallow } from "enzyme"
-import { fromJS } from "immutable"
+import { fromJS, List } from "immutable"
 import ObjectModel from "components/object-model"
 import ModelExample from "components/model-example"
 import Immutable from "immutable"
@@ -25,7 +25,7 @@ describe("<ObjectModel />", function() {
         }
       },
       isRef : false,
-      specPath: [],
+      specPath: List(),
       schema: Immutable.fromJS(
         {
           "properties": {

test/components/operations.js

@@ -3,11 +3,13 @@ import React from "react"
 import expect, { createSpy } from "expect"
 import { render } from "enzyme"
 import { fromJS } from "immutable"
+import DeepLink from "components/deep-link"
 import Operations from "components/operations"
 import {Collapse} from "components/layout-utils"
 
 const components = {
   Collapse,
+  DeepLink,
   OperationContainer: ({ path, method }) => <span className="mocked-op" id={`${path}-${method}`} />
 }
 

test/core/system/system.js

@@ -571,116 +571,411 @@ describe("bound system", function(){
       // Then
       expect(renderedComponent.text()).toEqual("This came from mapStateToProps and this came from the system and this came from my own props")
     })
+  })
 
-    it("should catch errors thrown inside of React Component Class render methods", function() {
+  describe("afterLoad", function() {
+    it("should call a plugin's `afterLoad` method after the plugin is loaded", function() {
       // Given
-      // eslint-disable-next-line react/require-render-return
-      class BrokenComponent extends React.Component {
-        render() {
-          throw new Error("This component is broken")
-        }
-      }
       const system = new System({
         plugins: [
-          ViewPlugin,
           {
-            components: {
-              BrokenComponent
+            afterLoad(system) {
+              this.rootInjects.wow = system.dogeSelectors.wow
+            },
+            statePlugins: {
+              doge: {
+                selectors: {
+                  wow: () => (system) => {
+                    return "so selective"
+                  }
+                }
+              }
             }
           }
         ]
       })
 
       // When
-      var Component = system.getSystem().getComponent("BrokenComponent")
-      const renderedComponent = render(<Component />)
-
-      // Then
-      expect(renderedComponent.text()).toEqual("😱 Could not render BrokenComponent, see the console.")
+      var res = system.getSystem().wow()
+      expect(res).toEqual("so selective")
     })
-
-    it("should catch errors thrown inside of pure component render methods", function() {
+    it("should call a preset plugin's `afterLoad` method after the plugin is loaded", function() {
       // Given
-      // eslint-disable-next-line react/require-render-return
-      class BrokenComponent extends PureComponent {
-        render() {
-          throw new Error("This component is broken")
+      const MyPlugin = {
+        afterLoad(system) {
+          this.rootInjects.wow = system.dogeSelectors.wow
+        },
+        statePlugins: {
+          doge: {
+            selectors: {
+              wow: () => (system) => {
+                return "so selective"
+              }
+            }
+          }
         }
       }
 
       const system = new System({
         plugins: [
-          ViewPlugin,
-          {
-            components: {
-              BrokenComponent
-            }
-          }
+          [MyPlugin]
         ]
       })
 
       // When
-      var Component = system.getSystem().getComponent("BrokenComponent")
-      const renderedComponent = render(<Component />)
-
-      // Then
-      expect(renderedComponent.text()).toEqual("😱 Could not render BrokenComponent, see the console.")
+      var res = system.getSystem().wow()
+      expect(res).toEqual("so selective")
     })
-
-    it("should catch errors thrown inside of stateless component functions", function() {
+    it("should call a function preset plugin's `afterLoad` method after the plugin is loaded", function() {
       // Given
-      // eslint-disable-next-line react/require-render-return
-      let BrokenComponent = function BrokenComponent() { throw new Error("This component is broken") }
-      const system = new System({
-        plugins: [
-          ViewPlugin,
-          {
-            components: {
-              BrokenComponent
+      const MyPlugin = {
+        afterLoad(system) {
+          this.rootInjects.wow = system.dogeSelectors.wow
+        },
+        statePlugins: {
+          doge: {
+            selectors: {
+              wow: () => (system) => {
+                return "so selective"
+              }
             }
           }
-        ]
-      })
-
-      // When
-      var Component = system.getSystem().getComponent("BrokenComponent")
-      const renderedComponent = render(<Component />)
-
-      // Then
-      expect(renderedComponent.text().startsWith("😱 Could not render")).toEqual(true)
-    })
-
-    it("should catch errors thrown inside of container components", function() {
-      // Given
-      // eslint-disable-next-line react/require-render-return
-      class BrokenComponent extends React.Component {
-        render() {
-          throw new Error("This component is broken")
         }
       }
 
       const system = new System({
         plugins: [
-          ViewPlugin,
-          {
-            components: {
-              BrokenComponent
-            }
+          () => {
+            return [MyPlugin]
           }
         ]
       })
 
       // When
-      var Component = system.getSystem().getComponent("BrokenComponent", true)
-      const renderedComponent = render(
-        <Provider store={system.getStore()}>
-          <Component />
-        </Provider>
-      )
+      var res = system.getSystem().wow()
+      expect(res).toEqual("so selective")
+    })
+    it("should call a registered plugin's `afterLoad` method after the plugin is loaded", function() {
+      // Given
+      const MyPlugin = {
+        afterLoad(system) {
+          this.rootInjects.wow = system.dogeSelectors.wow
+        },
+        statePlugins: {
+          doge: {
+            selectors: {
+              wow: () => (system) => {
+                return "so selective"
+              }
+            }
+          }
+        }
+      }
 
-      // Then
-      expect(renderedComponent.text()).toEqual("😱 Could not render BrokenComponent, see the console.")
+      const system = new System({
+        plugins: []
+      })
+
+      system.register([MyPlugin])
+
+      // When
+      var res = system.getSystem().wow()
+      expect(res).toEqual("so selective")
     })
   })
 
+  describe("error catching", function() {
+    it("should encapsulate thrown errors in an afterLoad method", function() {
+      // Given
+      const ThrowyPlugin = {
+        afterLoad(system) {
+          throw new Error("afterLoad BREAKS STUFF!")
+        },
+        statePlugins: {
+          doge: {
+            selectors: {
+              wow: () => (system) => {
+                return "so selective"
+              }
+            }
+          }
+        }
+      }
+
+      const system = new System({
+        plugins: []
+      })
+
+
+      // When
+      expect(function() {
+        system.register([ThrowyPlugin])
+        // var resSystem = system.getSystem()
+      }).toNotThrow()
+    })
+
+    it("should encapsulate thrown errors in an action creator", function(){
+
+      // Given
+      const system = new System({
+        plugins: {
+          statePlugins: {
+            throw: {
+              actions: {
+                func() {
+                  throw new Error("this action creator THROWS!")
+                }
+              }
+            }
+          }
+        }
+
+      })
+
+      expect(function() {
+        // TODO: fix existing action error catcher that creates THROWN ERR actions
+        system.getSystem().throwActions.func()
+      }).toNotThrow()
+    })
+
+    it("should encapsulate thrown errors in a reducer", function(){
+
+      // Given
+      const system = new System({
+        plugins: {
+          statePlugins: {
+            throw: {
+              actions: {
+                func: () => {
+                  return {
+                    type: "THROW_FUNC",
+                    payload: "BOOM!"
+                  }
+                }
+              },
+              reducers: {
+                "THROW_FUNC": (state, action) => {
+                  throw new Error("this reducer EXPLODES!")
+                }
+              }
+            }
+          }
+        }
+
+      })
+
+      expect(function() {
+        system.getSystem().throwActions.func()
+      }).toNotThrow()
+    })
+
+    it("should encapsulate thrown errors in a selector", function(){
+
+      // Given
+      const system = new System({
+        plugins: {
+          statePlugins: {
+            throw: {
+              selectors: {
+                func: (state, arg1) => {
+                  throw new Error("this selector THROWS!")
+                }
+              }
+            }
+          }
+        }
+
+      })
+
+      expect(system.getSystem().throwSelectors.func).toNotThrow()
+    })
+
+    it("should encapsulate thrown errors in a complex selector", function(){
+
+      // Given
+      const system = new System({
+        plugins: {
+          statePlugins: {
+            throw: {
+              selectors: {
+                func: (state, arg1) => system => {
+                  throw new Error("this selector THROWS!")
+                }
+              }
+            }
+          }
+        }
+
+      })
+
+      expect(system.getSystem().throwSelectors.func).toNotThrow()
+    })
+
+    it("should encapsulate thrown errors in a wrapAction", function(){
+
+      // Given
+      const system = new System({
+        plugins: {
+          statePlugins: {
+            throw: {
+              actions: {
+                func: () => {
+                  return {
+                    type: "THROW_FUNC",
+                    payload: "this original action does NOT throw"
+                  }
+                }
+              },
+              wrapActions: {
+                func: (ori) => (...args) => {
+                  throw new Error("this wrapAction UNRAVELS EVERYTHING!")
+                }
+              }
+            }
+          }
+        }
+
+      })
+
+      expect(system.getSystem().throwActions.func).toNotThrow()
+    })
+
+    it("should encapsulate thrown errors in a wrapSelector", function(){
+
+      // Given
+      const system = new System({
+        plugins: {
+          statePlugins: {
+            throw: {
+              selectors: {
+                func: (state, arg1) => {
+                  return 123
+                }
+              },
+              wrapSelectors: {
+                func: (ori) => (...props) => {
+                  return ori(...props)
+                }
+              }
+            }
+          }
+        }
+
+      })
+
+      expect(system.getSystem().throwSelectors.func).toNotThrow()
+    })
+
+    describe("components", function() {
+      it("should catch errors thrown inside of React Component Class render methods", function() {
+        // Given
+        // eslint-disable-next-line react/require-render-return
+        class BrokenComponent extends React.Component {
+          render() {
+            throw new Error("This component is broken")
+          }
+        }
+        const system = new System({
+          plugins: [
+            ViewPlugin,
+            {
+              components: {
+                BrokenComponent
+              }
+            }
+          ]
+        })
+
+        // When
+        var Component = system.getSystem().getComponent("BrokenComponent")
+        const renderedComponent = render(<Component />)
+
+        // Then
+        expect(renderedComponent.text()).toEqual("😱 Could not render BrokenComponent, see the console.")
+      })
+
+      it("should catch errors thrown inside of pure component render methods", function() {
+        // Given
+        // eslint-disable-next-line react/require-render-return
+        class BrokenComponent extends PureComponent {
+          render() {
+            throw new Error("This component is broken")
+          }
+        }
+
+        const system = new System({
+          plugins: [
+            ViewPlugin,
+            {
+              components: {
+                BrokenComponent
+              }
+            }
+          ]
+        })
+
+        // When
+        var Component = system.getSystem().getComponent("BrokenComponent")
+        const renderedComponent = render(<Component />)
+
+        // Then
+        expect(renderedComponent.text()).toEqual("😱 Could not render BrokenComponent, see the console.")
+      })
+
+      it("should catch errors thrown inside of stateless component functions", function() {
+        // Given
+        // eslint-disable-next-line react/require-render-return
+        let BrokenComponent = function BrokenComponent() { throw new Error("This component is broken") }
+        const system = new System({
+          plugins: [
+            ViewPlugin,
+            {
+              components: {
+                BrokenComponent
+              }
+            }
+          ]
+        })
+
+        // When
+        var Component = system.getSystem().getComponent("BrokenComponent")
+        const renderedComponent = render(<Component />)
+
+        // Then
+        expect(renderedComponent.text().startsWith("😱 Could not render")).toEqual(true)
+      })
+
+      it("should catch errors thrown inside of container components", function() {
+        // Given
+        // eslint-disable-next-line react/require-render-return
+        class BrokenComponent extends React.Component {
+          render() {
+            throw new Error("This component is broken")
+          }
+        }
+
+        const system = new System({
+          plugins: [
+            ViewPlugin,
+            {
+              components: {
+                BrokenComponent
+              }
+            }
+          ]
+        })
+
+        // When
+        var Component = system.getSystem().getComponent("BrokenComponent", true)
+        const renderedComponent = render(
+          <Provider store={system.getStore()}>
+            <Component />
+          </Provider>
+        )
+
+        // Then
+        expect(renderedComponent.text()).toEqual("😱 Could not render BrokenComponent, see the console.")
+      })
+    })
+  })
 })

test/core/utils.js

@@ -18,7 +18,8 @@ import {
   getAcceptControllingResponse,
   createDeepLinkPath,
   escapeDeepLinkPath,
-  sanitizeUrl
+  sanitizeUrl,
+  extractFileNameFromContentDispositionHeader
 } from "core/utils"
 import win from "core/window"
 
@@ -90,6 +91,26 @@ describe("utils", function() {
 
   })
 
+  describe("extractFileNameFromContentDispositionHeader", function(){
+    it("should extract quoted filename", function(){
+      let cdHeader = "attachment; filename=\"file name.jpg\""
+      let expectedResult = "file name.jpg"
+      expect(extractFileNameFromContentDispositionHeader(cdHeader)).toEqual(expectedResult)
+    })
+
+    it("should extract filename", function(){
+      let cdHeader = "attachment; filename=filename.jpg"
+      let expectedResult = "filename.jpg"
+      expect(extractFileNameFromContentDispositionHeader(cdHeader)).toEqual(expectedResult)
+    })
+
+    it("should not extract filename and return null", function(){
+      let cdHeader = "attachment; no file name provided"
+      let expectedResult = null
+      expect(extractFileNameFromContentDispositionHeader(cdHeader)).toEqual(expectedResult)
+    })
+  })
+
   describe("validateMaximum", function() {
     let errorMessage = "Value must be less than Maximum"
 
@@ -238,6 +259,7 @@ describe("utils", function() {
     it("doesn't return for valid guid", function() {
       expect(validateGuid("8ce4811e-cec5-4a29-891a-15d1917153c1")).toBeFalsy()
       expect(validateGuid("{8ce4811e-cec5-4a29-891a-15d1917153c1}")).toBeFalsy()
+      expect(validateGuid("8CE4811E-CEC5-4A29-891A-15D1917153C1")).toBeFalsy()
     })
 
     it("returns a message for invalid input'", function() {

webpack-hot-dev-server.config.js

@@ -67,6 +67,7 @@ module.exports = require("./make-webpack-config")(rules, {
     publicPath: "/",
     noInfo: true,
     hot: true,
+    disableHostCheck: true, // for development within VMs
     stats: {
       colors: true
     },