Merge branch 'master' of github.com:swagger-api/swagger-ui into ft/oas3
This commit is contained in:
Kyle Shockey
1
.gitignore
vendored
1
.gitignore
vendored
@@ -5,3 +5,4 @@ node_modules
|
||||
npm-debug.log*
|
||||
.eslintcache
|
||||
package-lock.json
|
||||
*.iml
|
||||
|
||||
11
README.md
11
README.md
@@ -22,7 +22,7 @@ The OpenAPI Specification has undergone 4 revisions since initial creation in 20
|
||||
|
||||
Swagger UI Version | Release Date | OpenAPI Spec compatibility | Notes | Status
|
||||
------------------ | ------------ | -------------------------- | ----- | ------
|
||||
3.0.17 | 2017-06-23 | 2.0 | [tag v3.0.17](https://github.com/swagger-api/swagger-ui/tree/v3.0.17) |
|
||||
3.0.21 | 2017-07-24 | 2.0 | [tag v3.0.21](https://github.com/swagger-api/swagger-ui/tree/v3.0.21) |
|
||||
2.2.10 | 2017-01-04 | 1.1, 1.2, 2.0 | [tag v2.2.10](https://github.com/swagger-api/swagger-ui/tree/v2.2.10) |
|
||||
2.1.5 | 2016-07-20 | 1.1, 1.2, 2.0 | [tag v2.1.5](https://github.com/swagger-api/swagger-ui/tree/v2.1.5) |
|
||||
2.0.24 | 2014-09-12 | 1.1, 1.2 | [tag v2.0.24](https://github.com/swagger-api/swagger-ui/tree/v2.0.24) |
|
||||
@@ -67,7 +67,6 @@ To help with the migration, here are the currently known issues with 3.X. This l
|
||||
|
||||
- Only part of the [parameters](#parameters) previously supported are available.
|
||||
- The JSON Form Editor is not implemented.
|
||||
- Shebang URL support for operations is missing.
|
||||
- Support for `collectionFormat` is partial.
|
||||
- l10n (translations) is not implemented.
|
||||
- Relative path support for external files is not implemented.
|
||||
@@ -137,6 +136,7 @@ spec | A JSON object describing the OpenAPI Specification. When used, the `url`
|
||||
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.
|
||||
oauth2RedirectUrl | OAuth redirect URL
|
||||
tagsSorter | Apply a sort to the tag list of each API. It can be 'alpha' (sort by paths alphanumerically) or a function (see [Array.prototype.sort()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) to learn how to write a sort function). Two tag name strings are passed to the sorter for each pass. Default is the order determined by Swagger-UI.
|
||||
operationsSorter | Apply a sort to the operation list of each API. It can be 'alpha' (sort by paths alphanumerically), 'method' (sort by HTTP method) or a function (see Array.prototype.sort() to know how sort function works). Default is the order returned by the server unchanged.
|
||||
configUrl | Configs URL
|
||||
parameterMacro | MUST be a function. Function to set default value to parameters. Accepts two arguments parameterMacro(operation, parameter). Operation and parameter are objects passed for context, both remain immutable
|
||||
@@ -144,6 +144,9 @@ modelPropertyMacro | MUST be a function. Function to set default values to each
|
||||
docExpansion | Controls the default expansion setting for the operations and tags. It can be 'list' (expands only the tags), 'full' (expands the tags and operations) or 'none' (expands nothing). The default is 'list'.
|
||||
displayOperationId | Controls the display of operationId in operations list. The default is `false`.
|
||||
displayRequestDuration | Controls the display of the request duration (in milliseconds) for `Try it out` requests. The default is `false`.
|
||||
maxDisplayedTags | If set, limits the number of tagged operations displayed to at most this many. The default is to show all operations.
|
||||
filter | If set, enables filtering. The top bar will show an edit box that you can use to filter the tagged operations that are shown. Can be true/false to enable or disable, or an explicit filter string in which case filtering will be enabled using that string as the filter expression. Filtering is case sensitive matching the filter expression anywhere inside the tag.
|
||||
deepLinking | If set to `true`, enables dynamic deep linking for tags and operations. [Docs](https://github.com/swagger-api/swagger-ui/blob/master/docs/deep-linking.md)
|
||||
|
||||
### Plugins
|
||||
|
||||
@@ -233,6 +236,10 @@ Access-Control-Allow-Headers: Content-Type, api_key, Authorization
|
||||
|
||||
Only headers with these names will be allowed to be sent by Swagger-UI.
|
||||
|
||||
## Security contact
|
||||
|
||||
Please disclose any security-related issues or vulnerabilities by emailing [security@swagger.io](mailto:security@swagger.io), instead of using the public issue tracker.
|
||||
|
||||
## License
|
||||
|
||||
Copyright 2017 SmartBear Software
|
||||
|
||||
1
dist/index.html
vendored
1
dist/index.html
vendored
@@ -76,6 +76,7 @@ window.onload = function() {
|
||||
const ui = SwaggerUIBundle({
|
||||
url: "http://petstore.swagger.io/v2/swagger.json",
|
||||
dom_id: '#swagger-ui',
|
||||
deepLinking: true,
|
||||
presets: [
|
||||
SwaggerUIBundle.presets.apis,
|
||||
SwaggerUIStandalonePreset
|
||||
|
||||
22
dist/swagger-ui-bundle.js
vendored
22
dist/swagger-ui-bundle.js
vendored
File diff suppressed because one or more lines are too long
2
dist/swagger-ui-bundle.js.map
vendored
2
dist/swagger-ui-bundle.js.map
vendored
@@ -1 +1 @@
|
||||
{"version":3,"file":"swagger-ui-bundle.js","sources":["webpack:///swagger-ui-bundle.js"],"mappings":"AAAA;;;;;AAsyKA;;;;;;AA0rEA;;;;;;;;;;;;;;;;;;;;;;;;;;AA0hUA;;;;;;;;;;;;;;AA6+JA;;;;;;;;;AAw/oBA;;;;;AA0vPA;AAm4DA;;;;;;AA+2XA;;;;;;AA0iaA;AAy/uBA","sourceRoot":""}
|
||||
{"version":3,"file":"swagger-ui-bundle.js","sources":["webpack:///swagger-ui-bundle.js"],"mappings":"AAAA;;;;;AAsyKA;;;;;;AA6sEA;;;;;;;;;;;;;;;;;;;;;;;;;;AA0kUA;;;;;;;;;;;;;;AAs8JA;;;;;;;;;AA04oBA;;;;;AAilQA;AAm4DA;;;;;;AAo4YA;;;;;;AA0iaA;AAumvBA","sourceRoot":""}
|
||||
6
dist/swagger-ui-standalone-preset.js
vendored
6
dist/swagger-ui-standalone-preset.js
vendored
File diff suppressed because one or more lines are too long
2
dist/swagger-ui-standalone-preset.js.map
vendored
2
dist/swagger-ui-standalone-preset.js.map
vendored
@@ -1 +1 @@
|
||||
{"version":3,"file":"swagger-ui-standalone-preset.js","sources":["webpack:///swagger-ui-standalone-preset.js"],"mappings":"AAAA;;;;;AA40CA;;;;;;AA4kFA","sourceRoot":""}
|
||||
{"version":3,"file":"swagger-ui-standalone-preset.js","sources":["webpack:///swagger-ui-standalone-preset.js"],"mappings":"AAAA;;;;;AA40CA;;;;;;AAmlFA","sourceRoot":""}
|
||||
5
dist/swagger-ui.css
vendored
5
dist/swagger-ui.css
vendored
File diff suppressed because one or more lines are too long
2
dist/swagger-ui.css.map
vendored
2
dist/swagger-ui.css.map
vendored
@@ -1 +1 @@
|
||||
{"version":3,"file":"swagger-ui.css","sources":[],"mappings":";;;","sourceRoot":""}
|
||||
{"version":3,"file":"swagger-ui.css","sources":[],"mappings":"","sourceRoot":""}
|
||||
4
dist/swagger-ui.js
vendored
4
dist/swagger-ui.js
vendored
File diff suppressed because one or more lines are too long
2
dist/swagger-ui.js.map
vendored
2
dist/swagger-ui.js.map
vendored
@@ -1 +1 @@
|
||||
{"version":3,"file":"swagger-ui.js","sources":["webpack:///swagger-ui.js"],"mappings":"AAAA;;;;;;AAy3bA","sourceRoot":""}
|
||||
{"version":3,"file":"swagger-ui.js","sources":["webpack:///swagger-ui.js"],"mappings":"AAAA;;;;;;AAslcA","sourceRoot":""}
|
||||
36
docs/deep-linking.md
Normal file
36
docs/deep-linking.md
Normal file
@@ -0,0 +1,36 @@
|
||||
# Deep linking
|
||||
|
||||
Swagger-UI allows you to deeply link into tags and operations within a spec. When Swagger-UI is provided a URL fragment at runtime, it will automatically expand and scroll to a specified tag or operation.
|
||||
|
||||
## Usage
|
||||
|
||||
👉🏼 Add `deepLinking: true` to your Swagger-UI configuration to enable this functionality.
|
||||
|
||||
When you expand a tag or operation, Swagger-UI will automatically update its URL fragment with a deep link to the item.
|
||||
Conversely, when you collapse a tag or operation, Swagger-UI will clear the URL fragment.
|
||||
|
||||
You can also right-click a tag name or operation path in order to copy a link to that tag or operation.
|
||||
|
||||
#### Fragment format
|
||||
|
||||
The fragment is formatted in one of two ways:
|
||||
|
||||
- `#/{tagName}`, to trigger the focus of a specific tag
|
||||
- `#/{tagName}/{operationId}`, to trigger the focus of a specific operation within a tag
|
||||
|
||||
`operationId` is the explicit operationId provided in the spec, if one exists.
|
||||
Otherwise, Swagger-UI generates an implicit operationId by combining the operation's path and method, and escaping non-alphanumeric characters.
|
||||
|
||||
## FAQ
|
||||
|
||||
> I'm using Swagger-UI in an application that needs control of the URL fragment. How do I disable deep-linking?
|
||||
|
||||
This functionality is disabled by default, but you can pass `deepLinking: false` into Swagger-UI as a configuration item to be sure.
|
||||
|
||||
> Can I link to multiple tags or operations?
|
||||
|
||||
No, this is not supported.
|
||||
|
||||
> Can I collapse everything except the operation or tag I'm linking to?
|
||||
|
||||
Sure - use `docExpansion: none` to collapse all tags and operations. Your deep link will take precedence over the setting, so only the tag or operation you've specified will be expanded.
|
||||
@@ -1,11 +1,12 @@
|
||||
var path = require('path')
|
||||
var path = require("path")
|
||||
|
||||
var webpack = require('webpack')
|
||||
var ExtractTextPlugin = require('extract-text-webpack-plugin')
|
||||
var deepExtend = require('deep-extend')
|
||||
const {gitDescribeSync} = require('git-describe');
|
||||
var webpack = require("webpack")
|
||||
var ExtractTextPlugin = require("extract-text-webpack-plugin")
|
||||
var deepExtend = require("deep-extend")
|
||||
const {gitDescribeSync} = require("git-describe")
|
||||
const os = require("os")
|
||||
|
||||
var pkg = require('./package.json')
|
||||
var pkg = require("./package.json")
|
||||
|
||||
let gitInfo
|
||||
|
||||
@@ -13,7 +14,7 @@ try {
|
||||
gitInfo = gitDescribeSync(__dirname)
|
||||
} catch(e) {
|
||||
gitInfo = {
|
||||
hash: 'noGit',
|
||||
hash: "noGit",
|
||||
dirty: false
|
||||
}
|
||||
}
|
||||
@@ -21,21 +22,21 @@ try {
|
||||
var commonRules = [
|
||||
{ test: /\.(js(x)?)(\?.*)?$/,
|
||||
use: [{
|
||||
loader: 'babel-loader',
|
||||
loader: "babel-loader",
|
||||
options: {
|
||||
retainLines: true
|
||||
}
|
||||
}],
|
||||
include: [ path.join(__dirname, 'src') ]
|
||||
include: [ path.join(__dirname, "src") ]
|
||||
},
|
||||
{ test: /\.(txt|yaml)(\?.*)?$/,
|
||||
loader: 'raw-loader' },
|
||||
loader: "raw-loader" },
|
||||
{ test: /\.(png|jpg|jpeg|gif|svg)(\?.*)?$/,
|
||||
loader: 'url-loader?limit=10000' },
|
||||
loader: "url-loader?limit=10000" },
|
||||
{ test: /\.(woff|woff2)(\?.*)?$/,
|
||||
loader: 'url-loader?limit=100000' },
|
||||
loader: "url-loader?limit=100000" },
|
||||
{ test: /\.(ttf|eot)(\?.*)?$/,
|
||||
loader: 'file-loader' }
|
||||
loader: "file-loader" }
|
||||
]
|
||||
|
||||
module.exports = function(rules, options) {
|
||||
@@ -54,13 +55,12 @@ module.exports = function(rules, options) {
|
||||
|
||||
if( specialOptions.separateStylesheets ) {
|
||||
plugins.push(new ExtractTextPlugin({
|
||||
filename: '[name].css' + (specialOptions.longTermCaching ? '?[contenthash]' : ''),
|
||||
filename: "[name].css" + (specialOptions.longTermCaching ? "?[contenthash]" : ""),
|
||||
allChunks: true
|
||||
}))
|
||||
}
|
||||
|
||||
if( specialOptions.minimize ) {
|
||||
|
||||
plugins.push(
|
||||
new webpack.optimize.UglifyJsPlugin({
|
||||
sourceMap: true,
|
||||
@@ -78,15 +78,16 @@ module.exports = function(rules, options) {
|
||||
|
||||
plugins.push(
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': {
|
||||
NODE_ENV: specialOptions.minimize ? JSON.stringify('production') : null,
|
||||
WEBPACK_INLINE_STYLES: !Boolean(specialOptions.separateStylesheets)
|
||||
|
||||
"process.env": {
|
||||
NODE_ENV: specialOptions.minimize ? JSON.stringify("production") : null,
|
||||
WEBPACK_INLINE_STYLES: !specialOptions.separateStylesheets
|
||||
},
|
||||
'buildInfo': JSON.stringify({
|
||||
"buildInfo": JSON.stringify({
|
||||
PACKAGE_VERSION: (pkg.version),
|
||||
GIT_COMMIT: gitInfo.hash,
|
||||
GIT_DIRTY: gitInfo.dirty
|
||||
GIT_DIRTY: gitInfo.dirty,
|
||||
HOSTNAME: os.hostname(),
|
||||
BUILD_TIME: new Date().toUTCString()
|
||||
})
|
||||
}))
|
||||
|
||||
@@ -96,17 +97,17 @@ module.exports = function(rules, options) {
|
||||
entry: {},
|
||||
|
||||
output: {
|
||||
path: path.join(__dirname, 'dist'),
|
||||
publicPath: '/',
|
||||
filename: '[name].js',
|
||||
chunkFilename: '[name].js'
|
||||
path: path.join(__dirname, "dist"),
|
||||
publicPath: "/",
|
||||
filename: "[name].js",
|
||||
chunkFilename: "[name].js"
|
||||
},
|
||||
|
||||
target: 'web',
|
||||
target: "web",
|
||||
|
||||
// yaml-js has a reference to `fs`, this is a workaround
|
||||
node: {
|
||||
fs: 'empty'
|
||||
fs: "empty"
|
||||
},
|
||||
|
||||
module: {
|
||||
@@ -114,17 +115,17 @@ module.exports = function(rules, options) {
|
||||
},
|
||||
|
||||
resolveLoader: {
|
||||
modules: [path.join(__dirname, 'node_modules')],
|
||||
modules: [path.join(__dirname, "node_modules")],
|
||||
},
|
||||
|
||||
externals: {
|
||||
'buffertools': true // json-react-schema/deeper depends on buffertools, which fails.
|
||||
"buffertools": true // json-react-schema/deeper depends on buffertools, which fails.
|
||||
},
|
||||
|
||||
resolve: {
|
||||
modules: [
|
||||
path.join(__dirname, './src'),
|
||||
'node_modules'
|
||||
path.join(__dirname, "./src"),
|
||||
"node_modules"
|
||||
],
|
||||
extensions: [".web.js", ".js", ".jsx", ".json", ".less"],
|
||||
alias: {
|
||||
@@ -132,7 +133,7 @@ module.exports = function(rules, options) {
|
||||
}
|
||||
},
|
||||
|
||||
devtool: specialOptions.sourcemaps ? 'cheap-module-source-map' : null,
|
||||
devtool: specialOptions.sourcemaps ? "cheap-module-source-map" : null,
|
||||
|
||||
plugins,
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "swagger-ui",
|
||||
"version": "3.0.17",
|
||||
"version": "3.0.21",
|
||||
"main": "dist/swagger-ui.js",
|
||||
"repository": "git@github.com:swagger-api/swagger-ui.git",
|
||||
"contributors": [
|
||||
@@ -69,9 +69,10 @@
|
||||
"redux-logger": "*",
|
||||
"reselect": "2.5.3",
|
||||
"sanitize-html": "^1.14.1",
|
||||
"scroll-to-element": "^2.0.0",
|
||||
"serialize-error": "2.0.0",
|
||||
"shallowequal": "0.2.2",
|
||||
"swagger-client": "3.0.16",
|
||||
"swagger-client": "3.0.19",
|
||||
"url-parse": "^1.1.8",
|
||||
"whatwg-fetch": "0.11.1",
|
||||
"worker-loader": "^0.7.1",
|
||||
@@ -109,7 +110,6 @@
|
||||
"karma-sourcemap-loader": "^0.3.7",
|
||||
"karma-webpack": "2.0.3",
|
||||
"less": "2.7.2",
|
||||
"less-loader": "4.0.4",
|
||||
"license-checker": "^11.0.0",
|
||||
"mocha": "^3.4.2",
|
||||
"node-sass": "^4.5.0",
|
||||
|
||||
@@ -1 +1,5 @@
|
||||
module.exports = {};
|
||||
module.exports = {
|
||||
plugins: [
|
||||
require("autoprefixer")
|
||||
]
|
||||
}
|
||||
47
src/core/components/array-model.jsx
Normal file
47
src/core/components/array-model.jsx
Normal file
@@ -0,0 +1,47 @@
|
||||
import React, { Component } from "react"
|
||||
import PropTypes from "prop-types"
|
||||
|
||||
const propStyle = { color: "#999", fontStyle: "italic" }
|
||||
|
||||
export default class ArrayModel extends Component {
|
||||
static propTypes = {
|
||||
schema: PropTypes.object.isRequired,
|
||||
getComponent: PropTypes.func.isRequired,
|
||||
specSelectors: PropTypes.object.isRequired,
|
||||
name: PropTypes.string,
|
||||
required: PropTypes.bool,
|
||||
expandDepth: PropTypes.number,
|
||||
depth: PropTypes.number
|
||||
}
|
||||
|
||||
render(){
|
||||
let { getComponent, required, schema, depth, expandDepth, name } = 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 )
|
||||
|
||||
const ModelCollapse = getComponent("ModelCollapse")
|
||||
const Model = getComponent("Model")
|
||||
|
||||
const titleEl = title &&
|
||||
<span className="model-title">
|
||||
<span className="model-title__text">{ title }</span>
|
||||
</span>
|
||||
|
||||
return <span className="model">
|
||||
<ModelCollapse title={titleEl} collapsed={ depth > expandDepth } collapsedContent="[...]">
|
||||
[
|
||||
<span><Model { ...this.props } schema={ items } required={ false }/></span>
|
||||
]
|
||||
{
|
||||
properties.size ? <span>
|
||||
{ properties.entrySeq().map( ( [ key, v ] ) => <span key={`${key}-${v}`} style={propStyle}>
|
||||
<br />{ `${key}:`}{ String(v) }</span>)
|
||||
}<br /></span>
|
||||
: null
|
||||
}
|
||||
</ModelCollapse>
|
||||
{ required && <span style={{ color: "red" }}>*</span>}
|
||||
</span>
|
||||
}
|
||||
}
|
||||
19
src/core/components/enum-model.jsx
Normal file
19
src/core/components/enum-model.jsx
Normal file
@@ -0,0 +1,19 @@
|
||||
import React from "react"
|
||||
import ImPropTypes from "react-immutable-proptypes"
|
||||
|
||||
const EnumModel = ({ value, getComponent }) => {
|
||||
let ModelCollapse = getComponent("ModelCollapse")
|
||||
let collapsedContent = <span>Array [ { value.count() } ]</span>
|
||||
return <span className="prop-enum">
|
||||
Enum:<br />
|
||||
<ModelCollapse collapsedContent={ collapsedContent }>
|
||||
[ { value.join(", ") } ]
|
||||
</ModelCollapse>
|
||||
</span>
|
||||
}
|
||||
EnumModel.propTypes = {
|
||||
value: ImPropTypes.iterable,
|
||||
getComponent: ImPropTypes.func
|
||||
}
|
||||
|
||||
export default EnumModel
|
||||
@@ -15,7 +15,7 @@ class Path extends React.Component {
|
||||
|
||||
return (
|
||||
<pre className="base-url">
|
||||
[ Base url: {host}{basePath}]
|
||||
[ Base URL: {host}{basePath} ]
|
||||
</pre>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -13,8 +13,13 @@ export default class BaseLayout extends React.Component {
|
||||
getComponent: PropTypes.func.isRequired
|
||||
}
|
||||
|
||||
onFilterChange =(e) => {
|
||||
let {target: {value}} = e
|
||||
this.props.layoutActions.updateFilter(value)
|
||||
}
|
||||
|
||||
render() {
|
||||
let { specSelectors, specActions, getComponent } = this.props
|
||||
let { specSelectors, specActions, getComponent, layoutSelectors } = this.props
|
||||
|
||||
let info = specSelectors.info()
|
||||
let url = specSelectors.url()
|
||||
@@ -26,11 +31,20 @@ export default class BaseLayout extends React.Component {
|
||||
|
||||
let Info = getComponent("info")
|
||||
let Operations = getComponent("operations", true)
|
||||
let Models = getComponent("models", true)
|
||||
let Models = getComponent("Models", true)
|
||||
let AuthorizeBtn = getComponent("authorizeBtn", true)
|
||||
let Row = getComponent("Row")
|
||||
let Col = getComponent("Col")
|
||||
let Errors = getComponent("errors", true)
|
||||
|
||||
let isLoading = specSelectors.loadingStatus() === "loading"
|
||||
let isFailed = specSelectors.loadingStatus() === "failed"
|
||||
let filter = layoutSelectors.currentFilter()
|
||||
|
||||
let inputStyle = {}
|
||||
if(isFailed) inputStyle.color = "red"
|
||||
if(isLoading) inputStyle.color = "#aaa"
|
||||
|
||||
const Schemes = getComponent("schemes")
|
||||
|
||||
const isSpecEmpty = !specSelectors.specStr()
|
||||
@@ -57,6 +71,7 @@ export default class BaseLayout extends React.Component {
|
||||
{ schemes && schemes.size ? (
|
||||
<Schemes schemes={ schemes } specActions={ specActions } />
|
||||
) : null }
|
||||
|
||||
{ securityDefinitions ? (
|
||||
<AuthorizeBtn />
|
||||
) : null }
|
||||
@@ -64,6 +79,15 @@ export default class BaseLayout extends React.Component {
|
||||
</div>
|
||||
) : null }
|
||||
|
||||
{
|
||||
filter === null || filter === false ? null :
|
||||
<div className="filter-container">
|
||||
<Col className="filter wrapper" mobile={12}>
|
||||
<input className="operation-filter-input" placeholder="Filter by tag" type="text" onChange={this.onFilterChange} value={filter === true || filter === "true" ? "" : filter} disabled={isLoading} style={inputStyle} />
|
||||
</Col>
|
||||
</div>
|
||||
}
|
||||
|
||||
<Row>
|
||||
<Col mobile={12} desktop={12} >
|
||||
<Operations/>
|
||||
|
||||
47
src/core/components/model-collapse.jsx
Normal file
47
src/core/components/model-collapse.jsx
Normal file
@@ -0,0 +1,47 @@
|
||||
import React, { Component } from "react"
|
||||
import PropTypes from "prop-types"
|
||||
|
||||
export default class ModelCollapse extends Component {
|
||||
static propTypes = {
|
||||
collapsedContent: PropTypes.any,
|
||||
collapsed: PropTypes.bool,
|
||||
children: PropTypes.any,
|
||||
title: PropTypes.element
|
||||
}
|
||||
|
||||
static defaultProps = {
|
||||
collapsedContent: "{...}",
|
||||
collapsed: true,
|
||||
title: null
|
||||
}
|
||||
|
||||
constructor(props, context) {
|
||||
super(props, context)
|
||||
|
||||
let { collapsed, collapsedContent } = this.props
|
||||
|
||||
this.state = {
|
||||
collapsed: collapsed !== undefined ? collapsed : ModelCollapse.defaultProps.collapsed,
|
||||
collapsedContent: collapsedContent || ModelCollapse.defaultProps.collapsedContent
|
||||
}
|
||||
}
|
||||
|
||||
toggleCollapsed=()=>{
|
||||
this.setState({
|
||||
collapsed: !this.state.collapsed
|
||||
})
|
||||
}
|
||||
|
||||
render () {
|
||||
const {title} = this.props
|
||||
return (
|
||||
<span>
|
||||
{ title && <span onClick={this.toggleCollapsed} style={{ "cursor": "pointer" }}>{title}</span> }
|
||||
<span onClick={ this.toggleCollapsed } style={{ "cursor": "pointer" }}>
|
||||
<span className={ "model-toggle" + ( this.state.collapsed ? " collapsed" : "" ) }></span>
|
||||
</span>
|
||||
{ this.state.collapsed ? this.state.collapsedContent : this.props.children }
|
||||
</span>
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -28,7 +28,7 @@ export default class ModelExample extends React.Component {
|
||||
|
||||
render() {
|
||||
let { getComponent, specSelectors, schema, example, isExecute } = this.props
|
||||
const Model = getComponent("model")
|
||||
const ModelWrapper = getComponent("ModelWrapper")
|
||||
|
||||
return <div>
|
||||
<ul className="tab">
|
||||
@@ -44,7 +44,7 @@ export default class ModelExample extends React.Component {
|
||||
(isExecute || this.state.activeTab === "example") && example
|
||||
}
|
||||
{
|
||||
!isExecute && this.state.activeTab === "model" && <Model schema={ schema }
|
||||
!isExecute && this.state.activeTab === "model" && <ModelWrapper schema={ schema }
|
||||
getComponent={ getComponent }
|
||||
specSelectors={ specSelectors }
|
||||
expandDepth={ 1 } />
|
||||
|
||||
23
src/core/components/model-wrapper.jsx
Normal file
23
src/core/components/model-wrapper.jsx
Normal file
@@ -0,0 +1,23 @@
|
||||
import React, { Component, } from "react"
|
||||
import PropTypes from "prop-types"
|
||||
|
||||
export default class ModelComponent extends Component {
|
||||
static propTypes = {
|
||||
schema: PropTypes.object.isRequired,
|
||||
name: PropTypes.string,
|
||||
getComponent: PropTypes.func.isRequired,
|
||||
specSelectors: PropTypes.object.isRequired,
|
||||
expandDepth: PropTypes.number
|
||||
}
|
||||
|
||||
render(){
|
||||
let { getComponent } = this.props
|
||||
const Model = getComponent("Model")
|
||||
|
||||
return <div className="model-box">
|
||||
<Model { ...this.props } depth={ 1 } expandDepth={ this.props.expandDepth || 0 }/>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,275 +1,7 @@
|
||||
import React, { Component } from "react"
|
||||
import PropTypes from "prop-types"
|
||||
import ImPropTypes from "react-immutable-proptypes"
|
||||
import { List } from "immutable"
|
||||
const braceOpen = "{"
|
||||
const braceClose = "}"
|
||||
|
||||
const propStyle = { color: "#999", fontStyle: "italic" }
|
||||
|
||||
const EnumModel = ({ value }) => {
|
||||
let collapsedContent = <span>Array [ { value.count() } ]</span>
|
||||
return <span className="prop-enum">
|
||||
Enum:<br />
|
||||
<Collapse collapsedContent={ collapsedContent }>
|
||||
[ { value.join(", ") } ]
|
||||
</Collapse>
|
||||
</span>
|
||||
}
|
||||
|
||||
EnumModel.propTypes = {
|
||||
value: ImPropTypes.iterable
|
||||
}
|
||||
|
||||
class ObjectModel extends Component {
|
||||
static propTypes = {
|
||||
schema: PropTypes.object.isRequired,
|
||||
getComponent: PropTypes.func.isRequired,
|
||||
specSelectors: PropTypes.object.isRequired,
|
||||
name: PropTypes.string,
|
||||
isRef: PropTypes.bool,
|
||||
expandDepth: PropTypes.number,
|
||||
depth: PropTypes.number,
|
||||
deprecated: PropTypes.boolean
|
||||
}
|
||||
|
||||
render(){
|
||||
let { schema, name, isRef, getComponent, depth, deprecated, ...props } = this.props
|
||||
let { expandDepth, specSelectors } = this.props
|
||||
const JumpToPath = getComponent("JumpToPath", true)
|
||||
let description = schema.get("description")
|
||||
let nullable = schema.get("nullable")
|
||||
let properties = schema.get("properties")
|
||||
let additionalProperties = schema.get("additionalProperties")
|
||||
let title = schema.get("title") || name
|
||||
let required = schema.get("required")
|
||||
|
||||
let anyOf = specSelectors.isOAS3() ? schema.get("anyOf") : null
|
||||
let oneOf = specSelectors.isOAS3() ? schema.get("oneOf") : null
|
||||
let not = specSelectors.isOAS3() ? schema.get("not") : null
|
||||
|
||||
const Markdown = getComponent("Markdown")
|
||||
const JumpToPathSection = ({ name }) => <span className="model-jump-to-path"><JumpToPath path={`definitions.${name}`} /></span>
|
||||
let collapsedContent = (<span>
|
||||
<span>{ braceOpen }</span>...<span>{ braceClose }</span>
|
||||
{
|
||||
isRef ? <JumpToPathSection name={ name }/> : ""
|
||||
}
|
||||
</span>)
|
||||
|
||||
return <span className={`model ${deprecated ? "deprecated" : ""}`}>
|
||||
{
|
||||
title && <span className="model-title">
|
||||
{ isRef && schema.get("$$ref") && <span className="model-hint">{ schema.get("$$ref") }</span> }
|
||||
<span className="model-title__text">{ title }</span>
|
||||
</span>
|
||||
}
|
||||
<Collapse collapsed={ depth > expandDepth } collapsedContent={ collapsedContent }>
|
||||
<span className="brace-open object">{ braceOpen }</span>
|
||||
{
|
||||
!isRef ? null : <JumpToPathSection name={ name }/>
|
||||
}
|
||||
<span className="inner-object">
|
||||
{
|
||||
<table className="model" style={{ marginLeft: "2em" }}><tbody>
|
||||
{
|
||||
!description ? null : <tr style={{ color: "#999", fontStyle: "italic" }}>
|
||||
<td>description:</td>
|
||||
<td>
|
||||
<Markdown source={ description } />
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
{
|
||||
(!specSelectors.isOAS3() || !nullable) ? null : <tr style={{ color: "#999", fontStyle: "italic" }}>
|
||||
<td>nullable</td>
|
||||
<td>{ nullable }</td>
|
||||
</tr>
|
||||
}
|
||||
{
|
||||
!(properties && properties.size) ? null : properties.entrySeq().map(
|
||||
([key, value]) => {
|
||||
let isRequired = List.isList(required) && required.contains(key)
|
||||
let propertyStyle = { verticalAlign: "top", paddingRight: "0.2em" }
|
||||
if ( isRequired ) {
|
||||
propertyStyle.fontWeight = "bold"
|
||||
}
|
||||
|
||||
return (<tr key={key} className={`${value.get("deprecated") ? "deprecated" : ""}`}>
|
||||
<td style={ propertyStyle }>{ key }:</td>
|
||||
<td style={{ verticalAlign: "top" }}>
|
||||
<Model key={ `object-${name}-${key}_${value}` } { ...props }
|
||||
required={ isRequired }
|
||||
getComponent={ getComponent }
|
||||
schema={ value }
|
||||
depth={ depth + 1 } />
|
||||
</td>
|
||||
</tr>)
|
||||
}).toArray()
|
||||
}
|
||||
{
|
||||
!additionalProperties || !additionalProperties.size ? null
|
||||
: <tr>
|
||||
<td>{ "< * >:" }</td>
|
||||
<td>
|
||||
<Model { ...props } required={ false }
|
||||
getComponent={ getComponent }
|
||||
schema={ additionalProperties }
|
||||
depth={ depth + 1 } />
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
{
|
||||
!anyOf ? null
|
||||
: <tr>
|
||||
<td>{ "anyOf ->" }</td>
|
||||
<td>
|
||||
{anyOf.map(schema => {
|
||||
return <div><Model { ...props } required={ false }
|
||||
getComponent={ getComponent }
|
||||
schema={ schema }
|
||||
depth={ depth + 1 } /></div>
|
||||
})}
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
{
|
||||
!oneOf ? null
|
||||
: <tr>
|
||||
<td>{ "oneOf ->" }</td>
|
||||
<td>
|
||||
{oneOf.map(schema => {
|
||||
return <div><Model { ...props } required={ false }
|
||||
getComponent={ getComponent }
|
||||
schema={ schema }
|
||||
depth={ depth + 1 } /></div>
|
||||
})}
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
{
|
||||
!not ? null
|
||||
: <tr>
|
||||
<td>{ "not ->" }</td>
|
||||
<td>
|
||||
{not.map(schema => {
|
||||
return <div><Model { ...props } required={ false }
|
||||
getComponent={ getComponent }
|
||||
schema={ schema }
|
||||
depth={ depth + 1 } /></div>
|
||||
})}
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody></table>
|
||||
}
|
||||
</span>
|
||||
<span className="brace-close">{ braceClose }</span>
|
||||
</Collapse>
|
||||
</span>
|
||||
}
|
||||
}
|
||||
|
||||
class Primitive extends Component {
|
||||
static propTypes = {
|
||||
schema: PropTypes.object.isRequired,
|
||||
name: PropTypes.string,
|
||||
getComponent: PropTypes.func.isRequired,
|
||||
required: PropTypes.bool,
|
||||
deprecated: PropTypes.bool
|
||||
}
|
||||
|
||||
render(){
|
||||
let { schema, getComponent, name, required, deprecated } = this.props
|
||||
|
||||
if(!schema || !schema.get) {
|
||||
// don't render if schema isn't correctly formed
|
||||
return <div></div>
|
||||
}
|
||||
|
||||
let type = schema.get("type")
|
||||
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={`model ${deprecated ? "deprecated" : ""}`}>
|
||||
{
|
||||
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>}
|
||||
{
|
||||
properties.size ? properties.entrySeq().map( ( [ key, v ] ) => <span key={`${key}-${v}`} style={ propStyle }>
|
||||
<br />{ key }: { String(v) }</span>)
|
||||
: null
|
||||
}
|
||||
{
|
||||
!description ? null :
|
||||
<Markdown source={ description } />
|
||||
}
|
||||
{
|
||||
xml && xml.size ? (<span><br /><span style={ propStyle }>xml:</span>
|
||||
{
|
||||
xml.entrySeq().map( ( [ key, v ] ) => <span key={`${key}-${v}`} style={ propStyle }><br/> {key}: { String(v) }</span>).toArray()
|
||||
}
|
||||
</span>): null
|
||||
}
|
||||
{
|
||||
enumArray && <EnumModel value={ enumArray } />
|
||||
}
|
||||
</span>
|
||||
}
|
||||
}
|
||||
|
||||
class ArrayModel extends Component {
|
||||
static propTypes = {
|
||||
schema: PropTypes.object.isRequired,
|
||||
getComponent: PropTypes.func.isRequired,
|
||||
specSelectors: PropTypes.object.isRequired,
|
||||
name: PropTypes.string,
|
||||
required: PropTypes.bool,
|
||||
expandDepth: PropTypes.number,
|
||||
depth: PropTypes.number
|
||||
}
|
||||
|
||||
render(){
|
||||
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">
|
||||
{
|
||||
title && <span className="model-title">
|
||||
<span className="model-title__text">{ title }</span>
|
||||
</span>
|
||||
}
|
||||
<Collapse collapsed={ depth > expandDepth } collapsedContent="[...]">
|
||||
[
|
||||
<span><Model { ...this.props } name="" schema={ items } required={ false }/></span>
|
||||
]
|
||||
{
|
||||
properties.size ? <span>
|
||||
{ properties.entrySeq().map( ( [ key, v ] ) => <span key={`${key}-${v}`} style={propStyle}>
|
||||
<br />{ `${key}:`}{ String(v) }</span>)
|
||||
}<br /></span>
|
||||
: null
|
||||
}
|
||||
</Collapse>
|
||||
{ required && <span style={{ color: "red" }}>*</span>}
|
||||
</span>
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export class Model extends Component {
|
||||
export default class Model extends Component {
|
||||
static propTypes = {
|
||||
schema: PropTypes.object.isRequired,
|
||||
getComponent: PropTypes.func.isRequired,
|
||||
@@ -298,6 +30,9 @@ export class Model extends Component {
|
||||
|
||||
render () {
|
||||
let { getComponent, specSelectors, schema, required, name, isRef } = this.props
|
||||
let ObjectModel = getComponent("ObjectModel")
|
||||
let ArrayModel = getComponent("ArrayModel")
|
||||
let PrimitiveModel = getComponent("PrimitiveModel")
|
||||
let $$ref = schema && schema.get("$$ref")
|
||||
let modelName = $$ref && this.getModelName( $$ref )
|
||||
let modelSchema, type
|
||||
@@ -335,69 +70,12 @@ export class Model extends Component {
|
||||
case "integer":
|
||||
case "boolean":
|
||||
default:
|
||||
return <Primitive
|
||||
return <PrimitiveModel
|
||||
{ ...this.props }
|
||||
getComponent={ getComponent }
|
||||
schema={ modelSchema }
|
||||
name={ name || modelName }
|
||||
deprecated={deprecated}
|
||||
required={ required }/>
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export default class ModelComponent extends Component {
|
||||
static propTypes = {
|
||||
schema: PropTypes.object.isRequired,
|
||||
name: PropTypes.string,
|
||||
getComponent: PropTypes.func.isRequired,
|
||||
specSelectors: PropTypes.object.isRequired,
|
||||
expandDepth: PropTypes.number
|
||||
}
|
||||
|
||||
render(){
|
||||
return <div className="model-box">
|
||||
<Model { ...this.props } depth={ 1 } expandDepth={ this.props.expandDepth || 0 }/>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
class Collapse extends Component {
|
||||
static propTypes = {
|
||||
collapsedContent: PropTypes.any,
|
||||
collapsed: PropTypes.bool,
|
||||
children: PropTypes.any
|
||||
}
|
||||
|
||||
static defaultProps = {
|
||||
collapsedContent: "{...}",
|
||||
collapsed: true,
|
||||
}
|
||||
|
||||
constructor(props, context) {
|
||||
super(props, context)
|
||||
|
||||
let { collapsed, collapsedContent } = this.props
|
||||
|
||||
this.state = {
|
||||
collapsed: collapsed !== undefined ? collapsed : Collapse.defaultProps.collapsed,
|
||||
collapsedContent: collapsedContent || Collapse.defaultProps.collapsedContent
|
||||
}
|
||||
}
|
||||
|
||||
toggleCollapsed=()=>{
|
||||
this.setState({
|
||||
collapsed: !this.state.collapsed
|
||||
})
|
||||
}
|
||||
|
||||
render () {
|
||||
return (<span>
|
||||
<span onClick={ this.toggleCollapsed } style={{ "cursor": "pointer" }}>
|
||||
<span className={ "model-toggle" + ( this.state.collapsed ? " collapsed" : "" ) }></span>
|
||||
</span>
|
||||
{ this.state.collapsed ? this.state.collapsedContent : this.props.children }
|
||||
</span>)
|
||||
required={ required }/> }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,7 +16,7 @@ export default class Models extends Component {
|
||||
let { docExpansion } = getConfigs()
|
||||
let showModels = layoutSelectors.isShown("models", docExpansion === "full" || docExpansion === "list" )
|
||||
|
||||
const Model = getComponent("model")
|
||||
const ModelWrapper = getComponent("ModelWrapper")
|
||||
const Collapse = getComponent("Collapse")
|
||||
|
||||
if (!definitions.size) return null
|
||||
@@ -28,11 +28,11 @@ export default class Models extends Component {
|
||||
<use xlinkHref={showModels ? "#large-arrow-down" : "#large-arrow"} />
|
||||
</svg>
|
||||
</h4>
|
||||
<Collapse isOpened={showModels} animated>
|
||||
<Collapse isOpened={showModels}>
|
||||
{
|
||||
definitions.entrySeq().map( ( [ name, model ])=>{
|
||||
return <div className="model-container" key={ `models-section-${name}` }>
|
||||
<Model name={ name }
|
||||
<ModelWrapper name={ name }
|
||||
schema={ model }
|
||||
isRef={ true }
|
||||
getComponent={ getComponent }
|
||||
|
||||
105
src/core/components/object-model.jsx
Normal file
105
src/core/components/object-model.jsx
Normal file
@@ -0,0 +1,105 @@
|
||||
import React, { Component, } from "react"
|
||||
import PropTypes from "prop-types"
|
||||
import { List } from "immutable"
|
||||
|
||||
const braceOpen = "{"
|
||||
const braceClose = "}"
|
||||
|
||||
export default class ObjectModel extends Component {
|
||||
static propTypes = {
|
||||
schema: PropTypes.object.isRequired,
|
||||
getComponent: PropTypes.func.isRequired,
|
||||
specSelectors: PropTypes.object.isRequired,
|
||||
name: PropTypes.string,
|
||||
isRef: PropTypes.bool,
|
||||
expandDepth: PropTypes.number,
|
||||
depth: PropTypes.number
|
||||
}
|
||||
|
||||
render(){
|
||||
let { schema, name, isRef, getComponent, depth, ...props } = this.props
|
||||
let { expandDepth } = this.props
|
||||
let description = schema.get("description")
|
||||
let properties = schema.get("properties")
|
||||
let additionalProperties = schema.get("additionalProperties")
|
||||
let title = schema.get("title") || name
|
||||
let requiredProperties = schema.get("required")
|
||||
|
||||
const JumpToPath = getComponent("JumpToPath", true)
|
||||
const Markdown = getComponent("Markdown")
|
||||
const Model = getComponent("Model")
|
||||
const ModelCollapse = getComponent("ModelCollapse")
|
||||
|
||||
const JumpToPathSection = ({ name }) => <span className="model-jump-to-path"><JumpToPath path={`definitions.${name}`} /></span>
|
||||
const collapsedContent = (<span>
|
||||
<span>{ braceOpen }</span>...<span>{ braceClose }</span>
|
||||
{
|
||||
isRef ? <JumpToPathSection name={ name }/> : ""
|
||||
}
|
||||
</span>)
|
||||
|
||||
const titleEl = title && <span className="model-title">
|
||||
{ isRef && schema.get("$$ref") && <span className="model-hint">{ schema.get("$$ref") }</span> }
|
||||
<span className="model-title__text">{ title }</span>
|
||||
</span>
|
||||
|
||||
return <span className="model">
|
||||
<ModelCollapse title={titleEl} collapsed={ depth > expandDepth } collapsedContent={ collapsedContent }>
|
||||
<span className="brace-open object">{ braceOpen }</span>
|
||||
{
|
||||
!isRef ? null : <JumpToPathSection name={ name }/>
|
||||
}
|
||||
<span className="inner-object">
|
||||
{
|
||||
<table className="model" style={{ marginLeft: "2em" }}><tbody>
|
||||
{
|
||||
!description ? null : <tr style={{ color: "#999", fontStyle: "italic" }}>
|
||||
<td>description:</td>
|
||||
<td>
|
||||
<Markdown source={ description } />
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
{
|
||||
!(properties && properties.size) ? null : properties.entrySeq().map(
|
||||
([key, value]) => {
|
||||
let isRequired = List.isList(requiredProperties) && requiredProperties.contains(key)
|
||||
let propertyStyle = { verticalAlign: "top", paddingRight: "0.2em" }
|
||||
if ( isRequired ) {
|
||||
propertyStyle.fontWeight = "bold"
|
||||
}
|
||||
|
||||
return (<tr key={key}>
|
||||
<td style={ propertyStyle }>
|
||||
{ key }{ isRequired && <span style={{ color: "red" }}>*</span> }
|
||||
</td>
|
||||
<td style={{ verticalAlign: "top" }}>
|
||||
<Model key={ `object-${name}-${key}_${value}` } { ...props }
|
||||
required={ isRequired }
|
||||
getComponent={ getComponent }
|
||||
schema={ value }
|
||||
depth={ depth + 1 } />
|
||||
</td>
|
||||
</tr>)
|
||||
}).toArray()
|
||||
}
|
||||
{
|
||||
!additionalProperties || !additionalProperties.size ? null
|
||||
: <tr>
|
||||
<td>{ "< * >:" }</td>
|
||||
<td>
|
||||
<Model { ...props } required={ false }
|
||||
getComponent={ getComponent }
|
||||
schema={ additionalProperties }
|
||||
depth={ depth + 1 } />
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody></table>
|
||||
}
|
||||
</span>
|
||||
<span className="brace-close">{ braceClose }</span>
|
||||
</ModelCollapse>
|
||||
</span>
|
||||
}
|
||||
}
|
||||
@@ -116,7 +116,8 @@ export default class Operation extends PureComponent {
|
||||
specActions,
|
||||
specSelectors,
|
||||
authActions,
|
||||
authSelectors
|
||||
authSelectors,
|
||||
getConfigs
|
||||
} = this.props
|
||||
|
||||
let summary = operation.get("summary")
|
||||
@@ -141,6 +142,10 @@ export default class Operation extends PureComponent {
|
||||
const Markdown = getComponent( "Markdown" )
|
||||
const Schemes = getComponent( "schemes" )
|
||||
|
||||
const { deepLinking } = getConfigs()
|
||||
|
||||
const isDeepLinkingEnabled = deepLinking && deepLinking !== "false"
|
||||
|
||||
// Merge in Live Response
|
||||
if(response && response.size > 0) {
|
||||
let notDocumented = !responses.get(String(response.get("status")))
|
||||
@@ -152,11 +157,16 @@ export default class Operation extends PureComponent {
|
||||
let onChangeKey = [ path, method ] // Used to add values to _this_ operation ( indexed by path and method )
|
||||
|
||||
return (
|
||||
<div className={deprecated ? "opblock opblock-deprecated" : shown ? `opblock opblock-${method} is-open` : `opblock opblock-${method}`} id={isShownKey} >
|
||||
<div className={deprecated ? "opblock opblock-deprecated" : shown ? `opblock opblock-${method} is-open` : `opblock opblock-${method}`} id={isShownKey.join("-")} >
|
||||
<div className={`opblock-summary opblock-summary-${method}`} onClick={this.toggleShown} >
|
||||
<span className="opblock-summary-method">{method.toUpperCase()}</span>
|
||||
<span className={ deprecated ? "opblock-summary-path__deprecated" : "opblock-summary-path" } >
|
||||
<a
|
||||
className="nostyle"
|
||||
onClick={(e) => e.preventDefault()}
|
||||
href={ isDeepLinkingEnabled ? `#/${isShownKey[1]}/${isShownKey[2]}` : ""} >
|
||||
<span>{path}</span>
|
||||
</a>
|
||||
<JumpToPath path={jumpToKey} />
|
||||
</span>
|
||||
|
||||
@@ -191,7 +201,9 @@ export default class Operation extends PureComponent {
|
||||
<div className="opblock-external-docs-wrapper">
|
||||
<h4 className="opblock-title_normal">Find more details</h4>
|
||||
<div className="opblock-external-docs">
|
||||
<span className="opblock-external-docs__description">{ externalDocs.get("description") }</span>
|
||||
<span className="opblock-external-docs__description">
|
||||
<Markdown source={ externalDocs.get("description") } />
|
||||
</span>
|
||||
<a className="opblock-external-docs__link" href={ externalDocs.get("url") }>{ externalDocs.get("url") }</a>
|
||||
</div>
|
||||
</div> : null
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
import React from "react"
|
||||
import PropTypes from "prop-types"
|
||||
import { helpers } from "swagger-client"
|
||||
|
||||
const { opId } = helpers
|
||||
|
||||
export default class Operations extends React.Component {
|
||||
|
||||
@@ -33,7 +36,29 @@ export default class Operations extends React.Component {
|
||||
const Collapse = getComponent("Collapse")
|
||||
|
||||
let showSummary = layoutSelectors.showSummary()
|
||||
let { docExpansion, displayOperationId, displayRequestDuration } = getConfigs()
|
||||
let {
|
||||
docExpansion,
|
||||
displayOperationId,
|
||||
displayRequestDuration,
|
||||
maxDisplayedTags,
|
||||
deepLinking
|
||||
} = getConfigs()
|
||||
|
||||
const isDeepLinkingEnabled = deepLinking && deepLinking !== "false"
|
||||
|
||||
let filter = layoutSelectors.currentFilter()
|
||||
|
||||
if (filter) {
|
||||
if (filter !== true) {
|
||||
taggedOps = taggedOps.filter((tagObj, tag) => {
|
||||
return tag.indexOf(filter) !== -1
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
if (maxDisplayedTags && !isNaN(maxDisplayedTags) && maxDisplayedTags >= 0) {
|
||||
taggedOps = taggedOps.slice(0, maxDisplayedTags)
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
@@ -48,8 +73,16 @@ export default class Operations extends React.Component {
|
||||
return (
|
||||
<div className={showTag ? "opblock-tag-section is-open" : "opblock-tag-section"} key={"operation-" + tag}>
|
||||
|
||||
<h4 onClick={() => layoutActions.show(isShownKey, !showTag)} className={!tagDescription ? "opblock-tag no-desc" : "opblock-tag" }>
|
||||
<h4
|
||||
onClick={() => layoutActions.show(isShownKey, !showTag)}
|
||||
className={!tagDescription ? "opblock-tag no-desc" : "opblock-tag" }
|
||||
id={isShownKey.join("-")}>
|
||||
<a
|
||||
className="nostyle"
|
||||
onClick={(e) => e.preventDefault()}
|
||||
href={ isDeepLinkingEnabled ? `#/${tag}` : ""}>
|
||||
<span>{tag}</span>
|
||||
</a>
|
||||
{ !tagDescription ? null :
|
||||
<small>
|
||||
{ tagDescription }
|
||||
@@ -67,11 +100,14 @@ export default class Operations extends React.Component {
|
||||
{
|
||||
operations.map( op => {
|
||||
|
||||
const isShownKey = ["operations", op.get("id"), tag]
|
||||
const path = op.get("path", "")
|
||||
const method = op.get("method", "")
|
||||
const jumpToKey = `paths.${path}.${method}`
|
||||
|
||||
const operationId =
|
||||
op.getIn(["operation", "operationId"]) || op.getIn(["operation", "__originalOperationId"]) || opId(op.get("operation"), path, method) || op.get("id")
|
||||
const isShownKey = ["operations", tag, operationId]
|
||||
|
||||
const allowTryItOut = specSelectors.allowTryItOutFor(op.get("path"), op.get("method"))
|
||||
const response = specSelectors.responseFor(op.get("path"), op.get("method"))
|
||||
const request = specSelectors.requestFor(op.get("path"), op.get("method"))
|
||||
|
||||
@@ -49,10 +49,11 @@ export default class ParamBody extends PureComponent {
|
||||
let { specSelectors, pathMethod, param, isExecute, consumesValue="" } = props
|
||||
let parameter = specSelectors ? specSelectors.getParameter(pathMethod, param.get("name")) : {}
|
||||
let isXml = /xml/i.test(consumesValue)
|
||||
let isJson = /json/i.test(consumesValue)
|
||||
let paramValue = isXml ? parameter.get("value_xml") : parameter.get("value")
|
||||
|
||||
if ( paramValue !== undefined ) {
|
||||
let val = !paramValue && !isXml ? "{}" : paramValue
|
||||
let val = !paramValue && isJson ? "{}" : paramValue
|
||||
this.setState({ value: val })
|
||||
this.onChange(val, {isXml: isXml, isEditBox: isExecute})
|
||||
} else {
|
||||
@@ -79,8 +80,11 @@ export default class ParamBody extends PureComponent {
|
||||
_onChange = (val, isXml) => { (this.props.onChange || NOOP)(this.props.param, val, isXml) }
|
||||
|
||||
handleOnChange = e => {
|
||||
let {consumesValue} = this.props
|
||||
this.onChange(e.target.value.trim(), {isXml: /xml/i.test(consumesValue)})
|
||||
const {consumesValue} = this.props
|
||||
const isJson = /json/i.test(consumesValue)
|
||||
const isXml = /xml/i.test(consumesValue)
|
||||
const inputValue = isJson ? e.target.value.trim() : e.target.value
|
||||
this.onChange(inputValue, {isXml})
|
||||
}
|
||||
|
||||
toggleIsEditBox = () => this.setState( state => ({isEditBox: !state.isEditBox}))
|
||||
|
||||
@@ -94,7 +94,7 @@ export default class ParameterRow extends Component {
|
||||
{ param.get("name") }
|
||||
{ !required ? null : <span style={{color: "red"}}> *</span> }
|
||||
</div>
|
||||
<div className="parаmeter__type">{ param.get("type") } { itemType && `[${itemType}]` }</div>
|
||||
<div className="parameter__type">{ param.get("type") } { itemType && `[${itemType}]` }</div>
|
||||
<div className="parameter__in">({ param.get("in") })</div>
|
||||
</td>
|
||||
|
||||
|
||||
55
src/core/components/primitive-model.jsx
Normal file
55
src/core/components/primitive-model.jsx
Normal file
@@ -0,0 +1,55 @@
|
||||
import React, { Component } from "react"
|
||||
import PropTypes from "prop-types"
|
||||
|
||||
const propStyle = { color: "#999", fontStyle: "italic" }
|
||||
|
||||
export default class Primitive extends Component {
|
||||
static propTypes = {
|
||||
schema: PropTypes.object.isRequired,
|
||||
getComponent: PropTypes.func.isRequired,
|
||||
required: PropTypes.bool
|
||||
}
|
||||
|
||||
render(){
|
||||
let { schema, getComponent, required } = this.props
|
||||
|
||||
if(!schema || !schema.get) {
|
||||
// don't render if schema isn't correctly formed
|
||||
return <div></div>
|
||||
}
|
||||
|
||||
let type = schema.get("type")
|
||||
let format = schema.get("format")
|
||||
let xml = schema.get("xml")
|
||||
let enumArray = schema.get("enum")
|
||||
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")
|
||||
const EnumModel = getComponent("EnumModel")
|
||||
|
||||
return <span className="prop">
|
||||
<span className="prop-type" style={ style }>{ type }</span> { required && <span style={{ color: "red" }}>*</span>}
|
||||
{ format && <span className="prop-format">(${format})</span>}
|
||||
{
|
||||
properties.size ? properties.entrySeq().map( ( [ key, v ] ) => <span key={`${key}-${v}`} style={ propStyle }>
|
||||
<br />{ key }: { String(v) }</span>)
|
||||
: null
|
||||
}
|
||||
{
|
||||
!description ? null :
|
||||
<Markdown source={ description } />
|
||||
}
|
||||
{
|
||||
xml && xml.size ? (<span><br /><span style={ propStyle }>xml:</span>
|
||||
{
|
||||
xml.entrySeq().map( ( [ key, v ] ) => <span key={`${key}-${v}`} style={ propStyle }><br/> {key}: { String(v) }</span>).toArray()
|
||||
}
|
||||
</span>): null
|
||||
}
|
||||
{
|
||||
enumArray && <EnumModel value={ enumArray } getComponent={ getComponent } />
|
||||
}
|
||||
</span>
|
||||
}
|
||||
}
|
||||
@@ -11,10 +11,12 @@ function Markdown({ source }) {
|
||||
return null
|
||||
}
|
||||
|
||||
return <Remarkable
|
||||
options={{html: true, typographer: true, linkify: true, linkTarget: "_blank"}}
|
||||
return <div className="markdown">
|
||||
<Remarkable
|
||||
options={{html: true, typographer: true, breaks: true, linkify: true, linkTarget: "_blank"}}
|
||||
source={sanitized}
|
||||
></Remarkable>
|
||||
</div>
|
||||
}
|
||||
|
||||
Markdown.propTypes = {
|
||||
|
||||
@@ -40,7 +40,7 @@ export default class ResponseBody extends React.Component {
|
||||
|
||||
// Image
|
||||
} else if (/^image\//i.test(contentType)) {
|
||||
bodyEl = <img src={ url } />
|
||||
bodyEl = <img style={{ maxWidth: "100%" }} src={ window.URL.createObjectURL(content) } />
|
||||
|
||||
// Audio
|
||||
} else if (/^audio\//i.test(contentType)) {
|
||||
|
||||
@@ -19,8 +19,9 @@ export default class Schemes extends React.Component {
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
if ( this.props.operationScheme && !nextProps.schemes.has(this.props.operationScheme) ) {
|
||||
//fire 'change' event if our selected scheme is no longer an option
|
||||
if ( !this.props.operationScheme || !nextProps.schemes.has(this.props.operationScheme) ) {
|
||||
// if we don't have a selected operationScheme or if our selected scheme is no longer an option,
|
||||
// then fire 'change' event and select the first scheme in the list of options
|
||||
this.setScheme(nextProps.schemes.first())
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,12 +7,18 @@ import * as AllPlugins from "core/plugins/all"
|
||||
import { parseSearch } from "core/utils"
|
||||
|
||||
// eslint-disable-next-line no-undef
|
||||
const { GIT_DIRTY, GIT_COMMIT, PACKAGE_VERSION } = buildInfo
|
||||
const { GIT_DIRTY, GIT_COMMIT, PACKAGE_VERSION, HOSTNAME, BUILD_TIME } = buildInfo
|
||||
|
||||
module.exports = function SwaggerUI(opts) {
|
||||
|
||||
win.versions = win.versions || {}
|
||||
win.versions.swaggerUi = `${PACKAGE_VERSION}/${GIT_COMMIT || "unknown"}${GIT_DIRTY ? "-dirty" : ""}`
|
||||
win.versions.swaggerUi = {
|
||||
version: PACKAGE_VERSION,
|
||||
gitRevision: GIT_COMMIT,
|
||||
gitDirty: GIT_DIRTY,
|
||||
buildTimestamp: BUILD_TIME,
|
||||
machine: HOSTNAME
|
||||
}
|
||||
|
||||
const defaults = {
|
||||
// Some general settings, that we floated to the top
|
||||
@@ -22,15 +28,19 @@ module.exports = function SwaggerUI(opts) {
|
||||
urls: null,
|
||||
layout: "BaseLayout",
|
||||
docExpansion: "list",
|
||||
maxDisplayedTags: null,
|
||||
filter: null,
|
||||
validatorUrl: "https://online.swagger.io/validator",
|
||||
configs: {},
|
||||
custom: {},
|
||||
displayOperationId: false,
|
||||
displayRequestDuration: false,
|
||||
deepLinking: false,
|
||||
|
||||
// Initial set of plugins ( TODO rename this, or refactor - we don't need presets _and_ plugins. Its just there for performance.
|
||||
// Instead, we can compile the first plugin ( it can be a collection of plugins ), then batch the rest.
|
||||
presets: [
|
||||
ApisPreset
|
||||
],
|
||||
|
||||
// Plugins; ( loaded after presets )
|
||||
@@ -46,7 +56,9 @@ module.exports = function SwaggerUI(opts) {
|
||||
store: { },
|
||||
}
|
||||
|
||||
const constructorConfig = deepExtend({}, defaults, opts)
|
||||
let queryConfig = parseSearch()
|
||||
|
||||
const constructorConfig = deepExtend({}, defaults, opts, queryConfig)
|
||||
|
||||
const storeConfigs = deepExtend({}, constructorConfig.store, {
|
||||
system: {
|
||||
@@ -55,7 +67,8 @@ module.exports = function SwaggerUI(opts) {
|
||||
plugins: constructorConfig.presets,
|
||||
state: {
|
||||
layout: {
|
||||
layout: constructorConfig.layout
|
||||
layout: constructorConfig.layout,
|
||||
filter: constructorConfig.filter
|
||||
},
|
||||
spec: {
|
||||
spec: "",
|
||||
@@ -76,7 +89,6 @@ module.exports = function SwaggerUI(opts) {
|
||||
store.register([constructorConfig.plugins, inlinePlugin])
|
||||
|
||||
var system = store.getSystem()
|
||||
let queryConfig = parseSearch()
|
||||
|
||||
system.initOAuth = system.authActions.configureAuth
|
||||
|
||||
|
||||
@@ -1,67 +0,0 @@
|
||||
import get from "lodash/get"
|
||||
|
||||
export function transformPathToArray(property, jsSpec) {
|
||||
if(property.slice(0,9) === "instance.") {
|
||||
var str = property.slice(9)
|
||||
} else { // eslint-disable-next-line no-redeclare
|
||||
var str = property
|
||||
}
|
||||
|
||||
var pathArr = []
|
||||
|
||||
str
|
||||
.split(".")
|
||||
.map(item => {
|
||||
// "key[0]" becomes ["key", "0"]
|
||||
if(item.includes("[")) {
|
||||
let index = parseInt(item.match(/\[(.*)\]/)[1])
|
||||
let keyName = item.slice(0, item.indexOf("["))
|
||||
return [keyName, index.toString()]
|
||||
} else {
|
||||
return item
|
||||
}
|
||||
})
|
||||
.reduce(function(a, b) {
|
||||
// flatten!
|
||||
return a.concat(b)
|
||||
}, [])
|
||||
.concat([""]) // add an empty item into the array, so we don't get stuck with something in our buffer below
|
||||
.reduce((buffer, curr) => {
|
||||
let obj = pathArr.length ? get(jsSpec, pathArr) : jsSpec
|
||||
|
||||
if(get(obj, makeAccessArray(buffer, curr))) {
|
||||
if(buffer.length) {
|
||||
pathArr.push(buffer)
|
||||
}
|
||||
if(curr.length) {
|
||||
pathArr.push(curr)
|
||||
}
|
||||
return ""
|
||||
} else {
|
||||
// attach key to buffer
|
||||
return `${buffer}${buffer.length ? "." : ""}${curr}`
|
||||
}
|
||||
}, "")
|
||||
|
||||
if(typeof get(jsSpec, pathArr) !== "undefined") {
|
||||
return pathArr
|
||||
} else {
|
||||
// if our path is not correct (there is no value at the path),
|
||||
// return null
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
function makeAccessArray(buffer, curr) {
|
||||
let arr = []
|
||||
|
||||
if(buffer.length) {
|
||||
arr.push(buffer)
|
||||
}
|
||||
|
||||
if(curr.length) {
|
||||
arr.push(curr)
|
||||
}
|
||||
|
||||
return arr
|
||||
}
|
||||
@@ -73,7 +73,7 @@ export const authorizePassword = ( auth ) => ( { authActions } ) => {
|
||||
let { schema, name, username, password, passwordType, clientId, clientSecret } = auth
|
||||
let form = {
|
||||
grant_type: "password",
|
||||
scopes: encodeURIComponent(auth.scopes.join(scopeSeparator))
|
||||
scope: encodeURIComponent(auth.scopes.join(scopeSeparator))
|
||||
}
|
||||
let query = {}
|
||||
let headers = {}
|
||||
|
||||
1
src/core/plugins/deep-linking/README.md
Normal file
1
src/core/plugins/deep-linking/README.md
Normal file
@@ -0,0 +1 @@
|
||||
See `docs/deep-linking.md`.
|
||||
7
src/core/plugins/deep-linking/helpers.js
Normal file
7
src/core/plugins/deep-linking/helpers.js
Normal file
@@ -0,0 +1,7 @@
|
||||
export const setHash = (value) => {
|
||||
if(value) {
|
||||
return history.pushState(null, null, `#${value}`)
|
||||
} else {
|
||||
return window.location.hash = ""
|
||||
}
|
||||
}
|
||||
18
src/core/plugins/deep-linking/index.js
Normal file
18
src/core/plugins/deep-linking/index.js
Normal file
@@ -0,0 +1,18 @@
|
||||
// import reducers from "./reducers"
|
||||
// import * as actions from "./actions"
|
||||
// import * as selectors from "./selectors"
|
||||
import * as specWrapActions from "./spec-wrap-actions"
|
||||
import * as layoutWrapActions from "./layout-wrap-actions"
|
||||
|
||||
export default function() {
|
||||
return {
|
||||
statePlugins: {
|
||||
spec: {
|
||||
wrapActions: specWrapActions
|
||||
},
|
||||
layout: {
|
||||
wrapActions: layoutWrapActions
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
36
src/core/plugins/deep-linking/layout-wrap-actions.js
Normal file
36
src/core/plugins/deep-linking/layout-wrap-actions.js
Normal file
@@ -0,0 +1,36 @@
|
||||
import { setHash } from "./helpers"
|
||||
|
||||
export const show = (ori, { getConfigs }) => (...args) => {
|
||||
ori(...args)
|
||||
|
||||
const isDeepLinkingEnabled = getConfigs().deepLinking
|
||||
if(!isDeepLinkingEnabled || isDeepLinkingEnabled === "false") {
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
let [thing, shown] = args
|
||||
let [type] = thing
|
||||
|
||||
if(type === "operations-tag" || type === "operations") {
|
||||
if(!shown) {
|
||||
return setHash("/")
|
||||
}
|
||||
|
||||
if(type === "operations") {
|
||||
let [, tag, operationId] = thing
|
||||
setHash(`/${tag}/${operationId}`)
|
||||
}
|
||||
|
||||
if(type === "operations-tag") {
|
||||
let [, tag] = thing
|
||||
setHash(`/${tag}`)
|
||||
}
|
||||
}
|
||||
|
||||
} catch(e) {
|
||||
// This functionality is not mission critical, so if something goes wrong
|
||||
// we'll just move on
|
||||
console.error(e)
|
||||
}
|
||||
}
|
||||
51
src/core/plugins/deep-linking/spec-wrap-actions.js
Normal file
51
src/core/plugins/deep-linking/spec-wrap-actions.js
Normal file
@@ -0,0 +1,51 @@
|
||||
import scrollTo from "scroll-to-element"
|
||||
|
||||
const SCROLL_OFFSET = -5
|
||||
let hasHashBeenParsed = false
|
||||
|
||||
|
||||
export const updateResolved = (ori, { layoutActions, getConfigs }) => (...args) => {
|
||||
ori(...args)
|
||||
|
||||
const isDeepLinkingEnabled = getConfigs().deepLinking
|
||||
if(!isDeepLinkingEnabled || isDeepLinkingEnabled === "false") {
|
||||
return
|
||||
}
|
||||
|
||||
if(window.location.hash && !hasHashBeenParsed ) {
|
||||
let hash = window.location.hash.slice(1) // # is first character
|
||||
|
||||
if(hash[0] === "!") {
|
||||
// Parse UI 2.x shebangs
|
||||
hash = hash.slice(1)
|
||||
}
|
||||
|
||||
if(hash[0] === "/") {
|
||||
// "/pet/addPet" => "pet/addPet"
|
||||
// makes the split result cleaner
|
||||
// also handles forgotten leading slash
|
||||
hash = hash.slice(1)
|
||||
}
|
||||
|
||||
let [tag, operationId] = hash.split("/")
|
||||
|
||||
if(tag && operationId) {
|
||||
// Pre-expand and scroll to the operation
|
||||
layoutActions.show(["operations-tag", tag], true)
|
||||
layoutActions.show(["operations", tag, operationId], true)
|
||||
|
||||
scrollTo(`#operations-${tag}-${operationId}`, {
|
||||
offset: SCROLL_OFFSET
|
||||
})
|
||||
} else if(tag) {
|
||||
// Pre-expand and scroll to the tag
|
||||
layoutActions.show(["operations-tag", tag], true)
|
||||
|
||||
scrollTo(`#operations-tag-${tag}`, {
|
||||
offset: SCROLL_OFFSET
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
hasHashBeenParsed = true
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
import { normalizeArray } from "core/utils"
|
||||
|
||||
export const UPDATE_LAYOUT = "layout_update_layout"
|
||||
export const UPDATE_FILTER = "layout_update_filter"
|
||||
export const UPDATE_MODE = "layout_update_mode"
|
||||
export const SHOW = "layout_show"
|
||||
|
||||
@@ -13,6 +14,13 @@ export function updateLayout(layout) {
|
||||
}
|
||||
}
|
||||
|
||||
export function updateFilter(filter) {
|
||||
return {
|
||||
type: UPDATE_FILTER,
|
||||
payload: filter
|
||||
}
|
||||
}
|
||||
|
||||
export function show(thing, shown=true) {
|
||||
thing = normalizeArray(thing)
|
||||
return {
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import {
|
||||
UPDATE_LAYOUT,
|
||||
UPDATE_FILTER,
|
||||
UPDATE_MODE,
|
||||
SHOW
|
||||
} from "./actions"
|
||||
@@ -8,6 +9,8 @@ export default {
|
||||
|
||||
[UPDATE_LAYOUT]: (state, action) => state.set("layout", action.payload),
|
||||
|
||||
[UPDATE_FILTER]: (state, action) => state.set("filter", action.payload),
|
||||
|
||||
[SHOW]: (state, action) => {
|
||||
let thing = action.payload.thing
|
||||
let shown = action.payload.shown
|
||||
|
||||
@@ -5,6 +5,8 @@ const state = state => state
|
||||
|
||||
export const current = state => state.get("layout")
|
||||
|
||||
export const currentFilter = state => state.get("filter")
|
||||
|
||||
export const isShown = (state, thing, def) => {
|
||||
thing = normalizeArray(thing)
|
||||
return Boolean(state.getIn(["shown", ...thing], def))
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { createSelector } from "reselect"
|
||||
import { sorters } from "core/utils"
|
||||
import { fromJS, Set, Map, List } from "immutable"
|
||||
import { fromJS, Set, Map, OrderedMap, List } from "immutable"
|
||||
|
||||
const DEFAULT_TAG = "default"
|
||||
|
||||
@@ -194,25 +194,35 @@ export const tagDetails = (state, tag) => {
|
||||
|
||||
export const operationsWithTags = createSelector(
|
||||
operationsWithRootInherited,
|
||||
operations => {
|
||||
tags,
|
||||
(operations, tags) => {
|
||||
return operations.reduce( (taggedMap, op) => {
|
||||
let tags = Set(op.getIn(["operation","tags"]))
|
||||
if(tags.count() < 1)
|
||||
return taggedMap.update(DEFAULT_TAG, List(), ar => ar.push(op))
|
||||
return tags.reduce( (res, tag) => res.update(tag, List(), (ar) => ar.push(op)), taggedMap )
|
||||
}, Map())
|
||||
}, tags.reduce( (taggedMap, tag) => {
|
||||
return taggedMap.set(tag.get("name"), List())
|
||||
} , OrderedMap()))
|
||||
}
|
||||
)
|
||||
|
||||
export const taggedOperations = (state) => ({ getConfigs }) => {
|
||||
let { operationsSorter }= getConfigs()
|
||||
let { tagsSorter, operationsSorter } = getConfigs()
|
||||
return operationsWithTags(state)
|
||||
.sortBy(
|
||||
(val, key) => key, // get the name of the tag to be passed to the sorter
|
||||
(tagA, tagB) => {
|
||||
let sortFn = (typeof tagsSorter === "function" ? tagsSorter : sorters.tagsSorter[ tagsSorter ])
|
||||
return (!sortFn ? null : sortFn(tagA, tagB))
|
||||
}
|
||||
)
|
||||
.map((ops, tag) => {
|
||||
let sortFn = (typeof operationsSorter === "function" ? operationsSorter : sorters.operationsSorter[ operationsSorter ])
|
||||
let operations = (!sortFn ? ops : ops.sort(sortFn))
|
||||
|
||||
return operationsWithTags(state).map((ops, tag) => {
|
||||
let sortFn = typeof operationsSorter === "function" ? operationsSorter
|
||||
: sorters.operationsSorter[operationsSorter]
|
||||
let operations = !sortFn ? ops : ops.sort(sortFn)
|
||||
|
||||
return Map({tagDetails: tagDetails(state, tag), operations: operations})})
|
||||
return Map({ tagDetails: tagDetails(state, tag), operations: operations })
|
||||
})
|
||||
}
|
||||
|
||||
export const responses = createSelector(
|
||||
@@ -281,12 +291,13 @@ export function parametersIncludeType(parameters, typeValue="") {
|
||||
export function contentTypeValues(state, pathMethod) {
|
||||
let op = spec(state).getIn(["paths", ...pathMethod], fromJS({}))
|
||||
const parameters = op.get("parameters") || new List()
|
||||
const requestContentType = (
|
||||
parametersIncludeType(parameters, "file") ? "multipart/form-data"
|
||||
: parametersIncludeIn(parameters, "formData") ? "application/x-www-form-urlencoded"
|
||||
: op.get("consumes_value")
|
||||
)
|
||||
|
||||
const requestContentType = (
|
||||
op.get("consumes_value") ? op.get("consumes_value")
|
||||
: parametersIncludeType(parameters, "file") ? "multipart/form-data"
|
||||
: parametersIncludeType(parameters, "formData") ? "application/x-www-form-urlencoded"
|
||||
: undefined
|
||||
)
|
||||
|
||||
return fromJS({
|
||||
requestContentType,
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import React from "react"
|
||||
import PropTypes from "prop-types"
|
||||
import SplitPane from "react-split-pane"
|
||||
import "./split-pane-mode.less"
|
||||
|
||||
const MODE_KEY = ["split-pane-mode"]
|
||||
const MODE_LEFT = "left"
|
||||
|
||||
@@ -1,5 +0,0 @@
|
||||
.swagger-ui {
|
||||
.Resizer.vertical.disabled {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -1,8 +1,7 @@
|
||||
import { shallowEqualKeys } from "core/utils"
|
||||
import { transformPathToArray } from "core/path-translator"
|
||||
|
||||
export default function() {
|
||||
return {
|
||||
fn: { shallowEqualKeys, transformPathToArray }
|
||||
fn: { shallowEqualKeys }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,6 +10,7 @@ import auth from "core/plugins/auth"
|
||||
import util from "core/plugins/util"
|
||||
import SplitPaneModePlugin from "core/plugins/split-pane-mode"
|
||||
import downloadUrlPlugin from "core/plugins/download-url"
|
||||
import deepLinkingPlugin from "core/plugins/deep-linking"
|
||||
|
||||
import App from "core/components/app"
|
||||
import AuthorizationPopup from "core/components/auth/authorization-popup"
|
||||
@@ -41,9 +42,15 @@ import Footer from "core/components/footer"
|
||||
import ParamBody from "core/components/param-body"
|
||||
import Curl from "core/components/curl"
|
||||
import Schemes from "core/components/schemes"
|
||||
import ModelCollapse from "core/components/model-collapse"
|
||||
import ModelExample from "core/components/model-example"
|
||||
import ModelWrapper from "core/components/model-wrapper"
|
||||
import Model from "core/components/model"
|
||||
import Models from "core/components/models"
|
||||
import EnumModel from "core/components/enum-model"
|
||||
import ObjectModel from "core/components/object-model"
|
||||
import ArrayModel from "core/components/array-model"
|
||||
import PrimitiveModel from "core/components/primitive-model"
|
||||
import TryItOutButton from "core/components/try-it-out-button"
|
||||
import VersionStamp from "core/components/version-stamp"
|
||||
|
||||
@@ -89,8 +96,14 @@ export default function() {
|
||||
curl: Curl,
|
||||
schemes: Schemes,
|
||||
modelExample: ModelExample,
|
||||
model: Model,
|
||||
models: Models,
|
||||
ModelWrapper,
|
||||
ModelCollapse,
|
||||
Model,
|
||||
Models,
|
||||
EnumModel,
|
||||
ObjectModel,
|
||||
ArrayModel,
|
||||
PrimitiveModel,
|
||||
TryItOutButton,
|
||||
Markdown,
|
||||
BaseLayout,
|
||||
@@ -121,6 +134,7 @@ export default function() {
|
||||
auth,
|
||||
ast,
|
||||
SplitPaneModePlugin,
|
||||
downloadUrlPlugin
|
||||
downloadUrlPlugin,
|
||||
deepLinkingPlugin
|
||||
]
|
||||
}
|
||||
|
||||
@@ -41,7 +41,7 @@ export function fromJSOrdered (js) {
|
||||
return !isObject(js) ? js :
|
||||
Array.isArray(js) ?
|
||||
Im.Seq(js).map(fromJSOrdered).toList() :
|
||||
Im.Seq(js).map(fromJSOrdered).toOrderedMap()
|
||||
Im.OrderedMap(js).map(fromJSOrdered)
|
||||
}
|
||||
|
||||
export function bindToState(obj, state) {
|
||||
@@ -462,6 +462,12 @@ export const validateInteger = ( val ) => {
|
||||
}
|
||||
}
|
||||
|
||||
export const validateFile = ( val ) => {
|
||||
if ( val && !(val instanceof win.File) ) {
|
||||
return "Value must be a file"
|
||||
}
|
||||
}
|
||||
|
||||
// validation of parameters before execute
|
||||
export const validateParam = (param, isXml) => {
|
||||
let errors = []
|
||||
@@ -472,11 +478,18 @@ export const validateParam = (param, isXml) => {
|
||||
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) ) {
|
||||
let fileCheck = type === "file" && !(value instanceof win.File)
|
||||
let nullUndefinedCheck = value === null || value === undefined
|
||||
|
||||
if ( required && (stringCheck || arrayCheck || listCheck || fileCheck || nullUndefinedCheck) ) {
|
||||
errors.push("Required field is not provided")
|
||||
return errors
|
||||
}
|
||||
|
||||
if ( value === null || value === undefined ) {
|
||||
return errors
|
||||
}
|
||||
|
||||
if ( type === "number" ) {
|
||||
let err = validateNumber(value)
|
||||
if (!err) return errors
|
||||
@@ -505,7 +518,10 @@ export const validateParam = (param, isXml) => {
|
||||
errors.push({ index: index, error: err})
|
||||
}
|
||||
})
|
||||
|
||||
} else if ( type === "file" ) {
|
||||
let err = validateFile(value)
|
||||
if (!err) return errors
|
||||
errors.push(err)
|
||||
}
|
||||
|
||||
return errors
|
||||
@@ -563,6 +579,9 @@ export const sorters = {
|
||||
operationsSorter: {
|
||||
alpha: (a, b) => a.get("path").localeCompare(b.get("path")),
|
||||
method: (a, b) => a.get("method").localeCompare(b.get("method"))
|
||||
},
|
||||
tagsSorter: {
|
||||
alpha: (a, b) => a.localeCompare(b)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -20,7 +20,7 @@ SwaggerUI({
|
||||
})
|
||||
```
|
||||
|
||||
Or if you're updating the core plugins.. you'll add it to [src/js/bootstrap-plugin](https://github.com/SmartBear/swagger-ux/blob/master/src/js/bootstrap-plugin.js)
|
||||
Or if you're updating the core plugins.. you'll add it to the base preset: [src/core/presets/base.js](https://github.com/swagger-api/swagger-ui/blob/master/src/core/presets/base.js)
|
||||
|
||||
Each Plugin is a function that returns an object. That object will get merged with the `system` and later bound to the state.
|
||||
Here is an example of each `type`
|
||||
|
||||
@@ -6,6 +6,10 @@ import Logo from "./logo_small.png"
|
||||
|
||||
export default class Topbar extends React.Component {
|
||||
|
||||
static propTypes = {
|
||||
layoutActions: PropTypes.object.isRequired
|
||||
}
|
||||
|
||||
constructor(props, context) {
|
||||
super(props, context)
|
||||
this.state = { url: props.specSelectors.url(), selectedIndex: 0 }
|
||||
@@ -80,6 +84,11 @@ export default class Topbar extends React.Component {
|
||||
}
|
||||
}
|
||||
|
||||
onFilterChange =(e) => {
|
||||
let {target: {value}} = e
|
||||
this.props.layoutActions.updateFilter(value)
|
||||
}
|
||||
|
||||
render() {
|
||||
let { getComponent, specSelectors, getConfigs } = this.props
|
||||
const Button = getComponent("Button")
|
||||
@@ -121,7 +130,7 @@ export default class Topbar extends React.Component {
|
||||
<div className="wrapper">
|
||||
<div className="topbar-wrapper">
|
||||
<Link href="#" title="Swagger UX">
|
||||
<img height="30" width="30" src={ Logo } alt="Swagger UX"/>
|
||||
<img height="30" width="30" src={ Logo } alt="Swagger UI"/>
|
||||
<span>swagger</span>
|
||||
</Link>
|
||||
<form className="download-url-wrapper" onSubmit={formOnSubmit}>
|
||||
|
||||
@@ -1,52 +0,0 @@
|
||||
.swagger-ui {
|
||||
.topbar {
|
||||
background-color: #89bf04;
|
||||
}
|
||||
|
||||
.topbar-wrapper {
|
||||
padding: 0.7em;
|
||||
}
|
||||
|
||||
.topbar-logo__img {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.topbar-logo__title {
|
||||
display: inline-block;
|
||||
color: #fff;
|
||||
font-size: 1.5em;
|
||||
font-weight: bold;
|
||||
margin: 0.15em 0 0 0.5em;
|
||||
}
|
||||
|
||||
.download-url-wrapper {
|
||||
text-align: right;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.topbar .download-url__text {
|
||||
width: 28em;
|
||||
height: 2em;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
.download-url__btn {
|
||||
background-color: #547f00;
|
||||
border-color: #547f00;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
padding: 0.2em 0.3em;
|
||||
color: white;
|
||||
border-radius: 0.1em;
|
||||
|
||||
&:hover {
|
||||
&:extend(.download-url__btn);
|
||||
}
|
||||
}
|
||||
|
||||
.center-700 {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
width: 45em;
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,4 @@
|
||||
import StandaloneLayout from "./layout"
|
||||
import "../style/main.scss"
|
||||
|
||||
import TopbarPlugin from "plugins/topbar"
|
||||
import ConfigsPlugin from "plugins/configs"
|
||||
|
||||
|
||||
@@ -42,7 +42,8 @@ label
|
||||
input[type=text],
|
||||
input[type=password],
|
||||
input[type=search],
|
||||
input[type=email]
|
||||
input[type=email],
|
||||
input[type=file]
|
||||
{
|
||||
min-width: 100px;
|
||||
margin: 5px 0;
|
||||
|
||||
@@ -45,6 +45,7 @@ body
|
||||
.opblock-tag
|
||||
{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
padding: 10px 20px 10px 10px;
|
||||
|
||||
@@ -53,8 +54,6 @@ body
|
||||
|
||||
border-bottom: 1px solid rgba(#3b4151, .3);
|
||||
|
||||
align-items: center;
|
||||
|
||||
&:hover
|
||||
{
|
||||
background: rgba(#000,.02);
|
||||
@@ -111,14 +110,15 @@ body
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
|
||||
flex: 1;
|
||||
|
||||
padding: 0 10px;
|
||||
|
||||
flex: 1;
|
||||
@include text_body();
|
||||
}
|
||||
}
|
||||
|
||||
.parаmeter__type
|
||||
.parameter__type
|
||||
{
|
||||
font-size: 12px;
|
||||
|
||||
@@ -139,6 +139,8 @@ body
|
||||
transition: all .5s;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.opblock
|
||||
{
|
||||
margin: 0 0 15px 0;
|
||||
@@ -204,6 +206,7 @@ body
|
||||
.opblock-section-header
|
||||
{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
padding: 8px 20px;
|
||||
|
||||
@@ -212,19 +215,17 @@ body
|
||||
background: rgba(#fff,.8);
|
||||
box-shadow: 0 1px 2px rgba(#000,.1);
|
||||
|
||||
align-items: center;
|
||||
|
||||
label
|
||||
{
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
margin: 0;
|
||||
margin-left: auto;
|
||||
|
||||
align-items: center;
|
||||
@include text_headline();
|
||||
|
||||
span
|
||||
@@ -237,6 +238,8 @@ body
|
||||
{
|
||||
font-size: 14px;
|
||||
|
||||
flex: 1;
|
||||
|
||||
margin: 0;
|
||||
|
||||
@include text_headline();
|
||||
@@ -267,11 +270,11 @@ body
|
||||
font-size: 16px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
padding: 0 10px;
|
||||
|
||||
@include text_code();
|
||||
align-items: center;
|
||||
|
||||
.view-line-link
|
||||
{
|
||||
@@ -310,18 +313,18 @@ body
|
||||
font-size: 13px;
|
||||
|
||||
flex: 1;
|
||||
|
||||
@include text_body();
|
||||
}
|
||||
|
||||
.opblock-summary
|
||||
{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
padding: 5px;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&.opblock-post
|
||||
@@ -377,6 +380,18 @@ body
|
||||
}
|
||||
}
|
||||
|
||||
.filter
|
||||
{
|
||||
.operation-filter-input
|
||||
{
|
||||
width: 100%;
|
||||
margin: 20px 0;
|
||||
padding: 10px 10px;
|
||||
|
||||
border: 2px solid #d8dde7;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.tab
|
||||
{
|
||||
@@ -428,6 +443,7 @@ body
|
||||
}
|
||||
|
||||
.opblock-description-wrapper,
|
||||
.opblock-external-docs-wrapper,
|
||||
.opblock-title_normal
|
||||
{
|
||||
font-size: 12px;
|
||||
@@ -456,6 +472,12 @@ body
|
||||
}
|
||||
}
|
||||
|
||||
.opblock-external-docs-wrapper {
|
||||
h4 {
|
||||
padding-left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.execute-wrapper
|
||||
{
|
||||
padding: 20px;
|
||||
@@ -539,6 +561,15 @@ body
|
||||
{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a
|
||||
{
|
||||
@include text_code(#89bf04);
|
||||
text-decoration: underline;
|
||||
&:hover {
|
||||
color: #81b10c;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -550,13 +581,11 @@ body
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
|
||||
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
word-break: break-word;
|
||||
hyphens: auto;
|
||||
white-space: pre-wrap;
|
||||
|
||||
|
||||
border-radius: 4px;
|
||||
background: #41444e;
|
||||
@@ -585,7 +614,6 @@ body
|
||||
.schemes
|
||||
{
|
||||
display: flex;
|
||||
|
||||
align-items: center;
|
||||
|
||||
> label
|
||||
@@ -688,3 +716,25 @@ body
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
section
|
||||
{
|
||||
h3
|
||||
{
|
||||
@include text_headline();
|
||||
}
|
||||
}
|
||||
|
||||
a.nostyle {
|
||||
text-decoration: inherit;
|
||||
color: inherit;
|
||||
cursor: auto;
|
||||
display: inline;
|
||||
|
||||
&:visited {
|
||||
text-decoration: inherit;
|
||||
color: inherit;
|
||||
cursor: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -86,6 +86,10 @@
|
||||
border-radius: 4px;
|
||||
background: rgba(#000,.7);
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 1em 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
3
src/style/_split-pane-mode.scss
Normal file
3
src/style/_split-pane-mode.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
.Resizer.vertical.disabled {
|
||||
display: none;
|
||||
}
|
||||
@@ -43,7 +43,6 @@
|
||||
margin: 0;
|
||||
|
||||
border: 2px solid #547f00;
|
||||
border-radius: 4px 0 0 4px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
|
||||
@@ -14,4 +14,5 @@
|
||||
@import 'information';
|
||||
@import 'authorize';
|
||||
@import 'errors';
|
||||
@import 'split-pane-mode';
|
||||
}
|
||||
|
||||
@@ -1,3 +1,17 @@
|
||||
try {
|
||||
module.exports.SwaggerUIBundle = require("./swagger-ui-bundle.js")
|
||||
module.exports.SwaggerUIStandalonePreset = require("./swagger-ui-standalone-preset.js")
|
||||
} catch(e) {
|
||||
// swallow the error if there's a problem loading the assets.
|
||||
// allows this module to support providing the assets for browserish contexts,
|
||||
// without exploding in a Node context.
|
||||
//
|
||||
// see https://github.com/swagger-api/swagger-ui/issues/3291#issuecomment-311195388
|
||||
// for more information.
|
||||
}
|
||||
|
||||
// `absolutePath` and `getAbsoluteFSPath` are both here because at one point,
|
||||
// we documented having one and actually implemented the other.
|
||||
// They were both retained so we don't break anyone's code.
|
||||
module.exports.absolutePath = require("./absolute-path.js")
|
||||
module.exports.getAbsoluteFSPath = require("./absolute-path.js")
|
||||
|
||||
41
test/components/schemes.js
Normal file
41
test/components/schemes.js
Normal file
@@ -0,0 +1,41 @@
|
||||
|
||||
/* eslint-env mocha */
|
||||
import React from "react"
|
||||
import expect, { createSpy } from "expect"
|
||||
import { shallow } from "enzyme"
|
||||
import { fromJS } from "immutable"
|
||||
import Schemes from "components/schemes"
|
||||
|
||||
describe("<Schemes/>", function(){
|
||||
it("calls props.specActions.setScheme() when no operationScheme is selected", function(){
|
||||
|
||||
// Given
|
||||
let props = {
|
||||
specActions: {
|
||||
setScheme: createSpy()
|
||||
},
|
||||
schemes: fromJS([
|
||||
"http",
|
||||
"https"
|
||||
]),
|
||||
operationScheme: undefined,
|
||||
path: "/test",
|
||||
method: "get"
|
||||
}
|
||||
|
||||
// When
|
||||
let wrapper = shallow(<Schemes {...props}/>)
|
||||
|
||||
// Then operationScheme should default to first scheme in options list
|
||||
expect(props.specActions.setScheme).toHaveBeenCalledWith("http", "/test" , "get")
|
||||
|
||||
// When the operationScheme is no longer in the list of options
|
||||
props.schemes = fromJS([
|
||||
"https"
|
||||
])
|
||||
wrapper.setProps(props)
|
||||
|
||||
// Then operationScheme should default to first scheme in options list
|
||||
expect(props.specActions.setScheme).toHaveBeenCalledWith("https", "/test", "get")
|
||||
})
|
||||
})
|
||||
@@ -1,183 +0,0 @@
|
||||
/* eslint-env mocha */
|
||||
import expect from "expect"
|
||||
import { transformPathToArray } from "core/path-translator"
|
||||
|
||||
describe("validation plugin - path translator", function(){
|
||||
|
||||
describe("string paths", function(){
|
||||
|
||||
it("should translate a simple string path to an array", function(){
|
||||
// Given
|
||||
let jsSpec = {
|
||||
one: {
|
||||
a: "a thing",
|
||||
b: "another thing",
|
||||
c: "one more thing"
|
||||
},
|
||||
two: 2
|
||||
}
|
||||
|
||||
let path = "instance.one.a"
|
||||
|
||||
// Then
|
||||
expect(transformPathToArray(path, jsSpec)).toEqual(["one", "a"])
|
||||
|
||||
})
|
||||
|
||||
it("should translate an ambiguous string path to an array", function(){
|
||||
// Since JSONSchema uses periods to mark different properties,
|
||||
// a key with a period in it is ambiguous, because it can mean at least two things.
|
||||
// In our case, the path can mean:
|
||||
// ["google", "com", "a"] or ["google.com", "a"]
|
||||
|
||||
// Given
|
||||
let jsSpec = {
|
||||
"google.com": {
|
||||
a: "a thing",
|
||||
b: "another thing",
|
||||
c: "one more thing"
|
||||
},
|
||||
"gmail.com": {
|
||||
d: "more stuff",
|
||||
e: "even more stuff"
|
||||
}
|
||||
}
|
||||
|
||||
let path = "instance.google.com.a"
|
||||
|
||||
// Then
|
||||
expect(transformPathToArray(path, jsSpec)).toEqual(["google.com", "a"])
|
||||
|
||||
})
|
||||
|
||||
it("should translate an doubly ambiguous string path to an array", function(){
|
||||
// Since JSONSchema uses periods to mark different properties,
|
||||
// a key with two periods in it (like "www.google.com") is doubly ambiguous,
|
||||
// because it can mean at least three things.
|
||||
|
||||
|
||||
// Given
|
||||
let jsSpec = {
|
||||
"www.google.com": {
|
||||
a: "a thing",
|
||||
b: "another thing",
|
||||
c: "one more thing"
|
||||
},
|
||||
"gmail.com": {
|
||||
d: "more stuff",
|
||||
e: "even more stuff"
|
||||
}
|
||||
}
|
||||
|
||||
let path = "instance.www.google.com.a"
|
||||
|
||||
// Then
|
||||
expect(transformPathToArray(path, jsSpec)).toEqual(["www.google.com", "a"])
|
||||
|
||||
})
|
||||
|
||||
it("should return null for an invalid path", function(){
|
||||
|
||||
// Given
|
||||
let jsSpec = {
|
||||
"google.com": {
|
||||
a: "a thing",
|
||||
b: "another thing",
|
||||
c: "one more thing"
|
||||
},
|
||||
"gmail.com": {
|
||||
d: "more stuff",
|
||||
e: "even more stuff"
|
||||
}
|
||||
}
|
||||
|
||||
let path = "instance.google.net.a"
|
||||
|
||||
// Then
|
||||
expect(transformPathToArray(path, jsSpec)).toEqual(null)
|
||||
|
||||
})
|
||||
|
||||
it("should return inline array indices in their own value", function(){
|
||||
// "a[1]" => ["a", "1"]
|
||||
|
||||
// Given
|
||||
let jsSpec = {
|
||||
"google.com": {
|
||||
a: [
|
||||
"hello",
|
||||
"here is the target"
|
||||
],
|
||||
b: "another thing",
|
||||
c: "one more thing"
|
||||
},
|
||||
"gmail.com": {
|
||||
d: "more stuff",
|
||||
e: "even more stuff"
|
||||
}
|
||||
}
|
||||
|
||||
let path = "instance.google.com.a[1]"
|
||||
|
||||
// Then
|
||||
expect(transformPathToArray(path, jsSpec)).toEqual(["google.com", "a", "1"])
|
||||
|
||||
})
|
||||
|
||||
it("should return the correct path when the last part is ambiguous", function(){
|
||||
|
||||
// Given
|
||||
let jsSpec = {
|
||||
"google.com": {
|
||||
a: [
|
||||
"hello",
|
||||
{
|
||||
"gmail.com": 1234
|
||||
}
|
||||
],
|
||||
b: "another thing",
|
||||
c: "one more thing"
|
||||
},
|
||||
"gmail.com": {
|
||||
d: "more stuff",
|
||||
e: "even more stuff"
|
||||
}
|
||||
}
|
||||
|
||||
let path = "instance.google.com.a[1].gmail.com"
|
||||
|
||||
// Then
|
||||
expect(transformPathToArray(path, jsSpec)).toEqual(["google.com", "a", "1", "gmail.com"])
|
||||
|
||||
})
|
||||
|
||||
it("should return the correct path when the last part is doubly ambiguous", function(){
|
||||
|
||||
// Given
|
||||
let jsSpec = {
|
||||
"google.com": {
|
||||
a: [
|
||||
"hello",
|
||||
{
|
||||
"www.gmail.com": 1234
|
||||
}
|
||||
],
|
||||
b: "another thing",
|
||||
c: "one more thing"
|
||||
},
|
||||
"gmail.com": {
|
||||
d: "more stuff",
|
||||
e: "even more stuff"
|
||||
}
|
||||
}
|
||||
|
||||
let path = "instance.google.com.a[1].www.gmail.com"
|
||||
|
||||
// Then
|
||||
expect(transformPathToArray(path, jsSpec)).toEqual(["google.com", "a", "1", "www.gmail.com"])
|
||||
|
||||
})
|
||||
|
||||
})
|
||||
|
||||
})
|
||||
@@ -52,7 +52,6 @@ describe("spec plugin - selectors", function(){
|
||||
})
|
||||
|
||||
describe("contentTypeValues", function(){
|
||||
|
||||
it("should return { requestContentType, responseContentType } from an operation", function(){
|
||||
// Given
|
||||
let state = fromJS({
|
||||
@@ -77,6 +76,73 @@ describe("spec plugin - selectors", function(){
|
||||
})
|
||||
})
|
||||
|
||||
it("should prioritize consumes value first from an operation", function(){
|
||||
// Given
|
||||
let state = fromJS({
|
||||
resolved: {
|
||||
paths: {
|
||||
"/one": {
|
||||
get: {
|
||||
"consumes_value": "one",
|
||||
"parameters": [{
|
||||
"type": "file"
|
||||
}],
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// When
|
||||
let contentTypes = contentTypeValues(state, [ "/one", "get" ])
|
||||
// Then
|
||||
expect(contentTypes.toJS().requestContentType).toEqual("one")
|
||||
})
|
||||
|
||||
it("should fallback to multipart/form-data if there is no consumes value but there is a file parameter", function(){
|
||||
// Given
|
||||
let state = fromJS({
|
||||
resolved: {
|
||||
paths: {
|
||||
"/one": {
|
||||
get: {
|
||||
"parameters": [{
|
||||
"type": "file"
|
||||
}],
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// When
|
||||
let contentTypes = contentTypeValues(state, [ "/one", "get" ])
|
||||
// Then
|
||||
expect(contentTypes.toJS().requestContentType).toEqual("multipart/form-data")
|
||||
})
|
||||
|
||||
it("should fallback to application/x-www-form-urlencoded if there is no consumes value, no file parameter, but there is a formData parameter", function(){
|
||||
// Given
|
||||
let state = fromJS({
|
||||
resolved: {
|
||||
paths: {
|
||||
"/one": {
|
||||
get: {
|
||||
"parameters": [{
|
||||
"type": "formData"
|
||||
}],
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// When
|
||||
let contentTypes = contentTypeValues(state, [ "/one", "get" ])
|
||||
// Then
|
||||
expect(contentTypes.toJS().requestContentType).toEqual("application/x-www-form-urlencoded")
|
||||
})
|
||||
|
||||
it("should be ok, if no operation found", function(){
|
||||
// Given
|
||||
let state = fromJS({ })
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
/* eslint-env mocha */
|
||||
import expect from "expect"
|
||||
import { fromJS } from "immutable"
|
||||
import { mapToList, validateNumber, validateInteger, validateParam } from "core/utils"
|
||||
import { mapToList, validateNumber, validateInteger, validateParam, validateFile, fromJSOrdered } from "core/utils"
|
||||
import win from "core/window"
|
||||
|
||||
describe("utils", function() {
|
||||
|
||||
@@ -157,6 +158,19 @@ describe("utils", function(){
|
||||
})
|
||||
})
|
||||
|
||||
describe("validateFile", function() {
|
||||
let errorMessage = "Value must be a file"
|
||||
|
||||
it("validates against objects which are instances of 'File'", function() {
|
||||
let fileObj = new win.File([], "Test File")
|
||||
expect(validateFile(fileObj)).toBeFalsy()
|
||||
expect(validateFile(null)).toBeFalsy()
|
||||
expect(validateFile(undefined)).toBeFalsy()
|
||||
expect(validateFile(1)).toEqual(errorMessage)
|
||||
expect(validateFile("string")).toEqual(errorMessage)
|
||||
})
|
||||
})
|
||||
|
||||
describe("validateParam", function() {
|
||||
let param = null
|
||||
let result = null
|
||||
@@ -171,6 +185,16 @@ describe("utils", function(){
|
||||
expect( result ).toEqual( ["Required field is not provided"] )
|
||||
})
|
||||
|
||||
it("validates required files", function() {
|
||||
param = fromJS({
|
||||
required: true,
|
||||
type: "file",
|
||||
value: undefined
|
||||
})
|
||||
result = validateParam( param, false )
|
||||
expect( result ).toEqual( ["Required field is not provided"] )
|
||||
})
|
||||
|
||||
it("validates required arrays", function() {
|
||||
param = fromJS({
|
||||
required: true,
|
||||
@@ -190,6 +214,7 @@ describe("utils", function(){
|
||||
})
|
||||
|
||||
it("validates numbers", function() {
|
||||
// string instead of a number
|
||||
param = fromJS({
|
||||
required: false,
|
||||
type: "number",
|
||||
@@ -197,9 +222,28 @@ describe("utils", function(){
|
||||
})
|
||||
result = validateParam( param, false )
|
||||
expect( result ).toEqual( ["Value must be a number"] )
|
||||
|
||||
// undefined value
|
||||
param = fromJS({
|
||||
required: false,
|
||||
type: "number",
|
||||
value: undefined
|
||||
})
|
||||
result = validateParam( param, false )
|
||||
expect( result ).toEqual( [] )
|
||||
|
||||
// null value
|
||||
param = fromJS({
|
||||
required: false,
|
||||
type: "number",
|
||||
value: null
|
||||
})
|
||||
result = validateParam( param, false )
|
||||
expect( result ).toEqual( [] )
|
||||
})
|
||||
|
||||
it("validates integers", function() {
|
||||
// string instead of integer
|
||||
param = fromJS({
|
||||
required: false,
|
||||
type: "integer",
|
||||
@@ -207,6 +251,24 @@ describe("utils", function(){
|
||||
})
|
||||
result = validateParam( param, false )
|
||||
expect( result ).toEqual( ["Value must be an integer"] )
|
||||
|
||||
// undefined value
|
||||
param = fromJS({
|
||||
required: false,
|
||||
type: "integer",
|
||||
value: undefined
|
||||
})
|
||||
result = validateParam( param, false )
|
||||
expect( result ).toEqual( [] )
|
||||
|
||||
// null value
|
||||
param = fromJS({
|
||||
required: false,
|
||||
type: "integer",
|
||||
value: null
|
||||
})
|
||||
result = validateParam( param, false )
|
||||
expect( result ).toEqual( [] )
|
||||
})
|
||||
|
||||
it("validates arrays", function() {
|
||||
@@ -244,4 +306,31 @@ describe("utils", function(){
|
||||
expect( result ).toEqual( [{index: 0, error: "Value must be an integer"}, {index: 1, error: "Value must be an integer"}] )
|
||||
})
|
||||
})
|
||||
|
||||
describe("fromJSOrdered", () => {
|
||||
it("should create an OrderedMap from an object", () => {
|
||||
const param = {
|
||||
value: "test"
|
||||
}
|
||||
|
||||
const result = fromJSOrdered(param).toJS()
|
||||
expect( result ).toEqual( { value: "test" } )
|
||||
})
|
||||
|
||||
it("should not use an object's length property for Map size", () => {
|
||||
const param = {
|
||||
length: 5
|
||||
}
|
||||
|
||||
const result = fromJSOrdered(param).toJS()
|
||||
expect( result ).toEqual( { length: 5 } )
|
||||
})
|
||||
|
||||
it("should create an OrderedMap from an array", () => {
|
||||
const param = [1, 1, 2, 3, 5, 8]
|
||||
|
||||
const result = fromJSOrdered(param).toJS()
|
||||
expect( result ).toEqual( [1, 1, 2, 3, 5, 8] )
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
@@ -1,64 +1,32 @@
|
||||
var path = require('path')
|
||||
var rules = [
|
||||
const path = require("path")
|
||||
const styleRules = require("./webpack.dist-style.config.js")
|
||||
|
||||
let rules = [
|
||||
{ test: /\.(worker\.js)(\?.*)?$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'worker-loader',
|
||||
loader: "worker-loader",
|
||||
options: {
|
||||
inline: true,
|
||||
name: '[name].js'
|
||||
name: "[name].js"
|
||||
}
|
||||
},
|
||||
{ loader: 'babel-loader' }
|
||||
]
|
||||
},
|
||||
{ test: /\.(css)(\?.*)?$/,
|
||||
use: [
|
||||
'style-loader',
|
||||
'css-loader',
|
||||
'postcss-loader'
|
||||
]
|
||||
},
|
||||
{ test: /\.(scss)(\?.*)?$/,
|
||||
use: [
|
||||
'style-loader',
|
||||
'css-loader',
|
||||
{
|
||||
loader: 'postcss-loader',
|
||||
options: { sourceMap: true }
|
||||
},
|
||||
{ loader: 'sass-loader',
|
||||
options: {
|
||||
outputStyle: 'expanded',
|
||||
sourceMap: true,
|
||||
sourceMapContents: 'true'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{ test: /\.(less)(\?.*)?$/,
|
||||
use: [
|
||||
'style-loader',
|
||||
'css-loader',
|
||||
{
|
||||
loader: 'postcss-loader',
|
||||
},
|
||||
'less-loader'
|
||||
{ loader: "babel-loader" }
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
module.exports = require('./make-webpack-config.js')(rules, {
|
||||
module.exports = require("./make-webpack-config.js")(rules, {
|
||||
_special: {
|
||||
separateStylesheets: false,
|
||||
separateStylesheets: true,
|
||||
minimize: true,
|
||||
sourcemaps: true,
|
||||
},
|
||||
|
||||
entry: {
|
||||
'swagger-ui-bundle': [
|
||||
'./src/polyfills',
|
||||
'./src/core/index.js'
|
||||
"swagger-ui-bundle": [
|
||||
"./src/polyfills",
|
||||
"./src/core/index.js"
|
||||
]
|
||||
},
|
||||
|
||||
|
||||
@@ -1,65 +1,32 @@
|
||||
var path = require('path')
|
||||
const path = require("path")
|
||||
const styleRules = require("./webpack.dist-style.config.js")
|
||||
|
||||
var rules = [
|
||||
let rules = [
|
||||
{ test: /\.(worker\.js)(\?.*)?$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'worker-loader',
|
||||
loader: "worker-loader",
|
||||
options: {
|
||||
inline: true,
|
||||
name: '[name].js'
|
||||
name: "[name].js"
|
||||
}
|
||||
},
|
||||
{ loader: 'babel-loader' }
|
||||
]
|
||||
},
|
||||
{ test: /\.(css)(\?.*)?$/,
|
||||
use: [
|
||||
'style-loader',
|
||||
'css-loader',
|
||||
'postcss-loader'
|
||||
]
|
||||
},
|
||||
{ test: /\.(scss)(\?.*)?$/,
|
||||
use: [
|
||||
'style-loader',
|
||||
'css-loader',
|
||||
{
|
||||
loader: 'postcss-loader',
|
||||
options: { sourceMap: true }
|
||||
},
|
||||
{ loader: 'sass-loader',
|
||||
options: {
|
||||
outputStyle: 'expanded',
|
||||
sourceMap: true,
|
||||
sourceMapContents: 'true'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{ test: /\.(less)(\?.*)?$/,
|
||||
use: [
|
||||
'style-loader',
|
||||
'css-loader',
|
||||
{
|
||||
loader: 'postcss-loader',
|
||||
},
|
||||
'less-loader'
|
||||
{ loader: "babel-loader" }
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
module.exports = require('./make-webpack-config.js')(rules, {
|
||||
module.exports = require("./make-webpack-config.js")(rules, {
|
||||
_special: {
|
||||
separateStylesheets: false,
|
||||
separateStylesheets: true,
|
||||
minimize: true,
|
||||
sourcemaps: true,
|
||||
},
|
||||
|
||||
entry: {
|
||||
'swagger-ui-standalone-preset': [
|
||||
'./src/polyfills',
|
||||
'./src/standalone/index.js'
|
||||
"swagger-ui-standalone-preset": [
|
||||
"./src/polyfills",
|
||||
"./src/standalone/index.js"
|
||||
]
|
||||
},
|
||||
|
||||
|
||||
@@ -1,66 +1,25 @@
|
||||
var path = require('path')
|
||||
var fs = require('fs')
|
||||
const path = require("path")
|
||||
const fs = require("fs")
|
||||
const nodeModules = fs.readdirSync("node_modules").filter(function(x) { return x !== ".bin" })
|
||||
var ExtractTextPlugin = require('extract-text-webpack-plugin')
|
||||
const styleRules = require("./webpack.dist-style.config.js")
|
||||
|
||||
var rules = [
|
||||
let rules = [
|
||||
{ test: /\.(worker\.js)(\?.*)?$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'worker-loader',
|
||||
loader: "worker-loader",
|
||||
options: {
|
||||
inline: true,
|
||||
name: '[name].js'
|
||||
name: "[name].js"
|
||||
}
|
||||
},
|
||||
{ loader: 'babel-loader' }
|
||||
{ loader: "babel-loader" }
|
||||
]
|
||||
},
|
||||
{ test: /\.(css)(\?.*)?$/,
|
||||
use: ExtractTextPlugin.extract({
|
||||
fallback: 'style-loader',
|
||||
use: [
|
||||
'css-loader',
|
||||
'postcss-loader'
|
||||
]
|
||||
})
|
||||
},
|
||||
{ test: /\.(scss)(\?.*)?$/,
|
||||
use: ExtractTextPlugin.extract({
|
||||
fallback: 'style-loader',
|
||||
use: [
|
||||
{
|
||||
loader: 'css-loader',
|
||||
options: { minimize: true }
|
||||
},
|
||||
{
|
||||
loader: 'postcss-loader',
|
||||
options: { sourceMap: true }
|
||||
},
|
||||
{ loader: 'sass-loader',
|
||||
options: {
|
||||
outputStyle: 'expanded',
|
||||
sourceMap: true,
|
||||
sourceMapContents: 'true'
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
},
|
||||
{ test: /\.(less)(\?.*)?$/,
|
||||
use: ExtractTextPlugin.extract({
|
||||
fallback: 'style-loader',
|
||||
use: ['css-loader',
|
||||
{
|
||||
loader: 'postcss-loader',
|
||||
},
|
||||
'less-loader'
|
||||
]
|
||||
})
|
||||
}
|
||||
]
|
||||
rules = rules.concat(styleRules)
|
||||
|
||||
module.exports = require('./make-webpack-config.js')(rules, {
|
||||
module.exports = require("./make-webpack-config.js")(rules, {
|
||||
_special: {
|
||||
separateStylesheets: true,
|
||||
minimize: true,
|
||||
|
||||
@@ -1,56 +1,46 @@
|
||||
var path = require('path')
|
||||
const path = require("path")
|
||||
|
||||
var rules = [
|
||||
const rules = [
|
||||
{ test: /\.(worker\.js)(\?.*)?$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'worker-loader',
|
||||
loader: "worker-loader",
|
||||
options: {
|
||||
inline: true
|
||||
}
|
||||
},
|
||||
{ loader: 'babel-loader' }
|
||||
{ loader: "babel-loader" }
|
||||
]
|
||||
},
|
||||
{ test: /\.(jsx)(\?.*)?$/,
|
||||
use: [
|
||||
{ loader: 'react-hot-loader' },
|
||||
{ loader: 'babel-loader' }
|
||||
{ loader: "react-hot-loader" },
|
||||
{ loader: "babel-loader" }
|
||||
]
|
||||
},
|
||||
{ test: /\.(css)(\?.*)?$/,
|
||||
use: [
|
||||
'style-loader',
|
||||
'css-loader',
|
||||
'postcss-loader'
|
||||
"style-loader",
|
||||
"css-loader",
|
||||
"postcss-loader"
|
||||
]
|
||||
},
|
||||
{ test: /\.(scss)(\?.*)?$/,
|
||||
use: [
|
||||
'style-loader',
|
||||
'css-loader',
|
||||
"style-loader",
|
||||
"css-loader",
|
||||
{
|
||||
loader: 'postcss-loader',
|
||||
loader: "postcss-loader",
|
||||
options: { sourceMap: true }
|
||||
},
|
||||
{ loader: 'sass-loader',
|
||||
{ loader: "sass-loader",
|
||||
options: {
|
||||
outputStyle: 'expanded',
|
||||
outputStyle: "expanded",
|
||||
sourceMap: true,
|
||||
sourceMapContents: 'true'
|
||||
sourceMapContents: "true"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{ test: /\.(less)(\?.*)?$/,
|
||||
use: [
|
||||
'style-loader',
|
||||
'css-loader',
|
||||
{
|
||||
loader: 'postcss-loader',
|
||||
},
|
||||
'less-loader'
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
@@ -60,25 +50,26 @@ module.exports = require("./make-webpack-config")(rules, {
|
||||
},
|
||||
devtool: "eval",
|
||||
entry: {
|
||||
'swagger-ui-bundle': [
|
||||
'./src/polyfills',
|
||||
'./src/core/index.js'
|
||||
"swagger-ui-bundle": [
|
||||
"./src/polyfills",
|
||||
"./src/core/index.js"
|
||||
],
|
||||
'swagger-ui-standalone-preset': [
|
||||
'./src/polyfills',
|
||||
'./src/standalone/index.js',
|
||||
"swagger-ui-standalone-preset": [
|
||||
"./src/style/main.scss",
|
||||
"./src/polyfills",
|
||||
"./src/standalone/index.js",
|
||||
]
|
||||
},
|
||||
output: {
|
||||
pathinfo: true,
|
||||
filename: '[name].js',
|
||||
filename: "[name].js",
|
||||
library: "[name]",
|
||||
libraryTarget: "umd",
|
||||
chunkFilename: "[id].js"
|
||||
},
|
||||
devServer: {
|
||||
port: 3200,
|
||||
contentBase: path.join(__dirname, 'dev-helpers'),
|
||||
contentBase: path.join(__dirname, "dev-helpers"),
|
||||
publicPath: "/",
|
||||
noInfo: true,
|
||||
hot: true,
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
var config = require("./webpack-dist.config.js")
|
||||
const config = require("./webpack-dist.config.js")
|
||||
|
||||
module.exports = config
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
const webpack = require('webpack')
|
||||
const path = require('path')
|
||||
const deepMerge = require('deepmerge')
|
||||
const webpackConfig = require('./webpack-dist-bundle.config.js')
|
||||
const DEPS_CHECK_DIR = require('./package.json').config.deps_check_dir
|
||||
const path = require("path")
|
||||
const deepMerge = require("deepmerge")
|
||||
const webpackConfig = require("./webpack-dist-bundle.config.js")
|
||||
const DEPS_CHECK_DIR = require("./package.json").config.deps_check_dir
|
||||
|
||||
module.exports = deepMerge(
|
||||
webpackConfig, {
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
module.exports = require("./make-webpack-config")({
|
||||
|
||||
});
|
||||
})
|
||||
34
webpack.dist-style.config.js
Normal file
34
webpack.dist-style.config.js
Normal file
@@ -0,0 +1,34 @@
|
||||
const ExtractTextPlugin = require("extract-text-webpack-plugin")
|
||||
|
||||
module.exports = [{
|
||||
test: /\.(css)(\?.*)?$/,
|
||||
use: ExtractTextPlugin.extract({
|
||||
fallback: "style-loader",
|
||||
use: [
|
||||
"css-loader",
|
||||
"postcss-loader"
|
||||
]
|
||||
})
|
||||
},
|
||||
{ test: /\.(scss)(\?.*)?$/,
|
||||
use: ExtractTextPlugin.extract({
|
||||
fallback: "style-loader",
|
||||
use: [
|
||||
{
|
||||
loader: "css-loader",
|
||||
options: { minimize: true }
|
||||
},
|
||||
{
|
||||
loader: "postcss-loader",
|
||||
options: { sourceMap: true }
|
||||
},
|
||||
{ loader: "sass-loader",
|
||||
options: {
|
||||
outputStyle: "expanded",
|
||||
sourceMap: true,
|
||||
sourceMapContents: "true"
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
}]
|
||||
Reference in New Issue
Block a user