kyy/swagger-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
shockey
2017-06-29 17:10:46 -07:00
committed by GitHub
parent 0c6f5e8d32 55d94d40e3
commit a69ed71f47
13 changed files with 359 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
README.md
View File

@@ -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.
@@ -144,7 +148,7 @@ displayRequestDuration | Controls the display of the request duration (in millis
### 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 = [

1
dist/index.html vendored
View File

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

30
src/core/components/model.jsx
View File

@@ -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 }/>
}
}
}

4
src/core/components/models.jsx
View File

@@ -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>

4
src/core/components/operation.jsx
View File

@@ -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
}

12
src/core/components/schemes.jsx
View File

@@ -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 )

3
src/core/index.js
View File

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

15
src/core/utils.js
View File

@@ -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

116
src/plugins/topbar/topbar.jsx
View File

@@ -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
}

3
src/plugins/topbar/topbar.less
View File

@@ -1,11 +1,10 @@
.swagger-ui {
.topbar {
background-color: #89bf04;
}
.topbar-wrapper {
padding: 0.7em
padding: 0.7em;
}
.topbar-logo__img {

7
src/style/_models.scss
View File

@@ -95,14 +95,7 @@ section.models
h4
{
margin: 0 0 5px 0;
border-bottom: 1px solid rgba(#3b4151, .3);
svg
{
transform: rotate(90deg);
}
}
}
h4

39
src/style/_topbar.scss
View File

@@ -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;

176
test/core/utils.js
View File

@@ -1,7 +1,7 @@
/* eslint-env mocha */
import expect from "expect"
import { fromJS } from "immutable"
import { mapToList } from "core/utils"
import { mapToList, validateNumber, validateInteger, validateParam } from "core/utils"
describe("utils", function(){
@@ -67,9 +67,181 @@ describe("utils", function(){
// Then
expect(aList.toJS()).toEqual([])
})
})
describe("validateNumber", function() {
let errorMessage = "Value must be a number"
it("doesn't return for whole numbers", function() {
expect(validateNumber(0)).toBeFalsy()
expect(validateNumber(1)).toBeFalsy()
expect(validateNumber(20)).toBeFalsy()
expect(validateNumber(5000000)).toBeFalsy()
expect(validateNumber("1")).toBeFalsy()
expect(validateNumber("2")).toBeFalsy()
expect(validateNumber(-1)).toBeFalsy()
expect(validateNumber(-20)).toBeFalsy()
expect(validateNumber(-5000000)).toBeFalsy()
})
it("doesn't return for negative numbers", function() {
expect(validateNumber(-1)).toBeFalsy()
expect(validateNumber(-20)).toBeFalsy()
expect(validateNumber(-5000000)).toBeFalsy()
})
it("doesn't return for decimal numbers", function() {
expect(validateNumber(1.1)).toBeFalsy()
expect(validateNumber(2.5)).toBeFalsy()
expect(validateNumber(-30.99)).toBeFalsy()
})
it("returns a message for strings", function() {
expect(validateNumber("")).toEqual(errorMessage)
expect(validateNumber(" ")).toEqual(errorMessage)
expect(validateNumber("test")).toEqual(errorMessage)
})
it("returns a message for invalid input", function() {
expect(validateNumber(undefined)).toEqual(errorMessage)
expect(validateNumber(null)).toEqual(errorMessage)
expect(validateNumber({})).toEqual(errorMessage)
expect(validateNumber([])).toEqual(errorMessage)
expect(validateNumber(true)).toEqual(errorMessage)
expect(validateNumber(false)).toEqual(errorMessage)
})
})
describe("validateInteger", function() {
let errorMessage = "Value must be an integer"
it("doesn't return for positive integers", function() {
expect(validateInteger(0)).toBeFalsy()
expect(validateInteger(1)).toBeFalsy()
expect(validateInteger(20)).toBeFalsy()
expect(validateInteger(5000000)).toBeFalsy()
expect(validateInteger("1")).toBeFalsy()
expect(validateInteger("2")).toBeFalsy()
expect(validateInteger(-1)).toBeFalsy()
expect(validateInteger(-20)).toBeFalsy()
expect(validateInteger(-5000000)).toBeFalsy()
})
it("doesn't return for negative integers", function() {
expect(validateInteger(-1)).toBeFalsy()
expect(validateInteger(-20)).toBeFalsy()
expect(validateInteger(-5000000)).toBeFalsy()
})
it("returns a message for decimal values", function() {
expect(validateInteger(1.1)).toEqual(errorMessage)
expect(validateInteger(2.5)).toEqual(errorMessage)
expect(validateInteger(-30.99)).toEqual(errorMessage)
})
it("returns a message for strings", function() {
expect(validateInteger("")).toEqual(errorMessage)
expect(validateInteger(" ")).toEqual(errorMessage)
expect(validateInteger("test")).toEqual(errorMessage)
})
it("returns a message for invalid input", function() {
expect(validateInteger(undefined)).toEqual(errorMessage)
expect(validateInteger(null)).toEqual(errorMessage)
expect(validateInteger({})).toEqual(errorMessage)
expect(validateInteger([])).toEqual(errorMessage)
expect(validateInteger(true)).toEqual(errorMessage)
expect(validateInteger(false)).toEqual(errorMessage)
})
})
describe("validateParam", function() {
let param = null
let result = null
it("validates required strings", function() {
param = fromJS({
required: true,
type: "string",
value: ""
})
result = validateParam( param, false )
expect( result ).toEqual( ["Required field is not provided"] )
})
it("validates required arrays", function() {
param = fromJS({
required: true,
type: "array",
value: []
})
result = validateParam( param, false )
expect( result ).toEqual( ["Required field is not provided"] )
param = fromJS({
required: true,
type: "array",
value: []
})
result = validateParam( param, false )
expect( result ).toEqual( ["Required field is not provided"] )
})
it("validates numbers", function() {
param = fromJS({
required: false,
type: "number",
value: "test"
})
result = validateParam( param, false )
expect( result ).toEqual( ["Value must be a number"] )
})
it("validates integers", function() {
param = fromJS({
required: false,
type: "integer",
value: "test"
})
result = validateParam( param, false )
expect( result ).toEqual( ["Value must be an integer"] )
})
it("validates arrays", function() {
// empty array
param = fromJS({
required: false,
type: "array",
value: []
})
result = validateParam( param, false )
expect( result ).toEqual( [] )
// numbers
param = fromJS({
required: false,
type: "array",
value: ["number"],
items: {
type: "number"
}
})
result = validateParam( param, false )
expect( result ).toEqual( [{index: 0, error: "Value must be a number"}] )
// integers
param = fromJS({
required: false,
type: "array",
value: ["not", "numbers"],
items: {
type: "integer"
}
})
result = validateParam( param, false )
expect( result ).toEqual( [{index: 0, error: "Value must be an integer"}, {index: 1, error: "Value must be an integer"}] )
})
})
})