@upendra19/swagger-ui-custom 1.0.0

package/src/core/components/response.jsx

@@ -0,0 +1,276 @@
+import React from "react"
+import PropTypes from "prop-types"
+import ImPropTypes from "react-immutable-proptypes"
+import cx from "classnames"
+import { fromJS, Seq, Iterable, Map } from "immutable"
+import { getExtensions, fromJSOrdered, stringify } from "core/utils"
+import { getKnownSyntaxHighlighterLanguage } from "core/utils/jsonParse"
+
+
+const getExampleComponent = ( sampleResponse, HighlightCode ) => {
+  if (sampleResponse == null) return null
+
+  const testValueForJson = getKnownSyntaxHighlighterLanguage(sampleResponse)
+  const language = testValueForJson ? "json" : null
+
+  return (
+    <div>
+      <HighlightCode className="example" language={language}>{stringify(sampleResponse)}</HighlightCode>
+    </div>
+  )
+}
+
+export default class Response extends React.Component {
+  constructor(props, context) {
+    super(props, context)
+
+    this.state = {
+      responseContentType: "",
+    }
+  }
+
+  static propTypes = {
+    path: PropTypes.string.isRequired,
+    method: PropTypes.string.isRequired,
+    code: PropTypes.string.isRequired,
+    response: PropTypes.instanceOf(Iterable),
+    className: PropTypes.string,
+    getComponent: PropTypes.func.isRequired,
+    getConfigs: PropTypes.func.isRequired,
+    specSelectors: PropTypes.object.isRequired,
+    oas3Actions: PropTypes.object.isRequired,
+    specPath: ImPropTypes.list.isRequired,
+    fn: PropTypes.object.isRequired,
+    contentType: PropTypes.string,
+    activeExamplesKey: 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
+    })
+  }
+
+  getTargetExamplesKey = () => {
+    const { response, contentType, activeExamplesKey } = this.props
+
+    const activeContentType = this.state.responseContentType || contentType
+    const activeMediaType = response.getIn(["content", activeContentType], Map({}))
+    const examplesForMediaType = activeMediaType.get("examples", null)
+
+    const firstExamplesKey = examplesForMediaType.keySeq().first()
+    return activeExamplesKey || firstExamplesKey
+  }
+
+  render() {
+    let {
+      path,
+      method,
+      code,
+      response,
+      className,
+      specPath,
+      fn,
+      getComponent,
+      getConfigs,
+      specSelectors,
+      contentType,
+      controlsAcceptHeader,
+      oas3Actions,
+    } = this.props
+
+    let { inferSchema, getSampleSchema } = fn
+    let isOAS3 = specSelectors.isOAS3()
+    const { showExtensions } = getConfigs()
+
+    let extensions = showExtensions ? getExtensions(response) : null
+    let headers = response.get("headers")
+    let links = response.get("links")
+    const ResponseExtension = getComponent("ResponseExtension")
+    const Headers = getComponent("headers")
+    const HighlightCode = getComponent("HighlightCode", true)
+    const ModelExample = getComponent("modelExample")
+    const Markdown = getComponent("Markdown", true)
+    const OperationLink = getComponent("operationLink")
+    const ContentType = getComponent("contentType")
+    const ExamplesSelect = getComponent("ExamplesSelect")
+    const Example = getComponent("Example")
+
+
+    var schema, specPathWithPossibleSchema
+
+    const activeContentType = this.state.responseContentType || contentType
+    const activeMediaType = response.getIn(["content", activeContentType], Map({}))
+    const examplesForMediaType = activeMediaType.get("examples", null)
+
+    // Goal: find a schema value for `schema`
+    if(isOAS3) {
+      const oas3SchemaForContentType = activeMediaType.get("schema")
+
+      schema = oas3SchemaForContentType ? inferSchema(oas3SchemaForContentType.toJS()) : null
+      specPathWithPossibleSchema = oas3SchemaForContentType
+        ? specPath.push("content", this.state.responseContentType, "schema")
+        : specPath
+    } else {
+      schema = response.get("schema")
+      specPathWithPossibleSchema = response.has("schema") ? specPath.push("schema") : specPath
+    }
+
+    let mediaTypeExample
+    let shouldOverrideSchemaExample = false
+    let sampleSchema
+    let sampleGenConfig = {
+      includeReadOnly: true
+    }
+
+    // Goal: find an example value for `sampleResponse`
+    if(isOAS3) {
+      sampleSchema = activeMediaType.get("schema")?.toJS()
+      if(Map.isMap(examplesForMediaType) && !examplesForMediaType.isEmpty()) {
+        const targetExamplesKey = this.getTargetExamplesKey()
+        const targetExample = examplesForMediaType
+          .get(targetExamplesKey, Map({}))
+        const getMediaTypeExample = (targetExample) =>
+          Map.isMap(targetExample) 
+          ? targetExample.get("value") 
+          : undefined
+        mediaTypeExample = getMediaTypeExample(targetExample)
+        if(mediaTypeExample === undefined) {
+          mediaTypeExample = getMediaTypeExample(examplesForMediaType.values().next().value)
+        }
+        shouldOverrideSchemaExample = true
+      } else if(activeMediaType.get("example") !== undefined) {
+        // use the example key's value
+        mediaTypeExample = activeMediaType.get("example")
+        shouldOverrideSchemaExample = true
+      }
+    } else {
+      sampleSchema = schema
+      sampleGenConfig = {...sampleGenConfig, includeWriteOnly: true}
+      const oldOASMediaTypeExample = response.getIn(["examples", activeContentType])
+      if(oldOASMediaTypeExample) {
+        mediaTypeExample = oldOASMediaTypeExample
+        shouldOverrideSchemaExample = true
+      }
+    }
+
+    const sampleResponse = getSampleSchema(
+      sampleSchema,
+      activeContentType,
+      sampleGenConfig,
+      shouldOverrideSchemaExample ? mediaTypeExample : undefined
+    )
+
+    const example = getExampleComponent( sampleResponse, HighlightCode )
+
+    return (
+      <tr className={ "response " + ( className || "") } data-code={code}>
+        <td className="response-col_status">
+          { code }
+        </td>
+        <td className="response-col_description">
+
+          <div className="response-col_description__inner">
+            <Markdown source={ response.get( "description" ) } />
+          </div>
+
+          { !showExtensions || !extensions.size ? null : extensions.entrySeq().map(([key, v]) => <ResponseExtension key={`${key}-${v}`} xKey={key} xVal={v} /> )}
+
+          {isOAS3 && response.get("content") ? (
+            <section className="response-controls">
+              <div
+                className={cx("response-control-media-type", {
+                  "response-control-media-type--accept-controller": controlsAcceptHeader
+                })}
+              >
+                <small className="response-control-media-type__title">
+                  Media type
+                </small>
+                <ContentType
+                  value={this.state.responseContentType}
+                  contentTypes={
+                    response.get("content")
+                      ? response.get("content").keySeq()
+                      : Seq()
+                  }
+                  onChange={this._onContentTypeChange}
+                  ariaLabel="Media Type"
+                />
+                {controlsAcceptHeader ? (
+                  <small className="response-control-media-type__accept-message">
+                    Controls <code>Accept</code> header.
+                  </small>
+                ) : null}
+              </div>
+              {Map.isMap(examplesForMediaType) && !examplesForMediaType.isEmpty() ? (
+                <div className="response-control-examples">
+                  <small className="response-control-examples__title">
+                    Examples
+                  </small>
+                  <ExamplesSelect
+                    examples={examplesForMediaType}
+                    currentExampleKey={this.getTargetExamplesKey()}
+                    onSelect={key =>
+                      oas3Actions.setActiveExamplesMember({
+                        name: key,
+                        pathMethod: [path, method],
+                        contextType: "responses",
+                        contextName: code
+                      })
+                    }
+                    showLabels={false}
+                  />
+                </div>
+              ) : null}
+            </section>
+          ) : null}
+
+          { example || schema ? (
+            <ModelExample
+              specPath={specPathWithPossibleSchema}
+              getComponent={ getComponent }
+              getConfigs={ getConfigs }
+              specSelectors={ specSelectors }
+              schema={ fromJSOrdered(schema) }
+              example={ example }
+              includeReadOnly={ true }/>
+          ) : null }
+
+          { isOAS3 && examplesForMediaType ? (
+              <Example
+                example={examplesForMediaType.get(this.getTargetExamplesKey(), Map({}))}
+                getComponent={getComponent}
+                getConfigs={getConfigs}
+                omitValue={true}
+              />
+          ) : null}
+
+          { headers ? (
+            <Headers
+              headers={ headers }
+              getComponent={ getComponent }
+            />
+          ) : null}
+
+        </td>
+        {isOAS3 ? <td className="response-col_links">
+          { links ?
+            links.toSeq().entrySeq().map(([key, link]) => {
+              return <OperationLink key={key} name={key} link={ link } getComponent={getComponent}/>
+            })
+          : <i>No links</i>}
+        </td> : null}
+      </tr>
+    )
+  }
+}

