Merge branch 'master' into master

shockey · web-flow · commit 5a2d5786b9cb · 2017-07-14T19:12:04.000-07:00
diff --git a/README.md b/README.md
@@ -67,7 +67,6 @@ To help with the migration, here are the currently known issues with 3.X. This l
 
 - Only part of the [parameters](#parameters) previously supported are available.
 - The JSON Form Editor is not implemented.
-- Shebang URL support for operations is missing.
 - Support for `collectionFormat` is partial.
 - l10n (translations) is not implemented.
 - Relative path support for external files is not implemented.
diff --git a/docs/deep-linking.md b/docs/deep-linking.md
@@ -0,0 +1,36 @@
+# Deep linking
+
+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.
+
+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 in order 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, and 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.
diff --git a/package.json b/package.json
@@ -68,6 +68,7 @@
     "redux-logger": "*",
     "reselect": "2.5.3",
     "sanitize-html": "^1.14.1",
+    "scroll-to-element": "^2.0.0",
     "serialize-error": "2.0.0",
     "shallowequal": "0.2.2",
     "swagger-client": "3.0.17",
diff --git a/src/core/components/array-model.jsx b/src/core/components/array-model.jsx
@@ -17,16 +17,19 @@ export default class ArrayModel extends Component {
   render(){
     let { getComponent, required, schema, depth, expandDepth } = this.props
     let items = schema.get("items")
+    let title = schema.get("title") || name
     let properties = schema.filter( ( v, key) => ["type", "items", "$$ref"].indexOf(key) === -1 )
 
     const ModelCollapse = getComponent("ModelCollapse")
     const Model = getComponent("Model")
 
-    return <span className="model">
+    const titleEl = title && 
       <span className="model-title">
-        <span className="model-title__text">{ schema.get("title") }</span>
+        <span className="model-title__text">{ title }</span>
       </span>
-      <ModelCollapse collapsed={ depth > expandDepth } collapsedContent="[...]">
+
+    return <span className="model">
+      <ModelCollapse title={titleEl} collapsed={ depth > expandDepth } collapsedContent="[...]">
         [
           <span><Model { ...this.props } schema={ items } required={ false }/></span>
         ]
diff --git a/src/core/components/model-collapse.jsx b/src/core/components/model-collapse.jsx
@@ -5,12 +5,14 @@ export default class ModelCollapse extends Component {
   static propTypes = {
     collapsedContent: PropTypes.any,
     collapsed: PropTypes.bool,
-    children: PropTypes.any
+    children: PropTypes.any,
+    title: PropTypes.element
   }
 
   static defaultProps = {
     collapsedContent: "{...}",
     collapsed: true,
+    title: null
   }
 
   constructor(props, context) {
@@ -31,11 +33,15 @@ export default class ModelCollapse extends Component {
   }
 
   render () {
-    return (<span>
-      <span onClick={ this.toggleCollapsed } style={{ "cursor": "pointer" }}>
-        <span className={ "model-toggle" + ( this.state.collapsed ? " collapsed" : "" ) }></span>
+    const {title} = this.props
+    return (
+      <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>
+        { this.state.collapsed ? this.state.collapsedContent : this.props.children }
       </span>
-      { this.state.collapsed ? this.state.collapsedContent : this.props.children }
-    </span>)
+    )
   }
 }
diff --git a/src/core/components/object-model.jsx b/src/core/components/object-model.jsx
@@ -38,15 +38,13 @@ export default class ObjectModel extends Component {
         }
     </span>)
     
+    const titleEl = title && <span className="model-title">
+      { isRef && schema.get("$$ref") && <span className="model-hint">{ schema.get("$$ref") }</span> }
+      <span className="model-title__text">{ title }</span>
+    </span>
 
     return <span className="model">
-      {
-        title && <span className="model-title">
-          { isRef && schema.get("$$ref") && <span className="model-hint">{ schema.get("$$ref") }</span> }
-          <span className="model-title__text">{ title }</span>
-        </span>
-      }
-      <ModelCollapse collapsed={ depth > expandDepth } collapsedContent={ collapsedContent }>
+      <ModelCollapse title={titleEl} collapsed={ depth > expandDepth } collapsedContent={ collapsedContent }>
          <span className="brace-open object">{ braceOpen }</span>
           {
             !isRef ? null : <JumpToPathSection name={ name }/>
diff --git a/src/core/components/operation.jsx b/src/core/components/operation.jsx
@@ -116,7 +116,8 @@ export default class Operation extends PureComponent {
       specActions,
       specSelectors,
       authActions,
-      authSelectors
+      authSelectors,
+      getConfigs
     } = this.props
 
     let summary = operation.get("summary")
@@ -141,6 +142,10 @@ export default class Operation extends PureComponent {
     const Markdown = getComponent( "Markdown" )
     const Schemes = getComponent( "schemes" )
 
+    const { deepLinking } = getConfigs()
+
+    const isDeepLinkingEnabled = deepLinking && deepLinking !== "false"
+
     // Merge in Live Response
     if(response && response.size > 0) {
       let notDocumented = !responses.get(String(response.get("status")))
@@ -152,13 +157,18 @@ export default class Operation extends PureComponent {
     let onChangeKey = [ path, method ] // Used to add values to _this_ operation ( indexed by path and method )
 
     return (
-        <div className={deprecated ? "opblock opblock-deprecated" : shown ? `opblock opblock-${method} is-open` : `opblock opblock-${method}`} id={isShownKey} >
+        <div className={deprecated ? "opblock opblock-deprecated" : shown ? `opblock opblock-${method} is-open` : `opblock opblock-${method}`} id={isShownKey.join("-")} >
           <div className={`opblock-summary opblock-summary-${method}`} onClick={this.toggleShown} >
-            <span className="opblock-summary-method">{method.toUpperCase()}</span>
-            <span className={ deprecated ? "opblock-summary-path__deprecated" : "opblock-summary-path" } >
-              <span>{path}</span>
-              <JumpToPath path={jumpToKey} />
-            </span>
+              <span className="opblock-summary-method">{method.toUpperCase()}</span>
+              <span className={ deprecated ? "opblock-summary-path__deprecated" : "opblock-summary-path" } >
+                <a
+                  className="nostyle"
+                  onClick={(e) => e.preventDefault()}
+                  href={ isDeepLinkingEnabled ? `#/${isShownKey[1]}/${isShownKey[2]}` : ""} >
+                  <span>{path}</span>
+                </a>
+                <JumpToPath path={jumpToKey} />
+              </span>
 
             { !showSummary ? null :
                 <div className="opblock-summary-description">
@@ -191,7 +201,9 @@ export default class Operation extends PureComponent {
                 <div className="opblock-external-docs-wrapper">
                   <h4 className="opblock-title_normal">Find more details</h4>
                   <div className="opblock-external-docs">
-                    <span className="opblock-external-docs__description">{ externalDocs.get("description") }</span>
+                    <span className="opblock-external-docs__description">
+                      <Markdown source={ externalDocs.get("description") } />
+                    </span>
                     <a className="opblock-external-docs__link" href={ externalDocs.get("url") }>{ externalDocs.get("url") }</a>
                   </div>
                 </div> : null
diff --git a/src/core/components/operations.jsx b/src/core/components/operations.jsx
@@ -1,5 +1,8 @@
 import React from "react"
 import PropTypes from "prop-types"
+import { helpers } from "swagger-client"
+
+const { opId } = helpers
 
 export default class Operations extends React.Component {
 
@@ -33,7 +36,15 @@ export default class Operations extends React.Component {
     const Collapse = getComponent("Collapse")
 
     let showSummary = layoutSelectors.showSummary()
-    let { docExpansion, displayOperationId, displayRequestDuration, maxDisplayedTags } = getConfigs()
+    let {
+      docExpansion,
+      displayOperationId,
+      displayRequestDuration,
+      maxDisplayedTags,
+      deepLinking
+    } = getConfigs()
+
+    const isDeepLinkingEnabled = deepLinking && deepLinking !== "false"
 
     let filter = layoutSelectors.currentFilter()
 
@@ -62,8 +73,16 @@ export default class Operations extends React.Component {
               return (
                 <div className={showTag ? "opblock-tag-section is-open" : "opblock-tag-section"} key={"operation-" + tag}>
 
-                  <h4 onClick={() => layoutActions.show(isShownKey, !showTag)} className={!tagDescription ? "opblock-tag no-desc" : "opblock-tag" }>
-                    <span>{tag}</span>
+                  <h4
+                    onClick={() => layoutActions.show(isShownKey, !showTag)}
+                    className={!tagDescription ? "opblock-tag no-desc" : "opblock-tag" }
+                    id={isShownKey.join("-")}>
+                    <a
+                      className="nostyle"
+                      onClick={(e) => e.preventDefault()}
+                      href={ isDeepLinkingEnabled ? `#/${tag}` : ""}>
+                      <span>{tag}</span>
+                    </a>
                     { !tagDescription ? null :
                         <small>
                           { tagDescription }
@@ -81,11 +100,14 @@ export default class Operations extends React.Component {
                     {
                       operations.map( op => {
 
-                        const isShownKey = ["operations", op.get("id"), tag]
                         const path = op.get("path", "")
                         const method = op.get("method", "")
                         const jumpToKey = `paths.${path}.${method}`
 
+                        const operationId =
+                        op.getIn(["operation", "operationId"]) || op.getIn(["operation", "__originalOperationId"]) || opId(op.get("operation"), path, method) || op.get("id")
+                        const isShownKey = ["operations", tag, operationId]
+
                         const allowTryItOut = specSelectors.allowTryItOutFor(op.get("path"), op.get("method"))
                         const response = specSelectors.responseFor(op.get("path"), op.get("method"))
                         const request = specSelectors.requestFor(op.get("path"), op.get("method"))
diff --git a/src/core/components/providers/markdown.jsx b/src/core/components/providers/markdown.jsx
@@ -18,10 +18,12 @@ function Markdown({ source }) {
     return null
   }
 
-  return <Remarkable
-    options={{html: true, typographer: true, linkify: true, linkTarget: "_blank"}}
-    source={sanitized}
-    ></Remarkable>
+  return <div className="markdown">
+    <Remarkable
+      options={{html: true, typographer: true, breaks: true, linkify: true, linkTarget: "_blank"}}
+      source={sanitized}
+      ></Remarkable>
+  </div>
 }
 
 Markdown.propTypes = {
diff --git a/src/core/index.js b/src/core/index.js
@@ -30,6 +30,7 @@ const CONFIGS = [
   "parameterMacro",
   "displayOperationId",
   "displayRequestDuration",
+  "deepLinking",
  ]
 
 // eslint-disable-next-line no-undef
@@ -61,6 +62,7 @@ module.exports = function SwaggerUI(opts) {
     custom: {},
     displayOperationId: false,
     displayRequestDuration: false,
+    deepLinking: false,
 
     // Initial set of plugins ( TODO rename this, or refactor - we don't need presets _and_ plugins. Its just there for performance.
     // Instead, we can compile the first plugin ( it can be a collection of plugins ), then batch the rest.
diff --git a/src/core/plugins/deep-linking/README.md b/src/core/plugins/deep-linking/README.md
@@ -0,0 +1 @@
+See `docs/deep-linking.md`.
diff --git a/src/core/plugins/deep-linking/helpers.js b/src/core/plugins/deep-linking/helpers.js
@@ -0,0 +1,7 @@
+export const setHash = (value) => {
+  if(value) {
+    return history.pushState(null, null, `#${value}`)
+  } else {
+    return window.location.hash = ""
+  }
+}
diff --git a/src/core/plugins/deep-linking/index.js b/src/core/plugins/deep-linking/index.js
@@ -0,0 +1,18 @@
+// import reducers from "./reducers"
+// import * as actions from "./actions"
+// import * as selectors from "./selectors"
+import * as specWrapActions from "./spec-wrap-actions"
+import * as layoutWrapActions from "./layout-wrap-actions"
+
+export default function() {
+  return {
+    statePlugins: {
+      spec: {
+        wrapActions: specWrapActions
+      },
+      layout: {
+        wrapActions: layoutWrapActions
+      }
+    }
+  }
+}
diff --git a/src/core/plugins/deep-linking/layout-wrap-actions.js b/src/core/plugins/deep-linking/layout-wrap-actions.js
@@ -0,0 +1,36 @@
+import { setHash } from "./helpers"
+
+export const show = (ori, { getConfigs }) => (...args) => {
+  ori(...args)
+
+  const isDeepLinkingEnabled = getConfigs().deepLinking
+  if(!isDeepLinkingEnabled || isDeepLinkingEnabled === "false") {
+    return
+  }
+
+  try {
+    let [thing, shown] = args
+    let [type] = thing
+
+    if(type === "operations-tag" || type === "operations") {
+      if(!shown) {
+        return setHash("/")
+      }
+
+      if(type === "operations") {
+        let [, tag, operationId] = thing
+        setHash(`/${tag}/${operationId}`)
+      }
+
+      if(type === "operations-tag") {
+        let [, tag] = thing
+        setHash(`/${tag}`)
+      }
+    }
+
+  } catch(e) {
+    // This functionality is not mission critical, so if something goes wrong
+    // we'll just move on
+    console.error(e)
+  }
+}
diff --git a/src/core/plugins/deep-linking/spec-wrap-actions.js b/src/core/plugins/deep-linking/spec-wrap-actions.js
diff --git a/src/core/presets/base.js b/src/core/presets/base.js
diff --git a/src/core/utils.js b/src/core/utils.js
diff --git a/src/style/_layout.scss b/src/style/_layout.scss
diff --git a/src/style/_models.scss b/src/style/_models.scss
diff --git a/test/core/utils.js b/test/core/utils.js
