@upendra19/swagger-ui-custom 1.0.0 → 1.0.1

package/src/core/components/contact.jsx

@@ -1,44 +0,0 @@
-/**
- * @prettier
- */
-import React from "react"
-import PropTypes from "prop-types"
-import { safeBuildUrl, sanitizeUrl } from "core/utils/url"
-
-class Contact extends React.Component {
-  static propTypes = {
-    data: PropTypes.object,
-    getComponent: PropTypes.func.isRequired,
-    specSelectors: PropTypes.object.isRequired,
-    selectedServer: PropTypes.string,
-    url: PropTypes.string.isRequired,
-  }
-
-  render() {
-    const { data, getComponent, selectedServer, url: specUrl } = this.props
-    const name = data.get("name", "the developer")
-    const url = safeBuildUrl(data.get("url"), specUrl, { selectedServer })
-    const email = data.get("email")
-
-    const Link = getComponent("Link")
-
-    return (
-      <div className="info__contact">
-        {url && (
-          <div>
-            <Link href={sanitizeUrl(url)} target="_blank">
-              {name} - Website
-            </Link>
-          </div>
-        )}
-        {email && (
-          <Link href={sanitizeUrl(`mailto:${email}`)}>
-            {url ? `Send email to ${name}` : `Contact ${name}`}
-          </Link>
-        )}
-      </div>
-    )
-  }
-}
-
-export default Contact

package/src/core/components/content-type.jsx

@@ -1,64 +0,0 @@
-import React from "react"
-import PropTypes from "prop-types"
-import ImPropTypes from "react-immutable-proptypes"
-import { fromJS } from "immutable"
-
-const noop = ()=>{}
-
-export default class ContentType extends React.Component {
-  static propTypes = {
-    ariaControls: PropTypes.string,
-    contentTypes: PropTypes.oneOfType([ImPropTypes.list, ImPropTypes.set, ImPropTypes.seq]),
-    controlId: PropTypes.string,
-    value: PropTypes.string,
-    onChange: PropTypes.func,
-    className: PropTypes.string,
-    ariaLabel: PropTypes.string
-  }
-
-  static defaultProps = {
-    onChange: noop,
-    value: null,
-    contentTypes: fromJS(["application/json"]),
-  }
-
-  componentDidMount() {
-    // Populate the form initially
-    const { contentTypes, onChange } = this.props
-    if (contentTypes && contentTypes.size) {
-      onChange(contentTypes.first())
-    }
-  }
-
-  componentDidUpdate() {
-    const { contentTypes, value, onChange } = this.props
-
-    if (!contentTypes || !contentTypes.size) {
-      return
-    }
-
-    if (!contentTypes.includes(value)) {
-      onChange(contentTypes.first())
-    }
-  }
-
-  onChangeWrapper = e => this.props.onChange(e.target.value)
-
-  render() {
-    let { ariaControls, ariaLabel, className, contentTypes, controlId, value } = this.props
-
-    if ( !contentTypes || !contentTypes.size )
-      return null
-
-    return (
-      <div className={ "content-type-wrapper " + ( className || "" ) }>
-        <select aria-controls={ariaControls} aria-label={ariaLabel} className="content-type" id={controlId} onChange={this.onChangeWrapper} value={value || ""} >
-          { contentTypes.map( (val) => {
-            return <option key={ val } value={ val }>{ val }</option>
-          }).toArray()}
-        </select>
-      </div>
-    )
-  }
-  
-}

package/src/core/components/copy-to-clipboard-btn.jsx

@@ -1,29 +0,0 @@
-import React from "react"
-import { CopyToClipboard } from "react-copy-to-clipboard"
-import PropTypes from "prop-types"
-
-/**
- * @param {{ getComponent: func, textToCopy: string }} props
- * @returns {JSX.Element}
- * @constructor
- */
-export default class CopyToClipboardBtn extends React.Component {
-  render() {
-    let { getComponent } = this.props
-
-    const CopyIcon = getComponent("CopyIcon")
-
-    return (
-      <div className="view-line-link copy-to-clipboard" title="Copy to clipboard">
-        <CopyToClipboard text={this.props.textToCopy}>
-          <CopyIcon />
-        </CopyToClipboard>
-      </div>
-    )
-  }
-
-  static propTypes = {
-    getComponent: PropTypes.func.isRequired,
-    textToCopy: PropTypes.string.isRequired,
-  }
-}

package/src/core/components/curl.jsx

