@upendra19/swagger-ui-custom 1.0.0

package/src/core/components/examples-select.jsx

@@ -0,0 +1,139 @@
+/**
+ * @prettier
+ */
+
+import React from "react"
+import { Map } from "immutable"
+import PropTypes from "prop-types"
+import ImPropTypes from "react-immutable-proptypes"
+
+export default class ExamplesSelect extends React.PureComponent {
+  static propTypes = {
+    examples: ImPropTypes.map.isRequired,
+    onSelect: PropTypes.func,
+    currentExampleKey: PropTypes.string,
+    isModifiedValueAvailable: PropTypes.bool,
+    isValueModified: PropTypes.bool,
+    showLabels: PropTypes.bool,
+  }
+
+  static defaultProps = {
+    examples: Map({}),
+    onSelect: (...args) =>
+      // eslint-disable-next-line no-console
+      console.log(
+        // FIXME: remove before merging to master...
+        `DEBUG: ExamplesSelect was not given an onSelect callback`,
+        ...args
+      ),
+    currentExampleKey: null,
+    showLabels: true,
+  }
+
+  _onSelect = (key, { isSyntheticChange = false } = {}) => {
+    if (typeof this.props.onSelect === "function") {
+      this.props.onSelect(key, {
+        isSyntheticChange,
+      })
+    }
+  }
+
+  _onDomSelect = (e) => {
+    if (typeof this.props.onSelect === "function") {
+      const element = e.target.selectedOptions[0]
+      const key = element.getAttribute("value")
+
+      this._onSelect(key, {
+        isSyntheticChange: false,
+      })
+    }
+  }
+
+  getCurrentExample = () => {
+    const { examples, currentExampleKey } = this.props
+
+    const currentExamplePerProps = examples.get(currentExampleKey)
+
+    const firstExamplesKey = examples.keySeq().first()
+    const firstExample = examples.get(firstExamplesKey)
+
+    return currentExamplePerProps || firstExample || Map({})
+  }
+
+  componentDidMount() {
+    // this is the not-so-great part of ExamplesSelect... here we're
+    // artificially kicking off an onSelect event in order to set a default
+    // value in state. the consumer has the option to avoid this by checking
+    // `isSyntheticEvent`, but we should really be doing this in a selector.
+    // TODO: clean this up
+    // FIXME: should this only trigger if `currentExamplesKey` is nullish?
+    const { onSelect, examples } = this.props
+
+    if (typeof onSelect === "function") {
+      const firstExample = examples.first()
+      const firstExampleKey = examples.keyOf(firstExample)
+
+      this._onSelect(firstExampleKey, {
+        isSyntheticChange: true,
+      })
+    }
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const { currentExampleKey, examples } = nextProps
+    if (examples !== this.props.examples && !examples.has(currentExampleKey)) {
+      // examples have changed from under us, and the currentExampleKey is no longer
+      // valid.
+      const firstExample = examples.first()
+      const firstExampleKey = examples.keyOf(firstExample)
+
+      this._onSelect(firstExampleKey, {
+        isSyntheticChange: true,
+      })
+    }
+  }
+
+  render() {
+    const {
+      examples,
+      currentExampleKey,
+      isValueModified,
+      isModifiedValueAvailable,
+      showLabels,
+    } = this.props
+
+    return (
+      <div className="examples-select">
+        {showLabels ? (
+          <span className="examples-select__section-label">Examples: </span>
+        ) : null}
+        <select
+          className="examples-select-element"
+          onChange={this._onDomSelect}
+          value={
+            isModifiedValueAvailable && isValueModified
+              ? "__MODIFIED__VALUE__"
+              : currentExampleKey || ""
+          }
+        >
+          {isModifiedValueAvailable ? (
+            <option value="__MODIFIED__VALUE__">[Modified value]</option>
+          ) : null}
+          {examples
+            .map((example, exampleName) => {
+              return (
+                <option
+                  key={exampleName} // for React
+                  value={exampleName} // for matching to select's `value`
+                >
+                  {(Map.isMap(example) && example.get("summary")) ||
+                    exampleName}
+                </option>
+              )
+            })
+            .valueSeq()}
+        </select>
+      </div>
+    )
+  }
+}

package/src/core/components/execute.jsx