package/src/core/components/responses.jsx

@@ -0,0 +1,170 @@
+import React from "react"
+import { fromJS, Iterable } from "immutable"
+import PropTypes from "prop-types"
+import ImPropTypes from "react-immutable-proptypes"
+import { defaultStatusCode, getAcceptControllingResponse, isExtension } from "core/utils"
+import createHtmlReadyId from "core/utils/create-html-ready-id"
+
+export default class Responses extends React.Component {
+  static propTypes = {
+    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,
+    oas3Selectors: PropTypes.object.isRequired,
+    specPath: ImPropTypes.list.isRequired,
+    fn: PropTypes.object.isRequired
+  }
+
+  static defaultProps = {
+    tryItOutResponse: null,
+    produces: fromJS(["application/json"]),
+    displayRequestDuration: false
+  }
+
+  // These performance-enhancing checks were disabled as part of Multiple Examples
+  // because they were causing data-consistency issues
+  //
+  // 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, path, method } = this.props
+    if(controlsAcceptHeader) {
+      oas3Actions.setResponseContentType({
+        value,
+        path,
+        method
+      })
+    }
+  }
+
+  render() {
+    let {
+      responses,
+      tryItOutResponse,
+      getComponent,
+      getConfigs,
+      specSelectors,
+      fn,
+      producesValue,
+      displayRequestDuration,
+      specPath,
+      path,
+      method,
+      oas3Selectors,
+      oas3Actions,
+    } = this.props
+    let defaultCode = defaultStatusCode( responses )
+
+    const ContentType = getComponent( "contentType" )
+    const LiveResponse = getComponent( "liveResponse" )
+    const Response = getComponent( "response" )
+
+    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
+
+    const nonExtensionResponses = responses.filter((_, key) => !isExtension(key))
+    const regionId = createHtmlReadyId(`${method}${path}_responses`)
+    const controlId = `${regionId}_select`
+
+    return (!nonExtensionResponses || !nonExtensionResponses.size) ? null : (
+      <div className="responses-wrapper">
+        <div className="opblock-section-header">
+          <h4>Responses</h4>
+            { specSelectors.isOAS3() ? null : <label htmlFor={controlId}>
+              <span>Response content type</span>
+              <ContentType value={producesValue}
+                         ariaControls={regionId}
+                         ariaLabel="Response content type"
+                         className="execute-content-type"
+                         contentTypes={produces}
+                         controlId={controlId}
+                         onChange={this.onChangeProducesWrapper} />
+                     </label> }
+        </div>
+        <div className="responses-inner">
+          {
+            !tryItOutResponse ? null
+                              : <div>
+                                  <LiveResponse response={ tryItOutResponse }
+                                                getComponent={ getComponent }
+                                                getConfigs={ getConfigs }
+                                                specSelectors={ specSelectors }
+                                                path={ this.props.path }
+                                                method={ this.props.method }
+                                                displayRequestDuration={ displayRequestDuration } />
+                                  <h4>Responses</h4>
+                                </div>
+
+          }
+
+          <table aria-live="polite" className="responses-table" id={regionId} role="region">
+            <thead>
+              <tr className="responses-header">
+                <td className="col_header response-col_status">Code</td>
+                <td className="col_header response-col_description">Description</td>
+                { specSelectors.isOAS3() ? <td className="col col_header response-col_links">Links</td> : null }
+              </tr>
+            </thead>
+            <tbody>
+              {
+                nonExtensionResponses.entrySeq().map( ([code, response]) => {
+
+                  let className = tryItOutResponse && tryItOutResponse.get("status") == code ? "response_current" : ""
+                  return (
+                    <Response key={ code }
+                              path={path}
+                              method={method}
+                              specPath={specPath.push(code)}
+                              isDefault={defaultCode === code}
+                              fn={fn}
+                              className={ className }
+                              code={ code }
+                              response={ response }
+                              specSelectors={ specSelectors }
+                              controlsAcceptHeader={response === acceptControllingResponse}
+                              onContentTypeChange={this.onResponseContentTypeChange}
+                              contentType={ producesValue }
+                              getConfigs={ getConfigs }
+                              activeExamplesKey={oas3Selectors.activeExamplesMember(
+                                path,
+                                method,
+                                "responses",
+                                code
+                              )}
+                              oas3Actions={oas3Actions}
+                              getComponent={ getComponent }/>
+                    )
+                }).toArray()
+              }
+            </tbody>
+          </table>
+        </div>
+      </div>
+    )
+  }
+}

