merge master

This commit is contained in:
Aaron Loo
2017-08-03 07:32:32 -07:00
56 changed files with 1601 additions and 179 deletions

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

View File

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

View File

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

View 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>
{

View File

@@ -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 } required={ required }
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 }/> }
}
}
}

View File

@@ -18,7 +18,7 @@ export default class ObjectModel extends Component {
render(){
let { schema, name, isRef, getComponent, depth, ...props } = this.props
let { expandDepth } = this.props
let { expandDepth, specSelectors } = this.props
let description = schema.get("description")
let properties = schema.get("properties")
let additionalProperties = schema.get("additionalProperties")
@@ -37,7 +37,11 @@ export default class ObjectModel extends Component {
isRef ? <JumpToPathSection name={ name }/> : ""
}
</span>)
const anyOf = specSelectors.isOAS3() ? schema.get("anyOf") : null
const oneOf = specSelectors.isOAS3() ? schema.get("oneOf") : null
const not = specSelectors.isOAS3() ? schema.get("not") : null
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>
@@ -95,6 +99,48 @@ export default class ObjectModel extends Component {
</td>
</tr>
}
{
!anyOf ? null
: <tr>
<td>{ "anyOf ->" }</td>
<td>
{anyOf.map((schema, k) => {
return <div key={k}><Model { ...props } required={ false }
getComponent={ getComponent }
schema={ schema }
depth={ depth + 1 } /></div>
})}
</td>
</tr>
}
{
!oneOf ? null
: <tr>
<td>{ "oneOf ->" }</td>
<td>
{oneOf.map((schema, k) => {
return <div key={k}><Model { ...props } required={ false }
getComponent={ getComponent }
schema={ schema }
depth={ depth + 1 } /></div>
})}
</td>
</tr>
}
{
!not ? null
: <tr>
<td>{ "not ->" }</td>
<td>
{not.map((schema, k) => {
return <div key={k}><Model { ...props } required={ false }
getComponent={ getComponent }
schema={ schema }
depth={ depth + 1 } /></div>
})}
</td>
</tr>
}
</tbody></table>
}
</span>
@@ -102,4 +148,4 @@ export default class ObjectModel extends Component {
</ModelCollapse>
</span>
}
}
}

View File

@@ -210,6 +210,7 @@ export default class Operation extends PureComponent {
}
<Parameters
parameters={parameters}
operation={operation}
onChangeKey={onChangeKey}
onTryoutClick = { this.onTryoutClick }
onCancelClick = { this.onCancelClick }

View File

@@ -66,6 +66,8 @@ export default class Operations extends React.Component {
taggedOps.map( (tagObj, tag) => {
let operations = tagObj.get("operations")
let tagDescription = tagObj.getIn(["tagDetails", "description"], null)
let tagExternalDocsDescription = tagObj.getIn(["tagDetails", "externalDocs", "description"])
let tagExternalDocsUrl = tagObj.getIn(["tagDetails", "externalDocs", "url"])
let isShownKey = ["operations-tag", tag]
let showTag = layoutSelectors.isShown(isShownKey, docExpansion === "full" || docExpansion === "list")
@@ -89,6 +91,22 @@ export default class Operations extends React.Component {
</small>
}
<div>
{ !tagExternalDocsDescription ? null :
<small>
{ tagExternalDocsDescription }
{ tagExternalDocsUrl ? ": " : null }
{ tagExternalDocsUrl ?
<a
href={tagExternalDocsUrl}
onClick={(e) => e.stopPropagation()}
target={"_blank"}
>{tagExternalDocsUrl}</a> : null
}
</small>
}
</div>
<button className="expand-operation" title="Expand operation" onClick={() => layoutActions.show(isShownKey, !showTag)}>
<svg className="arrow" width="20" height="20">
<use xlinkHref={showTag ? "#large-arrow-down" : "#large-arrow"} />

View File

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

View File

@@ -3,15 +3,8 @@ 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") {
@@ -31,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)
}

View File

@@ -1,6 +1,6 @@
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" )
const OperationLink = getComponent("operationLink")
const ContentType = getComponent("contentType")
let sampleResponse = schema ? getSampleSchema(schema, contentType, { includeReadOnly: true }) : null
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>
)
}

View File

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

View File

@@ -0,0 +1,12 @@
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

View File