@@ -0,0 +1,103 @@
+import React, { Component } from "react"
+import PropTypes from "prop-types"
+
+export default class Execute extends Component {
+
+  static propTypes = {
+    specSelectors: PropTypes.object.isRequired,
+    specActions: PropTypes.object.isRequired,
+    operation: PropTypes.object.isRequired,
+    path: PropTypes.string.isRequired,
+    method: PropTypes.string.isRequired,
+    oas3Selectors: PropTypes.object.isRequired,
+    oas3Actions: PropTypes.object.isRequired,
+    onExecute: PropTypes.func,
+    disabled: PropTypes.bool
+  }
+
+  handleValidateParameters = () => {
+    let { specSelectors, specActions, path, method } = this.props
+    specActions.validateParams([path, method])
+    return specSelectors.validateBeforeExecute([path, method])
+  }
+
+  handleValidateRequestBody = () => {
+    let { path, method, specSelectors, oas3Selectors, oas3Actions } = this.props
+    let validationErrors = {
+      missingBodyValue: false,
+      missingRequiredKeys: []
+    }
+    // context: reset errors, then (re)validate
+    oas3Actions.clearRequestBodyValidateError({ path, method })
+    let oas3RequiredRequestBodyContentType = specSelectors.getOAS3RequiredRequestBodyContentType([path, method])
+    let oas3RequestBodyValue = oas3Selectors.requestBodyValue(path, method)
+    let oas3ValidateBeforeExecuteSuccess = oas3Selectors.validateBeforeExecute([path, method])
+    let oas3RequestContentType = oas3Selectors.requestContentType(path, method)
+
+    if (!oas3ValidateBeforeExecuteSuccess) {
+      validationErrors.missingBodyValue = true
+      oas3Actions.setRequestBodyValidateError({ path, method, validationErrors })
+      return false
+    }
+    if (!oas3RequiredRequestBodyContentType) {
+      return true
+    }
+    let missingRequiredKeys = oas3Selectors.validateShallowRequired({
+      oas3RequiredRequestBodyContentType,
+      oas3RequestContentType,
+      oas3RequestBodyValue
+    })
+    if (!missingRequiredKeys || missingRequiredKeys.length < 1) {
+      return true
+    }
+    missingRequiredKeys.forEach((missingKey) => {
+      validationErrors.missingRequiredKeys.push(missingKey)
+    })
+    oas3Actions.setRequestBodyValidateError({ path, method, validationErrors })
+    return false
+  }
+
+  handleValidationResultPass = () => {
+    let { specActions, operation, path, method } = this.props
+    if (this.props.onExecute) {
+      // loading spinner
+      this.props.onExecute()
+    }
+    specActions.execute({ operation, path, method })
+  }
+
+  handleValidationResultFail = () => {
+    let { specActions, path, method } = this.props
+    // deferred by 40ms, to give element class change time to settle.
+    specActions.clearValidateParams([path, method])
+    setTimeout(() => {
+      specActions.validateParams([path, method])
+    }, 40)
+  }
+
+  handleValidationResult = (isPass) => {
+    if (isPass) {
+      this.handleValidationResultPass()
+    } else {
+      this.handleValidationResultFail()
+    }
+  }
+
+  onClick = () => {
+    let paramsResult = this.handleValidateParameters()
+    let requestBodyResult = this.handleValidateRequestBody()
+    let isPass = paramsResult && requestBodyResult
+    this.handleValidationResult(isPass)
+  }
+
+  onChangeProducesWrapper = ( val ) => this.props.specActions.changeProducesValue([this.props.path, this.props.method], val)
+
+  render(){
+    const { disabled } = this.props
+    return (
+        <button className="btn execute opblock-control__btn" onClick={ this.onClick } disabled={disabled}>
+          Execute
+        </button>
+    )
+  }
+}

package/src/core/components/footer.jsx

@@ -0,0 +1,9 @@
+import React from "react"
+
+export default class Footer extends React.Component {
+  render() {
+    return (
+      <div className="footer"></div>
+    )
+  }
+}

package/src/core/components/headers.jsx

