Merge ft/performance (#3670)

* Updated docs for correct usage of SWAGGER_JSON * Removed href attribute from anchor tag if deeplinking is disabled * If deeplinking is disabled the anchor tag has no href attribute as a result the mouse pointer is not a pointer as it is no longer a hyperlink, setting the cursor explicitly to pointer. * Refactor: use ternary operators at attribute level instead of element level * Only polyfill Promise if it doesn't exist at all * v3.1.7 * Typo fix * fix #3624 * Squash commit: OAS3 Try-It-Out changes * Parse JSON requestBodies so Client can consume them correctly * Use Client branch * Fix typo in swagger-client dependency * Fix property names being displayed in array models * Working on refactoring of model.jsx * Fit linter and tests * Add comment to array-model for to clarify change. Rework logic in `Model.render()` to fix bug with overriding name and schema from `$ref` definition. * v3.2.0 * fromJS does not maintain order of object properties. Use a reviver function with fromJS inside the response.jsx component for the passed down schema prop. * OAS3 Accept header control: Component-side * OAS3 Accept header control: State-side * Update response.jsx to use already existing, fromJSOrdered function * Added test for response.jsx to make sure properties are passed to `ModelExample` component in the correct order * Remove `it.only` from new test * Fixes #3596 Wrap `isShownKey` values in a function that replaces spaces with underscores. When parsing the hash on route change, replace the spaces in the values with underscores again. * Replace spaces with underscores when setting the hash value and inserting the ID into the DOM. Escape the deep link path when querying for the DOM element on hash change. * Handle null value in createDeepLinkPath * Add extra check for String types in `createDeepLinkPath`. Add `trim()` call on passed-in value in `createDeepLinkPath`. Added unit tests for new deep link util functions. * LINTING! * Roll back win import removal Lost in merge conflict.... * More merge oversights...
2017-09-15 22:09:35 -06:00
parent 32c96e348b
commit 91a4794ab5
43 changed files with 1088 additions and 154 deletions
--- a/src/core/components/array-model.jsx
+++ b/src/core/components/array-model.jsx
@@ -28,10 +28,15 @@ export default class ArrayModel extends Component {
        <span className="model-title__text">{ title }</span>
      </span>

+    /* 
+    Note: we set `name={null}` in <Model> below because we don't want
+    the name of the current Model passed (and displayed) as the name of the array element Model
+    */ 
+
    return <span className="model">
      <ModelCollapse title={titleEl} collapsed={ depth > expandDepth } collapsedContent="[...]">
        [
-          <span><Model { ...this.props } schema={ items } required={ false } depth={ depth + 1 } /></span>
+          <span><Model { ...this.props } name={null} schema={ items } required={ false } depth={ depth + 1 } /></span>
        ]
        {
          properties.size ? <span>
--- a/src/core/components/layouts/base.jsx
+++ b/src/core/components/layouts/base.jsx
@@ -8,6 +8,8 @@ export default class BaseLayout extends React.Component {
    errActions: PropTypes.object.isRequired,
    specActions: PropTypes.object.isRequired,
    specSelectors: PropTypes.object.isRequired,
+    oas3Selectors: PropTypes.object.isRequired,
+    oas3Actions: PropTypes.object.isRequired,
    layoutSelectors: PropTypes.object.isRequired,
    layoutActions: PropTypes.object.isRequired,
    getComponent: PropTypes.func.isRequired
@@ -19,7 +21,14 @@ export default class BaseLayout extends React.Component {
  }

  render() {
-    let { specSelectors, specActions, getComponent, layoutSelectors } = this.props
+    let {
+      specSelectors,
+      specActions,
+      getComponent,
+      layoutSelectors,
+      oas3Selectors,
+      oas3Actions
+    } = this.props

    let info = specSelectors.info()
    let url = specSelectors.url()
@@ -28,6 +37,7 @@ export default class BaseLayout extends React.Component {
    let securityDefinitions = specSelectors.securityDefinitions()
    let externalDocs = specSelectors.externalDocs()
    let schemes = specSelectors.schemes()
+    let servers = specSelectors.servers()

    let Info = getComponent("info")
    let Operations = getComponent("operations", true)
@@ -35,6 +45,7 @@ export default class BaseLayout extends React.Component {
    let AuthorizeBtn = getComponent("authorizeBtn", true)
    let Row = getComponent("Row")
    let Col = getComponent("Col")
+    let Servers = getComponent("Servers")
    let Errors = getComponent("errors", true)

    let isLoading = specSelectors.loadingStatus() === "loading"
@@ -82,6 +93,22 @@ export default class BaseLayout extends React.Component {
              </div>
            ) : null }

+            { servers && servers.size ? (
+              <div className="server-container">
+                <Col className="servers wrapper" mobile={12}>
+                  <Servers
+                    servers={servers}
+                    currentServer={oas3Selectors.selectedServer()}
+                    setSelectedServer={oas3Actions.setSelectedServer}
+                    setServerVariableValue={oas3Actions.setServerVariableValue}
+                    getServerVariable={oas3Selectors.serverVariableValue}
+                    getEffectiveServerValue={oas3Selectors.serverEffectiveValue}
+                    />
+                </Col>
+              </div>
+
+            ) : null}
+
            {
              filter === null || filter === false ? null :
                <div className="filter-container">
--- a/src/core/components/model.jsx
+++ b/src/core/components/model.jsx
@@ -30,39 +30,38 @@ export default class Model extends Component {

  render () {
    let { getComponent, specSelectors, schema, required, name, isRef } = this.props
-    let ObjectModel = getComponent("ObjectModel")
-    let ArrayModel = getComponent("ArrayModel")
-    let PrimitiveModel = getComponent("PrimitiveModel")
+    const ObjectModel = getComponent("ObjectModel")
+    const ArrayModel = getComponent("ArrayModel")
+    const PrimitiveModel = getComponent("PrimitiveModel")
+    let type = "object"
    let $$ref = schema && schema.get("$$ref")
-    let modelName = $$ref && this.getModelName( $$ref )
-    let modelSchema, type
-
+    
+    // If we weren't passed a `name` but have a ref, grab the name from the ref
+    if ( !name && $$ref ) {
+      name = this.getModelName( $$ref )
+    }
+    // If we weren't passed a `schema` but have a ref, grab the schema from the ref
+    if ( !schema && $$ref ) {
+      schema = this.getRefSchema( name )
+    }
+    
    const deprecated = specSelectors.isOAS3() && schema.get("deprecated")
-
-    if ( schema && (schema.get("type") || schema.get("properties")) ) {
-      modelSchema = schema
-    } else if ( $$ref ) {
-      modelSchema = this.getRefSchema( modelName )
-    }
-
-    type = modelSchema && modelSchema.get("type")
-    if ( !type && modelSchema && modelSchema.get("properties") ) {
-      type = "object"
-    }
-
+    isRef = isRef !== undefined ? isRef : !!$$ref
+    type = schema && schema.get("type") || type
+    
    switch(type) {
      case "object":
        return <ObjectModel
          className="object" { ...this.props }
-          schema={ modelSchema }
-          name={ modelName || name }
+          schema={ schema }
+          name={ name }
          deprecated={deprecated}
-          isRef={ isRef!== undefined ? isRef : !!$$ref } />
+          isRef={ isRef } />
      case "array":
        return <ArrayModel
          className="array" { ...this.props }
-          schema={ modelSchema }
-          name={ modelName || name }
+          schema={ schema }
+          name={ name }
          deprecated={deprecated}
          required={ required } />
      case "string":
@@ -73,9 +72,10 @@ export default class Model extends Component {
        return <PrimitiveModel
          { ...this.props }
          getComponent={ getComponent }
-          schema={ modelSchema }
-          name={ modelName || name }
+          schema={ schema }
+          name={ name }
          deprecated={deprecated}
-          required={ required }/> }
+          required={ required }/>
+    }
  }
 }
--- a/src/core/components/models.jsx
+++ b/src/core/components/models.jsx
@@ -34,7 +34,6 @@ export default class Models extends Component {
            return <div className="model-container" key={ `models-section-${name}` }>
              <ModelWrapper name={ name }
                     schema={ model }
-                     isRef={ true }
                     getComponent={ getComponent }
                     specSelectors={ specSelectors }/>
              </div>
--- a/src/core/components/operation.jsx
+++ b/src/core/components/operation.jsx
@@ -28,6 +28,7 @@ export default class Operation extends PureComponent {
    authSelectors: PropTypes.object,
    specActions: PropTypes.object.isRequired,
    specSelectors: PropTypes.object.isRequired,
+    oas3Actions: PropTypes.object.isRequired,
    layoutActions: PropTypes.object.isRequired,
    layoutSelectors: PropTypes.object.isRequired,
    fn: PropTypes.object.isRequired,
@@ -117,7 +118,8 @@ export default class Operation extends PureComponent {
      specSelectors,
      authActions,
      authSelectors,
-      getConfigs
+      getConfigs,
+      oas3Actions
    } = this.props

    let summary = operation.get("summary")
@@ -161,12 +163,12 @@ export default class Operation extends PureComponent {
          <div className={`opblock-summary opblock-summary-${method}`} onClick={this.toggleShown} >
              <span className="opblock-summary-method">{method.toUpperCase()}</span>
              <span className={ deprecated ? "opblock-summary-path__deprecated" : "opblock-summary-path" } >
-                <a
-                  className="nostyle"
-                  onClick={(e) => e.preventDefault()}
-                  href={ isDeepLinkingEnabled ? `#/${isShownKey[1]}/${isShownKey[2]}` : ""} >
-                  <span>{path}</span>
-                </a>
+              <a
+                className="nostyle"
+                onClick={isDeepLinkingEnabled ? (e) => e.preventDefault() : null}
+                href={isDeepLinkingEnabled ? `#/${isShownKey[1]}/${isShownKey[2]}` : null}>
+                <span>{path}</span>
+              </a>
                <JumpToPath path={jumpToKey} />
              </span>

@@ -265,6 +267,7 @@ export default class Operation extends PureComponent {
                    getComponent={ getComponent }
                    getConfigs={ getConfigs }
                    specSelectors={ specSelectors }
+                    oas3Actions={oas3Actions}
                    specActions={ specActions }
                    produces={ produces }
                    producesValue={ operation.get("produces_value") }
--- a/src/core/components/operations.jsx
+++ b/src/core/components/operations.jsx
@@ -1,7 +1,7 @@
 import React from "react"
 import PropTypes from "prop-types"
 import { helpers } from "swagger-client"
-
+import { createDeepLinkPath } from "core/utils"
 const { opId } = helpers

 export default class Operations extends React.Component {
@@ -9,6 +9,7 @@ export default class Operations extends React.Component {
  static propTypes = {
    specSelectors: PropTypes.object.isRequired,
    specActions: PropTypes.object.isRequired,
+    oas3Actions: PropTypes.object.isRequired,
    getComponent: PropTypes.func.isRequired,
    layoutSelectors: PropTypes.object.isRequired,
    layoutActions: PropTypes.object.isRequired,
@@ -21,6 +22,7 @@ export default class Operations extends React.Component {
    let {
      specSelectors,
      specActions,
+      oas3Actions,
      getComponent,
      layoutSelectors,
      layoutActions,
@@ -69,7 +71,7 @@ export default class Operations extends React.Component {
              let tagExternalDocsDescription = tagObj.getIn(["tagDetails", "externalDocs", "description"])
              let tagExternalDocsUrl = tagObj.getIn(["tagDetails", "externalDocs", "url"])

-              let isShownKey = ["operations-tag", tag]
+              let isShownKey = ["operations-tag", createDeepLinkPath(tag)]
              let showTag = layoutSelectors.isShown(isShownKey, docExpansion === "full" || docExpansion === "list")

              return (
@@ -81,8 +83,8 @@ export default class Operations extends React.Component {
                    id={isShownKey.join("-")}>
                    <a
                      className="nostyle"
-                      onClick={(e) => e.preventDefault()}
-                      href={ isDeepLinkingEnabled ? `#/${tag}` : ""}>
+                      onClick={isDeepLinkingEnabled ? (e) => e.preventDefault() : null}
+                      href= {isDeepLinkingEnabled ? `#/${tag}` : null}>
                      <span>{tag}</span>
                    </a>
                    { !tagDescription ? null :
@@ -124,7 +126,7 @@ export default class Operations extends React.Component {

                        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 isShownKey = ["operations", createDeepLinkPath(tag), createDeepLinkPath(operationId)]

                        const allowTryItOut = specSelectors.allowTryItOutFor(op.get("path"), op.get("method"))
                        const response = specSelectors.responseFor(op.get("path"), op.get("method"))
@@ -147,6 +149,8 @@ export default class Operations extends React.Component {
                          specActions={ specActions }
                          specSelectors={ specSelectors }

+                          oas3Actions={oas3Actions}
+
                          layoutActions={ layoutActions }
                          layoutSelectors={ layoutSelectors }

--- a/src/core/components/parameter-row.jsx
+++ b/src/core/components/parameter-row.jsx
@@ -81,12 +81,11 @@ export default class ParameterRow extends Component {
    const Markdown = getComponent("Markdown")

    let schema = param.get("schema")
-
    let type = isOAS3 && isOAS3() ? param.getIn(["schema", "type"]) : param.get("type")
    let isFormData = inType === "formData"
    let isFormDataSupported = "FormData" in win
    let required = param.get("required")
-    let itemType =  param.getIn(isOAS3 && isOAS3() ? ["schema", "items", "type"] : ["items", "type"])
+    let itemType = param.getIn(isOAS3 && isOAS3() ? ["schema", "items", "type"] : ["items", "type"])
    let parameter = specSelectors.getParameter(pathMethod, param.get("name"))
    let value = parameter ? parameter.get("value") : ""

--- a/src/core/components/response.jsx
+++ b/src/core/components/response.jsx
@@ -1,7 +1,8 @@
 import React from "react"
 import PropTypes from "prop-types"
+import cx from "classnames"
 import { fromJS, Seq } from "immutable"
-import { getSampleSchema } from "core/utils"
+import { getSampleSchema, fromJSOrdered } from "core/utils"

 const getExampleComponent = ( sampleResponse, examples, HighlightCode ) => {
  if ( examples && examples.size ) {
@@ -46,23 +47,35 @@ export default class Response extends React.Component {
    getComponent: PropTypes.func.isRequired,
    specSelectors: PropTypes.object.isRequired,
    fn: PropTypes.object.isRequired,
-    contentType: PropTypes.string
+    contentType: PropTypes.string,
+    controlsAcceptHeader: PropTypes.bool,
+    onContentTypeChange: PropTypes.func
  }

  static defaultProps = {
    response: fromJS({}),
+    onContentTypeChange: () => {}
  };

+  _onContentTypeChange = (value) => {
+    const { onContentTypeChange, controlsAcceptHeader } = this.props
+    this.setState({ responseContentType: value })
+    onContentTypeChange({
+      value: value,
+      controlsAcceptHeader
+    })
+  }
+
  render() {
    let {
      code,
      response,
      className,
-
      fn,
      getComponent,
      specSelectors,
-      contentType
+      contentType,
+      controlsAcceptHeader
    } = this.props

    let { inferSchema } = fn
@@ -107,17 +120,24 @@ 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 }
+          { isOAS3 ?
+            <div className={cx("response-content-type", {
+              "controls-accept-header": controlsAcceptHeader
+            })}>
+              <ContentType
+                  value={this.state.responseContentType}
+                  contentTypes={ response.get("content") ? response.get("content").keySeq() : Seq() }
+                  onChange={this._onContentTypeChange}
+                  />
+                { controlsAcceptHeader ? <small>Controls <code>Accept</code> header.</small> : null }
+            </div>
+             : null }

          { example ? (
            <ModelExample
              getComponent={ getComponent }
              specSelectors={ specSelectors }
-              schema={ fromJS(schema) }
+              schema={ fromJSOrdered(schema) }
              example={ example }/>
          ) : null}

--- a/src/core/components/responses.jsx
+++ b/src/core/components/responses.jsx
@@ -1,7 +1,7 @@
 import React from "react"
 import PropTypes from "prop-types"
 import { fromJS } from "immutable"
-import { defaultStatusCode } from "core/utils"
+import { defaultStatusCode, getAcceptControllingResponse } from "core/utils"

 export default class Responses extends React.Component {

@@ -14,6 +14,7 @@ export default class Responses extends React.Component {
    getComponent: 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,
@@ -29,8 +30,28 @@ export default class Responses extends React.Component {

  onChangeProducesWrapper = ( val ) => this.props.specActions.changeProducesValue(this.props.pathMethod, val)

+  onResponseContentTypeChange = ({ controlsAcceptHeader, value }) => {
+    const { oas3Actions, pathMethod } = this.props
+    if(controlsAcceptHeader) {
+      oas3Actions.setResponseContentType({
+        value,
+        pathMethod
+      })
+    }
+  }
+
  render() {
-    let { responses, request, tryItOutResponse, getComponent, getConfigs, specSelectors, fn, producesValue, displayRequestDuration } = this.props
+    let {
+      responses,
+      request,
+      tryItOutResponse,
+      getComponent,
+      getConfigs,
+      specSelectors,
+      fn,
+      producesValue,
+      displayRequestDuration
+    } = this.props
    let defaultCode = defaultStatusCode( responses )

    const ContentType = getComponent( "contentType" )
@@ -39,6 +60,11 @@ export default class Responses extends React.Component {

    let produces = this.props.produces && this.props.produces.size ? this.props.produces : Responses.defaultProps.produces

+    const isSpecOAS3 = specSelectors.isOAS3()
+
+    const acceptControllingResponse = isSpecOAS3 ?
+      getAcceptControllingResponse(responses) : null
+
    return (
      <div className="responses-wrapper">
        <div className="opblock-section-header">
@@ -78,7 +104,6 @@ export default class Responses extends React.Component {
            <tbody>
              {
                responses.entrySeq().map( ([code, response]) => {
-
                  let className = tryItOutResponse && tryItOutResponse.get("status") == code ? "response_current" : ""
                  return (
                    <Response key={ code }
@@ -88,6 +113,8 @@ export default class Responses extends React.Component {
                              code={ code }
                              response={ response }
                              specSelectors={ specSelectors }
+                              controlsAcceptHeader={response === acceptControllingResponse}
+                              onContentTypeChange={this.onResponseContentTypeChange}
                              contentType={ producesValue }
                              getComponent={ getComponent }/>
                    )