@@ -23,6 +23,7 @@ module.exports = function SwaggerUI(opts) {
const defaults = {
// Some general settings, that we floated to the top
dom_id: null,
domNode: null,
spec: {},
url: "",
urls: null,
@@ -99,6 +100,12 @@ module.exports = function SwaggerUI(opts) {
let localConfig = system.specSelectors.getLocalConfig ? system.specSelectors.getLocalConfig() : {}
let mergedConfig = deepExtend({}, localConfig, constructorConfig, fetchedConfig || {}, queryConfig)
// deep extend mangles domNode, we need to set it manually
if(opts.domNode) {
mergedConfig.domNode = opts.domNode
}
store.setConfigs(mergedConfig)
if (fetchedConfig !== null) {
@@ -112,10 +119,13 @@ module.exports = function SwaggerUI(opts) {
}
}
if(mergedConfig.dom_id) {
system.render(mergedConfig.dom_id, "App")
if(mergedConfig.domNode) {
system.render(mergedConfig.domNode, "App")
} else if(mergedConfig.dom_id) {
let domNode = document.querySelector(mergedConfig.dom_id)
system.render(domNode, "App")
} else {
console.error("Skipped rendering: no `dom_id` was specified")
console.error("Skipped rendering: no `dom_id` or `domNode` was specified")
}
return system

View File

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

View File

@@ -68,11 +68,21 @@ export default function authorize ( { auth, authActions, errActions, configs, au
// pass action authorizeOauth2 and authentication data through window
// to authorize with oauth2
let callback
if (flow === "implicit") {
callback = authActions.preAuthorizeImplicit
} else if (authConfigs.useBasicAuthenticationWithAccessCodeGrant) {
callback = authActions.authorizeAccessCodeWithBasicAuthentication
} else {
callback = authActions.authorizeAccessCodeWithFormParams
}
win.swaggerUIRedirectOauth2 = {
auth: auth,
state: state,
redirectUrl: redirectUrl,
callback: flow === "implicit" ? authActions.preAuthorizeImplicit : authActions.authorizeAccessCode,
callback: callback,
errCb: errActions.newAuthErr
}

View File

@@ -111,7 +111,7 @@ export const authorizeApplication = ( auth ) => ( { authActions } ) => {
return authActions.authorizeRequest({body: buildFormData(form), name, url: schema.get("tokenUrl"), auth, headers })
}
export const authorizeAccessCode = ( { auth, redirectUrl } ) => ( { authActions } ) => {
export const authorizeAccessCodeWithFormParams = ( { auth, redirectUrl } ) => ( { authActions } ) => {
let { schema, name, clientId, clientSecret } = auth
let form = {
grant_type: "authorization_code",
@@ -124,6 +124,21 @@ export const authorizeAccessCode = ( { auth, redirectUrl } ) => ( { authActions
return authActions.authorizeRequest({body: buildFormData(form), name, url: schema.get("tokenUrl"), auth})
}
export const authorizeAccessCodeWithBasicAuthentication = ( { auth, redirectUrl } ) => ( { authActions } ) => {
let { schema, name, clientId, clientSecret } = auth
let headers = {
Authorization: "Basic " + btoa(clientId + ":" + clientSecret)
}
let form = {
grant_type: "authorization_code",
code: auth.code,
client_id: clientId,
redirect_uri: redirectUrl
}
return authActions.authorizeRequest({body: buildFormData(form), name, url: schema.get("tokenUrl"), auth, headers})
}
export const authorizeRequest = ( data ) => ( { fn, authActions, errActions, authSelectors } ) => {
let { body, query={}, headers={}, name, url, auth } = data
let { additionalQueryStringParams } = authSelectors.getConfigs() || {}

View File

@@ -0,0 +1,49 @@
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

View File

@@ -0,0 +1,9 @@
import Callbacks from "./callbacks"
import RequestBody from "./request-body"
import OperationLink from "./operation-link.jsx"
export default {
Callbacks,
RequestBody,
operationLink: OperationLink
}

View File

@@ -0,0 +1,37 @@
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

View File

@@ -0,0 +1,42 @@
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

View File

@@ -0,0 +1,36 @@
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
}
}
}

View File

@@ -0,0 +1,17 @@
// 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
}
}
}
}

View File

@@ -0,0 +1,15 @@
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
}

View File

@@ -0,0 +1,11 @@
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})

View File

@@ -0,0 +1,37 @@
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)

View File

@@ -0,0 +1,5 @@
import { OAS3ComponentWrapFactory } from "../helpers"
// We're disabling the Online Validator Badge until the online validator
// can handle OAS3 specs.
export default OAS3ComponentWrapFactory(() => null)

View File

@@ -0,0 +1,181 @@
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)

View File

@@ -0,0 +1,5 @@
import { OAS3ComponentWrapFactory } from "../helpers"
export default OAS3ComponentWrapFactory(() => {
return null
})

View File

@@ -0,0 +1,13 @@
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>
})

View File

@@ -0,0 +1,67 @@
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)
}

View File

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

View File

@@ -58,8 +58,7 @@ export const makeMappedContainer = (getSystem, getStore, memGetComponent, getCom
}
export const render = (getSystem, getStore, getComponent, getComponents, dom) => {
let domNode = document.querySelector(dom)
export const render = (getSystem, getStore, getComponent, getComponents, domNode) => {
let App = (getComponent(getSystem, getStore, getComponents, "App", "root"))
ReactDOM.render(( <App/> ), domNode)
}

View File

@@ -1,4 +1,5 @@
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
]
}

View File

@@ -52,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"
@@ -105,7 +106,8 @@ export default function() {
PrimitiveModel,
TryItOutButton,
Markdown,
BaseLayout
BaseLayout,
VersionStamp
}
}

View File

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

View File

@@ -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,53 +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)
let nullUndefinedCheck = value === null || value === undefined
/*
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 || nullUndefinedCheck) ) {
errors.push("Required field is not provided")
return errors
}
if ( required && !(stringCheck || arrayCheck || listCheck || fileCheck || booleanCheck || numberCheck || integerCheck) ) {
errors.push("Required field is not provided")
return errors
}
if ( value === null || value === undefined ) {
return errors
}
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 ( 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 }
if ( !value.count() ) { return errors }
itemType = param.getIn(["items", "type"])
itemType = param.getIn(["items", "type"])
value.forEach((item, index) => {
let err
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 (itemType === "number") {
err = validateNumber(item)
} else if (itemType === "integer") {
err = validateInteger(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