@@ -0,0 +1,58 @@
+import React from "react"
+import PropTypes from "prop-types"
+import Im from "immutable"
+
+const propClass = "header-example"
+
+export default class Headers extends React.Component {
+  static propTypes = {
+    headers: PropTypes.object.isRequired,
+    getComponent: PropTypes.func.isRequired
+  }
+
+  render() {
+    let { headers, getComponent } = this.props
+
+    const Property = getComponent("Property")
+    const Markdown = getComponent("Markdown", true)
+
+    if ( !headers || !headers.size )
+      return null
+
+      return (
+      <div className="headers-wrapper">
+        <h4 className="headers__title">Headers:</h4>
+        <table className="headers">
+          <thead>
+            <tr className="header-row">
+              <th className="header-col">Name</th>
+              <th className="header-col">Description</th>
+              <th className="header-col">Type</th>
+            </tr>
+          </thead>
+          <tbody>
+          {
+            headers.entrySeq().map( ([ key, header ]) => {
+              if(!Im.Map.isMap(header)) {
+                return null
+              }
+
+              const description = header.get("description")
+              const type = header.getIn(["schema"]) ? header.getIn(["schema", "type"]) : header.getIn(["type"])
+              const schemaExample = header.getIn(["schema", "example"])
+
+              return (<tr key={ key }>
+                <td className="header-col">{ key }</td>
+                <td className="header-col">{
+                  !description ? null : <Markdown source={ description } />
+                }</td>
+                <td className="header-col">{ type } { schemaExample ? <Property propKey={ "Example" } propVal={ schemaExample } propClass={ propClass } /> : null }</td>
+              </tr>)
+            }).toArray()
+          }
+          </tbody>
+        </table>
+      </div>
+    )
+  }
+}

package/src/core/components/info.jsx

@@ -0,0 +1,169 @@
+/**
+ * @prettier
+ */
+import React from "react"
+import PropTypes from "prop-types"
+import ImPropTypes from "react-immutable-proptypes"
+import { safeBuildUrl, sanitizeUrl } from "core/utils/url"
+
+export class InfoBasePath extends React.Component {
+  static propTypes = {
+    host: PropTypes.string,
+    basePath: PropTypes.string,
+  }
+
+  render() {
+    const { host, basePath } = this.props
+
+    return (
+      <pre className="base-url">
+        [ Base URL: {host}
+        {basePath} ]
+      </pre>
+    )
+  }
+}
+
+export class InfoUrl extends React.PureComponent {
+  static propTypes = {
+    url: PropTypes.string.isRequired,
+    getComponent: PropTypes.func.isRequired,
+  }
+
+  render() {
+    const { url, getComponent } = this.props
+    const Link = getComponent("Link")
+
+    return (
+      <Link target="_blank" href={sanitizeUrl(url)}>
+        <span className="url"> {url}</span>
+      </Link>
+    )
+  }
+}
+
+class Info extends React.Component {
+  static propTypes = {
+    title: PropTypes.any,
+    description: PropTypes.any,
+    version: PropTypes.any,
+    info: PropTypes.object,
+    url: PropTypes.string,
+    host: PropTypes.string,
+    basePath: PropTypes.string,
+    externalDocs: ImPropTypes.map,
+    getComponent: PropTypes.func.isRequired,
+    getConfigs: PropTypes.func, // Optional - will default to showing links if not provided
+    oas3selectors: PropTypes.func,
+    selectedServer: PropTypes.string,
+  }
+
+  render() {
+    const {
+      info,
+      url,
+      host,
+      basePath,
+      getComponent,
+      getConfigs,
+      externalDocs,
+      selectedServer,
+      url: specUrl,
+    } = this.props
+    
+    // Safety check: if getConfigs is not available, default to showing links
+    const configs = getConfigs ? getConfigs() : {}
+    const { showInfoLinks = true } = configs
+    
+    const version = info.get("version")
+    const description = info.get("description")
+    const title = info.get("title")
+    const termsOfServiceUrl = safeBuildUrl(
+      info.get("termsOfService"),
+      specUrl,
+      { selectedServer }
+    )
+    const contactData = info.get("contact")
+    const licenseData = info.get("license")
+    const rawExternalDocsUrl = externalDocs && externalDocs.get("url")
+    const externalDocsUrl = safeBuildUrl(rawExternalDocsUrl, specUrl, {
+      selectedServer,
+    })
+    const externalDocsDescription =
+      externalDocs && externalDocs.get("description")
+
+    const Markdown = getComponent("Markdown", true)
+    const Link = getComponent("Link")
+    const VersionStamp = getComponent("VersionStamp")
+    const OpenAPIVersion = getComponent("OpenAPIVersion")
+    const InfoUrl = getComponent("InfoUrl")
+    const InfoBasePath = getComponent("InfoBasePath")
+    const License = getComponent("License")
+    const Contact = getComponent("Contact")
+
+    return (
+      <div className="info">
+        <hgroup className="main">
+          <h1 className="title">
+            {title}
+            <span>
+              {version && <VersionStamp version={version} />}
+              <OpenAPIVersion oasVersion="2.0" />
+            </span>
+          </h1>
+          {host || basePath ? (
+            <InfoBasePath host={host} basePath={basePath} />
+          ) : null}
+          {/* Show URL only if showInfoLinks is true */}
+          {showInfoLinks && url && <InfoUrl getComponent={getComponent} url={url} />}
+        </hgroup>
+
+        <div className="description">
+          <Markdown source={description} />
+        </div>
+
+        {/* Show terms of service only if showInfoLinks is true */}
+        {showInfoLinks && termsOfServiceUrl && (
+          <div className="info__tos">
+            <Link target="_blank" href={sanitizeUrl(termsOfServiceUrl)}>
+              Terms of service
+            </Link>
+          </div>
+        )}
+
+        {/* Show contact only if showInfoLinks is true */}
+        {showInfoLinks && contactData?.size > 0 && (
+          <Contact
+            getComponent={getComponent}
+            data={contactData}
+            selectedServer={selectedServer}
+            url={url}
+          />
+        )}
+        
+        {/* Show license only if showInfoLinks is true */}
+        {showInfoLinks && licenseData?.size > 0 && (
+          <License
+            getComponent={getComponent}
+            license={licenseData}
+            selectedServer={selectedServer}
+            url={url}
+          />
+        )}
+        
+        {/* Show external docs only if showInfoLinks is true */}
+        {showInfoLinks && externalDocsUrl ? (
+          <Link
+            className="info__extdocs"
+            target="_blank"
+            href={sanitizeUrl(externalDocsUrl)}
+          >
+            {externalDocsDescription || externalDocsUrl}
+          </Link>
+        ) : null}
+      </div>
+    )
+  }
+}
+
+export default Info

