@upendra19/swagger-ui-custom 1.0.0 → 1.0.1

package/src/core/components/operation.jsx

@@ -1,259 +0,0 @@
-import React, { PureComponent } from "react"
-import PropTypes from "prop-types"
-import { getExtensions, escapeDeepLinkPath, getList } from "core/utils"
-import { safeBuildUrl, sanitizeUrl } from "core/utils/url"
-import { Iterable, List } from "immutable"
-import ImPropTypes from "react-immutable-proptypes"
-
-import RollingLoadSVG from "core/assets/rolling-load.svg"
-
-export default class Operation extends PureComponent {
-  static propTypes = {
-    specPath: ImPropTypes.list.isRequired,
-    operation: PropTypes.instanceOf(Iterable).isRequired,
-    summary: PropTypes.string,
-    response: PropTypes.instanceOf(Iterable),
-    request: PropTypes.instanceOf(Iterable),
-
-    toggleShown: PropTypes.func.isRequired,
-    onTryoutClick: PropTypes.func.isRequired,
-    onResetClick: 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,
-    specSelectors: PropTypes.object.isRequired,
-    oas3Actions: PropTypes.object.isRequired,
-    oas3Selectors: PropTypes.object.isRequired,
-    layoutActions: PropTypes.object.isRequired,
-    layoutSelectors: PropTypes.object.isRequired,
-    fn: PropTypes.object.isRequired
-  }
-
-  static defaultProps = {
-    operation: null,
-    response: null,
-    request: null,
-    specPath: List(),
-    summary: ""
-  }
-
-  render() {
-    let {
-      specPath,
-      response,
-      request,
-      toggleShown,
-      onTryoutClick,
-      onResetClick,
-      onCancelClick,
-      onExecute,
-      fn,
-      getComponent,
-      getConfigs,
-      specActions,
-      specSelectors,
-      authActions,
-      authSelectors,
-      oas3Actions,
-      oas3Selectors
-    } = this.props
-    let operationProps = this.props.operation
-
-    let {
-      deprecated,
-      isShown,
-      path,
-      method,
-      op,
-      tag,
-      operationId,
-      allowTryItOut,
-      displayRequestDuration,
-      tryItOutEnabled,
-      executeInProgress
-    } = operationProps.toJS()
-
-    let {
-      description,
-      externalDocs,
-      schemes
-    } = op
-
-    const externalDocsUrl = externalDocs ? safeBuildUrl(externalDocs.url, specSelectors.url(), { selectedServer: oas3Selectors.selectedServer() }) : ""
-    let operation = operationProps.getIn(["op"])
-    let responses = operation.get("responses")
-    let parameters = getList(operation, ["parameters"])
-    let operationScheme = specSelectors.operationScheme(path, method)
-    let isShownKey = ["operations", tag, operationId]
-    let extensions = getExtensions(operation)
-
-    const Responses = getComponent("responses")
-    const Parameters = getComponent( "parameters" )
-    const Execute = getComponent( "execute" )
-    const Clear = getComponent( "clear" )
-    const Collapse = getComponent( "Collapse" )
-    const Markdown = getComponent("Markdown", true)
-    const Schemes = getComponent( "schemes" )
-    const OperationServers = getComponent( "OperationServers" )
-    const OperationExt = getComponent( "OperationExt" )
-    const OperationSummary = getComponent( "OperationSummary" )
-    const Link = getComponent( "Link" )
-
-    const { showExtensions } = getConfigs()
-
-    // Merge in Live Response
-    if(responses && response && response.size > 0) {
-      let notDocumented = !responses.get(String(response.get("status"))) && !responses.get("default")
-      response = response.set("notDocumented", notDocumented)
-    }
-
-    let onChangeKey = [ path, method ] // Used to add values to _this_ operation ( indexed by path and method )
-
-    const validationErrors = specSelectors.validationErrors([path, method])
-
-    return (
-        <div className={deprecated ? "opblock opblock-deprecated" : isShown ? `opblock opblock-${method} is-open` : `opblock opblock-${method}`} id={escapeDeepLinkPath(isShownKey.join("-"))} >
-          <OperationSummary operationProps={operationProps} isShown={isShown} toggleShown={toggleShown} getComponent={getComponent} authActions={authActions} authSelectors={authSelectors} specPath={specPath} />
-          <Collapse isOpened={isShown}>
-            <div className="opblock-body">
-              { (operation && operation.size) || operation === null ? null :
-                <RollingLoadSVG height="32px" width="32px" className="opblock-loading-animation" />
-              }
-              { deprecated && <h4 className="opblock-title_normal"> Warning: Deprecated</h4>}
-              { description &&
-                <div className="opblock-description-wrapper">
-                  <div className="opblock-description">
-                    <Markdown source={ description } />
-                  </div>
-                </div>
-              }
-              {
-                externalDocsUrl ?
-                <div className="opblock-external-docs-wrapper">
-                  <h4 className="opblock-title_normal">Find more details</h4>
-                  <div className="opblock-external-docs">
-                    {externalDocs.description &&
-                      <span className="opblock-external-docs__description">
-                        <Markdown source={ externalDocs.description } />
-                      </span>
-                    }
-                    <Link target="_blank" className="opblock-external-docs__link" href={sanitizeUrl(externalDocsUrl)}>{externalDocsUrl}</Link>
-                  </div>
-                </div> : null
-              }
-
-              { !operation || !operation.size ? null :
-                <Parameters
-                  parameters={parameters}
-                  specPath={specPath.push("parameters")}
-                  operation={operation}
-                  onChangeKey={onChangeKey}
-                  onTryoutClick = { onTryoutClick }
-                  onResetClick = { onResetClick }
-                  onCancelClick = { onCancelClick }
-                  tryItOutEnabled = { tryItOutEnabled }
-                  allowTryItOut={allowTryItOut}
-
-                  fn={fn}
-                  getComponent={ getComponent }
-                  specActions={ specActions }
-                  specSelectors={ specSelectors }
-                  pathMethod={ [path, method] }
-                  getConfigs={ getConfigs }
-                  oas3Actions={ oas3Actions }
-                  oas3Selectors={ oas3Selectors }
-                />
-              }
-
-              { !tryItOutEnabled ? null :
-                <OperationServers
-                  getComponent={getComponent}
-                  path={path}
-                  method={method}
-                  operationServers={operation.get("servers")}
-                  pathServers={specSelectors.paths().getIn([path, "servers"])}
-                  getSelectedServer={oas3Selectors.selectedServer}
-                  setSelectedServer={oas3Actions.setSelectedServer}
-                  setServerVariableValue={oas3Actions.setServerVariableValue}
-                  getServerVariable={oas3Selectors.serverVariableValue}
-                  getEffectiveServerValue={oas3Selectors.serverEffectiveValue}
-                />
-              }
-
-              {!tryItOutEnabled || !allowTryItOut ? null : schemes && schemes.size ? <div className="opblock-schemes">
-                    <Schemes schemes={ schemes }
-                             path={ path }
-                             method={ method }
-                             specActions={ specActions }
-                             currentScheme={ operationScheme } />
-                  </div> : null
-              }
-
-              { !tryItOutEnabled || !allowTryItOut || validationErrors.length <= 0 ? null : <div className="validation-errors errors-wrapper">
-                  Please correct the following validation errors and try again.
-                  <ul>
-                    { validationErrors.map((error, index) => <li key={index}> { error } </li>) }
-                  </ul>
-                </div>
-              }
-
-            <div className={(!tryItOutEnabled || !response || !allowTryItOut) ? "execute-wrapper" : "btn-group"}>
-              { !tryItOutEnabled || !allowTryItOut ? null :
-
-                  <Execute
-                    operation={ operation }
-                    specActions={ specActions }
-                    specSelectors={ specSelectors }
-                    oas3Selectors={ oas3Selectors }
-                    oas3Actions={ oas3Actions }
-                    path={ path }
-                    method={ method }
-                    onExecute={ onExecute }
-                    disabled={executeInProgress}/>
-              }
-
-              { (!tryItOutEnabled || !response || !allowTryItOut) ? null :
-                  <Clear
-                    specActions={ specActions }
-                    path={ path }
-                    method={ method }/>
-              }
-            </div>
-
-            {executeInProgress ? <div className="loading-container"><div className="loading"></div></div> : null}
-
-              { !responses ? null :
-                  <Responses
-                    responses={ responses }
-                    request={ request }
-                    tryItOutResponse={ response }
-                    getComponent={ getComponent }
-                    getConfigs={ getConfigs }
-                    specSelectors={ specSelectors }
-                    oas3Actions={oas3Actions}
-                    oas3Selectors={oas3Selectors}
-                    specActions={ specActions }
-                    produces={specSelectors.producesOptionsFor([path, method]) }
-                    producesValue={ specSelectors.currentProducesFor([path, method]) }
-                    specPath={specPath.push("responses")}
-                    path={ path }
-                    method={ method }
-                    displayRequestDuration={ displayRequestDuration }
-                    fn={fn} />
-              }
-
-              { !showExtensions || !extensions.size ? null :
-                <OperationExt extensions={ extensions } getComponent={ getComponent } />
-              }
-            </div>
-          </Collapse>
-        </div>
-    )
-  }
-
-}

