@upendra19/swagger-ui-custom 1.0.0

package/src/core/components/online-validator-badge.jsx

@@ -0,0 +1,120 @@
+import React from "react"
+import URL from "url-parse"
+
+import PropTypes from "prop-types"
+import { requiresValidationURL } from "core/utils"
+import { sanitizeUrl } from "core/utils/url"
+import win from "core/window"
+
+export default class OnlineValidatorBadge extends React.Component {
+    static propTypes = {
+      getComponent: PropTypes.func.isRequired,
+      getConfigs: PropTypes.func.isRequired,
+      specSelectors: PropTypes.object.isRequired
+    }
+
+    constructor(props, context) {
+        super(props, context)
+        let { getConfigs } = props
+        let { validatorUrl } = getConfigs()
+        this.state = {
+            url: this.getDefinitionUrl(),
+            validatorUrl: validatorUrl === undefined ? "https://validator.swagger.io/validator" : validatorUrl
+        }
+    }
+
+    getDefinitionUrl = () => {
+      // TODO: test this behavior by stubbing `window.location` in an Enzyme/JSDom env
+      let { specSelectors } = this.props
+
+      const urlObject = new URL(specSelectors.url(), win.location)
+      return urlObject.toString()
+    }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+        let { getConfigs } = nextProps
+        let { validatorUrl } = getConfigs()
+
+        this.setState({
+            url: this.getDefinitionUrl(),
+            validatorUrl: validatorUrl === undefined ? "https://validator.swagger.io/validator" : validatorUrl
+        })
+    }
+
+    render() {
+        let { getConfigs } = this.props
+        let { spec } = getConfigs()
+
+        let sanitizedValidatorUrl = sanitizeUrl(this.state.validatorUrl)
+
+        if ( typeof spec === "object" && Object.keys(spec).length) return null
+
+        if (!this.state.url || !requiresValidationURL(this.state.validatorUrl)
+                            || !requiresValidationURL(this.state.url)) {
+          return null
+        }
+
+        return (<span className="float-right">
+                <a target="_blank" rel="noopener noreferrer" href={`${ sanitizedValidatorUrl }/debug?url=${ encodeURIComponent(this.state.url) }`}>
+                    <ValidatorImage src={`${ sanitizedValidatorUrl }?url=${ encodeURIComponent(this.state.url) }`} alt="Online validator badge"/>
+                </a>
+            </span>)
+    }
+}
+
+
+class ValidatorImage extends React.Component {
+  static propTypes = {
+    src: PropTypes.string,
+    alt: PropTypes.string
+  }
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      loaded: false,
+      error: false
+    }
+  }
+
+  componentDidMount() {
+    const img = new Image()
+    img.onload = () => {
+      this.setState({
+        loaded: true
+      })
+    }
+    img.onerror = () => {
+      this.setState({
+        error: true
+      })
+    }
+    img.src = this.props.src
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (nextProps.src !== this.props.src) {
+      const img = new Image()
+      img.onload = () => {
+        this.setState({
+          loaded: true
+        })
+      }
+      img.onerror = () => {
+        this.setState({
+          error: true
+        })
+      }
+      img.src = nextProps.src
+    }
+  }
+
+  render() {
+    if (this.state.error) {
+      return <img alt={"Error"} />
+    } else if (!this.state.loaded) {
+      return null
+    }
+    return <img src={this.props.src} alt={this.props.alt} />
+  }
+}

package/src/core/components/openapi-version.jsx

@@ -0,0 +1,15 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+
+const OpenAPIVersion = ({ oasVersion }) => (
+  <small className="version-stamp">
+    <pre className="version">OAS {oasVersion}</pre>
+  </small>
+)
+
+OpenAPIVersion.propTypes = {
+  oasVersion: PropTypes.string.isRequired
+}
+
+export default OpenAPIVersion

package/src/core/components/operation-extension-row.jsx

