@upendra19/swagger-ui-custom 1.0.0 → 1.0.1

package/src/core/components/parameters/parameters.jsx

@@ -1,287 +0,0 @@
-import React, { Component } from "react"
-import PropTypes from "prop-types"
-import { Map, List } from "immutable"
-import ImPropTypes from "react-immutable-proptypes"
-import createHtmlReadyId from "core/utils/create-html-ready-id"
-
-export default class Parameters extends Component {
-
-  constructor(props) {
-    super(props)
-    this.state = {
-      callbackVisible: false,
-      parametersVisible: true,
-    }
-  }
-
-  static propTypes = {
-    parameters: ImPropTypes.list.isRequired,
-    operation: PropTypes.object.isRequired,
-    specActions: PropTypes.object.isRequired,
-    getComponent: PropTypes.func.isRequired,
-    specSelectors: PropTypes.object.isRequired,
-    oas3Actions: PropTypes.object.isRequired,
-    oas3Selectors: PropTypes.object.isRequired,
-    fn: PropTypes.object.isRequired,
-    tryItOutEnabled: PropTypes.bool,
-    allowTryItOut: PropTypes.bool,
-    onTryoutClick: PropTypes.func,
-    onResetClick: PropTypes.func,
-    onCancelClick: PropTypes.func,
-    onChangeKey: PropTypes.array,
-    pathMethod: PropTypes.array.isRequired,
-    getConfigs: PropTypes.func.isRequired,
-    specPath: ImPropTypes.list.isRequired,
-  }
-
-
-  static defaultProps = {
-    onTryoutClick: Function.prototype,
-    onCancelClick: Function.prototype,
-    tryItOutEnabled: false,
-    allowTryItOut: true,
-    onChangeKey: [],
-    specPath: [],
-  }
-
-  onChange = (param, value, isXml) => {
-    let {
-      specActions: { changeParamByIdentity },
-      onChangeKey,
-    } = this.props
-
-    changeParamByIdentity(onChangeKey, param, value, isXml)
-  }
-
-  onChangeConsumesWrapper = (val) => {
-    let {
-      specActions: { changeConsumesValue },
-      onChangeKey,
-    } = this.props
-
-    changeConsumesValue(onChangeKey, val)
-  }
-
-  toggleTab = (tab) => {
-    if (tab === "parameters") {
-      return this.setState({
-        parametersVisible: true,
-        callbackVisible: false,
-      })
-    } else if (tab === "callbacks") {
-      return this.setState({
-        callbackVisible: true,
-        parametersVisible: false,
-      })
-    }
-  }
-  
-  onChangeMediaType = ({ value, pathMethod }) => {
-    let { specActions, oas3Selectors, oas3Actions } = this.props
-    const userHasEditedBody = oas3Selectors.hasUserEditedBody(...pathMethod)
-    const shouldRetainRequestBodyValue = oas3Selectors.shouldRetainRequestBodyValue(...pathMethod)
-    oas3Actions.setRequestContentType({ value, pathMethod })
-    oas3Actions.initRequestBodyValidateError({ pathMethod })
-    if (!userHasEditedBody) {
-      if(!shouldRetainRequestBodyValue) {
-        oas3Actions.setRequestBodyValue({ value: undefined, pathMethod })
-      }
-      specActions.clearResponse(...pathMethod)
-      specActions.clearRequest(...pathMethod)
-      specActions.clearValidateParams(pathMethod)
-    }
-  }
-
-  render() {
-
-    let {
-      onTryoutClick,
-      onResetClick,
-      parameters,
-      allowTryItOut,
-      tryItOutEnabled,
-      specPath,
-      fn,
-      getComponent,
-      getConfigs,
-      specSelectors,
-      specActions,
-      pathMethod,
-      oas3Actions,
-      oas3Selectors,
-      operation,
-    } = this.props
-
-    const ParameterRow = getComponent("parameterRow")
-    const TryItOutButton = getComponent("TryItOutButton")
-    const ContentType = getComponent("contentType")
-    const Callbacks = getComponent("Callbacks", true)
-    const RequestBody = getComponent("RequestBody", true)
-
-    const isExecute = tryItOutEnabled && allowTryItOut
-    const isOAS3 = specSelectors.isOAS3()
-
-    const regionId = createHtmlReadyId(`${pathMethod[1]}${pathMethod[0]}_requests`)
-    const controlId = `${regionId}_select`
-
-    const requestBody = operation.get("requestBody")
-
-    const groupedParametersArr = Object.values(parameters
-      .reduce((acc, x) => {
-        if (Map.isMap(x)) {
-          const key = x.get("in")
-          acc[key] ??= []
-          acc[key].push(x)
-        }
-        return acc
-      }, {}))
-      .reduce((acc, x) => acc.concat(x), [])
-
-    const retainRequestBodyValueFlagForOperation = (f) => oas3Actions.setRetainRequestBodyValueFlag({ value: f, pathMethod })
-    return (
-      <div className="opblock-section">
-        <div className="opblock-section-header">
-          {isOAS3 ? (
-            <div className="tab-header">
-              <div onClick={() => this.toggleTab("parameters")}
-                   className={`tab-item ${this.state.parametersVisible && "active"}`}>
-                <h4 className="opblock-title"><span>Parameters</span></h4>
-              </div>
-              {operation.get("callbacks") ?
-                (
-                  <div onClick={() => this.toggleTab("callbacks")}
-                       className={`tab-item ${this.state.callbackVisible && "active"}`}>
-                    <h4 className="opblock-title"><span>Callbacks</span></h4>
-                  </div>
-                ) : null
-              }
-            </div>
-          ) : (
-            <div className="tab-header">
-              <h4 className="opblock-title">Parameters</h4>
-            </div>
-          )}
-          {/* Check both allowTryItOut and showTryItOut config */}
-          {allowTryItOut && getConfigs().showTryItOut !== false ? (
-            <TryItOutButton
-              isOAS3={specSelectors.isOAS3()}
-              hasUserEditedBody={oas3Selectors.hasUserEditedBody(...pathMethod)}
-              enabled={tryItOutEnabled}
-              onCancelClick={this.props.onCancelClick}
-              onTryoutClick={onTryoutClick}
-              onResetClick={() => onResetClick(pathMethod)}/>
-          ) : null}
-        </div>
-        {this.state.parametersVisible ? <div className="parameters-container">
-          {!groupedParametersArr.length ? <div className="opblock-description-wrapper"><p>No parameters</p></div> :
-            <div className="table-container">
-              <table className="parameters">
-                <thead>
-                <tr>
-                  <th className="col_header parameters-col_name">Name</th>
-                  <th className="col_header parameters-col_description">Description</th>
-                </tr>
-                </thead>
-                <tbody>
-                {
-                  groupedParametersArr.map((parameter, i) => (
-                    <ParameterRow
-                      fn={fn}
-                      specPath={specPath.push(i.toString())}
-                      getComponent={getComponent}
-                      getConfigs={getConfigs}
-                      rawParam={parameter}
-                      param={specSelectors.parameterWithMetaByIdentity(pathMethod, parameter)}
-                      key={`${parameter.get("in")}.${parameter.get("name")}`}
-                      onChange={this.onChange}
-                      onChangeConsumes={this.onChangeConsumesWrapper}
-                      specSelectors={specSelectors}
-                      specActions={specActions}
-                      oas3Actions={oas3Actions}
-                      oas3Selectors={oas3Selectors}
-                      pathMethod={pathMethod}
-                      isExecute={isExecute} />
-                  ))
-                }
-                </tbody>
-              </table>
-            </div>
-          }
-        </div> : null}
-
-        {this.state.callbackVisible ? <div className="callbacks-container opblock-description-wrapper">
-          <Callbacks
-            callbacks={Map(operation.get("callbacks"))}
-            specPath={specPath.slice(0, -1).push("callbacks")}
-          />
-        </div> : null}
-        {
-          isOAS3 && requestBody && this.state.parametersVisible &&
-          <div className="opblock-section opblock-section-request-body">
-            <div className="opblock-section-header">
-              <h4 className={`opblock-title parameter__name ${requestBody.get("required") && "required"}`}>Request
-                body</h4>
-              <label id={controlId}>
-                <ContentType
-                  value={oas3Selectors.requestContentType(...pathMethod)}
-                  contentTypes={requestBody.get("content", List()).keySeq()}
-                  onChange={(value) => {
-                    this.onChangeMediaType({ value, pathMethod })
-                  }}
-                  className="body-param-content-type"
-                  ariaLabel="Request content type" 
-                  controlId={controlId}
-                />
-              </label>
-            </div>
-            <div className="opblock-description-wrapper">
-              <RequestBody
-                setRetainRequestBodyValueFlag={retainRequestBodyValueFlagForOperation}
-                userHasEditedBody={oas3Selectors.hasUserEditedBody(...pathMethod)}
-                specPath={specPath.slice(0, -1).push("requestBody")}
-                requestBody={requestBody}
-                requestBodyValue={oas3Selectors.requestBodyValue(...pathMethod)}
-                requestBodyInclusionSetting={oas3Selectors.requestBodyInclusionSetting(...pathMethod)}
-                requestBodyErrors={oas3Selectors.requestBodyErrors(...pathMethod)}
-                isExecute={isExecute}
-                getConfigs={getConfigs}
-                activeExamplesKey={oas3Selectors.activeExamplesMember(
-                  ...pathMethod,
-                  "requestBody",
-                  "requestBody", // RBs are currently not stored per-mediaType
-                )}
-                updateActiveExamplesKey={key => {
-                  this.props.oas3Actions.setActiveExamplesMember({
-                    name: key,
-                    pathMethod: this.props.pathMethod,
-                    contextType: "requestBody",
-                    contextName: "requestBody", // RBs are currently not stored per-mediaType
-                  })
-                }
-                }
-                onChange={(value, path) => {
-                  if (path) {
-                    const lastValue = oas3Selectors.requestBodyValue(...pathMethod)
-                    const usableValue = Map.isMap(lastValue) ? lastValue : Map()
-                    return oas3Actions.setRequestBodyValue({
-                      pathMethod,
-                      value: usableValue.setIn(path, value),
-                    })
-                  }
-                  oas3Actions.setRequestBodyValue({ value, pathMethod })
-                }}
-                onChangeIncludeEmpty={(name, value) => {
-                  oas3Actions.setRequestBodyInclusion({
-                    pathMethod,
-                    value,
-                    name,
-                  })
-                }}
-                contentType={oas3Selectors.requestContentType(...pathMethod)} />
-            </div>
-          </div>
-        }
-      </div>
-    )
-  }
-}

