@upendra19/swagger-ui-custom 1.0.0 → 1.0.3

package/src/core/components/response.jsx

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

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

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

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

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

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