@@ -0,0 +1,17 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+export const OperationExtRow = ({ xKey, xVal }) => {
+  const xNormalizedValue = !xVal ? null : xVal.toJS ? xVal.toJS() : xVal
+
+    return (<tr>
+        <td>{ xKey }</td>
+        <td>{ JSON.stringify(xNormalizedValue) }</td>
+    </tr>)
+}
+OperationExtRow.propTypes = {
+  xKey: PropTypes.string,
+  xVal: PropTypes.any
+}
+
+export default OperationExtRow

package/src/core/components/operation-extensions.jsx

@@ -0,0 +1,35 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+export const OperationExt = ({ extensions, getComponent }) => {
+    let OperationExtRow = getComponent("OperationExtRow")
+    return (
+      <div className="opblock-section">
+        <div className="opblock-section-header">
+          <h4>Extensions</h4>
+        </div>
+        <div className="table-container">
+
+          <table>
+            <thead>
+              <tr>
+                <td className="col_header">Field</td>
+                <td className="col_header">Value</td>
+              </tr>
+            </thead>
+            <tbody>
+                {
+                    extensions.entrySeq().map(([k, v]) => <OperationExtRow key={`${k}-${v}`} xKey={k} xVal={v} />)
+                }
+            </tbody>
+          </table>
+        </div>
+      </div>
+    )
+}
+OperationExt.propTypes = {
+  extensions: PropTypes.object.isRequired,
+  getComponent: PropTypes.func.isRequired
+}
+
+export default OperationExt

package/src/core/components/operation-summary-method.jsx

@@ -0,0 +1,25 @@
+import React, { PureComponent } from "react"
+import PropTypes from "prop-types"
+import { Iterable } from "immutable"
+
+export default class OperationSummaryMethod extends PureComponent {
+
+  static propTypes = {
+    operationProps: PropTypes.instanceOf(Iterable).isRequired,
+    method: PropTypes.string.isRequired,
+  }
+
+  static defaultProps = {
+    operationProps: null,
+  }
+  render() {
+
+    let {
+      method,
+    } = this.props
+
+    return (
+      <span className="opblock-summary-method">{method.toUpperCase()}</span>
+    )
+  }
+}

package/src/core/components/operation-summary-path.jsx

@@ -0,0 +1,54 @@
+import React, { PureComponent } from "react"
+import PropTypes from "prop-types"
+import { Iterable } from "immutable"
+import { createDeepLinkPath } from "core/utils"
+import ImPropTypes from "react-immutable-proptypes"
+
+export default class OperationSummaryPath extends PureComponent{
+
+  static propTypes = {
+    specPath: ImPropTypes.list.isRequired,
+    operationProps: PropTypes.instanceOf(Iterable).isRequired,
+    getComponent: PropTypes.func.isRequired,
+  }
+
+  render(){
+    let {
+      getComponent,
+      operationProps,
+    } = this.props
+
+
+    let {
+      deprecated,
+      isShown,
+      path,
+      tag,
+      operationId,
+      isDeepLinkingEnabled,
+    } = operationProps.toJS()
+
+    /**
+     * Add <wbr> word-break elements between each segment, before the slash
+     * to allow browsers an opportunity to break long paths into sensible segments.
+     */
+    const pathParts = path.split(/(?=\/)/g)
+    for (let i = 1; i < pathParts.length; i += 2) {
+      pathParts.splice(i, 0, <wbr key={i} />)
+    }
+
+    const DeepLink = getComponent( "DeepLink" )
+
+    return(
+      <span className={ deprecated ? "opblock-summary-path__deprecated" : "opblock-summary-path" }
+        data-path={path}>
+        <DeepLink
+            enabled={isDeepLinkingEnabled}
+            isShown={isShown}
+            path={createDeepLinkPath(`${tag}/${operationId}`)}
+            text={pathParts} />
+      </span>
+
+    )
+  }
+}

package/src/core/components/operation-summary.jsx

