@upendra19/swagger-ui-custom 1.0.0

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

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

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

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

@@ -0,0 +1,40 @@
+/**
+ * @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

@@ -0,0 +1,133 @@
+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>
+    )
+  }
+}