提交 b329b034 编写于 作者: K Kyle 提交者: GitHub

Merge branch 'master' into support-basic-auth-for-authorization-code-grant

......@@ -5,3 +5,4 @@ node_modules
npm-debug.log*
.eslintcache
package-lock.json
*.iml
......@@ -16,7 +16,7 @@ deploy:
email: apiteam@swagger.io
skip_cleanup: true
api_key:
secure: "IJkLaACa+rfERf1O5nwlqOyuo9sbul3FBhBt4Un9P+DvEet3AoDPV9NQVLd8SkmQYKGbGQWF4BIdjrO5nqFD6Te+JTeUX5Uo/DFS/fu9qw1xv0dQpvbJFuoYnnFlbzGTEs4CFa8lbu3ZromFHQGOQxRobjsG1Kf0dWFSSzmND3g="
secure: "YKk5L1BL4oAixvLjWp+i85fNFXK85HKOlUt6QypkZkt23My5aywuYsv5VCLjjOtuWc72zbmOzP82DTBsuRswCRViXWCiNYhl42QTdvadHu0uIlM/FL6aNlvPpzXIws4bMvz1aYOTzFTnSnNuvCTzF1daW0+2ClOo3r0nLEdDfFg="
on:
tags: true
repo: swagger-api/swagger-ui
......
......@@ -20,14 +20,15 @@ For the older version of swagger-ui, refer to the [*2.x branch*](https://github.
## Compatibility
The OpenAPI Specification has undergone 4 revisions since initial creation in 2010. Compatibility between swagger-ui and the OpenAPI Specification is as follows:
Swagger UI Version | Release Date | OpenAPI Spec compatibility | Notes | Status
------------------ | ------------ | -------------------------- | ----- | ------
3.0.18 | 2017-07-07 | 2.0 | [tag v3.0.18](https://github.com/swagger-api/swagger-ui/tree/v3.0.18) |
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) |
1.0.13 | 2013-03-08 | 1.1, 1.2 | [tag v1.0.13](https://github.com/swagger-api/swagger-ui/tree/v1.0.13) |
1.0.1 | 2011-10-11 | 1.0, 1.1 | [tag v1.0.1](https://github.com/swagger-api/swagger-ui/tree/v1.0.1) |
Swagger UI Version | Release Date | OpenAPI Spec compatibility | Notes
------------------ | ------------ | -------------------------- | -----
3.1.2 | 2017-07-31 | 2.0, 3.0 | [tag v3.1.2](https://github.com/swagger-api/swagger-ui/tree/v3.1.2)
3.0.21 | 2017-07-26 | 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)
1.0.13 | 2013-03-08 | 1.1, 1.2 | [tag v1.0.13](https://github.com/swagger-api/swagger-ui/tree/v1.0.13)
1.0.1 | 2011-10-11 | 1.0, 1.1 | [tag v1.0.1](https://github.com/swagger-api/swagger-ui/tree/v1.0.1)
### How to run
......@@ -67,7 +68,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.
......@@ -82,17 +82,17 @@ To use swagger-ui's bundles, you should take a look at the [source of swagger-ui
```javascript
const ui = SwaggerUIBundle({
url: "http://petstore.swagger.io/v2/swagger.json",
dom_id: '#swagger-ui',
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIStandalonePreset
],
plugins: [
SwaggerUIBundle.plugins.DownloadUrl
],
layout: "StandaloneLayout"
})
url: "http://petstore.swagger.io/v2/swagger.json",
dom_id: '#swagger-ui',
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIStandalonePreset
],
plugins: [
SwaggerUIBundle.plugins.DownloadUrl
],
layout: "StandaloneLayout"
})
```
#### OAuth2 configuration
......@@ -140,6 +140,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
......@@ -149,6 +150,7 @@ displayOperationId | Controls the display of operationId in operations list. The
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
......@@ -238,6 +240,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
......
......@@ -11,15 +11,15 @@
<style>
html
{
box-sizing: border-box;
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
box-sizing: border-box;
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
*,
*:before,
*:after
{
box-sizing: inherit;
box-sizing: inherit;
}
body {
......@@ -34,7 +34,7 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position:absolute;width:0;height:0">
<defs>
<symbol viewBox="0 0 20 20" id="unlocked">
<path d="M15.8 8H14V5.6C14 2.703 12.665 1 10 1 7.334 1 6 2.703 6 5.6V6h2v-.801C8 3.754 8.797 3 10 3c1.203 0 2 .754 2 2.199V8H4c-.553 0-1 .646-1 1.199V17c0 .549.428 1.139.951 1.307l1.197.387C5.672 18.861 6.55 19 7.1 19h5.8c.549 0 1.428-.139 1.951-.307l1.196-.387c.524-.167.953-.757.953-1.306V9.199C17 8.646 16.352 8 15.8 8z"></path>
<path d="M15.8 8H14V5.6C14 2.703 12.665 1 10 1 7.334 1 6 2.703 6 5.6V6h2v-.801C8 3.754 8.797 3 10 3c1.203 0 2 .754 2 2.199V8H4c-.553 0-1 .646-1 1.199V17c0 .549.428 1.139.951 1.307l1.197.387C5.672 18.861 6.55 19 7.1 19h5.8c.549 0 1.428-.139 1.951-.307l1.196-.387c.524-.167.953-.757.953-1.306V9.199C17 8.646 16.352 8 15.8 8z"></path>
</symbol>
<symbol viewBox="0 0 20 20" id="locked">
......@@ -70,34 +70,34 @@
<script src="./swagger-ui-bundle.js"> </script>
<script src="./swagger-ui-standalone-preset.js"> </script>
<script>
window.onload = function() {
window["SwaggerUIBundle"] = window["swagger-ui-bundle"]
window["SwaggerUIStandalonePreset"] = window["swagger-ui-standalone-preset"]
// Build a system
const ui = SwaggerUIBundle({
url: "http://petstore.swagger.io/v2/swagger.json",
dom_id: '#swagger-ui',
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIStandalonePreset
],
plugins: [
SwaggerUIBundle.plugins.DownloadUrl
],
layout: "StandaloneLayout"
})
window.ui = ui
ui.initOAuth({
clientId: "your-client-id",
clientSecret: "your-client-secret-if-required",
realm: "your-realms",
appName: "your-app-name",
scopeSeparator: " ",
additionalQueryStringParams: {}
})
}
window.onload = function() {
window["SwaggerUIBundle"] = window["swagger-ui-bundle"]
window["SwaggerUIStandalonePreset"] = window["swagger-ui-standalone-preset"]
// Build a system
const ui = SwaggerUIBundle({
url: "http://petstore.swagger.io/v2/swagger.json",
dom_id: '#swagger-ui',
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIStandalonePreset
],
plugins: [
SwaggerUIBundle.plugins.DownloadUrl
],
layout: "StandaloneLayout"
})
window.ui = ui
ui.initOAuth({
clientId: "your-client-id",
clientSecret: "your-client-secret-if-required",
realm: "your-realms",
appName: "your-app-name",
scopeSeparator: " ",
additionalQueryStringParams: {}
})
}
</script>
</body>
......
......@@ -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
......
此差异已折叠。
{"version":3,"file":"swagger-ui-bundle.js","sources":["webpack:///swagger-ui-bundle.js"],"mappings":"AAAA;;;;;AAsyKA;;;;;;AA8qEA;;;;;;;;;;;;;;;;;;;;;;;;;;AA6nTA;;;;;;;;;;;;;;AAu8JA;;;;;;;;;AAkgnBA;;;;;AAigQA;;;;;;AAqpVA","sourceRoot":""}
\ No newline at end of file
{"version":3,"file":"swagger-ui-bundle.js","sources":["webpack:///swagger-ui-bundle.js"],"mappings":"AAAA;;;;;AAoyKA;;;;;;AAy+EA;;;;;;;;;;;;;;;;;;;;;;;;;;AA00TA;;;;;;;;;;;;;;AAs8JA;;;;;;;;;AA+5oBA;;;;;AA2lQA;AAm4DA;;;;;;AAo4YA;;;;;;AA0iaA;AAumvBA","sourceRoot":""}
\ No newline at end of file
{"version":3,"file":"swagger-ui-standalone-preset.js","sources":["webpack:///swagger-ui-standalone-preset.js"],"mappings":"AAAA;;;;;AA40CA;;;;;;AA4kFA","sourceRoot":""}
\ No newline at end of file
{"version":3,"file":"swagger-ui-standalone-preset.js","sources":["webpack:///swagger-ui-standalone-preset.js"],"mappings":"AAAA;;;;;AA00CA;;;;;;AAmlFA","sourceRoot":""}
\ No newline at end of file
此差异已折叠。
{"version":3,"file":"swagger-ui.css","sources":[],"mappings":";;;","sourceRoot":""}
\ No newline at end of file
{"version":3,"file":"swagger-ui.css","sources":[],"mappings":"","sourceRoot":""}
\ No newline at end of file
此差异已折叠。
{"version":3,"file":"swagger-ui.js","sources":["webpack:///swagger-ui.js"],"mappings":"AAAA;;;;;;AAopaA","sourceRoot":""}
\ No newline at end of file
{"version":3,"file":"swagger-ui.js","sources":["webpack:///swagger-ui.js"],"mappings":"AAAA;;;;;;AAwpcA","sourceRoot":""}
\ No newline at end of file
# 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.
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,35 +78,36 @@ 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()
})
}))
delete options._special
var completeConfig = deepExtend({
var completeConfig = deepExtend({
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,
......
{
"name": "swagger-ui",
"version": "3.0.18",
"version": "3.1.2",
"main": "dist/swagger-ui.js",
"repository": "git@github.com:swagger-api/swagger-ui.git",
"contributors": [
......@@ -58,6 +58,7 @@
"react-height": "^2.0.0",
"react-hot-loader": "1.3.1",
"react-immutable-proptypes": "2.1.0",
"react-markdown": "^2.5.0",
"react-motion": "0.4.4",
"react-object-inspector": "0.2.1",
"react-redux": "^4.x.x",
......@@ -68,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.17",
"swagger-client": "3.0.19",
"url-parse": "^1.1.8",
"whatwg-fetch": "0.11.1",
"worker-loader": "^0.7.1",
......@@ -108,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",
......
......@@ -15,18 +15,21 @@ export default class ArrayModel extends Component {
}
render(){
let { getComponent, required, schema, depth, expandDepth } = this.props
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")
return <span className="model">
const titleEl = title &&
<span className="model-title">
<span className="model-title__text">{ schema.get("title") }</span>
<span className="model-title__text">{ title }</span>
</span>
<ModelCollapse collapsed={ depth > expandDepth } collapsedContent="[...]">
return <span className="model">
<ModelCollapse title={titleEl} collapsed={ depth > expandDepth } collapsedContent="[...]">
[
<span><Model { ...this.props } schema={ items } required={ false }/></span>
]
......@@ -41,4 +44,4 @@ export default class ArrayModel extends Component {
{ required && <span style={{ color: "red" }}>*</span>}
</span>
}
}
\ No newline at end of file
}
......@@ -8,7 +8,7 @@ const noop = ()=>{}
export default class ContentType extends React.Component {
static propTypes = {
contentTypes: PropTypes.oneOfType([ImPropTypes.list, ImPropTypes.set]),
contentTypes: PropTypes.oneOfType([ImPropTypes.list, ImPropTypes.set, ImPropTypes.seq]),
value: PropTypes.string,
onChange: PropTypes.func,
className: PropTypes.string
......@@ -22,7 +22,9 @@ export default class ContentType extends React.Component {
componentDidMount() {
// Needed to populate the form, initially
this.props.onChange(this.props.contentTypes.first())
if(this.props.contentTypes) {
this.props.onChange(this.props.contentTypes.first())
}
}
onChangeWrapper = e => this.props.onChange(e.target.value)
......
......@@ -15,7 +15,7 @@ class Path extends React.Component {
return (
<pre className="base-url">
[ Base url: {host}{basePath}]
[ Base URL: {host}{basePath} ]
</pre>
)
}
......@@ -88,12 +88,13 @@ export default class Info extends React.Component {
const { url:externalDocsUrl, description:externalDocsDescription } = (externalDocs || fromJS({})).toJS()
const Markdown = getComponent("Markdown")
const VersionStamp = getComponent("VersionStamp")
return (
<div className="info">
<hgroup className="main">
<h2 className="title" >{ title }
{ version && <small><pre className="version"> { version } </pre></small> }
{ version && <VersionStamp version={version}></VersionStamp> }
</h2>
{ host || basePath ? <Path host={ host } basePath={ basePath } /> : null }
{ url && <a target="_blank" href={ url }><span className="url"> { url } </span></a> }
......
......@@ -129,7 +129,8 @@ export class Select extends React.Component {
value: PropTypes.any,
onChange: PropTypes.func,
multiple: PropTypes.bool,
allowEmptyValue: PropTypes.bool
allowEmptyValue: PropTypes.bool,
className: PropTypes.string
}
static defaultProps = {
......@@ -142,7 +143,7 @@ export class Select extends React.Component {
let value
if (props.value !== undefined) {
if (props.value) {
value = props.value
} else {
value = props.multiple ? [""] : ""
......@@ -178,7 +179,7 @@ export class Select extends React.Component {
let value = this.state.value.toJS ? this.state.value.toJS() : this.state.value
return (
<select multiple={ multiple } value={ value } onChange={ this.onChange } >
<select className={this.props.className} multiple={ multiple } value={ value } onChange={ this.onChange } >
{ allowEmptyValue ? <option value="">--</option> : null }
{
allowedValues.map(function (item, key) {
......
......@@ -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()
......@@ -31,6 +36,15 @@ export default class BaseLayout extends React.Component {
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/>
......
......@@ -5,12 +5,14 @@ export default class ModelCollapse extends Component {
static propTypes = {
collapsedContent: PropTypes.any,
collapsed: PropTypes.bool,
children: PropTypes.any
children: PropTypes.any,
title: PropTypes.element
}
static defaultProps = {
collapsedContent: "{...}",
collapsed: true,
title: null
}
constructor(props, context) {
......@@ -31,11 +33,15 @@ export default class ModelCollapse extends Component {
}
render () {
return (<span>
<span onClick={ this.toggleCollapsed } style={{ "cursor": "pointer" }}>
<span className={ "model-toggle" + ( this.state.collapsed ? " collapsed" : "" ) }></span>
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>
{ this.state.collapsed ? this.state.collapsedContent : this.props.children }
</span>)
)
}
}
\ No newline at end of file
......@@ -35,9 +35,9 @@ export default class ModelExample extends React.Component {
<li className={ "tabitem" + ( isExecute || this.state.activeTab === "example" ? " active" : "") }>
<a className="tablinks" data-name="example" onClick={ this.activeTab }>Example Value</a>
</li>
<li className={ "tabitem" + ( !isExecute && this.state.activeTab === "model" ? " active" : "") }>
{ schema ? <li className={ "tabitem" + ( !isExecute && this.state.activeTab === "model" ? " active" : "") }>
<a className={ "tablinks" + ( isExecute ? " inactive" : "" )} data-name="model" onClick={ this.activeTab }>Model</a>
</li>
</li> : null }
</ul>
<div>
{
......
......@@ -17,6 +17,9 @@ export default class Model extends Component {
if ( ref.indexOf("#/definitions/") !== -1 ) {
return ref.replace(/^.*#\/definitions\//, "")
}
if ( ref.indexOf("#/components/schemas/") !== -1 ) {
return ref.replace("#/components/schemas/", "")
}
}
getRefSchema =( model )=> {
......@@ -26,7 +29,7 @@ export default class Model extends Component {
}
render () {
let { schema, getComponent, required, name, isRef } = this.props
let { getComponent, specSelectors, schema, required, name, isRef } = this.props
let ObjectModel = getComponent("ObjectModel")
let ArrayModel = getComponent("ArrayModel")
let PrimitiveModel = getComponent("PrimitiveModel")
......@@ -34,6 +37,8 @@ export default class Model extends Component {
let modelName = $$ref && this.getModelName( $$ref )
let modelSchema, type
const deprecated = specSelectors.isOAS3() && schema.get("deprecated")
if ( schema && (schema.get("type") || schema.get("properties")) ) {
modelSchema = schema
} else if ( $$ref ) {
......@@ -47,17 +52,30 @@ export default class Model extends Component {
switch(type) {
case "object":
return <ObjectModel className="object" { ...this.props } schema={ modelSchema }
name={ name || modelName }
isRef={ isRef!== undefined ? isRef : !!$$ref }/>
return <ObjectModel
className="object" { ...this.props }
schema={ modelSchema }
name={ name || modelName }
deprecated={deprecated}
isRef={ isRef!== undefined ? isRef : !!$$ref } />
case "array":
return <ArrayModel className="array" { ...this.props } schema={ modelSchema } required={ required } />
return <ArrayModel
className="array" { ...this.props }
schema={ modelSchema }
name={ name || modelName }
deprecated={deprecated}
required={ required } />
case "string":
case "number":
case "integer":
case "boolean":
default:
return <PrimitiveModel getComponent={ getComponent } schema={ modelSchema } required={ required }/>
}
return <PrimitiveModel
{ ...this.props }
getComponent={ getComponent }
schema={ modelSchema }
name={ name || modelName }
deprecated={deprecated}
required={ required }/> }
}
}
\ No newline at end of file
}
......@@ -24,11 +24,11 @@ export default class Models extends Component {
return <section className={ showModels ? "models is-open" : "models"}>
<h4 onClick={() => layoutActions.show("models", !showModels)}>
<span>Models</span>
<svg width="20" height="20">
<use xlinkHref="#large-arrow" />
<svg className="arrow" width="20" height="20">
<use xlinkHref={showModels ? "#large-arrow-down" : "#large-arrow"} />
</svg>
</h4>
<Collapse isOpened={showModels} animated>
<Collapse isOpened={showModels}>
{
definitions.entrySeq().map( ( [ name, model ])=>{
return <div className="model-container" key={ `models-section-${name}` }>
......
......@@ -23,7 +23,7 @@ export default class ObjectModel extends Component {
let properties = schema.get("properties")
let additionalProperties = schema.get("additionalProperties")
let title = schema.get("title") || name
let required = schema.get("required")
let requiredProperties = schema.get("required")
const JumpToPath = getComponent("JumpToPath", true)
const Markdown = getComponent("Markdown")
......@@ -38,15 +38,13 @@ export default class ObjectModel extends Component {
}
</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">
{
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>
}
<ModelCollapse collapsed={ depth > expandDepth } collapsedContent={ collapsedContent }>
<ModelCollapse title={titleEl} collapsed={ depth > expandDepth } collapsedContent={ collapsedContent }>
<span className="brace-open object">{ braceOpen }</span>
{
!isRef ? null : <JumpToPathSection name={ name }/>
......@@ -65,14 +63,16 @@ export default class ObjectModel extends Component {
{
!(properties && properties.size) ? null : properties.entrySeq().map(
([key, value]) => {
let isRequired = List.isList(required) && required.contains(key)
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 }:</td>
<td style={ propertyStyle }>
{ key }{ isRequired && <span style={{ color: "red" }}>*</span> }
</td>
<td style={{ verticalAlign: "top" }}>
<Model key={ `object-${name}-${key}_${value}` } { ...props }
required={ isRequired }
......
......@@ -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,13 +157,18 @@ 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" } >
<span>{path}</span>
<JumpToPath path={jumpToKey} />
</span>
<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>
{ !showSummary ? null :
<div className="opblock-summary-description">
......@@ -191,13 +201,16 @@ 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
}
<Parameters
parameters={parameters}
operation={operation}
onChangeKey={onChangeKey}
onTryoutClick = { this.onTryoutClick }
onCancelClick = { this.onCancelClick }
......
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,15 @@ export default class Operations extends React.Component {
const Collapse = getComponent("Collapse")
let showSummary = layoutSelectors.showSummary()
let { docExpansion, displayOperationId, displayRequestDuration, maxDisplayedTags } = getConfigs()
let {
docExpansion,
displayOperationId,
displayRequestDuration,
maxDisplayedTags,
deepLinking
} = getConfigs()
const isDeepLinkingEnabled = deepLinking && deepLinking !== "false"
let filter = layoutSelectors.currentFilter()
......@@ -62,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" }>
<span>{tag}</span>
<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 }
......@@ -81,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"))
......
......@@ -72,7 +72,9 @@ export default class Parameters extends Component {
return (
<div className="opblock-section">
<div className="opblock-section-header">
<h4 className="opblock-title">Parameters</h4>
<div className="tab-header">
<h4 className="opblock-title">Parameters</h4>
</div>
{ allowTryItOut ? (
<TryItOutButton enabled={ tryItOutEnabled } onCancelClick={ onCancelClick } onTryoutClick={ onTryoutClick } />
) : null }
......
......@@ -3,25 +3,20 @@ import PropTypes from "prop-types"
import Remarkable from "react-remarkable"
import sanitize from "sanitize-html"
const sanitizeOptions = {
textFilter: function(text) {
return text
.replace(/&quot;/g, "\"")
}
}
function Markdown({ source }) {
const sanitized = sanitize(source, sanitizeOptions)
const sanitized = sanitizer(source)
// sometimes the sanitizer returns "undefined" as a string
if(!source || !sanitized || sanitized === "undefined") {
return null
}
return <Remarkable
options={{html: true, typographer: true, linkify: true, linkTarget: "_blank"}}
source={sanitized}
></Remarkable>
return <div className="markdown">
<Remarkable
options={{html: true, typographer: true, breaks: true, linkify: true, linkTarget: "_blank"}}
source={sanitized}
></Remarkable>
</div>
}
Markdown.propTypes = {
......@@ -29,3 +24,14 @@ Markdown.propTypes = {
}
export default Markdown
const sanitizeOptions = {
textFilter: function(text) {
return text
.replace(/&quot;/g, "\"")
}
}
export function sanitizer(str) {
return sanitize(str, sanitizeOptions)
}
......@@ -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)) {
......
import React from "react"
import PropTypes from "prop-types"
import { fromJS } from "immutable"
import { fromJS, Seq } from "immutable"
import { getSampleSchema } from "core/utils"
const getExampleComponent = ( sampleResponse, examples, HighlightCode ) => {
......@@ -31,6 +31,13 @@ const getExampleComponent = ( sampleResponse, examples, HighlightCode ) => {
}
export default class Response extends React.Component {
constructor(props, context) {
super(props, context)
this.state = {
responseContentType: ""
}
}
static propTypes = {
code: PropTypes.string.isRequired,
......@@ -59,16 +66,29 @@ export default class Response extends React.Component {
} = this.props
let { inferSchema } = fn
let { isOAS3 } = specSelectors
let schema = inferSchema(response.toJS())
let headers = response.get("headers")
let examples = response.get("examples")
let links = response.get("links")
const Headers = getComponent("headers")
const HighlightCode = getComponent("highlightCode")
const ModelExample = getComponent("modelExample")
const Markdown = getComponent( "Markdown" )
let sampleResponse = schema ? getSampleSchema(schema, contentType, { includeReadOnly: true }) : null
const OperationLink = getComponent("operationLink")
const ContentType = getComponent("contentType")
var sampleResponse
var schema
if(isOAS3()) {
let oas3SchemaForContentType = response.getIn(["content", this.state.responseContentType, "schema"])
sampleResponse = oas3SchemaForContentType ? getSampleSchema(oas3SchemaForContentType.toJS(), this.state.responseContentType, { includeReadOnly: true }) : null
schema = oas3SchemaForContentType ? inferSchema(oas3SchemaForContentType.toJS()) : null
} else {
schema = inferSchema(response.toJS())
sampleResponse = schema ? getSampleSchema(schema, contentType, { includeReadOnly: true }) : null
}
let example = getExampleComponent( sampleResponse, examples, HighlightCode )
return (
......@@ -82,6 +102,12 @@ export default class Response extends React.Component {
<Markdown source={ response.get( "description" ) } />
</div>
{ isOAS3 ? <ContentType
value={this.state.responseContentType}
contentTypes={ response.get("content") ? response.get("content").keySeq() : Seq() }
onChange={(val) => this.setState({ responseContentType: val })}
className="response-content-type" /> : null }
{ example ? (
<ModelExample
getComponent={ getComponent }
......@@ -94,8 +120,15 @@ export default class Response extends React.Component {
<Headers headers={ headers }/>
) : null}
</td>
</td>
{specSelectors.isOAS3() ? <td>
{ links ?
links.toSeq().map((link, key) => {
return <OperationLink key={key} name={key} link={ link }/>
})
: <i>No links</i>}
</td> : null}
</tr>
)
}
......
......@@ -42,13 +42,13 @@ export default class Responses extends React.Component {
<div className="responses-wrapper">
<div className="opblock-section-header">
<h4>Responses</h4>
<label>
{ specSelectors.isOAS3() ? null : <label>
<span>Response content type</span>
<ContentType value={producesValue}
onChange={this.onChangeProducesWrapper}
contentTypes={produces}
className="execute-content-type"/>
</label>
</label> }
</div>
<div className="responses-inner">
{
......@@ -68,6 +68,7 @@ export default class Responses extends React.Component {
<tr className="responses-header">
<td className="col col_header response-col_status">Code</td>
<td className="col col_header response-col_description">Description</td>
{ specSelectors.isOAS3() ? <td className="col col_header response-col_description">Links</td> : null }
</tr>
</thead>
<tbody>
......
......@@ -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())
}
}
......
import React from "react"
import PropTypes from "prop-types"
const VersionStamp = ({ version }) => {
return <small><pre className="version"> { version } </pre></small>
}
VersionStamp.propTypes = {
version: PropTypes.string.isRequired
}
export default VersionStamp
......@@ -4,19 +4,21 @@ import System from "core/system"
import win from "core/window"
import ApisPreset from "core/presets/apis"
import * as AllPlugins from "core/plugins/all"
import { parseSeach, filterConfigs } from "core/utils"
const CONFIGS = [ "url", "urls", "urls.primaryName", "spec", "validatorUrl", "onComplete", "onFailure", "authorizations", "docExpansion", "maxDisplayedTags", "filter",
"apisSorter", "operationsSorter", "supportedSubmitMethods", "dom_id", "defaultModelRendering", "oauth2RedirectUrl",
"showRequestHeaders", "custom", "modelPropertyMacro", "parameterMacro", "displayOperationId" , "displayRequestDuration"]
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
......@@ -33,10 +35,12 @@ module.exports = function SwaggerUI(opts) {
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 )
......@@ -52,7 +56,7 @@ module.exports = function SwaggerUI(opts) {
store: { },
}
let queryConfig = parseSeach()
let queryConfig = parseSearch()
const constructorConfig = deepExtend({}, defaults, opts, queryConfig)
......@@ -95,7 +99,7 @@ module.exports = function SwaggerUI(opts) {
let localConfig = system.specSelectors.getLocalConfig ? system.specSelectors.getLocalConfig() : {}
let mergedConfig = deepExtend({}, localConfig, constructorConfig, fetchedConfig || {}, queryConfig)
store.setConfigs(filterConfigs(mergedConfig, CONFIGS))
store.setConfigs(mergedConfig)
if (fetchedConfig !== null) {
if (!queryConfig.url && typeof mergedConfig.spec === "object" && Object.keys(mergedConfig.spec).length) {
......
......@@ -57,7 +57,8 @@ export class JsonSchema_string extends Component {
if ( enumValue ) {
const Select = getComponent("Select")
return (<Select allowedValues={ enumValue }
return (<Select className={ errors.length ? "invalid" : ""}
allowedValues={ enumValue }
value={ value }
allowEmptyValue={ !required }
onChange={ this.onEnumChange }/>)
......@@ -121,6 +122,7 @@ export class JsonSchema_array extends PureComponent {
render() {
let { getComponent, required, schema, fn } = this.props
let errors = schema.errors || []
let itemSchema = fn.inferSchema(schema.items)
const JsonSchemaForm = getComponent("JsonSchemaForm")
......@@ -131,19 +133,17 @@ export class JsonSchema_array extends PureComponent {
if ( enumValue ) {
const Select = getComponent("Select")
return (<Select multiple={ true }
return (<Select className={ errors.length ? "invalid" : ""}
multiple={ true }
value={ value }
allowedValues={ enumValue }
allowEmptyValue={ !required }
onChange={ this.onEnumChange }/>)
}
let errors = schema.errors || []
return (
<div>
{ !value || value.count() < 1 ?
(errors.length ? <span style={{ color: "red", fortWeight: "bold" }}>{ errors[0] }</span> : null) :
{ !value || value.count() < 1 ? null :
value.map( (item,i) => {
let schema = Object.assign({}, itemSchema)
if ( errors.length ) {
......@@ -153,12 +153,12 @@ export class JsonSchema_array extends PureComponent {
return (
<div key={i} className="json-schema-form-item">
<JsonSchemaForm fn={fn} getComponent={getComponent} value={item} onChange={(val) => this.onItemChange(val, i)} schema={schema} />
<Button className="json-schema-form-item-remove" onClick={()=> this.removeItem(i)} > - </Button>
<Button className="btn btn-sm json-schema-form-item-remove" onClick={()=> this.removeItem(i)} > - </Button>
</div>
)
}).toArray()
}
<Button className="json-schema-form-item-add" onClick={this.addItem}> Add item </Button>
<Button className={`btn btn-sm json-schema-form-item-add ${errors.length ? "invalid" : null}`} onClick={this.addItem}> Add item </Button>
</div>
)
}
......@@ -170,12 +170,14 @@ export class JsonSchema_boolean extends Component {
onEnumChange = (val) => this.props.onChange(val)
render() {
let { getComponent, required, value } = this.props
let { getComponent, value, schema } = this.props
let errors = schema.errors || []
const Select = getComponent("Select")
return (<Select value={ String(value) }
return (<Select className={ errors.length ? "invalid" : ""}
value={ String(value) }
allowedValues={ fromJS(["true", "false"]) }
allowEmptyValue={ !required }
allowEmptyValue={ true }
onChange={ this.onEnumChange }/>)
}
}
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 = {}
......
export const setHash = (value) => {
if(value) {
return history.pushState(null, null, `#${value}`)
} else {
return window.location.hash = ""
}
}
// 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
}
}
}
}
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)
}
}
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
}
import React from "react"
import PropTypes from "prop-types"
const Callbacks = (props) => {
let { callbacks, getComponent } = props
// const Markdown = getComponent("Markdown")
const Operation = getComponent("operation", true)
if(!callbacks) {
return <span>No callbacks</span>
}
let callbackElements = callbacks.map((callback, callbackName) => {
return <div key={callbackName}>
<h2>{callbackName}</h2>
{ callback.map((pathItem, pathItemName) => {
return <div key={pathItemName}>
{ pathItem.map((operation, method) => {
return <Operation
operation={operation}
key={method}
method={method}
isShownKey={["callbacks", operation.get("id"), callbackName]}
path={pathItemName}
allowTryItOut={false}
{...props}></Operation>
// return <pre>{JSON.stringify(operation)}</pre>
}) }
</div>
}) }
</div>
// return <div>
// <h2>{name}</h2>
// {callback.description && <Markdown source={callback.description}/>}
// <pre>{JSON.stringify(callback)}</pre>
// </div>
})
return <div>
{callbackElements}
</div>
}
Callbacks.propTypes = {
getComponent: PropTypes.func.isRequired,
callbacks: PropTypes.array.isRequired
}
export default Callbacks
import Callbacks from "./callbacks"
import RequestBody from "./request-body"
import OperationLink from "./operation-link.jsx"
export default {
Callbacks,
RequestBody,
operationLink: OperationLink
}
import React, { Component } from "react"
import PropTypes from "prop-types"
import ImPropTypes from "react-immutable-proptypes"
class OperationLink extends Component {
render() {
const { link, name } = this.props
let targetOp = link.get("operationId") || link.get("operationRef")
let parameters = link.get("parameters") && link.get("parameters").toJS()
let description = link.get("description")
return <span>
<div style={{ padding: "5px 2px" }}>{name}{description ? `: ${description}` : ""}</div>
<pre>
Operation `{targetOp}`<br /><br />
Parameters {padString(0, JSON.stringify(parameters, null, 2)) || "{}"}<br />
</pre>
</span>
}
}
function padString(n, string) {
if(typeof string !== "string") { return "" }
return string
.split("\n")
.map((line, i) => i > 0 ? Array(n + 1).join(" ") + line : line)
.join("\n")
}
OperationLink.propTypes = {
link: ImPropTypes.orderedMap.isRequired,
name: PropTypes.String
}
export default OperationLink
import React from "react"
import PropTypes from "prop-types"
import ImPropTypes from "react-immutable-proptypes"
import { OrderedMap } from "immutable"
import { getSampleSchema } from "core/utils"
const RequestBody = ({ requestBody, getComponent, specSelectors, contentType }) => {
const Markdown = getComponent("Markdown")
const ModelExample = getComponent("modelExample")
const HighlightCode = getComponent("highlightCode")
const requestBodyDescription = (requestBody && requestBody.get("description")) || null
const requestBodyContent = (requestBody && requestBody.get("content")) || new OrderedMap()
contentType = contentType || requestBodyContent.keySeq().first()
const mediaTypeValue = requestBodyContent.get(contentType)
const sampleSchema = getSampleSchema(mediaTypeValue.get("schema").toJS(), contentType)
return <div>
{ requestBodyDescription &&
<Markdown source={requestBodyDescription} />
}
<ModelExample
getComponent={ getComponent }
specSelectors={ specSelectors }
expandDepth={1}
schema={mediaTypeValue.get("schema")}
example={<HighlightCode value={sampleSchema} />}
/>
</div>
}
RequestBody.propTypes = {
requestBody: ImPropTypes.orderedMap.isRequired,
getComponent: PropTypes.func.isRequired,
specSelectors: PropTypes.object.isRequired,
contentType: PropTypes.string.isRequired
}
export default RequestBody
import React from "react"
export function isOAS3(jsSpec) {
const oasVersion = jsSpec.get("openapi")
if(!oasVersion) {
return false
}
return oasVersion.startsWith("3.0.0")
}
export function isSwagger2(jsSpec) {
const swaggerVersion = jsSpec.get("swagger")
if(!swaggerVersion) {
return false
}
return swaggerVersion.startsWith("2")
}
export function OAS3ComponentWrapFactory(Component) {
return (Ori, system) => (props) => {
if(system && system.specSelectors && system.specSelectors.specJson) {
const spec = system.specSelectors.specJson()
if(isOAS3(spec)) {
return <Component {...props} {...system} Ori={Ori}></Component>
} else {
return <Ori {...props}></Ori>
}
} else {
console.warn("OAS3 wrapper: couldn't get spec")
return null
}
}
}
// import reducers from "./reducers"
// import * as actions from "./actions"
import * as wrapSelectors from "./wrap-selectors"
import components from "./components"
import wrapComponents from "./wrap-components"
export default function() {
return {
components,
wrapComponents,
statePlugins: {
spec: {
wrapSelectors
}
}
}
}
import Markdown from "./markdown"
import parameters from "./parameters"
import VersionStamp from "./version-stamp"
import OnlineValidatorBadge from "./online-validator-badge"
import Model from "./model"
import TryItOutButton from "./try-it-out-button"
export default {
Markdown,
parameters,
VersionStamp,
model: Model,
onlineValidatorBadge: OnlineValidatorBadge,
TryItOutButton
}
import React from "react"
import ReactMarkdown from "react-markdown"
import { OAS3ComponentWrapFactory } from "../helpers"
import { sanitizer } from "core/components/providers/markdown"
export default OAS3ComponentWrapFactory(({ source }) => { return source ? (
<ReactMarkdown
source={sanitizer(source)}
className={"renderedMarkdown"}
/>
) : null})
import React, { Component } from "react"
import PropTypes from "prop-types"
import { OAS3ComponentWrapFactory } from "../helpers"
import { Model } from "core/components/model"
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 { schema } = this.props
let classes = ["model-box"]
let isDeprecated = schema.get("deprecated") === true
let message = null
if(isDeprecated) {
classes.push("deprecated")
message = <span className="model-deprecated-warning">Deprecated:</span>
}
return <div className={classes.join(" ")}>
{message}
<Model { ...this.props }
depth={ 1 }
expandDepth={ this.props.expandDepth || 0 }
/>
</div>
}
}
export default OAS3ComponentWrapFactory(ModelComponent)
import { OAS3ComponentWrapFactory } from "../helpers"
// We're disabling the Online Validator Badge until the online validator
// can handle OAS3 specs.
export default OAS3ComponentWrapFactory(() => null)
import React, { Component } from "react"
import PropTypes from "prop-types"
import Im, { Map } from "immutable"
import ImPropTypes from "react-immutable-proptypes"
import { OAS3ComponentWrapFactory } from "../helpers"
// More readable, just iterate over maps, only
const eachMap = (iterable, fn) => iterable.valueSeq().filter(Im.Map.isMap).map(fn)
class Parameters extends Component {
constructor(props) {
super(props)
this.state = {
callbackVisible: false,
parametersVisible: true,
requestBodyContentType: ""
}
}
static propTypes = {
parameters: ImPropTypes.list.isRequired,
specActions: PropTypes.object.isRequired,
operation: PropTypes.object.isRequired,
getComponent: PropTypes.func.isRequired,
specSelectors: PropTypes.object.isRequired,
fn: PropTypes.object.isRequired,
tryItOutEnabled: PropTypes.bool,
allowTryItOut: PropTypes.bool,
onTryoutClick: PropTypes.func,
onCancelClick: PropTypes.func,
onChangeKey: PropTypes.array,
pathMethod: PropTypes.array.isRequired
}
static defaultProps = {
onTryoutClick: Function.prototype,
onCancelClick: Function.prototype,
tryItOutEnabled: false,
allowTryItOut: true,
onChangeKey: [],
}
onChange = ( param, value, isXml ) => {
let {
specActions: { changeParam },
onChangeKey,
} = this.props
changeParam( onChangeKey, param.get("name"), value, isXml)
}
onChangeConsumesWrapper = ( val ) => {
let {
specActions: { changeConsumesValue },
onChangeKey
} = this.props
changeConsumesValue(onChangeKey, val)
}
toggleTab = (tab) => {
if(tab === "parameters"){
return this.setState({
parametersVisible: true,
callbackVisible: false
})
}else if(tab === "callbacks"){
return this.setState({
callbackVisible: true,
parametersVisible: false
})
}
}
render(){
let {
onTryoutClick,
onCancelClick,
parameters,
allowTryItOut,
tryItOutEnabled,
fn,
getComponent,
specSelectors,
pathMethod,
operation
} = this.props
const ParameterRow = getComponent("parameterRow")
const TryItOutButton = getComponent("TryItOutButton")
const ContentType = getComponent("contentType")
const Callbacks = getComponent("Callbacks", true)
const RequestBody = getComponent("RequestBody", true)
const isExecute = tryItOutEnabled && allowTryItOut
const { isOAS3 } = specSelectors
const requestBody = operation.get("requestBody")
return (
<div className="opblock-section">
<div className="opblock-section-header">
<div className="tab-header">
<div onClick={() => this.toggleTab("parameters")} className={`tab-item ${this.state.parametersVisible && "active"}`}>
<h4 className="opblock-title"><span>Parameters</span></h4>
</div>
{ operation.get("callbacks") ?
(
<div onClick={() => this.toggleTab("callbacks")} className={`tab-item ${this.state.callbackVisible && "active"}`}>
<h4 className="opblock-title"><span>Callbacks</span></h4>
</div>
) : null
}
</div>
{ allowTryItOut ? (
<TryItOutButton enabled={ tryItOutEnabled } onCancelClick={ onCancelClick } onTryoutClick={ onTryoutClick } />
) : null }
</div>
{this.state.parametersVisible ? <div className="parameters-container">
{ !parameters.count() ? <div className="opblock-description-wrapper"><p>No parameters</p></div> :
<div className="table-container">
<table className="parameters">
<thead>
<tr>
<th className="col col_header parameters-col_name">Name</th>
<th className="col col_header parameters-col_description">Description</th>
</tr>
</thead>
<tbody>
{
eachMap(parameters, (parameter) => (
<ParameterRow fn={ fn }
getComponent={ getComponent }
param={ parameter }
key={ parameter.get( "name" ) }
onChange={ this.onChange }
onChangeConsumes={this.onChangeConsumesWrapper}
specSelectors={ specSelectors }
pathMethod={ pathMethod }
isExecute={ isExecute }/>
)).toArray()
}
</tbody>
</table>
</div>
}
</div> : "" }
{this.state.callbackVisible ? <div className="callbacks-container opblock-description-wrapper">
<Callbacks callbacks={Map(operation.get("callbacks"))} />
</div> : "" }
{
isOAS3() && requestBody && this.state.parametersVisible &&
<div className="opblock-section">
<div className="opblock-section-header">
<h4 className={`opblock-title parameter__name ${requestBody.get("required") && "required"}`}>Request body</h4>
<label>
<ContentType
value={this.state.requestBodyContentType}
contentTypes={ requestBody.get("content").keySeq() }
onChange={(val) => this.setState({ requestBodyContentType: val })}
className="body-param-content-type" />
</label>
</div>
<div className="opblock-description-wrapper">
<RequestBody
requestBody={requestBody}
contentType={this.state.requestBodyContentType}/>
</div>
</div>
}
</div>
)
}
}
export default OAS3ComponentWrapFactory(Parameters)
import { OAS3ComponentWrapFactory } from "../helpers"
export default OAS3ComponentWrapFactory(() => {
return null
})
import React from "react"
import { OAS3ComponentWrapFactory } from "../helpers"
export default OAS3ComponentWrapFactory((props) => {
const { Ori } = props
return <span>
<Ori {...props} />
<small style={{ backgroundColor: "#89bf04" }}>
<pre className="version">OAS3</pre>
</small>
</span>
})
import { createSelector } from "reselect"
import { Map } from "immutable"
import { isOAS3 as isOAS3Helper, isSwagger2 as isSwagger2Helper } from "./helpers"
// Helpers
function onlyOAS3(selector) {
return (ori, system) => (...args) => {
const spec = system.getSystem().specSelectors.specJson()
if(isOAS3Helper(spec)) {
return selector(...args)
} else {
return ori(...args)
}
}
}
const state = state => {
return state || Map()
}
const nullSelector = createSelector(() => null)
const OAS3NullSelector = onlyOAS3(nullSelector)
const specJson = createSelector(
state,
spec => spec.get("json", Map())
)
const specResolved = createSelector(
state,
spec => spec.get("resolved", Map())
)
const spec = state => {
let res = specResolved(state)
if(res.count() < 1)
res = specJson(state)
return res
}
// Wrappers
export const definitions = onlyOAS3(createSelector(
spec,
spec => spec.getIn(["components", "schemas"]) || Map()
))
export const host = OAS3NullSelector
export const basePath = OAS3NullSelector
export const consumes = OAS3NullSelector
export const produces = OAS3NullSelector
export const schemes = OAS3NullSelector
// New selectors
export const isOAS3 = (ori, system) => () => {
const spec = system.getSystem().specSelectors.specJson()
return isOAS3Helper(spec)
}
export const isSwagger2 = (ori, system) => () => {
const spec = system.getSystem().specSelectors.specJson()
return isSwagger2Helper(spec)
}
......@@ -46,6 +46,15 @@ export const spec = state => {
return res
}
export const isOAS3 = createSelector(
// isOAS3 is stubbed out here to work around an issue with injecting more selectors
// in the OAS3 plugin, and to ensure that the function is always available.
// It's not perfect, but our hybrid (core+plugin code) implementation for OAS3
// needs this. //KS
spec,
() => false
)
export const info = createSelector(
spec,
spec => returnSelfOrNewMap(spec && spec.get("info"))
......@@ -200,15 +209,22 @@ export const operationsWithTags = createSelector(
}
)
export const taggedOperations = ( state ) =>( { getConfigs } ) => {
let { operationsSorter }= getConfigs()
return operationsWithTags(state).map((ops, tag) => {
let sortFn = typeof operationsSorter === "function" ? operationsSorter
: sorters.operationsSorter[operationsSorter]
let operations = !sortFn ? ops : ops.sort(sortFn)
export const taggedOperations = (state) => ({ 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 Map({tagDetails: tagDetails(state, tag), operations: operations})})
return Map({ tagDetails: tagDetails(state, tag), operations: operations })
})
}
export const responses = createSelector(
......@@ -277,13 +293,14 @@ 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")
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,
responseContentType: op.get("produces_value")
......
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"
......
.swagger-ui {
.Resizer.vertical.disabled {
display: none;
}
}
import { shallowEqualKeys } from "core/utils"
import { transformPathToArray } from "core/path-translator"
export default function() {
return {
fn: { shallowEqualKeys, transformPathToArray }
fn: { shallowEqualKeys }
}
}
import BasePreset from "./base"
import OAS3Plugin from "../plugins/oas3"
// Just the base, for now.
......@@ -6,5 +7,6 @@ export default function PresetApis() {
return [
BasePreset,
OAS3Plugin
]
}
......@@ -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"
......@@ -51,6 +52,7 @@ 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"
import Markdown from "core/components/providers/markdown"
......@@ -104,7 +106,8 @@ export default function() {
PrimitiveModel,
TryItOutButton,
Markdown,
BaseLayout
BaseLayout,
VersionStamp
}
}
......@@ -131,6 +134,7 @@ export default function() {
auth,
ast,
SplitPaneModePlugin,
downloadUrlPlugin
downloadUrlPlugin,
deepLinkingPlugin
]
}
......@@ -76,7 +76,7 @@ export default class Store {
this.boundSystem = Object.assign({},
this.getRootInjects(),
this.getWrappedAndBoundActions(dispatch),
this.getBoundSelectors(getState, this.getSystem),
this.getWrappedAndBoundSelectors(getState, this.getSystem),
this.getStateThunks(getState),
this.getFn(),
this.getConfigs()
......@@ -176,6 +176,36 @@ export default class Store {
})
}
getWrappedAndBoundSelectors(getState, getSystem) {
let selectorGroups = this.getBoundSelectors(getState, getSystem)
return objMap(selectorGroups, (selectors, selectorGroupName) => {
let stateName = [selectorGroupName.slice(0, -9)] // selectors = 9 chars
let wrappers = this.system.statePlugins[stateName].wrapSelectors
if(wrappers) {
return objMap(selectors, (selector, selectorName) => {
let wrap = wrappers[selectorName]
if(!wrap) {
return selector
}
if(!Array.isArray(wrap)) {
wrap = [wrap]
}
return wrap.reduce((acc, fn) => {
let wrappedSelector = (...args) => {
return fn(acc, this.getSystem())(getState().getIn(stateName), ...args)
}
if(!isFn(wrappedSelector)) {
throw new TypeError("wrapSelector needs to return a function that returns a new function (ie the wrapped action)")
}
return wrappedSelector
}, selector || Function.prototype)
})
}
return selectors
})
}
getStates(state) {
return Object.keys(this.system.statePlugins).reduce((obj, key) => {
obj[key] = state.get(key)
......@@ -197,8 +227,17 @@ export default class Store {
}
getComponents(component) {
if(typeof component !== "undefined")
const res = this.system.components[component]
if(Array.isArray(res)) {
return res.reduce((ori, wrapper) => {
return wrapper(ori, this.getSystem())
})
}
if(typeof component !== "undefined") {
return this.system.components[component]
}
return this.system.components
}
......@@ -291,6 +330,24 @@ function systemExtend(dest={}, src={}) {
return dest
}
// Wrap components
// Parses existing components in the system, and prepares them for wrapping via getComponents
if(src.wrapComponents) {
objMap(src.wrapComponents, (wrapperFn, key) => {
const ori = dest.components[key]
if(ori && Array.isArray(ori)) {
dest.components[key] = ori.concat([wrapperFn])
} else if(ori) {
dest.components[key] = [ori, wrapperFn]
} else {
dest.components[key] = null
}
})
delete src.wrapComponents
}
// Account for wrapActions, make it an array and append to it
// Modifies `src`
// 80% of this code is just safe traversal. We need to address that ( ie: use a lib )
......
......@@ -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) {
......@@ -228,13 +228,13 @@ export function highlight (el) {
var reset = function(el) {
var text = el.textContent,
pos = 0, // current position
pos = 0, // current position
next1 = text[0], // next character
chr = 1, // current character
prev1, // previous character
prev2, // the one before the previous
token = // current token content
el.innerHTML = "", // (and cleaning the node)
chr = 1, // current character
prev1, // previous character
prev2, // the one before the previous
token = // current token content
el.innerHTML = "", // (and cleaning the node)
// current token type:
// 0: anything else (whitespaces / newlines)
......@@ -274,11 +274,11 @@ export function highlight (el) {
(tokenType > 8 && chr == "\n") ||
[ // finalize conditions for other token types
// 0: whitespaces
/\S/[test](chr), // merged together
/\S/[test](chr), // merged together
// 1: operators
1, // consist of a single character
1, // consist of a single character
// 2: braces
1, // consist of a single character
1, // consist of a single character
// 3: (key)word
!/[$\w]/[test](chr),
// 4: regex
......@@ -341,12 +341,12 @@ export function highlight (el) {
// condition)
tokenType = 11
while (![
1, // 0: whitespace
1, // 0: whitespace
// 1: operator or braces
/[\/{}[(\-+*=<>:;|\\.,?!&@~]/[test](chr), // eslint-disable-line no-useless-escape
/[\])]/[test](chr), // 2: closing brace
/[$\w]/[test](chr), // 3: (key)word
chr == "/" && // 4: regex
/[\/{}[(\-+*=<>:;|\\.,?!&@~]/[test](chr), // eslint-disable-line no-useless-escape
/[\])]/[test](chr), // 2: closing brace
/[$\w]/[test](chr), // 3: (key)word
chr == "/" && // 4: regex
// previous token was an
// opening brace or an
// operator (otherwise
......@@ -355,13 +355,13 @@ export function highlight (el) {
// workaround for xml
// closing tags
prev1 != "<",
chr == "\"", // 5: string with "
chr == "'", // 6: string with '
chr == "\"", // 5: string with "
chr == "'", // 6: string with '
// 7: xml comment
chr+next1+text[pos+1]+text[pos+2] == "<!--",
chr+next1 == "/*", // 8: multiline comment
chr+next1 == "//", // 9: single-line comment
chr == "#" // 10: hash-style comment
chr+next1 == "/*", // 8: multiline comment
chr+next1 == "//", // 9: single-line comment
chr == "#" // 10: hash-style comment
][--tokenType]);
}
......@@ -451,13 +451,13 @@ export const propChecker = (props, nextProps, objectList=[], ignoreList=[]) => {
}
export const validateNumber = ( val ) => {
if ( !/^-?\d+(\.?\d+)?$/.test(val)) {
if (!/^-?\d+(\.?\d+)?$/.test(val)) {
return "Value must be a number"
}
}
export const validateInteger = ( val ) => {
if ( !/^-?\d+$/.test(val)) {
if (!/^-?\d+$/.test(val)) {
return "Value must be an integer"
}
}
......@@ -468,6 +468,18 @@ export const validateFile = ( val ) => {
}
}
export const validateBoolean = ( val ) => {
if ( !(val === "true" || val === "false" || val === true || val === false) ) {
return "Value must be a boolean"
}
}
export const validateString = ( val ) => {
if ( val && typeof val !== "string" ) {
return "Value must be a string"
}
}
// validation of parameters before execute
export const validateParam = (param, isXml) => {
let errors = []
......@@ -475,48 +487,69 @@ export const validateParam = (param, isXml) => {
let required = param.get("required")
let type = param.get("type")
let stringCheck = type === "string" && !value
let arrayCheck = type === "array" && Array.isArray(value) && !value.length
let listCheck = type === "array" && Im.List.isList(value) && !value.count()
let fileCheck = type === "file" && !(value instanceof win.File)
if ( required && (stringCheck || arrayCheck || listCheck || fileCheck) ) {
errors.push("Required field is not provided")
return errors
}
if ( type === "number" ) {
let err = validateNumber(value)
if (!err) return errors
errors.push(err)
} else if ( type === "integer" ) {
let err = validateInteger(value)
if (!err) return errors
errors.push(err)
} else if ( type === "array" ) {
let itemType
if ( !value.count() ) { return errors }
itemType = param.getIn(["items", "type"])
value.forEach((item, index) => {
let err
/*
If the parameter is required OR the parameter has a value (meaning optional, but filled in)
then we should do our validation routine.
Only bother validating the parameter if the type was specified.
*/
if ( type && (required || value) ) {
// These checks should evaluate to true if the parameter's value is valid
let stringCheck = type === "string" && value && !validateString(value)
let arrayCheck = type === "array" && Array.isArray(value) && value.length
let listCheck = type === "array" && Im.List.isList(value) && value.count()
let fileCheck = type === "file" && value instanceof win.File
let booleanCheck = type === "boolean" && !validateBoolean(value)
let numberCheck = type === "number" && !validateNumber(value) // validateNumber returns undefined if the value is a number
let integerCheck = type === "integer" && !validateInteger(value) // validateInteger returns undefined if the value is an integer
if ( required && !(stringCheck || arrayCheck || listCheck || fileCheck || booleanCheck || numberCheck || integerCheck) ) {
errors.push("Required field is not provided")
return errors
}
if (itemType === "number") {
err = validateNumber(item)
} else if (itemType === "integer") {
err = validateInteger(item)
}
if ( type === "string" ) {
let err = validateString(value)
if (!err) return errors
errors.push(err)
} else if ( type === "boolean" ) {
let err = validateBoolean(value)
if (!err) return errors
errors.push(err)
} else if ( type === "number" ) {
let err = validateNumber(value)
if (!err) return errors
errors.push(err)
} else if ( type === "integer" ) {
let err = validateInteger(value)
if (!err) return errors
errors.push(err)
} else if ( type === "array" ) {
let itemType
if ( !value.count() ) { return errors }
itemType = param.getIn(["items", "type"])
value.forEach((item, index) => {
let err
if (itemType === "number") {
err = validateNumber(item)
} else if (itemType === "integer") {
err = validateInteger(item)
} else if (itemType === "string") {
err = validateString(item)
}
if ( err ) {
errors.push({ index: index, error: err})
}
})
} else if ( type === "file" ) {
let err = validateFile(value)
if (!err) return errors
errors.push(err)
if ( err ) {
errors.push({ index: index, error: err})
}
})
} else if ( type === "file" ) {
let err = validateFile(value)
if (!err) return errors
errors.push(err)
}
}
return errors
......@@ -542,7 +575,7 @@ export const getSampleSchema = (schema, contentType="", config={}) => {
return JSON.stringify(memoizedSampleFromSchema(schema, config), null, 2)
}
export const parseSeach = () => {
export const parseSearch = () => {
let map = {}
let search = window.location.search
......@@ -574,6 +607,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)
}
}
......@@ -589,18 +625,6 @@ export const buildFormData = (data) => {
return formArr.join("&")
}
export const filterConfigs = (configs, allowed) => {
let i, filteredConfigs = {}
for (i in configs) {
if (allowed.indexOf(i) !== -1) {
filteredConfigs[i] = configs[i]
}
}
return filteredConfigs
}
// Is this really required as a helper? Perhaps. TODO: expose the system of presets.apis in docs, so we know what is supported
export const shallowEqualKeys = (a,b, keys) => {
return !!find(keys, (key) => {
......
......@@ -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`
......
......@@ -7,7 +7,6 @@ import Logo from "./logo_small.png"
export default class Topbar extends React.Component {
static propTypes = {
layoutSelectors: PropTypes.object.isRequired,
layoutActions: PropTypes.object.isRequired
}
......@@ -91,13 +90,12 @@ export default class Topbar extends React.Component {
}
render() {
let { getComponent, specSelectors, getConfigs, layoutSelectors } = this.props
let { getComponent, specSelectors, getConfigs } = this.props
const Button = getComponent("Button")
const Link = getComponent("Link")
let isLoading = specSelectors.loadingStatus() === "loading"
let isFailed = specSelectors.loadingStatus() === "failed"
let filter = layoutSelectors.currentFilter()
let inputStyle = {}
if(isFailed) inputStyle.color = "red"
......@@ -132,13 +130,9 @@ 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>
{
filter === null || filter === false ? null :
<input className="operation-filter-input" placeholder="filter..." type="text" onChange={this.onFilterChange} value={filter === true ? "" : filter} disabled={isLoading} style={inputStyle} />
}
<form className="download-url-wrapper" onSubmit={formOnSubmit}>
{control}
</form>
......
.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;
}
}
import StandaloneLayout from "./layout"
import "../style/main.scss"
import TopbarPlugin from "plugins/topbar"
import ConfigsPlugin from "plugins/configs"
......
......@@ -14,6 +14,12 @@
@include text_headline();
&.btn-sm
{
font-size: 12px;
padding: 4px 23px;
}
&[disabled]
{
cursor: not-allowed;
......@@ -165,6 +171,10 @@
button
{
cursor: pointer;
outline: none;
&.invalid
{
@include invalidFormElement();
}
}
......@@ -21,6 +21,10 @@ select
background: #f7f7f7;
}
&.invalid {
@include invalidFormElement();
}
}
.opblock-body select
......@@ -55,10 +59,7 @@ input[type=file]
&.invalid
{
animation: shake .4s 1;
border-color: $_color-delete;
background: lighten($_color-delete, 35%);
@include invalidFormElement();
}
}
......
......@@ -74,6 +74,11 @@ body
{
border-color: $color;
}
.tab-header .tab-item.active h4 span:after
{
background: $color;
}
}
......@@ -144,6 +149,51 @@ body
border-radius: 4px;
box-shadow: 0 0 3px rgba(#000,.19);
.tab-header
{
display: flex;
flex: 1;
.tab-item
{
padding: 0 40px;
cursor: pointer;
&:first-of-type
{
padding: 0 40px 0 0;
}
&.active
{
h4
{
span
{
position: relative;
&:after
{
position: absolute;
bottom: -15px;
left: 50%;
width: 120%;
height: 4px;
content: '';
transform: translateX(-50%);
background: #888;
}
}
}
}
}
}
&.is-open
{
......@@ -160,6 +210,8 @@ body
padding: 8px 20px;
min-height: 50px;
background: rgba(#fff,.8);
box-shadow: 0 1px 2px rgba(#000,.1);
......@@ -172,6 +224,7 @@ body
align-items: center;
margin: 0;
margin-left: auto;
@include text_headline();
......@@ -327,6 +380,18 @@ body
}
}
.filter
{
.operation-filter-input
{
width: 100%;
margin: 20px 0;
padding: 10px 10px;
border: 2px solid #d8dde7;
}
}
.tab
{
......@@ -378,6 +443,7 @@ body
}
.opblock-description-wrapper,
.opblock-external-docs-wrapper,
.opblock-title_normal
{
font-size: 12px;
......@@ -406,6 +472,12 @@ body
}
}
.opblock-external-docs-wrapper {
h4 {
padding-left: 0px;
}
}
.execute-wrapper
{
padding: 20px;
......@@ -489,6 +561,15 @@ body
{
margin: 0;
}
a
{
@include text_code(#89bf04);
text-decoration: underline;
&:hover {
color: #81b10c;
}
}
}
}
......@@ -615,6 +696,18 @@ body
}
}
.renderedMarkdown {
p {
@include text_body();
font-size: 14px;
margin-top: 0px;
margin-bottom: 0px;
}
}
.response-content-type {
padding-top: 1em;
}
@keyframes blinker
{
......@@ -632,3 +725,16 @@ section
@include text_headline();
}
}
a.nostyle {
text-decoration: inherit;
color: inherit;
cursor: auto;
display: inline;
&:visited {
text-decoration: inherit;
color: inherit;
cursor: auto;
}
}
......@@ -166,3 +166,9 @@ $browser-context: 16;
@warn 'Breakpoint mixin supports: tablet, mobile, desktop';
}
}
@mixin invalidFormElement() {
animation: shake .4s 1;
border-color: $_color-delete;
background: lighten($_color-delete, 35%);
}
\ No newline at end of file
......@@ -3,6 +3,13 @@
font-size: 12px;
font-weight: 300;
.deprecated
{
span, td {
color: #aaa !important;
}
}
@include text_code();
&-toggle
{
......@@ -79,6 +86,10 @@
border-radius: 4px;
background: rgba(#000,.7);
}
p {
margin: 0 0 1em 0;
}
}
......@@ -188,6 +199,11 @@ section.models
position: relative;
top: 4px;
}
&.deprecated
{
opacity: .5;
}
}
......@@ -198,6 +214,14 @@ section.models
@include text_headline(#555);
}
.model-deprecated-warning
{
font-size: 16px;
font-weight: 600;
margin-right: 1em;
@include text_headline($_color-delete);
}
span
{
......
.Resizer.vertical.disabled {
display: none;
}
\ No newline at end of file
......@@ -97,6 +97,10 @@ table
width: 100%;
max-width: 340px;
}
select {
border-width: 1px;
}
}
.parameter__name
......
......@@ -29,12 +29,6 @@
padding: 0 10px;
}
}
.operation-filter-input
{
border: 2px solid #547f00;
border-right: none;
border-radius: 4px 0 0 4px;
}
.download-url-wrapper
{
......@@ -49,7 +43,6 @@
margin: 0;
border: 2px solid #547f00;
border-radius: 0 0 0 0;
outline: none;
}
......
......@@ -14,4 +14,5 @@
@import 'information';
@import 'authorize';
@import 'errors';
@import 'split-pane-mode';
}
......@@ -10,4 +10,8 @@ try {
// 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")
env:
mocha: true
rules:
"react/prop-types": 1 # bah humbug
"no-unused-vars": 1 # unused vars in tests can be useful for indicating a full signature
/* 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")
})
})
/* 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({ })
......
......@@ -326,6 +326,122 @@ describe("bound system", function(){
})
describe("wrapSelectors", () => {
it("should wrap a selector and provide a reference to the original", function(){
// Given
const system = new System({
plugins: [
{
statePlugins: {
doge: {
selectors: {
wow: () => (system) => {
return "original"
}
}
}
}
},
{
statePlugins: {
doge: {
wrapSelectors: {
wow: (ori) => (system) => {
// Then
return ori() + " wrapper"
}
}
}
}
}
]
})
// When
var res = system.getSystem().dogeSelectors.wow(1)
expect(res).toEqual("original wrapper")
})
it("should provide a live reference to the system to a wrapper", function(done){
// Given
const mySystem = new System({
plugins: [
{
statePlugins: {
doge: {
selectors: {
wow: () => (system) => {
return "original"
}
}
}
}
},
{
statePlugins: {
doge: {
wrapSelectors: {
wow: (ori, system) => () => {
// Then
expect(mySystem.getSystem()).toEqual(system.getSystem())
done()
return ori() + " wrapper"
}
}
}
}
}
]
})
mySystem.getSystem().dogeSelectors.wow(1)
})
it("should provide the state as the first argument to the inner function", function(done){
// Given
const mySystem = new System({
state: {
doge: {
abc: "123"
}
},
plugins: [
{
statePlugins: {
doge: {
selectors: {
wow: () => (system) => {
return "original"
}
}
}
}
},
{
statePlugins: {
doge: {
wrapSelectors: {
wow: (ori, system) => (dogeState) => {
// Then
expect(dogeState.toJS().abc).toEqual("123")
done()
return ori() + " wrapper"
}
}
}
}
}
]
})
mySystem.getSystem().dogeSelectors.wow(1)
})
})
})
})
import React from "react"
import expect from "expect"
import { render } from "enzyme"
import System from "core/system"
describe("wrapComponents", () => {
describe("should wrap a component and provide a reference to the original", () => {
it("with stateless components", function(){
// Given
const system = new System({
plugins: [
{
components: {
wow: ({ name }) => <div>{name} component</div>
}
},
{
wrapComponents: {
wow: (OriginalComponent) => (props) => {
return <container>
<OriginalComponent {...props}></OriginalComponent>
<OriginalComponent name="Wrapped"></OriginalComponent>
</container>
}
}
}
]
})
// When
var Component = system.getSystem().getComponents("wow")
const wrapper = render(<Component name="Normal" />)
const container = wrapper.children().first()
expect(container[0].name).toEqual("container")
const children = container.children()
expect(children.length).toEqual(2)
expect(children.eq(0).text()).toEqual("Normal component")
expect(children.eq(1).text()).toEqual("Wrapped component")
})
it("with React classes", function(){
class MyComponent extends React.Component {
render() {
return <div>{this.props.name} component</div>
}
}
// Given
const system = new System({
plugins: [
{
components: {
wow: MyComponent
}
},
{
wrapComponents: {
wow: (OriginalComponent) => {
return class WrapperComponent extends React.Component {
render() {
return <container>
<OriginalComponent {...this.props}></OriginalComponent>
<OriginalComponent name="Wrapped"></OriginalComponent>
</container>
}
}
}
}
}
]
})
// When
var Component = system.getSystem().getComponents("wow")
const wrapper = render(<Component name="Normal" />)
const container = wrapper.children().first()
expect(container[0].name).toEqual("container")
const children = container.children()
expect(children.length).toEqual(2)
expect(children.eq(0).text()).toEqual("Normal component")
expect(children.eq(1).text()).toEqual("Wrapped component")
})
})
it("should provide a reference to the system to the wrapper", function(){
// Given
const mySystem = new System({
plugins: [
{
// Make a selector
statePlugins: {
doge: {
selectors: {
wow: () => () => {
return "WOW much data"
}
}
}
}
},
{
// Create a component
components: {
wow: () => <div>Original component</div>
}
},
{
// Wrap the component and use the system
wrapComponents: {
wow: (OriginalComponent, system) => (props) => {
return <container>
<OriginalComponent {...props}></OriginalComponent>
<div>{system.dogeSelectors.wow()}</div>
</container>
}
}
}
]
})
// Then
var Component = mySystem.getSystem().getComponents("wow")
const wrapper = render(<Component name="Normal" />)
const container = wrapper.children().first()
expect(container[0].name).toEqual("container")
const children = container.children()
expect(children.length).toEqual(2)
expect(children.eq(0).text()).toEqual("Original component")
expect(children.eq(1).text()).toEqual("WOW much data")
})
})
/* eslint-env mocha */
import expect from "expect"
import { fromJS } from "immutable"
import { mapToList, validateNumber, validateInteger, validateParam, validateFile } from "core/utils"
import { mapToList, validateNumber, validateInteger, validateParam, validateFile, fromJSOrdered } from "core/utils"
import win from "core/window"
describe("utils", function(){
describe("utils", function() {
describe("mapToList", function(){
......@@ -175,7 +175,19 @@ describe("utils", function(){
let param = null
let result = null
it("skips validation when `type` is not specified", function() {
// invalid type
param = fromJS({
required: false,
type: undefined,
value: ""
})
result = validateParam( param, false )
expect( result ).toEqual( [] )
})
it("validates required strings", function() {
// invalid string
param = fromJS({
required: true,
type: "string",
......@@ -183,9 +195,39 @@ describe("utils", function(){
})
result = validateParam( param, false )
expect( result ).toEqual( ["Required field is not provided"] )
// valid string
param = fromJS({
required: true,
type: "string",
value: "test string"
})
result = validateParam( param, false )
expect( result ).toEqual( [] )
})
it("validates optional strings", function() {
// valid (empty) string
param = fromJS({
required: false,
type: "string",
value: ""
})
result = validateParam( param, false )
expect( result ).toEqual( [] )
// valid string
param = fromJS({
required: false,
type: "string",
value: "test"
})
result = validateParam( param, false )
expect( result ).toEqual( [] )
})
it("validates required files", function() {
// invalid file
param = fromJS({
required: true,
type: "file",
......@@ -193,9 +235,48 @@ describe("utils", function(){
})
result = validateParam( param, false )
expect( result ).toEqual( ["Required field is not provided"] )
// valid file
param = fromJS({
required: true,
type: "file",
value: new win.File()
})
result = validateParam( param, false )
expect( result ).toEqual( [] )
})
it("validates optional files", function() {
// invalid file
param = fromJS({
required: false,
type: "file",
value: "not a file"
})
result = validateParam( param, false )
expect( result ).toEqual( ["Value must be a file"] )
// valid (empty) file
param = fromJS({
required: false,
type: "file",
value: undefined
})
result = validateParam( param, false )
expect( result ).toEqual( [] )
// valid file
param = fromJS({
required: false,
type: "file",
value: new win.File()
})
result = validateParam( param, false )
expect( result ).toEqual( [] )
})
it("validates required arrays", function() {
// invalid (empty) array
param = fromJS({
required: true,
type: "array",
......@@ -204,37 +285,51 @@ describe("utils", function(){
result = validateParam( param, false )
expect( result ).toEqual( ["Required field is not provided"] )
// invalid (not an array)
param = fromJS({
required: true,
type: "array",
value: []
value: undefined
})
result = validateParam( param, false )
expect( result ).toEqual( ["Required field is not provided"] )
})
it("validates numbers", function() {
// invalid array, items do not match correct type
param = fromJS({
required: false,
type: "number",
value: "test"
required: true,
type: "array",
value: [1],
items: {
type: "string"
}
})
result = validateParam( param, false )
expect( result ).toEqual( ["Value must be a number"] )
})
expect( result ).toEqual( [{index: 0, error: "Value must be a string"}] )
it("validates integers", function() {
// valid array, with no 'type' for items
param = fromJS({
required: false,
type: "integer",
value: "test"
required: true,
type: "array",
value: ["1"]
})
result = validateParam( param, false )
expect( result ).toEqual( ["Value must be an integer"] )
expect( result ).toEqual( [] )
// valid array, items match type
param = fromJS({
required: true,
type: "array",
value: ["1"],
items: {
type: "string"
}
})
result = validateParam( param, false )
expect( result ).toEqual( [] )
})
it("validates arrays", function() {
// empty array
it("validates optional arrays", function() {
// valid, empty array
param = fromJS({
required: false,
type: "array",
......@@ -243,7 +338,7 @@ describe("utils", function(){
result = validateParam( param, false )
expect( result ).toEqual( [] )
// numbers
// invalid, items do not match correct type
param = fromJS({
required: false,
type: "array",
......@@ -255,17 +350,236 @@ describe("utils", function(){
result = validateParam( param, false )
expect( result ).toEqual( [{index: 0, error: "Value must be a number"}] )
// integers
// valid
param = fromJS({
required: false,
type: "array",
value: ["not", "numbers"],
value: ["test"],
items: {
type: "integer"
type: "string"
}
})
result = validateParam( param, false )
expect( result ).toEqual( [{index: 0, error: "Value must be an integer"}, {index: 1, error: "Value must be an integer"}] )
expect( result ).toEqual( [] )
})
it("validates required booleans", function() {
// invalid boolean value
param = fromJS({
required: true,
type: "boolean",
value: undefined
})
result = validateParam( param, false )
expect( result ).toEqual( ["Required field is not provided"] )
// invalid boolean value (not a boolean)
param = fromJS({
required: true,
type: "boolean",
value: "test string"
})
result = validateParam( param, false )
expect( result ).toEqual( ["Required field is not provided"] )
// valid boolean value
param = fromJS({
required: true,
type: "boolean",
value: "true"
})
result = validateParam( param, false )
expect( result ).toEqual( [] )
// valid boolean value
param = fromJS({
required: true,
type: "boolean",
value: false
})
result = validateParam( param, false )
expect( result ).toEqual( [] )
})
it("validates optional booleans", function() {
// valid (empty) boolean value
param = fromJS({
required: false,
type: "boolean",
value: undefined
})
result = validateParam( param, false )
expect( result ).toEqual( [] )
// invalid boolean value (not a boolean)
param = fromJS({
required: false,
type: "boolean",
value: "test string"
})
result = validateParam( param, false )
expect( result ).toEqual( ["Value must be a boolean"] )
// valid boolean value
param = fromJS({
required: false,
type: "boolean",
value: "true"
})
result = validateParam( param, false )
expect( result ).toEqual( [] )
// valid boolean value
param = fromJS({
required: false,
type: "boolean",
value: false
})
result = validateParam( param, false )
expect( result ).toEqual( [] )
})
it("validates required numbers", function() {
// invalid number, string instead of a number
param = fromJS({
required: true,
type: "number",
value: "test"
})
result = validateParam( param, false )
expect( result ).toEqual( ["Required field is not provided"] )
// invalid number, undefined value
param = fromJS({
required: true,
type: "number",
value: undefined
})
result = validateParam( param, false )
expect( result ).toEqual( ["Required field is not provided"] )
// valid number
param = fromJS({
required: true,
type: "number",
value: 10
})
result = validateParam( param, false )
expect( result ).toEqual( [] )
})
it("validates optional numbers", function() {
// invalid number, string instead of a number
param = fromJS({
required: false,
type: "number",
value: "test"
})
result = validateParam( param, false )
expect( result ).toEqual( ["Value must be a number"] )
// valid (empty) number
param = fromJS({
required: false,
type: "number",
value: undefined
})
result = validateParam( param, false )
expect( result ).toEqual( [] )
// valid number
param = fromJS({
required: false,
type: "number",
value: 10
})
result = validateParam( param, false )
expect( result ).toEqual( [] )
})
it("validates required integers", function() {
// invalid integer, string instead of an integer
param = fromJS({
required: true,
type: "integer",
value: "test"
})
result = validateParam( param, false )
expect( result ).toEqual( ["Required field is not provided"] )
// invalid integer, undefined value
param = fromJS({
required: true,
type: "integer",
value: undefined
})
result = validateParam( param, false )
expect( result ).toEqual( ["Required field is not provided"] )
// valid integer
param = fromJS({
required: true,
type: "integer",
value: 10
})
result = validateParam( param, false )
expect( result ).toEqual( [] )
})
it("validates optional integers", function() {
// invalid integer, string instead of an integer
param = fromJS({
required: false,
type: "integer",
value: "test"
})
result = validateParam( param, false )
expect( result ).toEqual( ["Value must be an integer"] )
// valid (empty) integer
param = fromJS({
required: false,
type: "integer",
value: undefined
})
result = validateParam( param, false )
expect( result ).toEqual( [] )
// integers
param = fromJS({
required: false,
type: "integer",
value: 10
})
result = validateParam( param, false )
expect( result ).toEqual( [] )
})
})
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] )
})
})
})
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'
}
},
{ 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'
name: "[name].js"
}
}
]
},
{ 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"
]
},
......
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"
]
},
......
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,
......
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,
......
var config = require("./webpack-dist.config.js")
const config = require("./webpack-dist.config.js")
module.exports = config
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, {
......
module.exports = require("./make-webpack-config")({
});
\ No newline at end of file
})
\ No newline at end of file
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"
}
}
]
})
}]
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册