package/src/core/components/operations.jsx

@@ -1,100 +0,0 @@
-import React from "react"
-import PropTypes from "prop-types"
-import Im from "immutable"
-
-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,
-    oas3Selectors: PropTypes.func.isRequired,
-    layoutSelectors: PropTypes.object.isRequired,
-    layoutActions: PropTypes.object.isRequired,
-    authActions: PropTypes.object.isRequired,
-    authSelectors: PropTypes.object.isRequired,
-    getConfigs: PropTypes.func.isRequired,
-    fn: PropTypes.func.isRequired
-  }
-
-  render() {
-    let {
-      specSelectors,
-    } = this.props
-
-    const taggedOps = specSelectors.taggedOperations()
-
-    if(taggedOps.size === 0) {
-      return <h3> No operations defined in spec!</h3>
-    }
-
-    return (
-      <div>
-        { taggedOps.map(this.renderOperationTag).toArray() }
-        { taggedOps.size < 1 ? <h3> No operations defined in spec! </h3> : null }
-      </div>
-    )
-  }
-
-  renderOperationTag = (tagObj, tag) => {
-    const {
-      specSelectors,
-      getComponent,
-      oas3Selectors,
-      layoutSelectors,
-      layoutActions,
-      getConfigs,
-    } = this.props
-    const validOperationMethods = specSelectors.validOperationMethods()
-    const OperationContainer = getComponent("OperationContainer", true)
-    const OperationTag = getComponent("OperationTag")
-    const operations = tagObj.get("operations")
-    return (
-      <OperationTag
-        key={"operation-" + tag}
-        tagObj={tagObj}
-        tag={tag}
-        oas3Selectors={oas3Selectors}
-        layoutSelectors={layoutSelectors}
-        layoutActions={layoutActions}
-        getConfigs={getConfigs}
-        getComponent={getComponent}
-        specUrl={specSelectors.url()}>
-        <div className="operation-tag-content">
-          {
-            operations.map(op => {
-              const path = op.get("path")
-              const method = op.get("method")
-              const specPath = Im.List(["paths", path, method])
-
-              if (validOperationMethods.indexOf(method) === -1) {
-                return null
-              }
-
-              return (
-                <OperationContainer
-                  key={`${path}-${method}`}
-                  specPath={specPath}
-                  op={op}
-                  path={path}
-                  method={method}
-                  tag={tag} />
-              )
-            }).toArray()
-          }
-        </div>
-      </OperationTag>
-    )
-  }
-
-}
-
-Operations.propTypes = {
-  layoutActions: PropTypes.object.isRequired,
-  specSelectors: PropTypes.object.isRequired,
-  specActions: PropTypes.object.isRequired,
-  layoutSelectors: PropTypes.object.isRequired,
-  getComponent: PropTypes.func.isRequired,
-  fn: PropTypes.object.isRequired
-}