package/src/core/components/property.jsx

@@ -1,17 +0,0 @@
-import React from "react"
-import PropTypes from "prop-types"
-import { stringify } from "core/utils"
-
-export const Property = ({ propKey, propVal, propClass }) => {
-    return (
-        <span className={ propClass }>
-          <br />{ propKey }: { stringify(propVal) }</span>
-    )
-}
-Property.propTypes = {
-  propKey: PropTypes.string,
-  propVal: PropTypes.any,
-  propClass: PropTypes.string
-}
-
-export default Property

package/src/core/components/providers/README.md

@@ -1,6 +0,0 @@
-# Providers
-
-Providers are generic bridges to third-party components. They provide two benefits:
-
-1. ability for plugins to override third-party components, because providers are loaded through `getComponent`
-2. allows us to avoid painting ourselves into a corner with a third-party component

package/src/core/components/providers/markdown.jsx

@@ -1,72 +0,0 @@
-import React from "react"
-import PropTypes from "prop-types"
-import { Remarkable } from "remarkable"
-import { linkify } from "remarkable/linkify"
-import DomPurify from "dompurify"
-import cx from "classnames"
-
-if (DomPurify.addHook) {
-  DomPurify.addHook("beforeSanitizeElements", function (current, ) {
-    // Attach safe `rel` values to all elements that contain an `href`,
-    // i.e. all anchors that are links.
-    // We _could_ just look for elements that have a non-self target,
-    // but applying it more broadly shouldn't hurt anything, and is safer.
-    if (current.href) {
-      current.setAttribute("rel", "noopener noreferrer")
-    }
-    return current
-  })
-}
-
-function Markdown({ source, className = "", getConfigs = () => ({ useUnsafeMarkdown: false }) }) {
-  if (typeof source !== "string") {
-    return null
-  }
-
-  const md = new Remarkable({
-    html: true,
-    typographer: true,
-    breaks: true,
-    linkTarget: "_blank"
-  }).use(linkify)
-
-  md.core.ruler.disable(["replacements", "smartquotes"])
-
-  const { useUnsafeMarkdown } = getConfigs()
-  const html = md.render(source)
-  const sanitized = sanitizer(html, { useUnsafeMarkdown })
-
-  if (!source || !html || !sanitized) {
-    return null
-  }
-
-  return (
-    <div className={cx(className, "markdown")} dangerouslySetInnerHTML={{ __html: sanitized }}></div>
-  )
-}
-
-Markdown.propTypes = {
-  source: PropTypes.string.isRequired,
-  className: PropTypes.string,
-  getConfigs: PropTypes.func,
-}
-
-export default Markdown
-
-export function sanitizer(str, { useUnsafeMarkdown = false } = {}) {
-  const ALLOW_DATA_ATTR = useUnsafeMarkdown
-  const FORBID_ATTR = useUnsafeMarkdown ? [] : ["style", "class"]
-
-  if (useUnsafeMarkdown && !sanitizer.hasWarnedAboutDeprecation) {
-    console.warn(`useUnsafeMarkdown display configuration parameter is deprecated since >3.26.0 and will be removed in v4.0.0.`)
-    sanitizer.hasWarnedAboutDeprecation = true
-  }
-
-  return DomPurify.sanitize(str, {
-    ADD_ATTR: ["target"],
-    FORBID_TAGS: ["style", "form"],
-    ALLOW_DATA_ATTR,
-    FORBID_ATTR,
-  })
-}
-sanitizer.hasWarnedAboutDeprecation = false

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