package/src/core/components/svg-assets.jsx

@@ -0,0 +1,48 @@
+import React from "react"
+const SvgAssets = () =>
+  <div>
+    <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" className="svg-assets">
+      <defs>
+        <symbol viewBox="0 0 20 20" id="unlocked">
+          <path d="M15.8 8H14V5.6C14 2.703 12.665 1 10 1 7.334 1 6 2.703 6 5.6V6h2v-.801C8 3.754 8.797 3 10 3c1.203 0 2 .754 2 2.199V8H4c-.553 0-1 .646-1 1.199V17c0 .549.428 1.139.951 1.307l1.197.387C5.672 18.861 6.55 19 7.1 19h5.8c.549 0 1.428-.139 1.951-.307l1.196-.387c.524-.167.953-.757.953-1.306V9.199C17 8.646 16.352 8 15.8 8z"></path>
+        </symbol>
+
+        <symbol viewBox="0 0 20 20" id="locked">
+          <path d="M15.8 8H14V5.6C14 2.703 12.665 1 10 1 7.334 1 6 2.703 6 5.6V8H4c-.553 0-1 .646-1 1.199V17c0 .549.428 1.139.951 1.307l1.197.387C5.672 18.861 6.55 19 7.1 19h5.8c.549 0 1.428-.139 1.951-.307l1.196-.387c.524-.167.953-.757.953-1.306V9.199C17 8.646 16.352 8 15.8 8zM12 8H8V5.199C8 3.754 8.797 3 10 3c1.203 0 2 .754 2 2.199V8z"/>
+        </symbol>
+
+        <symbol viewBox="0 0 20 20" id="close">
+          <path d="M14.348 14.849c-.469.469-1.229.469-1.697 0L10 11.819l-2.651 3.029c-.469.469-1.229.469-1.697 0-.469-.469-.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-.469-.469-.469-1.228 0-1.697.469-.469 1.228-.469 1.697 0L10 8.183l2.651-3.031c.469-.469 1.228-.469 1.697 0 .469.469.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c.469.469.469 1.229 0 1.698z"/>
+        </symbol>
+
+        <symbol viewBox="0 0 20 20" id="large-arrow">
+          <path d="M13.25 10L6.109 2.58c-.268-.27-.268-.707 0-.979.268-.27.701-.27.969 0l7.83 7.908c.268.271.268.709 0 .979l-7.83 7.908c-.268.271-.701.27-.969 0-.268-.269-.268-.707 0-.979L13.25 10z"/>
+        </symbol>
+
+        <symbol viewBox="0 0 20 20" id="large-arrow-down">
+          <path d="M17.418 6.109c.272-.268.709-.268.979 0s.271.701 0 .969l-7.908 7.83c-.27.268-.707.268-.979 0l-7.908-7.83c-.27-.268-.27-.701 0-.969.271-.268.709-.268.979 0L10 13.25l7.418-7.141z"/>
+        </symbol>
+
+        <symbol viewBox="0 0 20 20" id="large-arrow-up">
+          <path d="M 17.418 14.908 C 17.69 15.176 18.127 15.176 18.397 14.908 C 18.667 14.64 18.668 14.207 18.397 13.939 L 10.489 6.109 C 10.219 5.841 9.782 5.841 9.51 6.109 L 1.602 13.939 C 1.332 14.207 1.332 14.64 1.602 14.908 C 1.873 15.176 2.311 15.176 2.581 14.908 L 10 7.767 L 17.418 14.908 Z"/>
+        </symbol>
+
+        <symbol viewBox="0 0 24 24" id="jump-to">
+          <path d="M19 7v4H5.83l3.58-3.59L8 6l-6 6 6 6 1.41-1.41L5.83 13H21V7z"/>
+        </symbol>
+
+        <symbol viewBox="0 0 24 24" id="expand">
+          <path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"/>
+        </symbol>
+
+        <symbol viewBox="0 0 15 16" id="copy">
+          <g transform='translate(2, -1)'>
+            <path fill='#ffffff' fillRule='evenodd' d='M2 13h4v1H2v-1zm5-6H2v1h5V7zm2 3V8l-3 3 3 3v-2h5v-2H9zM4.5 9H2v1h2.5V9zM2 12h2.5v-1H2v1zm9 1h1v2c-.02.28-.11.52-.3.7-.19.18-.42.28-.7.3H1c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c0-1.11.89-2 2-2 1.11 0 2 .89 2 2h3c.55 0 1 .45 1 1v5h-1V6H1v9h10v-2zM2 5h8c0-.55-.45-1-1-1H8c-.55 0-1-.45-1-1s-.45-1-1-1-1 .45-1 1-.45 1-1 1H3c-.55 0-1 .45-1 1z'></path>
+          </g>
+        </symbol>
+
+      </defs>
+    </svg>
+  </div>
+
+export default SvgAssets