package/src/core/components/initialized-input.jsx

@@ -0,0 +1,36 @@
+// This component provides an interface that feels like an uncontrolled input
+// to consumers, while providing a `defaultValue` interface that initializes
+// the input's value using JavaScript value property APIs instead of React's 
+// vanilla[0] implementation that uses HTML value attributes.
+//
+// This is useful in situations where we don't want to surface an input's value
+// into the HTML/CSS-exposed side of the DOM, for example to avoid sequential
+// input chaining attacks[1].
+// 
+// [0]: https://github.com/facebook/react/blob/baff5cc2f69d30589a5dc65b089e47765437294b/fixtures/dom/src/components/fixtures/text-inputs/README.md
+// [1]: https://github.com/d0nutptr/sic
+
+import React from "react"
+import PropTypes from "prop-types"
+
+export default class InitializedInput extends React.Component {
+  componentDidMount() {
+    // Set the element's `value` property (*not* the `value` attribute)
+    // once, on mount, if an `initialValue` is provided.
+    if(this.props.initialValue) {
+      this.inputRef.value = this.props.initialValue
+    }
+  }
+
+  render() {
+    // Filter out `value` and `defaultValue`, since we have our own
+    // `initialValue` interface that we provide.
+    // eslint-disable-next-line no-unused-vars, react/prop-types
+    const { value, defaultValue, initialValue, ...otherProps } = this.props
+    return <input {...otherProps} ref={c => this.inputRef = c} />
+  }
+}
+
+InitializedInput.propTypes = {
+  initialValue: PropTypes.string
+}

package/src/core/components/jump-to-path.jsx

@@ -0,0 +1,9 @@
+import React from "react"
+
+// Nothing by default- component can be overridden by another plugin.
+
+export default class JumpToPath extends React.Component {
+  render() {
+    return null
+  }
+}