@upendra19/swagger-ui-custom 1.0.0 → 1.0.1

package/src/core/components/layout-utils.jsx

@@ -1,265 +0,0 @@
-import React from "react"
-import PropTypes from "prop-types"
-
-function xclass(...args) {
-  return args.filter(a => !!a).join(" ").trim()
-}
-
-export class Container extends React.Component {
-  render() {
-    let { fullscreen, full, ...rest } = this.props
-    // Normal element
-
-    if(fullscreen)
-      return <section {...rest}/>
-
-    let containerClass = "swagger-container" + (full ? "-full" : "")
-    return (
-      <section {...rest} className={xclass(rest.className, containerClass)}/>
-    )
-  }
-}
-
-Container.propTypes = {
-  fullscreen: PropTypes.bool,
-  full: PropTypes.bool,
-  className: PropTypes.string
-}
-
-const DEVICES = {
-  "mobile": "",
-  "tablet": "-tablet",
-  "desktop": "-desktop",
-  "large": "-hd"
-}
-
-export class Col extends React.Component {
-
-  render() {
-    const {
-      hide,
-      keepContents,
-      /* we don't want these in the `rest` object that passes to the final component,
-         since React now complains. So we extract them */
-      /* eslint-disable no-unused-vars */
-      mobile,
-      tablet,
-      desktop,
-      large,
-      /* eslint-enable no-unused-vars */
-      ...rest
-    } = this.props
-
-    if(hide && !keepContents)
-      return <span/>
-
-    let classesAr = []
-
-    for (let device in DEVICES) {
-      if (!Object.prototype.hasOwnProperty.call(DEVICES, device)) {
-        continue
-      }
-      let deviceClass = DEVICES[device]
-      if(device in this.props) {
-        let val = this.props[device]
-
-        if(val < 1) {
-          classesAr.push("none" + deviceClass)
-          continue
-        }
-
-        classesAr.push("block" + deviceClass)
-        classesAr.push("col-" + val + deviceClass)
-      }
-    }
-
-    if (hide) {
-      classesAr.push("hidden")
-    }
-
-    let classes = xclass(rest.className, ...classesAr)
-
-    return (
-      <section {...rest} className={classes}/>
-    )
-  }
-
-}
-
-Col.propTypes = {
-  hide: PropTypes.bool,
-  keepContents: PropTypes.bool,
-  mobile: PropTypes.number,
-  tablet: PropTypes.number,
-  desktop: PropTypes.number,
-  large: PropTypes.number,
-  className: PropTypes.string
-}
-
-export class Row extends React.Component {
-
-  render() {
-    return <div {...this.props} className={xclass(this.props.className, "wrapper")} />
-  }
-
-}
-
-Row.propTypes = {
-  className: PropTypes.string
-}
-
-export class Button extends React.Component {
-
-  static propTypes = {
-    className: PropTypes.string
-  }
-
-  static defaultProps = {
-    className: ""
-  }
-
-  render() {
-    return <button {...this.props} className={xclass(this.props.className, "button")} />
-  }
-
-}
-
-
-export const TextArea = (props) => <textarea {...props} />
-
-export const Input = (props) => <input {...props} />
-
-export class Select extends React.Component {
-  static propTypes = {
-    allowedValues: PropTypes.array,
-    value: PropTypes.any,
-    onChange: PropTypes.func,
-    multiple: PropTypes.bool,
-    allowEmptyValue: PropTypes.bool,
-    className: PropTypes.string,
-    disabled: PropTypes.bool,
-  }
-
-  static defaultProps = {
-    multiple: false,
-    allowEmptyValue: true
-  }
-
-  constructor(props, context) {
-    super(props, context)
-
-    let value
-
-    if (props.value) {
-      value = props.value
-    } else {
-      value = props.multiple ? [""] : ""
-    }
-
-    this.state = { value: value }
-  }
-
-  onChange = (e) => {
-    let { onChange, multiple } = this.props
-    let options = [].slice.call(e.target.options)
-    let value
-
-
-    if (multiple) {
-      value = options.filter(function (option) {
-          return option.selected
-        })
-        .map(function (option){
-          return option.value
-        })
-    } else {
-      value = e.target.value
-    }
-
-    this.setState({value: value})
-
-    if(onChange) {
-      onChange(value)
-    }
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    // TODO: this puts us in a weird area btwn un/controlled selection... review
-    if(nextProps.value !== this.props.value) {
-      this.setState({ value: nextProps.value })
-    }
-  }
-
-  render(){
-    let { allowedValues, multiple, allowEmptyValue, disabled } = this.props
-    let value = this.state.value?.toJS?.() || this.state.value
-
-    return (
-      <select className={this.props.className} multiple={ multiple } value={value} onChange={ this.onChange } disabled={disabled} >
-        { allowEmptyValue ? <option value="">--</option> : null }
-        {
-          allowedValues.map(function (item, key) {
-            return <option key={ key } value={ String(item) }>{ String(item) }</option>
-          })
-        }
-      </select>
-    )
-  }
-}
-
-export class Link extends React.Component {
-
-  render() {
-    return <a {...this.props} rel="noopener noreferrer" className={xclass(this.props.className, "link")}/>
-  }
-
-}
-
-Link.propTypes = {
-  className: PropTypes.string
-}
-
-const NoMargin = ({children}) => <div className="no-margin"> {children} </div>
-
-NoMargin.propTypes = {
-  children: PropTypes.node
-}
-
-export class Collapse extends React.Component {
-
-  static propTypes = {
-    isOpened: PropTypes.bool,
-    children: PropTypes.node.isRequired,
-    animated: PropTypes.bool
-  }
-
-  static defaultProps = {
-    isOpened: false,
-    animated: false
-  }
-
-  renderNotAnimated() {
-    if(!this.props.isOpened)
-      return <noscript/>
-    return (
-      <NoMargin>
-        {this.props.children}
-      </NoMargin>
-    )
-  }
-
-  render() {
-    let { animated, isOpened, children } = this.props
-
-    if(!animated)
-      return this.renderNotAnimated()
-
-    children = isOpened ? children : null
-    return (
-      <NoMargin>
-        {children}
-      </NoMargin>
-    )
-  }
-
-}

