From 2e40f59cad4508f386bb68e1583d12cf04e7567a Mon Sep 17 00:00:00 2001 From: Jesse Mandel Date: Fri, 16 Jun 2017 16:35:25 -0700 Subject: [PATCH 01/12] Updated Topbar with a select option if `urls` is passed. Can use `?name=NAME` to preselect. --- README.md | 3 +- src/core/index.js | 3 +- src/plugins/topbar/topbar.jsx | 92 +++++++++++++++++++++++++++-------- src/style/_topbar.scss | 11 ++++- 4 files changed, 87 insertions(+), 22 deletions(-) diff --git a/README.md b/README.md index 7ee09cba..f0f23029 100644 --- a/README.md +++ b/README.md @@ -129,6 +129,7 @@ If you'd like to use the bundle files via npm, check out the [`swagger-ui-dist` Parameter Name | Description --- | --- url | The url pointing to API definition (normally `swagger.json` or `swagger.yaml`). +urls | An array of API definition objects (`{url: "", name: ""}`) used by Topbar plugin. When used and Topbar plugin is enabled, the `url` parameter will not be parsed. 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 +144,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. When using the dropdown, a query parameter `name` can be passed to select that API. 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 = [ diff --git a/src/core/index.js b/src/core/index.js index 461a67cd..1d73f22e 100644 --- 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", "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", diff --git a/src/plugins/topbar/topbar.jsx b/src/plugins/topbar/topbar.jsx index df1eb2b8..e6af197b 100644 --- a/src/plugins/topbar/topbar.jsx +++ b/src/plugins/topbar/topbar.jsx @@ -2,12 +2,13 @@ import React, { PropTypes } from "react" //import "./topbar.less" import Logo from "./logo_small.png" +import { parseSeach } from "core/utils" 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 +20,49 @@ 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) e.preventDefault() } + downloadUrl = (e) => { + this.loadSpec(this.state.url) + e.preventDefault() + } + + componentWillMount() { + const urls = this.props.getConfigs().urls || [] + + if(urls && urls.length) { + let selectedName = parseSeach().name + if(selectedName) + { + urls.forEach((spec, i) => { + if(spec.name === selectedName) + { + 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 +72,39 @@ 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() + }) + + control.push() + } + else { + formOnSubmit = this.downloadUrl + control.push() + control.push() + } + return ( -
-
-
- - Swagger UX - swagger - -
- - -
-
+
+
+
+ + Swagger UX + swagger + +
+ {control} +
- +
) } } @@ -59,5 +112,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 } diff --git a/src/style/_topbar.scss b/src/style/_topbar.scss index 80ce67b6..f675795c 100644 --- a/src/style/_topbar.scss +++ b/src/style/_topbar.scss @@ -34,8 +34,8 @@ .download-url-wrapper { display: flex; - flex: 3; + justify-content: flex-end; input[type=text] { @@ -48,6 +48,15 @@ outline: none; } + select + { + min-width: 200px; + + border: 2px solid #547f00; + outline: none; + box-shadow: none; + } + .download-url-button { font-size: 16px; From 73df4922f48d98f6099d4cc3caec4640755e4a1e Mon Sep 17 00:00:00 2001 From: Minasokoni Date: Wed, 21 Jun 2017 08:22:48 -0700 Subject: [PATCH 02/12] minimal update to styling --- dist/index.html | 1 + src/plugins/topbar/topbar.jsx | 8 +++++++- src/plugins/topbar/topbar.less | 3 +-- src/style/_topbar.scss | 35 ++++++++++++++++++++++++++-------- 4 files changed, 36 insertions(+), 11 deletions(-) diff --git a/dist/index.html b/dist/index.html index c68ff61b..f6aaf9e4 100644 --- a/dist/index.html +++ b/dist/index.html @@ -71,6 +71,7 @@