@@ -0,0 +1,102 @@
+import React, { PureComponent } from "react"
+import PropTypes from "prop-types"
+import { Iterable, List } from "immutable"
+import ImPropTypes from "react-immutable-proptypes"
+import toString from "lodash/toString"
+
+
+export default class OperationSummary extends PureComponent {
+
+  static propTypes = {
+    specPath: ImPropTypes.list.isRequired,
+    operationProps: PropTypes.instanceOf(Iterable).isRequired,
+    isShown: PropTypes.bool.isRequired,
+    toggleShown: PropTypes.func.isRequired,
+    getComponent: PropTypes.func.isRequired,
+    getConfigs: PropTypes.func.isRequired,
+    authActions: PropTypes.object,
+    authSelectors: PropTypes.object,
+  }
+
+  static defaultProps = {
+    operationProps: null,
+    specPath: List(),
+    summary: ""
+  }
+
+  render() {
+
+    let {
+      isShown,
+      toggleShown,
+      getComponent,
+      authActions,
+      authSelectors,
+      operationProps,
+      specPath,
+      getConfigs,
+    } = this.props
+
+    let {
+      summary,
+      isAuthorized,
+      method,
+      op,
+      showSummary,
+      path,
+      operationId,
+      originalOperationId,
+      displayOperationId,
+    } = operationProps.toJS()
+
+    let {
+      summary: resolvedSummary,
+    } = op
+
+    let security = operationProps.get("security")
+
+    const AuthorizeOperationBtn = getComponent("authorizeOperationBtn", true)
+    const OperationSummaryMethod = getComponent("OperationSummaryMethod")
+    const OperationSummaryPath = getComponent("OperationSummaryPath")
+    const JumpToPath = getComponent("JumpToPath", true)
+    const CopyToClipboardBtn = getComponent("CopyToClipboardBtn", true)
+    const ArrowUpIcon = getComponent("ArrowUpIcon")
+    const ArrowDownIcon = getComponent("ArrowDownIcon")
+
+    const hasSecurity = security && !!security.count()
+    const securityIsOptional = hasSecurity && security.size === 1 && security.first().isEmpty()
+    const allowAnonymous = !hasSecurity || securityIsOptional
+    
+    // Safe fallback for getConfigs
+    const configs = getConfigs ? getConfigs() : {}
+    const { showAuthorization = true, operationsCollapsible = true, showOperationUtilities = true } = configs
+    
+    return (
+      <div className={`opblock-summary opblock-summary-${method}`} >
+        <button
+          aria-expanded={isShown}
+          className="opblock-summary-control"
+          onClick={toggleShown}
+        >
+          <OperationSummaryMethod method={method} />
+          <div className="opblock-summary-path-description-wrapper">
+            <OperationSummaryPath getComponent={getComponent} operationProps={operationProps} specPath={specPath} />
+
+            {!showSummary ? null :
+              <div className="opblock-summary-description">
+                {toString(resolvedSummary || summary)}
+              </div>
+            }
+          </div>
+
+          {displayOperationId && (originalOperationId || operationId) ? <span className="opblock-summary-operation-id">{originalOperationId || operationId}</span> : null}
+        </button>
+        {/* All utility buttons removed */}
+        {/* <CopyToClipboardBtn textToCopy={`${specPath.get(1)}`} /> */}
+        {/* <AuthorizeOperationBtn /> */}
+        {/* <JumpToPath path={specPath} /> */}
+        {/* <Arrow button /> */}
+      </div>
+    )
+  }
+}

package/src/core/components/operation-tag.jsx

