@upendra19/swagger-ui-custom 1.0.0

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

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

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

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

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

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

@@ -0,0 +1,43 @@
+/**
+ * @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

@@ -0,0 +1,254 @@
+/**
+ * @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
+        }
+      />
+    )
+  }
+}