Merge branch 'master' into ft/3135-request-duration

2017-06-29 17:10:46 -07:00
parent 0c6f5e8d32 55d94d40e3
commit a69ed71f47
13 changed files with 359 additions and 59 deletions
--- a/src/core/components/model.jsx
+++ b/src/core/components/model.jsx
@@ -117,12 +117,13 @@ class ObjectModel extends Component {
 class Primitive extends Component {
  static propTypes = {
    schema: PropTypes.object.isRequired,
+    name: PropTypes.string,
    getComponent: PropTypes.func.isRequired,
    required: PropTypes.bool
  }

  render(){
-    let { schema, getComponent, required } = this.props
+    let { schema, getComponent, name, required } = this.props

    if(!schema || !schema.get) {
      // don't render if schema isn't correctly formed
@@ -133,12 +134,18 @@ class Primitive extends Component {
    let format = schema.get("format")
    let xml = schema.get("xml")
    let enumArray = schema.get("enum")
+    let title = schema.get("title") || name
    let description = schema.get("description")
    let properties = schema.filter( ( v, key) => ["enum", "type", "format", "description", "$$ref"].indexOf(key) === -1 )
    let style = required ? { fontWeight: "bold" } : {}
    const Markdown = getComponent("Markdown")

-    return <span className="prop">
+    return <span className="model">
+      {
+        title && <span className="model-title" style={{ marginRight: "2em" }}>
+          <span className="model-title__text">{ title }</span>
+        </span>
+      }
      <span className="prop-type" style={ style }>{ type }</span> { required && <span style={{ color: "red" }}>*</span>}
      { format && <span className="prop-format">(${format})</span>}
      {
@@ -176,17 +183,20 @@ class ArrayModel extends Component {
  }

  render(){
-    let { required, schema, depth, expandDepth } = this.props
+    let { required, schema, depth, name, 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 )
-
+  
    return <span className="model">
-      <span className="model-title">
-        <span className="model-title__text">{ schema.get("title") }</span>
-      </span>
+      {
+        title && <span className="model-title">
+          <span className="model-title__text">{ title }</span>
+        </span>
+      }
      <Collapse collapsed={ depth > expandDepth } collapsedContent="[...]">
        [
-          <span><Model { ...this.props } schema={ items } required={ false }/></span>
+          <span><Model { ...this.props } name="" schema={ items } required={ false }/></span>
        ]
        {
          properties.size ? <span>
@@ -249,13 +259,13 @@ class Model extends Component {
                                              name={ name || modelName }
                                              isRef={ isRef!== undefined ? isRef : !!$$ref }/>
      case "array":
-        return <ArrayModel className="array" { ...this.props } schema={ modelSchema } required={ required } />
+        return <ArrayModel className="array" { ...this.props } schema={ modelSchema } name={ name || modelName } required={ required } />
      case "string":
      case "number":
      case "integer":
      case "boolean":
      default:
-        return <Primitive getComponent={ getComponent } schema={ modelSchema } required={ required }/>
+        return <Primitive { ...this.props } getComponent={ getComponent } schema={ modelSchema } name={ name || modelName } required={ required }/>
    }
  }
 }
--- a/src/core/components/models.jsx
+++ b/src/core/components/models.jsx
@@ -24,8 +24,8 @@ export default class Models extends Component {
    return <section className={ showModels ? "models is-open" : "models"}>
      <h4 onClick={() => layoutActions.show("models", !showModels)}>
        <span>Models</span>
-        <svg width="20" height="20">
-          <use xlinkHref="#large-arrow" />
+        <svg className="arrow" width="20" height="20">
+          <use xlinkHref={showModels ? "#large-arrow-down" : "#large-arrow"} />
        </svg>
      </h4>
      <Collapse isOpened={showModels} animated>
--- a/src/core/components/operation.jsx
+++ b/src/core/components/operation.jsx
@@ -128,6 +128,7 @@ export default class Operation extends PureComponent {
    let schemes = operation.get("schemes")
    let parameters = getList(operation, ["parameters"])
    let operationId = operation.get("__originalOperationId")
+    let operationScheme = specSelectors.operationScheme(path, method)

    const Responses = getComponent("responses")
    const Parameters = getComponent( "parameters" )
@@ -213,7 +214,8 @@ export default class Operation extends PureComponent {
                    <Schemes schemes={ schemes }
                             path={ path }
                             method={ method }
-                             specActions={ specActions }/>
+                             specActions={ specActions }
+                             operationScheme={ operationScheme } />
                  </div> : null
              }

--- a/src/core/components/schemes.jsx
+++ b/src/core/components/schemes.jsx
@@ -6,7 +6,8 @@ export default class Schemes extends React.Component {
    specActions: PropTypes.object.isRequired,
    schemes: PropTypes.object.isRequired,
    path: PropTypes.string,
-    method: PropTypes.string
+    method: PropTypes.string,
+    operationScheme: PropTypes.string
  }

  componentWillMount() {
@@ -16,11 +17,18 @@ export default class Schemes extends React.Component {
    this.setScheme(schemes.first())
  }

+  componentWillReceiveProps(nextProps) {
+    if ( this.props.operationScheme && !nextProps.schemes.has(this.props.operationScheme) ) {
+      //fire 'change' event if our selected scheme is no longer an option
+      this.setScheme(nextProps.schemes.first())
+    }
+  }
+
  onChange =( e ) => {
    this.setScheme( e.target.value )
  }

-  setScheme =( value ) => {
+  setScheme = ( value ) => {
    let { path, method, specActions } = this.props

    specActions.setScheme( value, path, method )
--- a/src/core/index.js
+++ b/src/core/index.js
@@ -6,7 +6,7 @@ import ApisPreset from "core/presets/apis"
 import * as AllPlugins from "core/plugins/all"
 import { parseSeach, filterConfigs } from "core/utils"

-const CONFIGS = [ "url", "spec", "validatorUrl", "onComplete", "onFailure", "authorizations", "docExpansion",
+const CONFIGS = [ "url", "urls", "urls.primaryName", "spec", "validatorUrl", "onComplete", "onFailure", "authorizations", "docExpansion",
    "apisSorter", "operationsSorter", "supportedSubmitMethods", "dom_id", "defaultModelRendering", "oauth2RedirectUrl",
    "showRequestHeaders", "custom", "modelPropertyMacro", "parameterMacro", "displayOperationId" , "displayRequestDuration"]

@@ -23,6 +23,7 @@ module.exports = function SwaggerUI(opts) {
    dom_id: null,
    spec: {},
    url: "",
+    urls: null,
    layout: "BaseLayout",
    docExpansion: "list",
    validatorUrl: "https://online.swagger.io/validator",
--- a/src/core/utils.js
+++ b/src/core/utils.js
@@ -450,15 +450,15 @@ export const propChecker = (props, nextProps, objectList=[], ignoreList=[]) => {
    || objectList.some( objectPropName => !eq(props[objectPropName], nextProps[objectPropName])))
 }

-const validateNumber = ( val ) => {
-  if ( !/^-?\d+(.?\d+)?$/.test(val)) {
+export const validateNumber = ( val ) => {
+  if ( !/^-?\d+(\.?\d+)?$/.test(val)) {
    return "Value must be a number"
  }
 }

-const validateInteger = ( val ) => {
+export const validateInteger = ( val ) => {
  if ( !/^-?\d+$/.test(val)) {
-    return "Value must be integer"
+    return "Value must be an integer"
  }
 }

@@ -469,13 +469,14 @@ export const validateParam = (param, isXml) => {
  let required = param.get("required")
  let type = param.get("type")

-  if ( required && (!value || (type==="array" && Array.isArray(value) && !value.length ))) {
+  let stringCheck = type === "string" && !value
+  let arrayCheck = type === "array" && Array.isArray(value) && !value.length
+  let listCheck = type === "array" && Im.List.isList(value) && !value.count()
+  if ( required && (stringCheck || arrayCheck || listCheck) ) {
    errors.push("Required field is not provided")
    return errors
  }

-  if ( !value ) return errors
-
  if ( type === "number" ) {
    let err = validateNumber(value)
    if (!err) return errors
--- a/src/plugins/topbar/topbar.jsx
+++ b/src/plugins/topbar/topbar.jsx
@@ -7,7 +7,7 @@ export default class Topbar extends React.Component {

  constructor(props, context) {
    super(props, context)
-    this.state = { url: props.specSelectors.url() }
+    this.state = { url: props.specSelectors.url(), selectedIndex: 0 }
  }

  componentWillReceiveProps(nextProps) {
@@ -19,14 +19,68 @@ export default class Topbar extends React.Component {
    this.setState({url: value})
  }

-  downloadUrl = (e) => {
-    this.props.specActions.updateUrl(this.state.url)
-    this.props.specActions.download(this.state.url)
+  loadSpec = (url) => {
+    this.props.specActions.updateUrl(url)
+    this.props.specActions.download(url)
+  }
+
+  onUrlSelect =(e)=> {
+    let url = e.target.value || e.target.href
+    this.loadSpec(url)
+    this.setSelectedUrl(url)
    e.preventDefault()
  }

+  downloadUrl = (e) => {
+    this.loadSpec(this.state.url)
+    e.preventDefault()
+  }
+
+  setSelectedUrl = (selectedUrl) => {
+    const configs = this.props.getConfigs()
+    const urls = configs.urls || []
+
+    if(urls && urls.length) {
+      if(selectedUrl)
+      {
+        urls.forEach((spec, i) => {
+          if(spec.url === selectedUrl)
+            {
+              this.setState({selectedIndex: i})
+            }
+        })
+      }
+    }
+  }
+
+  componentWillMount() {
+    const configs = this.props.getConfigs()
+    const urls = configs.urls || []
+
+    if(urls && urls.length) {
+      let primaryName = configs["urls.primaryName"]
+      if(primaryName)
+      {
+        urls.forEach((spec, i) => {
+          if(spec.name === primaryName)
+            {
+              this.setState({selectedIndex: i})
+            }
+        })
+      }
+    }
+  }
+
+  componentDidMount() {
+    const urls = this.props.getConfigs().urls || []
+
+    if(urls && urls.length) {
+      this.loadSpec(urls[this.state.selectedIndex].url)
+    }
+  }
+
  render() {
-    let { getComponent, specSelectors } = this.props
+    let { getComponent, specSelectors, getConfigs } = this.props
    const Button = getComponent("Button")
    const Link = getComponent("Link")

@@ -36,22 +90,45 @@ export default class Topbar extends React.Component {
    let inputStyle = {}
    if(isFailed) inputStyle.color = "red"
    if(isLoading) inputStyle.color = "#aaa"
+
+    const { urls } = getConfigs()
+    let control = []
+    let formOnSubmit = null
+
+    if(urls) {
+      let rows = []
+      urls.forEach((link, i) => {
+        rows.push(<option key={i} value={link.url}>{link.name}</option>)
+      })
+
+      control.push(
+        <label className="select-label" htmlFor="select"><span>Select a spec</span>
+          <select id="select" disabled={isLoading} onChange={ this.onUrlSelect } value={urls[this.state.selectedIndex].url}>
+            {rows}
+          </select>
+        </label>
+      )
+    }
+    else {
+      formOnSubmit = this.downloadUrl
+      control.push(<input className="download-url-input" type="text" onChange={ this.onUrlChange } value={this.state.url} disabled={isLoading} style={inputStyle} />)
+      control.push(<Button className="download-url-button" onClick={ this.downloadUrl }>Explore</Button>)
+    }
+
    return (
-        <div className="topbar">
-          <div className="wrapper">
-            <div className="topbar-wrapper">
-              <Link href="#" title="Swagger UX">
-                <img height="30" width="30" src={ Logo } alt="Swagger UX"/>
-                <span>swagger</span>
-              </Link>
-              <form className="download-url-wrapper" onSubmit={this.downloadUrl}>
-                <input className="download-url-input" type="text" onChange={ this.onUrlChange } value={this.state.url} disabled={isLoading} style={inputStyle} />
-                <Button className="download-url-button" onClick={ this.downloadUrl }>Explore</Button>
-              </form>
-            </div>
+      <div className="topbar">
+        <div className="wrapper">
+          <div className="topbar-wrapper">
+            <Link href="#" title="Swagger UX">
+              <img height="30" width="30" src={ Logo } alt="Swagger UX"/>
+              <span>swagger</span>
+            </Link>
+            <form className="download-url-wrapper" onSubmit={formOnSubmit}>
+              {control}
+            </form>
          </div>
        </div>
-
+      </div>
    )
  }
 }
@@ -59,5 +136,6 @@ export default class Topbar extends React.Component {
 Topbar.propTypes = {
  specSelectors: PropTypes.object.isRequired,
  specActions: PropTypes.object.isRequired,
-  getComponent: PropTypes.func.isRequired
+  getComponent: PropTypes.func.isRequired,
+  getConfigs: PropTypes.func.isRequired
 }
--- a/src/plugins/topbar/topbar.less
+++ b/src/plugins/topbar/topbar.less
@@ -1,11 +1,10 @@
 .swagger-ui {
-
  .topbar {
    background-color: #89bf04;
  }

  .topbar-wrapper {
-    padding: 0.7em
+    padding: 0.7em;
  }

  .topbar-logo__img {
--- a/src/style/_models.scss
+++ b/src/style/_models.scss
@@ -95,14 +95,7 @@ section.models
        h4
        {
            margin: 0 0 5px 0;
-
            border-bottom: 1px solid rgba(#3b4151, .3);
-
-
-            svg
-            {
-                transform: rotate(90deg);
-            }
        }
    }
    h4
--- a/src/style/_topbar.scss
+++ b/src/style/_topbar.scss
@@ -6,7 +6,6 @@
    .topbar-wrapper
    {
        display: flex;
-
        align-items: center;
    }
    a
@@ -15,13 +14,13 @@
        font-weight: bold;

        display: flex;
+        align-items: center;
+        flex: 1;

        max-width: 300px;

        text-decoration: none;

-        flex: 1;
-        align-items: center;
        @include text_headline(#fff);

        span
@@ -34,8 +33,8 @@
    .download-url-wrapper
    {
        display: flex;
-
        flex: 3;
+        justify-content: flex-end;

        input[type=text]
        {
@@ -48,6 +47,38 @@
            outline: none;
        }

+        .select-label
+        {
+            display: flex;
+            align-items: center;
+
+            width: 100%;
+            max-width: 600px;
+            margin: 0;
+            span
+            {
+                font-size: 16px;
+
+                flex: 1;
+
+                padding: 0 10px 0 0;
+
+                text-align: right;
+            }
+
+            select
+            {
+                flex: 2;
+
+                width: 100%;
+
+                border: 2px solid #547f00;
+                outline: none;
+                box-shadow: none;
+            }
+        }
+
+
        .download-url-button
        {
            font-size: 16px;