merge master

src/core/plugins/auth/actions.js

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

src/core/plugins/oas3/components/callbacks.jsx

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

src/core/plugins/oas3/components/index.js

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

src/core/plugins/oas3/components/operation-link.jsx

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

src/core/plugins/oas3/components/request-body.jsx

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

src/core/plugins/oas3/helpers.js

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

src/core/plugins/oas3/index.js

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

src/core/plugins/oas3/wrap-components/index.js

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

src/core/plugins/oas3/wrap-components/markdown.js

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

src/core/plugins/oas3/wrap-components/model.jsx

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

src/core/plugins/oas3/wrap-components/online-validator-badge.js

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

src/core/plugins/oas3/wrap-components/parameters.jsx

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

src/core/plugins/oas3/wrap-components/try-it-out-button.jsx

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

src/core/plugins/oas3/wrap-components/version-stamp.jsx

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

src/core/plugins/oas3/wrap-selectors.js

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

src/core/plugins/spec/selectors.js

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

src/core/plugins/view/root-injects.js

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