package/src/core/components/try-it-out-button.jsx

@@ -0,0 +1,41 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+export default class TryItOutButton extends React.Component {
+
+  static propTypes = {
+    onTryoutClick: PropTypes.func,
+    onResetClick: PropTypes.func,
+    onCancelClick: PropTypes.func,
+    enabled: PropTypes.bool, // Try it out is enabled, ie: the user has access to the form
+    hasUserEditedBody: PropTypes.bool, // Try it out is enabled, ie: the user has access to the form
+    isOAS3: PropTypes.bool, // Try it out is enabled, ie: the user has access to the form
+  }
+
+  static defaultProps = {
+    onTryoutClick: Function.prototype,
+    onCancelClick: Function.prototype,
+    onResetClick: Function.prototype,
+    enabled: false,
+    hasUserEditedBody: false,
+    isOAS3: false,
+  }
+
+  render() {
+    const { onTryoutClick, onCancelClick, onResetClick, enabled, hasUserEditedBody, isOAS3 } = this.props
+
+    const showReset = isOAS3 && hasUserEditedBody
+    return (
+      <div className={showReset ? "try-out btn-group" : "try-out"}>
+        {
+          enabled ? <button className="btn try-out__btn cancel" onClick={ onCancelClick }>Cancel</button>
+                  : <button className="btn try-out__btn" onClick={ onTryoutClick }>Try it out </button>
+
+        }
+        {
+          showReset && <button className="btn try-out__btn reset" onClick={ onResetClick }>Reset</button>
+        }
+      </div>
+    )
+  }
+}