package/src/core/components/layouts/base.jsx

@@ -1,156 +0,0 @@
-/**
- * @prettier
- */
-import React from "react"
-import PropTypes from "prop-types"
-
-export default class BaseLayout extends React.Component {
-  static propTypes = {
-    errSelectors: PropTypes.object.isRequired,
-    errActions: PropTypes.object.isRequired,
-    specSelectors: PropTypes.object.isRequired,
-    oas3Selectors: PropTypes.object.isRequired,
-    oas3Actions: PropTypes.object.isRequired,
-    getComponent: PropTypes.func.isRequired,
-    getConfigs: PropTypes.func, // Optional - may not be available in all contexts
-  }
-
-  render() {
-    const { errSelectors, specSelectors, getComponent, getConfigs } = this.props
-
-    const SvgAssets = getComponent("SvgAssets")
-    const InfoContainer = getComponent("InfoContainer", true)
-    const VersionPragmaFilter = getComponent("VersionPragmaFilter")
-    const Operations = getComponent("operations", true)
-    const Models = getComponent("Models", true)
-    const Webhooks = getComponent("Webhooks", true)
-    const Row = getComponent("Row")
-    const Col = getComponent("Col")
-    const Errors = getComponent("errors", true)
-
-    const ServersContainer = getComponent("ServersContainer", true)
-    const SchemesContainer = getComponent("SchemesContainer", true)
-    const AuthorizeBtnContainer = getComponent("AuthorizeBtnContainer", true)
-    const FilterContainer = getComponent("FilterContainer", true)
-    const isSwagger2 = specSelectors.isSwagger2()
-    const isOAS3 = specSelectors.isOAS3()
-    const isOAS31 = specSelectors.isOAS31()
-
-    const isSpecEmpty = !specSelectors.specStr()
-
-    const loadingStatus = specSelectors.loadingStatus()
-
-    let loadingMessage = null
-
-    if (loadingStatus === "loading") {
-      loadingMessage = (
-        <div className="info">
-          <div className="loading-container">
-            <div className="loading"></div>
-          </div>
-        </div>
-      )
-    }
-
-    if (loadingStatus === "failed") {
-      loadingMessage = (
-        <div className="info">
-          <div className="loading-container">
-            <h4 className="title">Failed to load API definition.</h4>
-            <Errors />
-          </div>
-        </div>
-      )
-    }
-
-    if (loadingStatus === "failedConfig") {
-      const lastErr = errSelectors.lastError()
-      const lastErrMsg = lastErr ? lastErr.get("message") : ""
-      loadingMessage = (
-        <div className="info failed-config">
-          <div className="loading-container">
-            <h4 className="title">Failed to load remote configuration.</h4>
-            <p>{lastErrMsg}</p>
-          </div>
-        </div>
-      )
-    }
-
-    if (!loadingMessage && isSpecEmpty) {
-      loadingMessage = <h4>No API definition provided.</h4>
-    }
-
-    if (loadingMessage) {
-      return (
-        <div className="swagger-ui">
-          <div className="loading-container">{loadingMessage}</div>
-        </div>
-      )
-    }
-
-    const servers = specSelectors.servers()
-    const schemes = specSelectors.schemes()
-
-    const hasServers = servers && servers.size
-    const hasSchemes = schemes && schemes.size
-    const hasSecurityDefinitions = !!specSelectors.securityDefinitions()
-    
-    // Safe fallback for getConfigs
-    const configs = getConfigs ? getConfigs() : {}
-    const { showAuthorization = true } = configs
-
-    return (
-      <div className="swagger-ui">
-        <SvgAssets />
-        <VersionPragmaFilter
-          isSwagger2={isSwagger2}
-          isOAS3={isOAS3}
-          alsoShow={<Errors />}
-        >
-          <Errors />
-          <Row className="information-container">
-            <Col mobile={12}>
-              <InfoContainer />
-            </Col>
-          </Row>
-
-          {hasServers || hasSchemes || hasSecurityDefinitions ? (
-            <div className="scheme-container">
-              <Col className="schemes wrapper" mobile={12}>
-                {hasServers || hasSchemes ? (
-                  <div className="schemes-server-container">
-                    {hasServers ? <ServersContainer /> : null}
-                    {hasSchemes ? <SchemesContainer /> : null}
-                  </div>
-                ) : null}
-                {hasSecurityDefinitions && showAuthorization ? <AuthorizeBtnContainer /> : null}
-              </Col>
-            </div>
-          ) : null}
-
-          <FilterContainer />
-
-          <Row>
-            <Col mobile={12} desktop={12}>
-              <Operations />
-            </Col>
-          </Row>
-
-          {isOAS31 && (
-            <Row className="webhooks-container">
-              <Col mobile={12} desktop={12}>
-                <Webhooks />
-              </Col>
-            </Row>
-          )}
-
-          <Row>
-            <Col mobile={12} desktop={12}>
-              <Models />
-            </Col>
-          </Row>
-        </VersionPragmaFilter>
-      </div>
-    )
-  }
-}

