@upendra19/swagger-ui-custom 1.0.0

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

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

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

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

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

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

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