@@ -1,170 +0,0 @@
-import React from "react"
-import PropTypes from "prop-types"
-import formatXml from "xml-but-prettier"
-import toLower from "lodash/toLower"
-import { extractFileNameFromContentDispositionHeader } from "core/utils"
-import { getKnownSyntaxHighlighterLanguage } from "core/utils/jsonParse"
-import win from "core/window"
-
-export default class ResponseBody extends React.PureComponent {
-  state = {
-    parsedContent: null
-  }
-
-  static propTypes = {
-    content: PropTypes.any.isRequired,
-    contentType: PropTypes.string,
-    getComponent: PropTypes.func.isRequired,
-    headers: PropTypes.object,
-    url: PropTypes.string
-  }
-
-  updateParsedContent = (prevContent) => {
-    const { content } = this.props
-
-    if(prevContent === content) {
-      return
-    }
-
-    if(content && content instanceof Blob) {
-      var reader = new FileReader()
-      reader.onload = () => {
-        this.setState({
-          parsedContent: reader.result
-        })
-      }
-      reader.readAsText(content)
-    } else {
-      this.setState({
-        parsedContent: content.toString()
-      })
-    }
-  }
-
-  componentDidMount() {
-    this.updateParsedContent(null)
-  }
-
-  componentDidUpdate(prevProps) {
-    this.updateParsedContent(prevProps.content)
-  }
-
-  render() {
-    let { content, contentType, url, headers={}, getComponent } = this.props
-    const { parsedContent } = this.state
-    const HighlightCode = getComponent("HighlightCode", true)
-    const downloadName = "response_" + new Date().getTime()
-    let body, bodyEl
-    url = url || ""
-
-    if (
-      (/^application\/octet-stream/i.test(contentType) ||
-        (headers["Content-Disposition"] && /attachment/i.test(headers["Content-Disposition"])) ||
-        (headers["content-disposition"] && /attachment/i.test(headers["content-disposition"])) ||
-        (headers["Content-Description"] && /File Transfer/i.test(headers["Content-Description"])) ||
-        (headers["content-description"] && /File Transfer/i.test(headers["content-description"]))) &&
-      (content.size > 0 || content.length > 0)
-    ) {
-      // Download
-
-      if ("Blob" in window) {
-        let type = contentType || "text/html"
-        let blob = (content instanceof Blob) ? content : new Blob([content], {type: type})
-        let href = window.URL.createObjectURL(blob)
-        let fileName = url.substr(url.lastIndexOf("/") + 1)
-        let download = [type, fileName, href].join(":")
-
-        // Use filename from response header,
-        // First check if filename is quoted (e.g. contains space), if no, fallback to not quoted check
-        let disposition = headers["content-disposition"] || headers["Content-Disposition"]
-        if (typeof disposition !== "undefined") {
-          let responseFilename = extractFileNameFromContentDispositionHeader(disposition)
-          if (responseFilename !== null) {
-            download = responseFilename
-          }
-        }
-
-        if(win.navigator && win.navigator.msSaveOrOpenBlob) {
-            bodyEl = <div><a href={ href } onClick={() => win.navigator.msSaveOrOpenBlob(blob, download)}>{ "Download file" }</a></div>
-        } else {
-            bodyEl = <div><a href={ href } download={ download }>{ "Download file" }</a></div>
-        }
-      } else {
-        bodyEl = <pre className="microlight">Download headers detected but your browser does not support downloading binary via XHR (Blob).</pre>
-      }
-
-      // Anything else (CORS)
-    } else if (/json/i.test(contentType)) {
-      // JSON
-      let language = null
-      let testValueForJson = getKnownSyntaxHighlighterLanguage(content)
-      if (testValueForJson) {
-        language = "json"
-      }
-      try {
-        body = JSON.stringify(JSON.parse(content), null, "  ")
-      } catch (error) {
-        body = "can't parse JSON.  Raw result:\n\n" + content
-      }
-
-      bodyEl = <HighlightCode language={language} downloadable fileName={`${downloadName}.json`} canCopy>{body}</HighlightCode>
-
-      // XML
-    } else if (/xml/i.test(contentType)) {
-      body = formatXml(content, {
-        textNodesOnSameLine: true,
-        indentor: "  "
-      })
-      bodyEl = <HighlightCode downloadable fileName={`${downloadName}.xml`} canCopy>{body}</HighlightCode>
-
-      // HTML or Plain Text
-    } else if (toLower(contentType) === "text/html" || /text\/plain/.test(contentType)) {
-      bodyEl = <HighlightCode downloadable fileName={`${downloadName}.html`} canCopy>{content}</HighlightCode>
-
-      // CSV
-    } else if (toLower(contentType) === "text/csv" || /text\/csv/.test(contentType)) {
-      bodyEl = <HighlightCode downloadable fileName={`${downloadName}.csv`} canCopy>{content}</HighlightCode>
-
-      // Image
-    } else if (/^image\//i.test(contentType)) {
-      if(contentType.includes("svg")) {
-        bodyEl = <div> { content } </div>
-      } else {
-        bodyEl = <img src={ window.URL.createObjectURL(content) } />
-      }
-
-      // Audio
-    } else if (/^audio\//i.test(contentType)) {
-      bodyEl = <pre className="microlight"><audio controls key={ url }><source src={ url } type={ contentType } /></audio></pre>
-    } else if (typeof content === "string") {
-      bodyEl = <HighlightCode downloadable fileName={`${downloadName}.txt`} canCopy>{content}</HighlightCode>
-    } else if ( content.size > 0 ) {
-      // We don't know the contentType, but there was some content returned
-      if(parsedContent) {
-        // We were able to squeeze something out of content
-        // in `updateParsedContent`, so let's display it
-        bodyEl = <div>
-          <p className="i">
-            Unrecognized response type; displaying content as text.
-          </p>
-          <HighlightCode downloadable fileName={`${downloadName}.txt`} canCopy>{parsedContent}</HighlightCode>
-        </div>
-
-      } else {
-        // Give up
-        bodyEl = <p className="i">
-          Unrecognized response type; unable to display.
-        </p>
-      }
-    } else {
-      // We don't know the contentType and there was no content returned
-      bodyEl = null
-    }
-
-    return ( !bodyEl ? null : <div>
-        <h5>Response body</h5>
-        { bodyEl }
-      </div>
-    )
-  }
-}

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

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