package/src/core/components/layouts/xpane.jsx

@@ -1,73 +0,0 @@
-import React from "react"
-import PropTypes from "prop-types"
-
-export default class XPane extends React.Component {
-
-  render() {
-    let { getComponent, specSelectors, specActions, layoutSelectors, layoutActions } = this.props
-    let info = specSelectors.info()
-    let url = specSelectors.url()
-    let showEditor = layoutSelectors.isShown("editor")
-
-    let Info = getComponent("info")
-    let Operations = getComponent("operations", true)
-    let Overview = getComponent("overview", true)
-    let Editor = getComponent("editor", true)
-    let Footer = getComponent("footer", true)
-    let Header = getComponent("header", true)
-
-    let Container = getComponent("Container")
-    let Row = getComponent("Row")
-    let Col = getComponent("Col")
-    let Button = getComponent("Button")
-
-    let showEditorAction = ()=> layoutActions.show("editor", !showEditor)
-
-    return (
-      <Container fullscreen>
-
-        <Header/>
-
-        {
-          info && info.size ? <Info version={info.get("version")}
-                                    description={info.get("description")}
-                                    title={info.get("title")}
-                                    url={url}/>
-                            : null
-        }
-        <Button onClick={showEditorAction}>{showEditor ? "Hide" : "Show"} Editor</Button>
-        <Button onClick={specActions.formatIntoYaml}>Format contents</Button>
-
-        <Row>
-
-          <Col desktop={3} >
-            <Overview/>
-          </Col>
-
-          <Col hide={!showEditor} keepContents={true} desktop={5} >
-            <Editor/>
-          </Col>
-
-          <Col desktop={showEditor ? 4 : 9} >
-            <Operations/>
-          </Col>
-
-        </Row>
-
-        <Footer></Footer>
-
-      </Container>
-    )
-  }
-
-}
-
-XPane.propTypes = {
-  getComponent: PropTypes.func.isRequired,
-  specSelectors: PropTypes.object.isRequired,
-  specActions: PropTypes.object.isRequired,
-  layoutSelectors: PropTypes.object.isRequired,
-  layoutActions: PropTypes.object.isRequired
-}
-
-

package/src/core/components/license.jsx

@@ -1,40 +0,0 @@
-/**
- * @prettier
- */
-import React from "react"
-import PropTypes from "prop-types"
-import { safeBuildUrl, sanitizeUrl } from "core/utils/url"
-
-class License extends React.Component {
-  static propTypes = {
-    license: PropTypes.object,
-    getComponent: PropTypes.func.isRequired,
-    specSelectors: PropTypes.object.isRequired,
-    selectedServer: PropTypes.string,
-    url: PropTypes.string.isRequired,
-  }
-
-  render() {
-    const { license, getComponent, selectedServer, url: specUrl } = this.props
-    const name = license.get("name", "License")
-    const url = safeBuildUrl(license.get("url"), specUrl, { selectedServer })
-
-    const Link = getComponent("Link")
-
-    return (
-      <div className="info__license">
-        {url ? (
-          <div className="info__license__url">
-            <Link target="_blank" href={sanitizeUrl(url)}>
-              {name}
-            </Link>
-          </div>
-        ) : (
-          <span>{name}</span>
-        )}
-      </div>
-    )
-  }
-}
-
-export default License