package/src/core/components/overview.jsx

@@ -1,119 +0,0 @@
-import React from "react"
-import PropTypes from "prop-types"
-import { Link } from "core/components/layout-utils"
-
-export default class Overview extends React.Component {
-
-  constructor(...args) {
-    super(...args)
-    this.setTagShown = this._setTagShown.bind(this)
-  }
-
-  _setTagShown(showTagId, shown) {
-    this.props.layoutActions.show(showTagId, shown)
-  }
-
-  showOp(key, shown) {
-    let { layoutActions } = this.props
-    layoutActions.show(key, shown)
-  }
-
-  render() {
-    let { specSelectors, layoutSelectors, layoutActions, getComponent } = this.props
-    let taggedOps = specSelectors.taggedOperations()
-
-    const Collapse = getComponent("Collapse")
-
-    return (
-        <div>
-          <h4 className="overview-title">Overview</h4>
-
-          {
-            taggedOps.map( (tagObj, tag) => {
-              let operations = tagObj.get("operations")
-
-              let showTagId = ["overview-tags", tag]
-              let showTag = layoutSelectors.isShown(showTagId, true)
-              let toggleShow = ()=> layoutActions.show(showTagId, !showTag)
-
-              return (
-                <div key={"overview-"+tag}>
-
-
-                  <h4 onClick={toggleShow} className="link overview-tag"> {showTag ? "-" : "+"}{tag}</h4>
-
-                  <Collapse isOpened={showTag} animated>
-                    {
-                      operations.map( op => {
-                        let { path, method, id } = op.toObject() // toObject is shallow
-                        let showOpIdPrefix = "operations"
-                        let showOpId = id
-                        let shown = layoutSelectors.isShown([showOpIdPrefix, showOpId])
-                        return <OperationLink key={id}
-                                              path={path}
-                                              method={method}
-                                              id={path + "-" + method}
-                                              shown={shown}
-                                              showOpId={showOpId}
-                                              showOpIdPrefix={showOpIdPrefix}
-                                              href={`#operation-${showOpId}`}
-                                              onClick={layoutActions.show} />
-                      }).toArray()
-                    }
-                  </Collapse>
-
-                </div>
-                )
-            }).toArray()
-          }
-
-          { taggedOps.size < 1 && <h3> No operations defined in spec! </h3> }
-        </div>
-    )
-  }
-
-}
-
-Overview.propTypes = {
-  layoutSelectors: PropTypes.object.isRequired,
-  specSelectors: PropTypes.object.isRequired,
-  layoutActions: PropTypes.object.isRequired,
-  getComponent: PropTypes.func.isRequired
-}
-
-export class OperationLink extends React.Component {
-
-  constructor(props) {
-    super(props)
-    this.onClick = this._onClick.bind(this)
-  }
-
-  _onClick() {
-    let { showOpId, showOpIdPrefix, onClick, shown } = this.props
-    onClick([showOpIdPrefix, showOpId], !shown)
-  }
-
-  render() {
-    let { id, method, shown, href } = this.props
-
-    return (
-      <Link href={ href } onClick={this.onClick} className={`block opblock-link ${shown ? "shown" : ""}`}>
-        <div>
-          <small className={`bold-label-${method}`}>{method.toUpperCase()}</small>
-          <span className="bold-label" >{id}</span>
-        </div>
-      </Link>
-    )
-  }
-
-}
-
-OperationLink.propTypes = {
-  href: PropTypes.string,
-  onClick: PropTypes.func,
-  id: PropTypes.string.isRequired,
-  method: PropTypes.string.isRequired,
-  shown: PropTypes.bool.isRequired,
-  showOpId: PropTypes.string.isRequired,
-  showOpIdPrefix: PropTypes.string.isRequired
-}