@@ -1,38 +0,0 @@
-import React from "react"
-import PropTypes from "prop-types"
-import { CopyToClipboard } from "react-copy-to-clipboard"
-import { requestSnippetGenerator_curl_bash } from "../plugins/request-snippets/fn"
-
-export default class Curl extends React.Component {
-  static propTypes = {
-    getComponent: PropTypes.func.isRequired,
-    request: PropTypes.object.isRequired
-  }
-
-  render() {
-    const { request, getComponent } = this.props
-    const curl = requestSnippetGenerator_curl_bash(request)
-    const SyntaxHighlighter = getComponent("SyntaxHighlighter", true)
-
-    return (
-      <div className="curl-command">
-        <h4>Curl</h4>
-        <div className="copy-to-clipboard">
-            <CopyToClipboard text={curl}><button/></CopyToClipboard>
-        </div>
-        <div>
-          <SyntaxHighlighter
-            language="bash"
-            className="curl microlight"
-            renderPlainText={({ children, PlainTextViewer }) => (
-              <PlainTextViewer className="curl">{children}</PlainTextViewer>
-            )}
-          >
-            {curl}
-          </SyntaxHighlighter>
-        </div>
-      </div>
-    )
-  }
-
-}

package/src/core/components/debug.jsx

@@ -1,50 +0,0 @@
-import React from "react"
-import PropTypes from "prop-types"
-import ObjectInspector from "react-inspector"
-
-export default class Debug extends React.Component {
-
-  constructor() {
-    super()
-    this.state = {
-      jsonDumpOpen: false
-    }
-    this.toggleJsonDump = (e) => {
-      e.preventDefault()
-      this.setState({jsonDumpOpen: !this.state.jsonDumpOpen})
-    }
-  }
-
-  plusOrMinus(bool) {
-    return bool ? "-" : "+"
-  }
-
-  render() {
-
-    let { getState, getComponent } = this.props
-
-    window.props = this.props
-
-    const Collapse = getComponent("Collapse")
-
-    return (
-      <div className="info">
-        <h3><a onClick={this.toggleJsonDump}> {this.plusOrMinus(this.state.jsonDumpOpen)} App </a></h3>
-
-        <Collapse isOpened={this.state.jsonDumpOpen} springConfig={{ stiffness: 170, damping: 26 }}>
-
-           <ObjectInspector data={getState().toJS() || {}} name="state" expandPaths={["state"]}/>
-
-        </Collapse>
-
-
-      </div>
-    )
-  }
-
-}
-
-Debug.propTypes = {
-  getState: PropTypes.func.isRequired,
-  getComponent: PropTypes.func.isRequired,
-}

package/src/core/components/deep-link.jsx

@@ -1,20 +0,0 @@
-import React from "react"
-import PropTypes from "prop-types"
-
-export const DeepLink = ({ enabled, path, text }) => {
-    return (
-        <a className="nostyle"
-          onClick={enabled ? (e) => e.preventDefault() : null}
-          href={enabled ? `#/${path}` : null}>
-          <span>{text}</span>
-        </a>
-    )
-}
-DeepLink.propTypes = {
-  enabled: PropTypes.bool,
-  isShown: PropTypes.bool,
-  path: PropTypes.string,
-  text: PropTypes.node
-}
-
-export default DeepLink

package/src/core/components/errors.jsx

