@upendra19/swagger-ui-custom 1.0.0

package/src/core/plugins/oas3/components/operation-servers.jsx

@@ -0,0 +1,102 @@
+import React from "react"
+import PropTypes from "prop-types"
+import ImPropTypes from "react-immutable-proptypes"
+
+export default class OperationServers extends React.Component {
+  static propTypes = {
+    // for self
+    path: PropTypes.string.isRequired,
+    method: PropTypes.string.isRequired,
+    operationServers: ImPropTypes.list,
+    pathServers: ImPropTypes.list,
+    setSelectedServer: PropTypes.func.isRequired,
+    setServerVariableValue: PropTypes.func.isRequired,
+    getSelectedServer: PropTypes.func.isRequired,
+    getServerVariable: PropTypes.func.isRequired,
+    getEffectiveServerValue: PropTypes.func.isRequired,
+
+    // utils
+    getComponent: PropTypes.func.isRequired
+  }
+
+  setSelectedServer = (server) => {
+    const { path, method } = this.props
+    // FIXME: we should be keeping up with this in props/state upstream of us
+    // instead of cheating™ with `forceUpdate`
+    this.forceUpdate()
+    return this.props.setSelectedServer(server, `${path}:${method}`)
+  }
+
+  setServerVariableValue = (obj) => {
+    const { path, method } = this.props
+    // FIXME: we should be keeping up with this in props/state upstream of us
+    // instead of cheating™ with `forceUpdate`
+    this.forceUpdate()
+    return this.props.setServerVariableValue({
+      ...obj,
+      namespace: `${path}:${method}`
+    })
+  }
+
+  getSelectedServer = () => {
+    const { path, method } = this.props
+    return this.props.getSelectedServer(`${path}:${method}`)
+  }
+
+  getServerVariable = (server, key) => {
+    const { path, method } = this.props
+    return this.props.getServerVariable({
+      namespace: `${path}:${method}`,
+      server
+    }, key)
+  }
+
+  getEffectiveServerValue = (server) => {
+    const { path, method } = this.props
+    return this.props.getEffectiveServerValue({
+      server,
+      namespace: `${path}:${method}`
+    })
+  }
+
+  render() {
+    const {
+      // for self
+      operationServers,
+      pathServers,
+
+      // util
+      getComponent
+    } = this.props
+
+    if(!operationServers && !pathServers) {
+      return null
+    }
+
+    const Servers = getComponent("Servers")
+
+    const serversToDisplay = operationServers || pathServers
+    const displaying = operationServers ? "operation" : "path"
+
+    return <div className="opblock-section operation-servers">
+      <div className="opblock-section-header">
+        <div className="tab-header">
+          <h4 className="opblock-title">Servers</h4>
+        </div>
+      </div>
+      <div className="opblock-description-wrapper">
+        <h4 className="message">
+          These {displaying}-level options override the global server options.
+        </h4>
+        <Servers
+          servers={serversToDisplay}
+          currentServer={this.getSelectedServer()}
+          setSelectedServer={this.setSelectedServer}
+          setServerVariableValue={this.setServerVariableValue}
+          getServerVariable={this.getServerVariable}
+          getEffectiveServerValue={this.getEffectiveServerValue}
+          />
+      </div>
+    </div>
+  }
+}

package/src/core/plugins/oas3/components/request-body-editor.jsx