package/src/core/components/version-pragma-filter.jsx

@@ -0,0 +1,54 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+export default class VersionPragmaFilter extends React.PureComponent {
+  static propTypes = {
+    isSwagger2: PropTypes.bool.isRequired,
+    isOAS3: PropTypes.bool.isRequired,
+    bypass: PropTypes.bool,
+    alsoShow: PropTypes.element,
+    children: PropTypes.any,
+  }
+
+  static defaultProps = {
+    alsoShow: null,
+    children: null,
+    bypass: false,
+  }
+
+  render() {
+    const { bypass, isSwagger2, isOAS3, alsoShow } = this.props
+
+    if(bypass) {
+      return <div>{ this.props.children }</div>
+    }
+
+    if(isSwagger2 && isOAS3) {
+      return <div className="version-pragma">
+        {alsoShow}
+        <div className="version-pragma__message version-pragma__message--ambiguous">
+          <div>
+            <h3>Unable to render this definition</h3>
+            <p><code>swagger</code> and <code>openapi</code> fields cannot be present in the same Swagger or OpenAPI definition. Please remove one of the fields.</p>
+            <p>Supported version fields are <code>swagger: {"\"2.0\""}</code> and those that match <code>openapi: 3.0.n</code> (for example, <code>openapi: 3.0.4</code>).</p>
+          </div>
+        </div>
+      </div>
+    }
+
+    if(!isSwagger2 && !isOAS3) {
+      return <div className="version-pragma">
+        {alsoShow}
+        <div className="version-pragma__message version-pragma__message--missing">
+          <div>
+            <h3>Unable to render this definition</h3>
+            <p>The provided definition does not specify a valid version field.</p>
+            <p>Please indicate a valid Swagger or OpenAPI version field. Supported version fields are <code>swagger: {"\"2.0\""}</code> and those that match <code>openapi: 3.0.n</code> (for example, <code>openapi: 3.0.4</code>).</p>
+          </div>
+        </div>
+      </div>
+    }
+
+    return <div>{ this.props.children }</div>
+  }
+}

package/src/core/components/version-stamp.jsx

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