@@ -1,132 +0,0 @@
-import React from "react"
-import PropTypes from "prop-types"
-import { List } from "immutable"
-
-export default class Errors extends React.Component {
-
-  static propTypes = {
-    editorActions: PropTypes.object,
-    errSelectors: PropTypes.object.isRequired,
-    layoutSelectors: PropTypes.object.isRequired,
-    layoutActions: PropTypes.object.isRequired,
-    getComponent: PropTypes.func.isRequired,
-  }
-
-  render() {
-    let { editorActions, errSelectors, layoutSelectors, layoutActions, getComponent } = this.props
-
-    const Collapse = getComponent("Collapse")
-
-    if(editorActions && editorActions.jumpToLine) {
-      var jumpToLine = editorActions.jumpToLine
-    }
-
-    let errors = errSelectors.allErrors()
-
-    // all thrown errors, plus error-level everything else
-    let allErrorsToDisplay = errors.filter(err => err.get("type") === "thrown" ? true :err.get("level") === "error")
-
-    if(!allErrorsToDisplay || allErrorsToDisplay.count() < 1) {
-      return null
-    }
-
-    let isVisible = layoutSelectors.isShown(["errorPane"], true)
-    let toggleVisibility = () => layoutActions.show(["errorPane"], !isVisible)
-
-    let sortedJSErrors = allErrorsToDisplay.sortBy(err => err.get("line"))
-
-    return (
-      <pre className="errors-wrapper">
-        <hgroup className="error">
-          <h4 className="errors__title">Errors</h4>
-          <button className="btn errors__clear-btn" onClick={ toggleVisibility }>{ isVisible ? "Hide" : "Show" }</button>
-        </hgroup>
-        <Collapse isOpened={ isVisible } animated >
-          <div className="errors">
-            { sortedJSErrors.map((err, i) => {
-              let type = err.get("type")
-              if(type === "thrown" || type === "auth") {
-                return <ThrownErrorItem key={ i } error={ err.get("error") || err } jumpToLine={jumpToLine} />
-              }
-              if(type === "spec") {
-                return <SpecErrorItem key={ i } error={ err } jumpToLine={jumpToLine} />
-              }
-            }) }
-          </div>
-        </Collapse>
-      </pre>
-      )
-    }
-}
-
-const ThrownErrorItem = ( { error, jumpToLine } ) => {
-  if(!error) {
-    return null
-  }
-  let errorLine = error.get("line")
-
-  return (
-    <div className="error-wrapper">
-      { !error ? null :
-        <div>
-          <h4>{ (error.get("source") && error.get("level")) ?
-            toTitleCase(error.get("source")) + " " + error.get("level") : "" }
-          { error.get("path") ? <small> at {error.get("path")}</small>: null }</h4>
-          <span className="message thrown">
-            { error.get("message") }
-          </span>
-          <div className="error-line">
-            { errorLine && jumpToLine ? <a onClick={jumpToLine.bind(null, errorLine)}>Jump to line { errorLine }</a> : null }
-          </div>
-        </div>
-      }
-    </div>
-    )
-  }
-
-const SpecErrorItem = ( { error, jumpToLine = null } ) => {
-  let locationMessage = null
-
-  if(error.get("path")) {
-    if(List.isList(error.get("path"))) {
-      locationMessage = <small>at { error.get("path").join(".") }</small>
-    } else {
-      locationMessage = <small>at { error.get("path") }</small>
-    }
-  } else if(error.get("line") && !jumpToLine) {
-    locationMessage = <small>on line { error.get("line") }</small>
-  }
-
-  return (
-    <div className="error-wrapper">
-      { !error ? null :
-        <div>
-          <h4>{ toTitleCase(error.get("source")) + " " + error.get("level") }&nbsp;{ locationMessage }</h4>
-          <span className="message">{ error.get("message") }</span>
-          <div className="error-line">
-            { jumpToLine ? (
-              <a onClick={jumpToLine.bind(null, error.get("line"))}>Jump to line { error.get("line") }</a>
-            ) : null }
-          </div>
-        </div>
-      }
-    </div>
-    )
-  }
-
-function toTitleCase(str) {
-  return (str || "")
-    .split(" ")
-    .map(substr => substr[0].toUpperCase() + substr.slice(1))
-    .join(" ")
-}
-
-ThrownErrorItem.propTypes = {
-  error: PropTypes.object.isRequired,
-  jumpToLine: PropTypes.func
-}
-
-SpecErrorItem.propTypes = {
-  error: PropTypes.object.isRequired,
-  jumpToLine: PropTypes.func
-}

package/src/core/components/example.jsx

@@ -1,43 +0,0 @@
-/**
- * @prettier
- */
-
-import React from "react"
-import PropTypes from "prop-types"
-import ImPropTypes from "react-immutable-proptypes"
-import { stringify } from "core/utils"
-import { Map } from "immutable"
-
-export default function Example(props) {
-  const { example, showValue, getComponent } = props
-
-  const Markdown = getComponent("Markdown", true)
-  const HighlightCode = getComponent("HighlightCode", true)
-
-  if (!example || !Map.isMap(example)) return null
-
-  return (
-    <div className="example">
-      {example.get("description") ? (
-        <section className="example__section">
-          <div className="example__section-header">Example Description</div>
-          <p>
-            <Markdown source={example.get("description")} />
-          </p>
-        </section>
-      ) : null}
-      {showValue && example.has("value") ? (
-        <section className="example__section">
-          <div className="example__section-header">Example Value</div>
-          <HighlightCode>{stringify(example.get("value"))}</HighlightCode>
-        </section>
-      ) : null}
-    </div>
-  )
-}
-
-Example.propTypes = {
-  example: ImPropTypes.map.isRequired,
-  showValue: PropTypes.bool,
-  getComponent: PropTypes.func.isRequired,
-}

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