@@ -0,0 +1,121 @@
+import React from "react"
+import PropTypes from "prop-types"
+import ImPropTypes from "react-immutable-proptypes"
+import Im from "immutable"
+import { createDeepLinkPath, escapeDeepLinkPath, isFunc } from "core/utils"
+import { safeBuildUrl, sanitizeUrl } from "core/utils/url"
+
+/* eslint-disable  react/jsx-no-bind */
+
+export default class OperationTag extends React.Component {
+
+  static defaultProps = {
+    tagObj: Im.fromJS({}),
+    tag: "",
+  }
+
+  static propTypes = {
+    tagObj: ImPropTypes.map.isRequired,
+    tag: PropTypes.string.isRequired,
+
+    oas3Selectors: PropTypes.func.isRequired,
+    layoutSelectors: PropTypes.object.isRequired,
+    layoutActions: PropTypes.object.isRequired,
+
+    getConfigs: PropTypes.func.isRequired,
+    getComponent: PropTypes.func.isRequired,
+
+    specUrl: PropTypes.string.isRequired,
+
+    children: PropTypes.element,
+  }
+
+  render() {
+    const {
+      tagObj,
+      tag,
+      children,
+      oas3Selectors,
+      layoutSelectors,
+      layoutActions,
+      getConfigs,
+      getComponent,
+      specUrl,
+    } = this.props
+
+    let {
+      docExpansion,
+      deepLinking,
+    } = getConfigs()
+
+    const Collapse = getComponent("Collapse")
+    const Markdown = getComponent("Markdown", true)
+    const DeepLink = getComponent("DeepLink")
+    const Link = getComponent("Link")
+    const ArrowUpIcon = getComponent("ArrowUpIcon")
+    const ArrowDownIcon = getComponent("ArrowDownIcon")
+
+    let tagDescription = tagObj.getIn(["tagDetails", "description"], null)
+    let tagExternalDocsDescription = tagObj.getIn(["tagDetails", "externalDocs", "description"])
+    let rawTagExternalDocsUrl = tagObj.getIn(["tagDetails", "externalDocs", "url"])
+    let tagExternalDocsUrl
+    if (isFunc(oas3Selectors) && isFunc(oas3Selectors.selectedServer)) {
+      tagExternalDocsUrl = safeBuildUrl(rawTagExternalDocsUrl, specUrl, { selectedServer: oas3Selectors.selectedServer() })
+    } else {
+      tagExternalDocsUrl = rawTagExternalDocsUrl
+    }
+
+    let isShownKey = ["operations-tag", tag]
+    let showTag = layoutSelectors.isShown(isShownKey, docExpansion === "full" || docExpansion === "list")
+
+    return (
+      <div className={showTag ? "opblock-tag-section is-open" : "opblock-tag-section"} >
+
+        <h3
+          onClick={() => layoutActions.show(isShownKey, !showTag)}
+          className={!tagDescription ? "opblock-tag no-desc" : "opblock-tag"}
+          id={isShownKey.map(v => escapeDeepLinkPath(v)).join("-")}
+          data-tag={tag}
+          data-is-open={showTag}
+        >
+          <DeepLink
+            enabled={deepLinking}
+            isShown={showTag}
+            path={createDeepLinkPath(tag)}
+            text={tag} />
+          {!tagDescription ? <small></small> :
+            <small>
+              <Markdown source={tagDescription} />
+            </small>
+          }
+
+          {!tagExternalDocsUrl ? null :
+            <div className="info__externaldocs">
+              <small>
+                <Link
+                    href={sanitizeUrl(tagExternalDocsUrl)}
+                    onClick={(e) => e.stopPropagation()}
+                    target="_blank"
+                  >{tagExternalDocsDescription || tagExternalDocsUrl}</Link>
+              </small>
+            </div>
+          }
+
+
+          <button
+            aria-expanded={showTag}
+            className="expand-operation"
+            title={showTag ? "Collapse operation" : "Expand operation"}
+            onClick={() => layoutActions.show(isShownKey, !showTag)}>
+
+            {showTag ? <ArrowUpIcon className="arrow" /> : <ArrowDownIcon className="arrow" />}
+          </button>
+        </h3>
+
+        <Collapse isOpened={showTag}>
+          {children}
+        </Collapse>
+      </div>
+    )
+  }
+}