Merge pull request #3261 from supergibbs/TopbarPluginWithSelect

Select Topbar

README.md

@@ -126,9 +126,13 @@ If you'd like to use the bundle files via npm, check out the [`swagger-ui-dist`
 
 #### Parameters
 
+Parameters with dots in their names are single strings used to organize subordinate parameters, and are not indicative of a nested structure.
+
 Parameter Name | Description
 --- | ---
-url | The url pointing to API definition (normally `swagger.json` or `swagger.yaml`).
+url | The url pointing to API definition (normally `swagger.json` or `swagger.yaml`). Will be ignored if `urls` or `spec` is used.
+urls | An array of API definition objects (`{url: "<url>", name: "<name>"}`) used by Topbar plugin. When used and Topbar plugin is enabled, the `url` parameter will not be parsed. Names and URLs must be unique among all items in this array, since they're used as identifiers.
+urls.primaryName | When using `urls`, you can use this subparameter. If the value matches the name of a spec provided in `urls`, that spec will be displayed when Swagger-UI loads, instead of defaulting to the first spec in `urls`.
 spec | A JSON object describing the OpenAPI Specification. When used, the `url` parameter will not be parsed. This is useful for testing manually-generated specifications without hosting them.
 validatorUrl | By default, Swagger-UI attempts to validate specs against swagger.io's online validator. You can use this parameter to set a different validator URL, for example for locally deployed validators ([Validator Badge](https://github.com/swagger-api/validator-badge)). Setting it to `null` will disable validation.
 dom_id | The id of a dom element inside which SwaggerUi will put the user interface for swagger.
@@ -143,7 +147,7 @@ displayOperationId | Controls the display of operationId in operations list. The
 ### Plugins
 
 #### Topbar plugin
-Topbar plugin enables top bar with input for spec path and explore button. By default the plugin is enabled, and to disable it you need to remove Topbar plugin from presets in `src/standalone/index.js`:
+Topbar plugin enables top bar with input for spec path and explore button or a dropdown if `urls` is used. By default the plugin is enabled, and to disable it you need to remove Topbar plugin from presets in `src/standalone/index.js`:
 
 ```
 let preset = [

dist/index.html

@@ -71,6 +71,7 @@
 <script src="./swagger-ui-standalone-preset.js"> </script>
 <script>
 window.onload = function() {
+  
   // Build a system
   const ui = SwaggerUIBundle({
     url: "http://petstore.swagger.io/v2/swagger.json",

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) => {
+  loadSpec = (url) => {
-    this.props.specActions.updateUrl(this.state.url)
+    this.props.specActions.updateUrl(url)
-    this.props.specActions.download(this.state.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="topbar">
-          <div className="wrapper">
+        <div className="wrapper">
-            <div className="topbar-wrapper">
+          <div className="topbar-wrapper">
-              <Link href="#" title="Swagger UX">
+            <Link href="#" title="Swagger UX">
-                <img height="30" width="30" src={ Logo } alt="Swagger UX"/>
+              <img height="30" width="30" src={ Logo } alt="Swagger UX"/>
-                <span>swagger</span>
+              <span>swagger</span>
-              </Link>
+            </Link>
-              <form className="download-url-wrapper" onSubmit={this.downloadUrl}>
+            <form className="download-url-wrapper" onSubmit={formOnSubmit}>
-                <input className="download-url-input" type="text" onChange={ this.onUrlChange } value={this.state.url} disabled={isLoading} style={inputStyle} />
+              {control}
-                <Button className="download-url-button" onClick={ this.downloadUrl }>Explore</Button>
+            </form>
-              </form>
-            </div>
           </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;