@@ -1,254 +0,0 @@
-/**
- * @prettier
- */
-import React from "react"
-import { Map, List } from "immutable"
-import PropTypes from "prop-types"
-import ImPropTypes from "react-immutable-proptypes"
-
-import { stringify } from "core/utils"
-
-// This stateful component lets us avoid writing competing values (user
-// modifications vs example values) into global state, and the mess that comes
-// with that: tracking which of the two values are currently used for
-// Try-It-Out, which example a modified value came from, etc...
-//
-// The solution here is to retain the last user-modified value in
-// ExamplesSelectValueRetainer's component state, so that our global state can stay
-// clean, always simply being the source of truth for what value should be both
-// displayed to the user and used as a value during request execution.
-//
-// This approach/tradeoff was chosen in order to encapsulate the particular
-// logic of Examples within the Examples component tree, and to avoid
-// regressions within our current implementation elsewhere (non-Examples
-// definitions, OpenAPI 2.0, etc). A future refactor to global state might make
-// this component unnecessary.
-//
-// TL;DR: this is not our usual approach, but the choice was made consciously.
-
-// Note that `currentNamespace` isn't currently used anywhere!
-
-const stringifyUnlessList = (input) =>
-  List.isList(input) ? input : stringify(input)
-
-export default class ExamplesSelectValueRetainer extends React.PureComponent {
-  static propTypes = {
-    examples: ImPropTypes.map,
-    onSelect: PropTypes.func,
-    updateValue: PropTypes.func, // mechanism to update upstream value
-    userHasEditedBody: PropTypes.bool,
-    getComponent: PropTypes.func.isRequired,
-    currentUserInputValue: PropTypes.any,
-    currentKey: PropTypes.string,
-    currentNamespace: PropTypes.string,
-    setRetainRequestBodyValueFlag: PropTypes.func.isRequired,
-    // (also proxies props for Examples)
-  }
-
-  static defaultProps = {
-    userHasEditedBody: false,
-    examples: Map({}),
-    currentNamespace: "__DEFAULT__NAMESPACE__",
-    setRetainRequestBodyValueFlag: () => {
-      // NOOP
-    },
-    onSelect: (...args) =>
-      // eslint-disable-next-line no-console
-      console.log(
-        "ExamplesSelectValueRetainer: no `onSelect` function was provided",
-        ...args
-      ),
-    updateValue: (...args) =>
-      // eslint-disable-next-line no-console
-      console.log(
-        "ExamplesSelectValueRetainer: no `updateValue` function was provided",
-        ...args
-      ),
-  }
-
-  constructor(props) {
-    super(props)
-
-    const valueFromExample = this._getCurrentExampleValue()
-
-    this.state = {
-      // user edited: last value that came from the world around us, and didn't
-      // match the current example's value
-      // internal: last value that came from user selecting an Example
-      [props.currentNamespace]: Map({
-        lastUserEditedValue: this.props.currentUserInputValue,
-        lastDownstreamValue: valueFromExample,
-        isModifiedValueSelected:
-          // valueFromExample !== undefined &&
-          this.props.userHasEditedBody ||
-          this.props.currentUserInputValue !== valueFromExample,
-      }),
-    }
-  }
-
-  componentWillUnmount() {
-    this.props.setRetainRequestBodyValueFlag(false)
-  }
-
-  _getStateForCurrentNamespace = () => {
-    const { currentNamespace } = this.props
-
-    return (this.state[currentNamespace] || Map()).toObject()
-  }
-
-  _setStateForCurrentNamespace = (obj) => {
-    const { currentNamespace } = this.props
-
-    return this._setStateForNamespace(currentNamespace, obj)
-  }
-
-  _setStateForNamespace = (namespace, obj) => {
-    const oldStateForNamespace = this.state[namespace] || Map()
-    const newStateForNamespace = oldStateForNamespace.mergeDeep(obj)
-    return this.setState({
-      [namespace]: newStateForNamespace,
-    })
-  }
-
-  _isCurrentUserInputSameAsExampleValue = () => {
-    const { currentUserInputValue } = this.props
-
-    const valueFromExample = this._getCurrentExampleValue()
-
-    return valueFromExample === currentUserInputValue
-  }
-
-  _getValueForExample = (exampleKey, props) => {
-    // props are accepted so that this can be used in UNSAFE_componentWillReceiveProps,
-    // which has access to `nextProps`
-    const { examples } = props || this.props
-    return stringifyUnlessList(
-      (examples || Map({})).getIn([exampleKey, "value"])
-    )
-  }
-
-  _getCurrentExampleValue = (props) => {
-    // props are accepted so that this can be used in UNSAFE_componentWillReceiveProps,
-    // which has access to `nextProps`
-    const { currentKey } = props || this.props
-    return this._getValueForExample(currentKey, props || this.props)
-  }
-
-  _onExamplesSelect = (key, { isSyntheticChange } = {}, ...otherArgs) => {
-    const { onSelect, updateValue, currentUserInputValue, userHasEditedBody } =
-      this.props
-    const { lastUserEditedValue } = this._getStateForCurrentNamespace()
-
-    const valueFromExample = this._getValueForExample(key)
-
-    if (key === "__MODIFIED__VALUE__") {
-      updateValue(stringifyUnlessList(lastUserEditedValue))
-      return this._setStateForCurrentNamespace({
-        isModifiedValueSelected: true,
-      })
-    }
-
-    if (typeof onSelect === "function") {
-      onSelect(key, { isSyntheticChange }, ...otherArgs)
-    }
-
-    this._setStateForCurrentNamespace({
-      lastDownstreamValue: valueFromExample,
-      isModifiedValueSelected:
-        (isSyntheticChange && userHasEditedBody) ||
-        (!!currentUserInputValue && currentUserInputValue !== valueFromExample),
-    })
-
-    // we never want to send up value updates from synthetic changes
-    if (isSyntheticChange) return
-
-    if (typeof updateValue === "function") {
-      updateValue(stringifyUnlessList(valueFromExample))
-    }
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    // update `lastUserEditedValue` as new currentUserInput values come in
-
-    const {
-      currentUserInputValue: newValue,
-      examples,
-      onSelect,
-      userHasEditedBody,
-    } = nextProps
-
-    const { lastUserEditedValue, lastDownstreamValue } =
-      this._getStateForCurrentNamespace()
-
-    const valueFromCurrentExample = this._getValueForExample(
-      nextProps.currentKey,
-      nextProps
-    )
-
-    const examplesMatchingNewValue = examples.filter(
-      (example) =>
-        Map.isMap(example) &&
-        (example.get("value") === newValue ||
-          // sometimes data is stored as a string (e.g. in Request Bodies), so
-          // let's check against a stringified version of our example too
-          stringify(example.get("value")) === newValue)
-    )
-
-    if (examplesMatchingNewValue.size) {
-      let key
-      if (examplesMatchingNewValue.has(nextProps.currentKey)) {
-        key = nextProps.currentKey
-      } else {
-        key = examplesMatchingNewValue.keySeq().first()
-      }
-      onSelect(key, {
-        isSyntheticChange: true,
-      })
-    } else if (
-      newValue !== this.props.currentUserInputValue && // value has changed
-      newValue !== lastUserEditedValue && // value isn't already tracked
-      newValue !== lastDownstreamValue // value isn't what we've seen on the other side
-    ) {
-      this.props.setRetainRequestBodyValueFlag(true)
-      this._setStateForNamespace(nextProps.currentNamespace, {
-        lastUserEditedValue: nextProps.currentUserInputValue,
-        isModifiedValueSelected:
-          userHasEditedBody || newValue !== valueFromCurrentExample,
-      })
-    }
-  }
-
-  render() {
-    const {
-      currentUserInputValue,
-      examples,
-      currentKey,
-      getComponent,
-      userHasEditedBody,
-    } = this.props
-    const {
-      lastDownstreamValue,
-      lastUserEditedValue,
-      isModifiedValueSelected,
-    } = this._getStateForCurrentNamespace()
-
-    const ExamplesSelect = getComponent("ExamplesSelect")
-
-    return (
-      <ExamplesSelect
-        examples={examples}
-        currentExampleKey={currentKey}
-        onSelect={this._onExamplesSelect}
-        isModifiedValueAvailable={
-          !!lastUserEditedValue && lastUserEditedValue !== lastDownstreamValue
-        }
-        isValueModified={
-          (currentUserInputValue !== undefined &&
-            isModifiedValueSelected &&
-            currentUserInputValue !== this._getCurrentExampleValue()) ||
-          userHasEditedBody
-        }
-      />
-    )
-  }
-}