@@ -0,0 +1,103 @@
+import React, { PureComponent } from "react"
+import PropTypes from "prop-types"
+import cx from "classnames"
+import { stringify } from "core/utils"
+
+const NOOP = Function.prototype
+
+export default class RequestBodyEditor extends PureComponent {
+
+  static propTypes = {
+    onChange: PropTypes.func,
+    getComponent: PropTypes.func.isRequired,
+    value: PropTypes.string,
+    defaultValue: PropTypes.string,
+    errors: PropTypes.array,
+  }
+
+  static defaultProps = {
+    onChange: NOOP,
+    userHasEditedBody: false,
+  }
+
+  constructor(props, context) {
+    super(props, context)
+
+    this.state = {
+      value: stringify(props.value) || props.defaultValue
+    }
+
+    // this is the glue that makes sure our initial value gets set as the
+    // current request body value
+    // TODO: achieve this in a selector instead
+    props.onChange(props.value)
+  }
+
+  applyDefaultValue = (nextProps) => {
+    const { onChange, defaultValue } = (nextProps ? nextProps : this.props)
+
+    this.setState({
+      value: defaultValue
+    })
+
+    return onChange(defaultValue)
+  }
+
+  onChange = (value) => {
+    this.props.onChange(stringify(value))
+  }
+
+  onDomChange = e => {
+    const inputValue = e.target.value
+
+    this.setState({
+      value: inputValue,
+    }, () => this.onChange(inputValue))
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if(
+      this.props.value !== nextProps.value &&
+      nextProps.value !== this.state.value
+    ) {
+
+      this.setState({
+        value: stringify(nextProps.value)
+      })
+    }
+
+
+
+    if(!nextProps.value && nextProps.defaultValue && !!this.state.value) {
+      // if new value is falsy, we have a default, AND the falsy value didn't
+      // come from us originally
+      this.applyDefaultValue(nextProps)
+    }
+  }
+
+  render() {
+    let {
+      getComponent,
+      errors,
+    } = this.props
+
+    let {
+      value
+    } = this.state
+
+    let isInvalid = errors.size > 0 ? true : false
+    const TextArea = getComponent("TextArea")
+
+    return (
+      <div className="body-param">
+        <TextArea
+          className={cx("body-param__text", { invalid: isInvalid } )}
+          title={errors.size ? errors.join(", ") : ""}
+          value={value}
+          onChange={ this.onDomChange }
+        />
+      </div>
+    )
+
+  }
+}

package/src/core/plugins/oas3/components/request-body.jsx