package/src/core/components/param-body.jsx

@@ -1,156 +0,0 @@
-import React, { PureComponent } from "react"
-import PropTypes from "prop-types"
-import { fromJS, List } from "immutable"
-import { getKnownSyntaxHighlighterLanguage } from "core/utils/jsonParse"
-import createHtmlReadyId from "core/utils/create-html-ready-id"
-
-const NOOP = Function.prototype
-
-export default class ParamBody extends PureComponent {
-
-  static propTypes = {
-    param: PropTypes.object,
-    onChange: PropTypes.func,
-    onChangeConsumes: PropTypes.func,
-    consumes: PropTypes.object,
-    consumesValue: PropTypes.string,
-    fn: PropTypes.object.isRequired,
-    getComponent: PropTypes.func.isRequired,
-    isExecute: PropTypes.bool,
-    specSelectors: PropTypes.object.isRequired,
-    pathMethod: PropTypes.array.isRequired
-  }
-
-  static defaultProp = {
-    consumes: fromJS(["application/json"]),
-    param: fromJS({}),
-    onChange: NOOP,
-    onChangeConsumes: NOOP,
-  }
-
-  constructor(props, context) {
-    super(props, context)
-
-    this.state = {
-      isEditBox: false,
-      value: ""
-    }
-
-  }
-
-  componentDidMount() {
-    this.updateValues.call(this, this.props)
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    this.updateValues.call(this, nextProps)
-  }
-
-  updateValues = (props) => {
-    let { param, isExecute, consumesValue="" } = props
-    let isXml = /xml/i.test(consumesValue)
-    let isJson = /json/i.test(consumesValue)
-    let paramValue = isXml ? param.get("value_xml") : param.get("value")
-
-    if ( paramValue !== undefined ) {
-      let val = !paramValue && isJson ? "{}" : paramValue
-      this.setState({ value: val })
-      this.onChange(val, {isXml: isXml, isEditBox: isExecute})
-    } else {
-      if (isXml) {
-        this.onChange(this.sample("xml"), {isXml: isXml, isEditBox: isExecute})
-      } else {
-        this.onChange(this.sample(), {isEditBox: isExecute})
-      }
-    }
-  }
-
-  sample = (xml) => {
-    let { param, fn} = this.props
-    let schema = fn.inferSchema(param.toJS())
-
-    return fn.getSampleSchema(schema, xml, {
-      includeWriteOnly: true
-    })
-  }
-
-  onChange = (value, { isEditBox, isXml }) => {
-    this.setState({value, isEditBox})
-    this._onChange(value, isXml)
-  }
-
-  _onChange = (val, isXml) => { (this.props.onChange || NOOP)(val, isXml) }
-
-  handleOnChange = e => {
-    const {consumesValue} = this.props
-    const isXml = /xml/i.test(consumesValue)
-    const inputValue = e.target.value
-    this.onChange(inputValue, {isXml, isEditBox: this.state.isEditBox})
-  }
-
-  toggleIsEditBox = () => this.setState( state => ({isEditBox: !state.isEditBox}))
-
-  render() {
-    let {
-      onChangeConsumes,
-      param,
-      isExecute,
-      specSelectors,
-      pathMethod,
-      getComponent,
-    } = this.props
-
-    const Button = getComponent("Button")
-    const TextArea = getComponent("TextArea")
-    const HighlightCode = getComponent("HighlightCode", true)
-    const ContentType = getComponent("contentType")
-    // for domains where specSelectors not passed
-    let parameter = specSelectors ? specSelectors.parameterWithMetaByIdentity(pathMethod, param) : param
-    let errors = parameter.get("errors", List())
-    let consumesValue = specSelectors.contentTypeValues(pathMethod).get("requestContentType")
-    let consumes = this.props.consumes && this.props.consumes.size ? this.props.consumes : ParamBody.defaultProp.consumes
-
-    let { value, isEditBox } = this.state
-    let language = null
-    let testValueForJson = getKnownSyntaxHighlighterLanguage(value)
-    if (testValueForJson) {
-      language = "json"
-    }
-
-    const regionId = createHtmlReadyId(`${pathMethod[1]}${pathMethod[0]}_parameters`)
-    const controlId = `${regionId}_select`
-
-    return (
-      <div className="body-param" data-param-name={param.get("name")} data-param-in={param.get("in")}>
-        {
-          isEditBox && isExecute
-            ? <TextArea className={ "body-param__text" + ( errors.count() ? " invalid" : "")} value={value} onChange={ this.handleOnChange }/>
-            : (value && <HighlightCode className="body-param__example" language={ language }>{value}</HighlightCode>)
-        }
-        <div className="body-param-options">
-          {
-            !isExecute ? null
-                       : <div className="body-param-edit">
-                        <Button className={isEditBox ? "btn cancel body-param__example-edit" : "btn edit body-param__example-edit"}
-                                 onClick={this.toggleIsEditBox}>{ isEditBox ? "Cancel" : "Edit"}
-                         </Button>
-                         </div>
-          }
-          <label htmlFor={controlId}>
-            <span>Parameter content type</span>
-            <ContentType
-              value={ consumesValue }
-              contentTypes={ consumes }
-              onChange={onChangeConsumes}
-              className="body-param-content-type"
-              ariaLabel="Parameter content type"
-              controlId={controlId}
-            />
-          </label>
-        </div>
-
-      </div>
-    )
-
-  }
-}

package/src/core/components/parameter-extension.jsx

@@ -1,12 +0,0 @@
-import React from "react"
-import PropTypes from "prop-types"
-
-export const ParameterExt = ({ xKey, xVal }) => {
-    return <div className="parameter__extension">{ xKey }: { String(xVal) }</div>
-}
-ParameterExt.propTypes = {
-  xKey: PropTypes.string,
-  xVal: PropTypes.any
-}
-
-export default ParameterExt