Merge branch 'master' into ft/3052-extensions

2017-11-20 09:48:33 -06:00
parent 31694d7533 2ad1bacf6f
commit 8ff2d77398
30 changed files with 680 additions and 286 deletions
--- a/src/core/components/auth/api-key-auth.jsx
+++ b/src/core/components/auth/api-key-auth.jsx
@@ -60,6 +60,9 @@ export default class ApiKeyAuth extends React.Component {
        <Row>
          <Markdown source={ schema.get("description") } />
        </Row>
+        <Row>
+          <p>Name: <code>{ schema.get("name") }</code></p>
+        </Row>
        <Row>
          <p>In: <code>{ schema.get("in") }</code></p>
        </Row>
--- a/src/core/components/content-type.jsx
+++ b/src/core/components/content-type.jsx
@@ -27,6 +27,16 @@ export default class ContentType extends React.Component {
    }
  }

+  componentWillReceiveProps(nextProps) {
+    if(!nextProps.contentTypes || !nextProps.contentTypes.size) {
+      return
+    }
+
+    if(!nextProps.contentTypes.includes(nextProps.value)) {
+      nextProps.onChange(nextProps.contentTypes.first())
+    }
+  }
+
  onChangeWrapper = e => this.props.onChange(e.target.value)

  render() {
--- a/src/core/components/execute.jsx
+++ b/src/core/components/execute.jsx
@@ -8,7 +8,6 @@ export default class Execute extends Component {
    specActions: PropTypes.object.isRequired,
    operation: PropTypes.object.isRequired,
    path: PropTypes.string.isRequired,
-    getComponent: PropTypes.func.isRequired,
    method: PropTypes.string.isRequired,
    onExecute: PropTypes.func
  }
--- a/src/core/components/live-response.jsx
+++ b/src/core/components/live-response.jsx
@@ -1,6 +1,7 @@
 import React from "react"
 import PropTypes from "prop-types"
 import ImPropTypes from "react-immutable-proptypes"
+import { Iterable } from "immutable"

 const Headers = ( { headers } )=>{
  return (
@@ -28,19 +29,29 @@ Duration.propTypes = {

 export default class LiveResponse extends React.Component {
  static propTypes = {
-    response: PropTypes.object.isRequired,
-    specSelectors: PropTypes.object.isRequired,
-    pathMethod: PropTypes.object.isRequired,
-    getComponent: PropTypes.func.isRequired,
+    response: PropTypes.instanceOf(Iterable).isRequired,
+    path: PropTypes.string.isRequired,
+    method: PropTypes.string.isRequired,
    displayRequestDuration: PropTypes.bool.isRequired,
+    specSelectors: PropTypes.object.isRequired,
+    getComponent: PropTypes.func.isRequired,
    getConfigs: PropTypes.func.isRequired
  }

+  shouldComponentUpdate(nextProps) {
+    // BUG: props.response is always coming back as a new Immutable instance
+    // same issue as responses.jsx (tryItOutResponse)
+    return this.props.response !== nextProps.response
+      || this.props.path !== nextProps.path
+      || this.props.method !== nextProps.method
+      || this.props.displayRequestDuration !== nextProps.displayRequestDuration
+  }
+
  render() {
-    const { response, getComponent, getConfigs, displayRequestDuration, specSelectors, pathMethod } = this.props
+    const { response, getComponent, getConfigs, displayRequestDuration, specSelectors, path, method } = this.props
    const { showMutatedRequest } = getConfigs()

-    const curlRequest = showMutatedRequest ? specSelectors.mutatedRequestFor(pathMethod[0], pathMethod[1]) : specSelectors.requestFor(pathMethod[0], pathMethod[1])
+    const curlRequest = showMutatedRequest ? specSelectors.mutatedRequestFor(path, method) : specSelectors.requestFor(path, method)
    const status = response.get("status")
    const url = response.get("url")
    const headers = response.get("headers").toJS()
@@ -118,7 +129,6 @@ export default class LiveResponse extends React.Component {

  static propTypes = {
    getComponent: PropTypes.func.isRequired,
-    request: ImPropTypes.map,
    response: ImPropTypes.map
  }
 }
--- a/src/core/components/operation.jsx
+++ b/src/core/components/operation.jsx
@@ -1,32 +1,22 @@
 import React, { PureComponent } from "react"
 import PropTypes from "prop-types"
 import { getList } from "core/utils"
-import * as CustomPropTypes from "core/proptypes"
 import { getExtensions, sanitizeUrl } from "core/utils"
-
-//import "less/opblock"
+import { Iterable } from "immutable"

 export default class Operation extends PureComponent {
  static propTypes = {
-    path: PropTypes.string.isRequired,
-    method: PropTypes.string.isRequired,
-    operation: PropTypes.object.isRequired,
-    showSummary: PropTypes.bool,
-    isShown: PropTypes.bool.isRequired,
+    operation: PropTypes.instanceOf(Iterable).isRequired,
+    response: PropTypes.instanceOf(Iterable),
+    request: PropTypes.instanceOf(Iterable),

-    tagKey: PropTypes.string,
-    operationKey: PropTypes.string,
-    jumpToKey: CustomPropTypes.arrayOrString.isRequired,
-
-    allowTryItOut: PropTypes.bool,
-
-    displayOperationId: PropTypes.bool,
-    displayRequestDuration: PropTypes.bool,
-
-    response: PropTypes.object,
-    request: PropTypes.object,
+    toggleShown: PropTypes.func.isRequired,
+    onTryoutClick: PropTypes.func.isRequired,
+    onCancelClick: PropTypes.func.isRequired,
+    onExecute: PropTypes.func.isRequired,

    getComponent: PropTypes.func.isRequired,
+    getConfigs: PropTypes.func.isRequired,
    authActions: PropTypes.object,
    authSelectors: PropTypes.object,
    specActions: PropTypes.object.isRequired,
@@ -34,89 +24,68 @@ export default class Operation extends PureComponent {
    oas3Actions: PropTypes.object.isRequired,
    layoutActions: PropTypes.object.isRequired,
    layoutSelectors: PropTypes.object.isRequired,
-    fn: PropTypes.object.isRequired,
-    getConfigs: PropTypes.func.isRequired
+    fn: PropTypes.object.isRequired
  }

  static defaultProps = {
-    showSummary: true,
+    operation: null,
    response: null,
-    allowTryItOut: true,
-    displayOperationId: false,
-    displayRequestDuration: false
-  }
-
-  constructor(props, context) {
-    super(props, context)
-    this.state = {
-      tryItOutEnabled: false
-    }
-  }
-
-  componentWillReceiveProps(nextProps) {
-    if(nextProps.response !== this.props.response) {
-      this.setState({ executeInProgress: false })
-    }
-  }
-
-  toggleShown =() => {
-    let { layoutActions, tagKey, operationKey, isShown } = this.props
-    const isShownKey = ["operations", tagKey, operationKey]
-
-    layoutActions.show(isShownKey, !isShown)
-  }
-
-  onTryoutClick =() => {
-    this.setState({tryItOutEnabled: !this.state.tryItOutEnabled})
-  }
-
-  onCancelClick =() => {
-    let { specActions, path, method } = this.props
-    this.setState({tryItOutEnabled: !this.state.tryItOutEnabled})
-    specActions.clearValidateParams([path, method])
-  }
-
-  onExecute = () => {
-    this.setState({ executeInProgress: true })
+    request: null
  }

  render() {
    let {
-      operationKey,
-      tagKey,
-      isShown,
-      jumpToKey,
-      path,
-      method,
-      operation,
-      showSummary,
      response,
      request,
-      allowTryItOut,
-      displayOperationId,
-      displayRequestDuration,
+      toggleShown,
+      onTryoutClick,
+      onCancelClick,
+      onExecute,
      fn,
      getComponent,
+      getConfigs,
      specActions,
      specSelectors,
      authActions,
      authSelectors,
-      getConfigs,
      oas3Actions
    } = this.props
+    let operationProps = this.props.operation

-    let summary = operation.get("summary")
-    let description = operation.get("description")
-    let deprecated = operation.get("deprecated")
-    let extensions = getExtensions(operation)
-    let externalDocs = operation.get("externalDocs")
+    let {
+      isShown,
+      isAuthorized,
+      jumpToKey,
+      path,
+      method,
+      op,
+      tag,
+      showSummary,
+      operationId,
+      allowTryItOut,
+      displayOperationId,
+      displayRequestDuration,
+      isDeepLinkingEnabled,
+      tryItOutEnabled,
+      executeInProgress
+    } = operationProps.toJS()
+
+    let {
+      summary,
+      description,
+      deprecated,
+      externalDocs,
+      schemes
+    } = op.operation
+
+    let operation = operationProps.getIn(["op", "operation"])
+    let security = operationProps.get("security")
    let responses = operation.get("responses")
-    let security = operation.get("security") || specSelectors.security()
    let produces = operation.get("produces")
-    let schemes = operation.get("schemes")
    let parameters = getList(operation, ["parameters"])
-    let operationId = operation.get("__originalOperationId")
    let operationScheme = specSelectors.operationScheme(path, method)
+    let isShownKey = ["operations", tag, operationId]
+    let extensions = getExtensions(operation)

    const Responses = getComponent("responses")
    const Parameters = getComponent( "parameters" )
@@ -129,9 +98,7 @@ export default class Operation extends PureComponent {
    const Schemes = getComponent( "schemes" )
    const OperationExt = getComponent( "OperationExt" )

-    const { deepLinking, showExtensions } = getConfigs()
-
-    const isDeepLinkingEnabled = deepLinking && deepLinking !== "false"
+    const { showExtensions } = getConfigs()

    // Merge in Live Response
    if(responses && response && response.size > 0) {
@@ -139,18 +106,17 @@ export default class Operation extends PureComponent {
      response = response.set("notDocumented", notDocumented)
    }

-    let { tryItOutEnabled } = this.state
    let onChangeKey = [ path, method ] // Used to add values to _this_ operation ( indexed by path and method )

    return (
-        <div className={deprecated ? "opblock opblock-deprecated" : isShown ? `opblock opblock-${method} is-open` : `opblock opblock-${method}`} id={`operations-${tagKey}-${operationKey}`} >
-          <div className={`opblock-summary opblock-summary-${method}`} onClick={this.toggleShown} >
+        <div className={deprecated ? "opblock opblock-deprecated" : isShown ? `opblock opblock-${method} is-open` : `opblock opblock-${method}`} id={isShownKey.join("-")} >
+          <div className={`opblock-summary opblock-summary-${method}`} onClick={toggleShown} >
              <span className="opblock-summary-method">{method.toUpperCase()}</span>
              <span className={ deprecated ? "opblock-summary-path__deprecated" : "opblock-summary-path" } >
              <a
                className="nostyle"
                onClick={isDeepLinkingEnabled ? (e) => e.preventDefault() : null}
-                href={isDeepLinkingEnabled ? `#/${tagKey}/${operationKey}` : null}>
+                href={isDeepLinkingEnabled ? `#/${isShownKey.join("/")}` : null}>
                <span>{path}</span>
              </a>
                <JumpToPath path={jumpToKey} />
@@ -167,7 +133,7 @@ export default class Operation extends PureComponent {
            {
              (!security || !security.count()) ? null :
                <AuthorizeOperationBtn
-                  isAuthorized={ authSelectors.isAuthorized(security) }
+                  isAuthorized={ isAuthorized }
                  onClick={() => {
                    const applicableDefinitions = authSelectors.definitionsForRequirements(security)
                    authActions.showDefinitions(applicableDefinitions)
@@ -203,8 +169,8 @@ export default class Operation extends PureComponent {
                parameters={parameters}
                operation={operation}
                onChangeKey={onChangeKey}
-                onTryoutClick = { this.onTryoutClick }
-                onCancelClick = { this.onCancelClick }
+                onTryoutClick = { onTryoutClick }
+                onCancelClick = { onCancelClick }
                tryItOutEnabled = { tryItOutEnabled }
                allowTryItOut={allowTryItOut}

@@ -229,25 +195,23 @@ export default class Operation extends PureComponent {
              { !tryItOutEnabled || !allowTryItOut ? null :

                  <Execute
-                    getComponent={getComponent}
                    operation={ operation }
                    specActions={ specActions }
                    specSelectors={ specSelectors }
                    path={ path }
                    method={ method }
-                    onExecute={ this.onExecute } />
+                    onExecute={ onExecute } />
              }

              { (!tryItOutEnabled || !response || !allowTryItOut) ? null :
                  <Clear
-                    onClick={ this.onClearClick }
                    specActions={ specActions }
                    path={ path }
                    method={ method }/>
              }
            </div>

-            {this.state.executeInProgress ? <div className="loading-container"><div className="loading"></div></div> : null}
+            {executeInProgress ? <div className="loading-container"><div className="loading"></div></div> : null}

              { !responses ? null :
                  <Responses
@@ -261,7 +225,8 @@ export default class Operation extends PureComponent {
                    specActions={ specActions }
                    produces={ produces }
                    producesValue={ operation.get("produces_value") }
-                    pathMethod={ [path, method] }
+                    path={ path }
+                    method={ method }
                    displayRequestDuration={ displayRequestDuration }
                    fn={fn} />
              }
--- a/src/core/components/operations.jsx
+++ b/src/core/components/operations.jsx
@@ -1,8 +1,6 @@
 import React from "react"
 import PropTypes from "prop-types"
-import { helpers } from "swagger-client"
 import { createDeepLinkPath, sanitizeUrl } from "core/utils"
-const { opId } = helpers

 export default class Operations extends React.Component {

@@ -21,28 +19,20 @@ export default class Operations extends React.Component {
  render() {
    let {
      specSelectors,
-      specActions,
-      oas3Actions,
      getComponent,
      layoutSelectors,
      layoutActions,
-      authActions,
-      authSelectors,
-      getConfigs,
-      fn
+      getConfigs
    } = this.props

    let taggedOps = specSelectors.taggedOperations()

-    const Operation = getComponent("operation")
+    const OperationContainer = getComponent("OperationContainer", true)
    const Collapse = getComponent("Collapse")
    const Markdown = getComponent("Markdown")

-    let showSummary = layoutSelectors.showSummary()
    let {
      docExpansion,
-      displayOperationId,
-      displayRequestDuration,
      maxDisplayedTags,
      deepLinking
    } = getConfigs()
@@ -120,49 +110,15 @@ export default class Operations extends React.Component {
                  <Collapse isOpened={showTag}>
                    {
                      operations.map( op => {
+                        const path = op.get("path")
+                        const method = op.get("method")

-                        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 tagKey = createDeepLinkPath(tag)
-                        const operationKey = createDeepLinkPath(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"))
-
-                        return <Operation
-                          {...op.toObject()}
-                          tagKey={tagKey}
-                          operationKey={operationKey}
-                          isShown={layoutSelectors.isShown(["operations", tagKey, operationKey], docExpansion === "full")}
-                          jumpToKey={jumpToKey}
-                          showSummary={showSummary}
-                          key={tagKey + operationKey}
-                          response={ response }
-                          request={ request }
-                          allowTryItOut={allowTryItOut}
-
-                          displayOperationId={displayOperationId}
-                          displayRequestDuration={displayRequestDuration}
-
-                          specActions={ specActions }
-                          specSelectors={ specSelectors }
-
-                          oas3Actions={oas3Actions}
-
-                          layoutActions={ layoutActions }
-                          layoutSelectors={ layoutSelectors }
-
-                          authActions={ authActions }
-                          authSelectors={ authSelectors }
-
-                          getComponent={ getComponent }
-                          fn={fn}
-                          getConfigs={ getConfigs }
+                        return <OperationContainer
+                          key={`${path}-${method}`}
+                          op={op}
+                          path={path}
+                          method={method}
+                          tag={tag}
                        />
                      }).toArray()
                    }
--- a/src/core/components/response.jsx
+++ b/src/core/components/response.jsx
@@ -1,7 +1,7 @@
 import React from "react"
 import PropTypes from "prop-types"
 import cx from "classnames"
-import { fromJS, Seq } from "immutable"
+import { fromJS, Seq, Iterable } from "immutable"
 import { getSampleSchema, fromJSOrdered } from "core/utils"

 const getExampleComponent = ( sampleResponse, examples, HighlightCode ) => {
@@ -42,7 +42,7 @@ export default class Response extends React.Component {

  static propTypes = {
    code: PropTypes.string.isRequired,
-    response: PropTypes.object,
+    response: PropTypes.instanceOf(Iterable),
    className: PropTypes.string,
    getComponent: PropTypes.func.isRequired,
    getConfigs: PropTypes.func.isRequired,
--- a/src/core/components/responses.jsx
+++ b/src/core/components/responses.jsx
@@ -1,41 +1,52 @@
 import React from "react"
 import PropTypes from "prop-types"
-import { fromJS } from "immutable"
+import { fromJS, Iterable } from "immutable"
 import { defaultStatusCode, getAcceptControllingResponse } from "core/utils"

 export default class Responses extends React.Component {
-
  static propTypes = {
-    request: PropTypes.object,
-    tryItOutResponse: PropTypes.object,
-    responses: PropTypes.object.isRequired,
-    produces: PropTypes.object,
+    tryItOutResponse: PropTypes.instanceOf(Iterable),
+    responses: PropTypes.instanceOf(Iterable).isRequired,
+    produces: PropTypes.instanceOf(Iterable),
    producesValue: PropTypes.any,
+    displayRequestDuration: PropTypes.bool.isRequired,
+    path: PropTypes.string.isRequired,
+    method: PropTypes.string.isRequired,
    getComponent: PropTypes.func.isRequired,
    getConfigs: PropTypes.func.isRequired,
    specSelectors: PropTypes.object.isRequired,
    specActions: PropTypes.object.isRequired,
    oas3Actions: PropTypes.object.isRequired,
-    pathMethod: PropTypes.array.isRequired,
-    displayRequestDuration: PropTypes.bool.isRequired,
    fn: PropTypes.object.isRequired
  }

  static defaultProps = {
-    request: null,
    tryItOutResponse: null,
    produces: fromJS(["application/json"]),
    displayRequestDuration: false
  }

-  onChangeProducesWrapper = ( val ) => this.props.specActions.changeProducesValue(this.props.pathMethod, val)
+  shouldComponentUpdate(nextProps) {
+    // BUG: props.tryItOutResponse is always coming back as a new Immutable instance
+    let render = this.props.tryItOutResponse !== nextProps.tryItOutResponse
+    || this.props.responses !== nextProps.responses
+    || this.props.produces !== nextProps.produces
+    || this.props.producesValue !== nextProps.producesValue
+    || this.props.displayRequestDuration !== nextProps.displayRequestDuration
+    || this.props.path !== nextProps.path
+    || this.props.method !== nextProps.method
+    return render
+  }
+
+	onChangeProducesWrapper = ( val ) => this.props.specActions.changeProducesValue([this.props.path, this.props.method], val)

  onResponseContentTypeChange = ({ controlsAcceptHeader, value }) => {
-    const { oas3Actions, pathMethod } = this.props
+    const { oas3Actions, path, method } = this.props
    if(controlsAcceptHeader) {
      oas3Actions.setResponseContentType({
        value,
-        pathMethod
+        path,
+        method
      })
    }
  }
@@ -43,7 +54,6 @@ export default class Responses extends React.Component {
  render() {
    let {
      responses,
-      request,
      tryItOutResponse,
      getComponent,
      getConfigs,
@@ -81,12 +91,12 @@ export default class Responses extends React.Component {
          {
            !tryItOutResponse ? null
                              : <div>
-                                  <LiveResponse request={ request }
-                                                response={ tryItOutResponse }
+                                  <LiveResponse response={ tryItOutResponse }
                                                getComponent={ getComponent }
                                                getConfigs={ getConfigs }
                                                specSelectors={ specSelectors }
-                                                pathMethod={ this.props.pathMethod }
+                                                path={ this.props.path }
+                                                method={ this.props.method }
                                                displayRequestDuration={ displayRequestDuration } />
                                  <h4>Responses</h4>
                                </div>