@@ -0,0 +1,338 @@
+import React from "react"
+import PropTypes from "prop-types"
+import ImPropTypes from "react-immutable-proptypes"
+import { Map, OrderedMap, List, fromJS } from "immutable"
+import { getCommonExtensions, stringify, isEmptyValue } from "core/utils"
+import { getKnownSyntaxHighlighterLanguage } from "core/utils/jsonParse"
+
+export const getDefaultRequestBodyValue = (requestBody, mediaType, activeExamplesKey, fn) => {
+  const mediaTypeValue = requestBody.getIn(["content", mediaType]) ?? OrderedMap()
+  const schema = mediaTypeValue.get("schema", OrderedMap()).toJS()
+
+  const hasExamplesKey = mediaTypeValue.get("examples") !== undefined
+  const exampleSchema = mediaTypeValue.get("example")
+  const mediaTypeExample = hasExamplesKey
+    ? mediaTypeValue.getIn([
+      "examples",
+      activeExamplesKey,
+      "value"
+    ])
+    : exampleSchema
+
+  const exampleValue = fn.getSampleSchema(
+    schema,
+    mediaType,
+    {
+      includeWriteOnly: true
+    },
+    mediaTypeExample
+  )
+  return stringify(exampleValue)
+}
+
+
+
+const RequestBody = ({
+  userHasEditedBody,
+  requestBody,
+  requestBodyValue,
+  requestBodyInclusionSetting,
+  requestBodyErrors,
+  getComponent,
+  getConfigs,
+  specSelectors,
+  fn,
+  contentType,
+  isExecute,
+  specPath,
+  onChange,
+  onChangeIncludeEmpty,
+  activeExamplesKey,
+  updateActiveExamplesKey,
+  setRetainRequestBodyValueFlag
+}) => {
+  const handleFile = (e) => {
+    onChange(e.target.files[0])
+  }
+  const setIsIncludedOptions = (key) => {
+    let options = {
+      key,
+      shouldDispatchInit: false,
+      defaultValue: true
+    }
+    let currentInclusion = requestBodyInclusionSetting.get(key, "no value")
+    if (currentInclusion === "no value") {
+      options.shouldDispatchInit = true
+      // future: can get/set defaultValue from a config setting
+    }
+    return options
+  }
+
+  const Markdown = getComponent("Markdown", true)
+  const ModelExample = getComponent("modelExample")
+  const RequestBodyEditor = getComponent("RequestBodyEditor")
+  const HighlightCode = getComponent("HighlightCode", true)
+  const ExamplesSelectValueRetainer = getComponent("ExamplesSelectValueRetainer")
+  const Example = getComponent("Example")
+  const ParameterIncludeEmpty = getComponent("ParameterIncludeEmpty")
+
+  const { showCommonExtensions } = getConfigs()
+
+  const requestBodyDescription = requestBody?.get("description") ?? null
+  const requestBodyContent = requestBody?.get("content") ?? new OrderedMap()
+  contentType = contentType || requestBodyContent.keySeq().first() || ""
+
+  const mediaTypeValue = requestBodyContent.get(contentType) ?? OrderedMap()
+  const schemaForMediaType = mediaTypeValue.get("schema", OrderedMap())
+  const rawExamplesOfMediaType = mediaTypeValue.get("examples", null)
+  const sampleForMediaType = rawExamplesOfMediaType?.map((container, key) => {
+    const val = container?.get("value", null)
+    if(val) {
+      container = container.set("value", getDefaultRequestBodyValue(
+        requestBody,
+        contentType,
+        key,
+        fn,
+      ), val)
+    }
+    return container
+  })
+
+  const handleExamplesSelect = (key /*, { isSyntheticChange } */) => {
+    updateActiveExamplesKey(key)
+  }
+  requestBodyErrors = List.isList(requestBodyErrors) ? requestBodyErrors : List()
+
+  const isFileUploadIntended = fn.isFileUploadIntended(
+    mediaTypeValue?.get("schema"),
+    contentType
+  )
+
+  if(
+    isFileUploadIntended
+  ) {
+    const Input = getComponent("Input")
+
+    if(!isExecute) {
+      return <i>
+        Example values are not available for <code>{contentType}</code> media types.
+      </i>
+    }
+
+    return <Input type={"file"} onChange={handleFile} />
+  }
+
+
+  if (!mediaTypeValue.size) {
+    return null
+  }
+
+  const isObjectContent = fn.hasSchemaType(mediaTypeValue.get("schema"), "object")
+
+  if (
+    isObjectContent &&
+    (
+      contentType === "application/x-www-form-urlencoded" ||
+      contentType.indexOf("multipart/") === 0
+    ) &&
+    schemaForMediaType.get("properties", OrderedMap()).size > 0
+  ) {
+    const JsonSchemaForm = getComponent("JsonSchemaForm")
+    const ParameterExt = getComponent("ParameterExt")
+    const bodyProperties = schemaForMediaType.get("properties", OrderedMap())
+    requestBodyValue = Map.isMap(requestBodyValue) ? requestBodyValue : OrderedMap()
+
+    return <div className="table-container">
+      { requestBodyDescription &&
+        <Markdown source={requestBodyDescription} />
+      }
+      <table>
+        <tbody>
+          {
+            Map.isMap(bodyProperties) && bodyProperties.entrySeq().map(([key, schema]) => {
+              if (schema.get("readOnly")) return
+
+              const oneOf = schema.get("oneOf")?.get(0)?.toJS()
+              const anyOf = schema.get("anyOf")?.get(0)?.toJS()
+              schema = fromJS(fn.mergeJsonSchema(schema.toJS(), oneOf ?? anyOf ?? {}))
+
+              let commonExt = showCommonExtensions ? getCommonExtensions(schema) : null
+              const required = schemaForMediaType.get("required", List()).includes(key)
+              const objectType = fn.getSchemaObjectType(schema)
+              const objectTypeLabel = fn.getSchemaObjectTypeLabel(schema)
+              const schemaItemsType = fn.getSchemaObjectType(schema?.get("items"))
+              const format = schema.get("format")
+              const description = schema.get("description")
+              const currentValue = requestBodyValue.getIn([key, "value"])
+              const currentErrors = requestBodyValue.getIn([key, "errors"]) || requestBodyErrors
+              const included = requestBodyInclusionSetting.get(key) || false
+
+              let initialValue = fn.getSampleSchema(schema, false, {
+                includeWriteOnly: true
+              })
+
+              if (initialValue === false) {
+                initialValue = "false"
+              }
+
+              if (initialValue === 0) {
+                initialValue = "0"
+              }
+
+              if (typeof initialValue !== "string" && objectType === "object") {
+               initialValue = stringify(initialValue)
+              }
+
+              if (typeof initialValue === "string" && objectType === "array") {
+                initialValue = JSON.parse(initialValue)
+              }
+
+              const isFileUploadIntended = fn.isFileUploadIntended(schema)
+
+              const jsonSchemaForm = <JsonSchemaForm
+                fn={fn}
+                dispatchInitialValue={!isFileUploadIntended}
+                schema={schema}
+                description={key}
+                getComponent={getComponent}
+                value={currentValue === undefined ? initialValue : currentValue}
+                required={required}
+                errors={currentErrors}
+                onChange={(value) => {
+                  onChange(value, [key])
+                }}
+              />
+
+              return <tr key={key} className="parameters" data-property-name={key}>
+              <td className="parameters-col_name">
+                <div className={required ? "parameter__name required" : "parameter__name"}>
+                  { key }
+                  { !required ? null : <span>&nbsp;*</span> }
+                </div>
+                <div className="parameter__type">
+                  { objectTypeLabel }
+                  { format && <span className="prop-format">(${format})</span>}
+                  {!showCommonExtensions || !commonExt.size ? null : commonExt.entrySeq().map(([key, v]) => <ParameterExt key={`${key}-${v}`} xKey={key} xVal={v} />)}
+                </div>
+                <div className="parameter__deprecated">
+                  { schema.get("deprecated") ? "deprecated": null }
+                </div>
+              </td>
+              <td className="parameters-col_description">
+                <Markdown source={ description }></Markdown>
+                {isExecute ? <div>
+                  {(objectType === "object" || schemaItemsType === "object") ? (
+                    <ModelExample
+                      getComponent={getComponent}
+                      specPath={specPath.push("schema")}
+                      getConfigs={getConfigs}
+                      isExecute={isExecute}
+                      specSelectors={specSelectors}
+                      schema={schema}
+                      example={jsonSchemaForm}
+                    />
+                    ) : jsonSchemaForm
+                  }
+                  {required ? null : (
+                    <ParameterIncludeEmpty
+                      onChange={(value) => onChangeIncludeEmpty(key, value)}
+                      isIncluded={included}
+                      isIncludedOptions={setIsIncludedOptions(key)}
+                      isDisabled={Array.isArray(currentValue) ? currentValue.length !== 0 : !isEmptyValue(currentValue)}
+                    />
+                  )}
+                </div> : null }
+              </td>
+              </tr>
+            })
+          }
+        </tbody>
+      </table>
+    </div>
+  }
+
+  const sampleRequestBody = getDefaultRequestBodyValue(
+    requestBody,
+    contentType,
+    activeExamplesKey,
+    fn,
+  )
+  let language = null
+  let testValueForJson = getKnownSyntaxHighlighterLanguage(sampleRequestBody)
+  if (testValueForJson) {
+    language = "json"
+  }
+  const example = isExecute ? <RequestBodyEditor
+      value={requestBodyValue}
+      errors={requestBodyErrors}
+      defaultValue={sampleRequestBody}
+      onChange={onChange}
+      getComponent={getComponent}
+    /> : <HighlightCode className="body-param__example" language={language}>
+      {stringify(requestBodyValue) || sampleRequestBody}
+    </HighlightCode>
+
+  return <div>
+    { requestBodyDescription &&
+      <Markdown source={requestBodyDescription} />
+    }
+    {
+      sampleForMediaType ? (
+        <ExamplesSelectValueRetainer
+            userHasEditedBody={userHasEditedBody}
+            examples={sampleForMediaType}
+            currentKey={activeExamplesKey}
+            currentUserInputValue={requestBodyValue}
+            onSelect={handleExamplesSelect}
+            updateValue={onChange}
+            defaultToFirstExample={true}
+            getComponent={getComponent}
+            setRetainRequestBodyValueFlag={setRetainRequestBodyValueFlag}
+          />
+      ) : null
+    }
+    <ModelExample
+      getComponent={ getComponent }
+      getConfigs={ getConfigs }
+      specSelectors={ specSelectors }
+      expandDepth={1}
+      isExecute={isExecute}
+      schema={mediaTypeValue.get("schema")}
+      specPath={specPath.push("content", contentType, "schema")}
+      example={example}
+      includeWriteOnly={true}
+    />
+    {
+      sampleForMediaType ? (
+        <Example
+          example={sampleForMediaType.get(activeExamplesKey)}
+          getComponent={getComponent}
+          getConfigs={getConfigs}
+        />
+      ) : null
+    }
+  </div>
+}
+
+RequestBody.propTypes = {
+  userHasEditedBody: PropTypes.bool.isRequired,
+  requestBody: ImPropTypes.orderedMap.isRequired,
+  requestBodyValue: ImPropTypes.orderedMap.isRequired,
+  requestBodyInclusionSetting: ImPropTypes.map.isRequired,
+  requestBodyErrors: ImPropTypes.list.isRequired,
+  getComponent: PropTypes.func.isRequired,
+  getConfigs: PropTypes.func.isRequired,
+  fn: PropTypes.object.isRequired,
+  specSelectors: PropTypes.object.isRequired,
+  contentType: PropTypes.string,
+  isExecute: PropTypes.bool.isRequired,
+  onChange: PropTypes.func.isRequired,
+  onChangeIncludeEmpty: PropTypes.func.isRequired,
+  specPath: PropTypes.array.isRequired,
+  activeExamplesKey: PropTypes.string,
+  updateActiveExamplesKey: PropTypes.func,
+  setRetainRequestBodyValueFlag: PropTypes.func,
+  oas3Actions: PropTypes.object.isRequired
+}
+
+export default RequestBody

package/src/core/plugins/oas3/components/servers-container.jsx

@@ -0,0 +1,33 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+export default class ServersContainer extends React.Component {
+
+  static propTypes = {
+    specSelectors: PropTypes.object.isRequired,
+    oas3Selectors: PropTypes.object.isRequired,
+    oas3Actions: PropTypes.object.isRequired,
+    getComponent: PropTypes.func.isRequired,
+  }
+
+  render () {
+    const {specSelectors, oas3Selectors, oas3Actions, getComponent} = this.props
+
+    const servers = specSelectors.servers()
+
+    const Servers = getComponent("Servers")
+
+    return servers && servers.size ? (
+      <div>
+        <span className="servers-title">Servers</span>
+        <Servers
+          servers={servers}
+          currentServer={oas3Selectors.selectedServer()}
+          setSelectedServer={oas3Actions.setSelectedServer}
+          setServerVariableValue={oas3Actions.setServerVariableValue}
+          getServerVariable={oas3Selectors.serverVariableValue}
+          getEffectiveServerValue={oas3Selectors.serverEffectiveValue}
+        />
+      </div> ) : null
+  }
+}