package/src/core/components/live-response.jsx

@@ -1,133 +0,0 @@
-import React from "react"
-import PropTypes from "prop-types"
-import ImPropTypes from "react-immutable-proptypes"
-
-const Headers = ( { headers } )=>{
-  return (
-    <div>
-      <h5>Response headers</h5>
-      <pre className="microlight">{headers}</pre>
-    </div>)
-}
-Headers.propTypes = {
-  headers: PropTypes.array.isRequired
-}
-
-const Duration = ( { duration } ) => {
-  return (
-    <div>
-      <h5>Request duration</h5>
-      <pre className="microlight">{duration} ms</pre>
-    </div>
-  )
-}
-Duration.propTypes = {
-  duration: PropTypes.number.isRequired
-}
-
-
-export default class LiveResponse extends React.Component {
-  static propTypes = {
-    response: ImPropTypes.map,
-    path: PropTypes.string.isRequired,
-    method: PropTypes.string.isRequired,
-    displayRequestDuration: PropTypes.bool.isRequired,
-    specSelectors: PropTypes.object.isRequired,
-    getComponent: PropTypes.func.isRequired,
-    getConfigs: PropTypes.func.isRequired
-  }
-
-  shouldComponentUpdate(nextProps) {
-    // BUG: props.response is always coming back as a new Immutable instance
-    // same issue as responses.jsx (tryItOutResponse)
-    return this.props.response !== nextProps.response
-      || this.props.path !== nextProps.path
-      || this.props.method !== nextProps.method
-      || this.props.displayRequestDuration !== nextProps.displayRequestDuration
-  }
-
-  render() {
-    const { response, getComponent, getConfigs, displayRequestDuration, specSelectors, path, method } = this.props
-    const { showMutatedRequest, requestSnippetsEnabled } = getConfigs()
-
-    const curlRequest = showMutatedRequest ? specSelectors.mutatedRequestFor(path, method) : specSelectors.requestFor(path, method)
-    const status = response.get("status")
-    const url = curlRequest.get("url")
-    const headers = response.get("headers").toJS()
-    const notDocumented = response.get("notDocumented")
-    const isError = response.get("error")
-    const body = response.get("text")
-    const duration = response.get("duration")
-    const headersKeys = Object.keys(headers)
-    const contentType = headers["content-type"] || headers["Content-Type"]
-
-    const ResponseBody = getComponent("responseBody")
-    const returnObject = headersKeys.map(key => {
-      var joinedHeaders = Array.isArray(headers[key]) ? headers[key].join() : headers[key]
-      return <span className="headerline" key={key}> {key}: {joinedHeaders} </span>
-    })
-    const hasHeaders = returnObject.length !== 0
-    const Markdown = getComponent("Markdown", true)
-    const RequestSnippets = getComponent("RequestSnippets", true)
-    const Curl = getComponent("curl", true)
-
-    return (
-      <div>
-        { curlRequest && requestSnippetsEnabled 
-          ? <RequestSnippets request={ curlRequest }/>
-          : <Curl request={ curlRequest } />
-        }
-        { url && <div>
-            <div className="request-url">
-              <h4>Request URL</h4>
-              <pre className="microlight">{url}</pre>
-            </div>
-          </div>
-        }
-        <h4>Server response</h4>
-        <table className="responses-table live-responses-table">
-          <thead>
-          <tr className="responses-header">
-            <td className="col_header response-col_status">Code</td>
-            <td className="col_header response-col_description">Details</td>
-          </tr>
-          </thead>
-          <tbody>
-            <tr className="response">
-              <td className="response-col_status">
-                { status }
-                {
-                  notDocumented ? <div className="response-undocumented">
-                                    <i> Undocumented </i>
-                                  </div>
-                                : null
-                }
-              </td>
-              <td className="response-col_description">
-                {
-                  isError ? <Markdown source={`${response.get("name") !== "" ? `${response.get("name")}: ` : ""}${response.get("message")}`}/>
-                          : null
-                }
-                {
-                  body ? <ResponseBody content={ body }
-                                       contentType={ contentType }
-                                       url={ url }
-                                       headers={ headers }
-                                       getConfigs={ getConfigs }
-                                       getComponent={ getComponent }/>
-                       : null
-                }
-                {
-                  hasHeaders ? <Headers headers={ returnObject }/> : null
-                }
-                {
-                  displayRequestDuration && duration ? <Duration duration={ duration } /> : null
-                }
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    )
-  }
-}