@upendra19/swagger-ui-custom 1.0.0

package/src/core/components/operation.jsx

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

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

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

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

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