Merge branch 'master' into feature/apisSorter

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" ]
 
@@ -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",

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
 }

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 {

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;