@upendra19/swagger-ui-custom 1.0.0

package/src/core/plugins/json-schema-5/components/model-extensions.jsx

@@ -0,0 +1,28 @@
+/**
+ * @prettier
+ */
+import React from "react"
+import PropTypes from "prop-types"
+import { immutableToJS } from "core/utils"
+import ImPropTypes from "react-immutable-proptypes"
+
+export const ModelExtensions = ({ extensions, propClass = "" }) => {
+  return extensions
+    .entrySeq()
+    .map(([key, value]) => {
+      const normalizedValue = immutableToJS(value) ?? null
+
+      return (
+        <tr key={key} className={propClass}>
+          <td>{key}</td>
+          <td>{JSON.stringify(normalizedValue)}</td>
+        </tr>
+      )
+    })
+    .toArray()
+}
+
+ModelExtensions.propTypes = {
+  extensions: ImPropTypes.map.isRequired,
+  propClass: PropTypes.string,
+}

package/src/core/plugins/json-schema-5/components/model-wrapper.jsx

@@ -0,0 +1,44 @@
+import React, { Component, } from "react"
+import PropTypes from "prop-types"
+import ImPropTypes from "react-immutable-proptypes"
+
+export default class ModelWrapper extends Component {
+
+  static propTypes = {
+    schema: PropTypes.object.isRequired,
+    name: PropTypes.string,
+    displayName: PropTypes.string,
+    fullPath: PropTypes.array.isRequired,
+    specPath: ImPropTypes.list.isRequired,
+    getComponent: PropTypes.func.isRequired,
+    getConfigs: PropTypes.func.isRequired,
+    specSelectors: PropTypes.object.isRequired,
+    expandDepth: PropTypes.number,
+    layoutActions: PropTypes.object,
+    layoutSelectors: PropTypes.object.isRequired,
+    includeReadOnly: PropTypes.bool,
+    includeWriteOnly: PropTypes.bool,
+  }
+
+  onToggle = (name,isShown) => {
+    // If this prop is present, we'll have deepLinking for it
+    if(this.props.layoutActions) {
+      this.props.layoutActions.show(this.props.fullPath, isShown)
+    }
+  }
+
+  render(){
+    let { getComponent, getConfigs } = this.props
+    const Model = getComponent("Model")
+
+    let expanded
+    if(this.props.layoutSelectors) {
+      // If this is prop is present, we'll have deepLinking for it
+      expanded = this.props.layoutSelectors.isShown(this.props.fullPath)
+    }
+
+    return <div className="model-box">
+      <Model { ...this.props } getConfigs={ getConfigs } expanded={expanded} depth={ 1 } onToggle={ this.onToggle } expandDepth={ this.props.expandDepth || 0 }/>
+    </div>
+  }
+}

package/src/core/plugins/json-schema-5/components/model.jsx

@@ -0,0 +1,136 @@
+import React from "react"
+import ImmutablePureComponent from "react-immutable-pure-component"
+import ImPropTypes from "react-immutable-proptypes"
+import PropTypes from "prop-types"
+import { Map } from "immutable"
+
+import RollingLoadSVG from "core/assets/rolling-load.svg"
+
+const decodeRefName = uri => {
+  const unescaped = uri.replace(/~1/g, "/").replace(/~0/g, "~")
+
+  try {
+    return decodeURIComponent(unescaped)
+  } catch {
+    return unescaped
+  }
+}
+
+export default class Model extends ImmutablePureComponent {
+  static propTypes = {
+    schema: ImPropTypes.map.isRequired,
+    getComponent: PropTypes.func.isRequired,
+    getConfigs: PropTypes.func.isRequired,
+    specSelectors: PropTypes.object.isRequired,
+    name: PropTypes.string,
+    displayName: PropTypes.string,
+    isRef: PropTypes.bool,
+    required: PropTypes.bool,
+    expandDepth: PropTypes.number,
+    depth: PropTypes.number,
+    specPath: ImPropTypes.list.isRequired,
+    includeReadOnly: PropTypes.bool,
+    includeWriteOnly: PropTypes.bool,
+  }
+
+  getModelName =( ref )=> {
+    if ( ref.indexOf("#/definitions/") !== -1 ) {
+      return decodeRefName(ref.replace(/^.*#\/definitions\//, ""))
+    }
+    if ( ref.indexOf("#/components/schemas/") !== -1 ) {
+      return decodeRefName(ref.replace(/^.*#\/components\/schemas\//, ""))
+    }
+  }
+
+  getRefSchema =( model )=> {
+    let { specSelectors } = this.props
+
+    return specSelectors.findDefinition(model)
+  }
+
+  render () {
+    let { getComponent, getConfigs, specSelectors, schema, required, name, isRef, specPath, displayName,
+      includeReadOnly, includeWriteOnly} = this.props
+    const ObjectModel = getComponent("ObjectModel")
+    const ArrayModel = getComponent("ArrayModel")
+    const PrimitiveModel = getComponent("PrimitiveModel")
+    let type = "object"
+    let $$ref = schema && schema.get("$$ref")
+    let $ref = schema && schema.get("$ref")
+
+    // If we weren't passed a `name` but have a resolved ref, grab the name from the ref
+    if (!name && $$ref) {
+      name = this.getModelName($$ref)
+    }
+
+    /*
+     * If we have an unresolved ref, get the schema and name from the ref.
+     * If the ref is external, we can't resolve it, so we just display the ref location.
+     * This is for situations where:
+     *  - the ref was not resolved by Swagger Client because we reached the traversal depth limit
+     *  - we had a circular ref inside the allOf keyword
+     */
+    if ($ref) {
+      const refName = this.getModelName($ref)
+      const refSchema = this.getRefSchema(refName)
+      if (Map.isMap(refSchema)) {
+        schema = refSchema.mergeDeep(schema)
+        if (!$$ref) {
+          schema = schema.set("$$ref", $ref)
+          $$ref = $ref
+        }
+      } else if (Map.isMap(schema) && schema.size === 1) {
+        schema = null
+        name = $ref
+      }
+    }
+
+    if(!schema) {
+      return <span className="model model-title">
+              <span className="model-title__text">{ displayName || name }</span>
+              {!$ref && <RollingLoadSVG height="20px" width="20px" />}
+            </span>
+    }
+
+    const deprecated = specSelectors.isOAS3() && schema.get("deprecated")
+    isRef = isRef !== undefined ? isRef : !!$$ref
+    type = schema && schema.get("type") || type
+
+    switch(type) {
+      case "object":
+        return <ObjectModel
+          className="object" { ...this.props }
+          specPath={specPath}
+          getConfigs={ getConfigs }
+          schema={ schema }
+          name={ name }
+          deprecated={deprecated}
+          isRef={ isRef }
+          includeReadOnly = {includeReadOnly}
+          includeWriteOnly = {includeWriteOnly}/>
+      case "array":
+        return <ArrayModel
+          className="array" { ...this.props }
+          getConfigs={ getConfigs }
+          schema={ schema }
+          name={ name }
+          deprecated={deprecated}
+          required={ required }
+          includeReadOnly = {includeReadOnly}
+          includeWriteOnly = {includeWriteOnly}/>
+      case "string":
+      case "number":
+      case "integer":
+      case "boolean":
+      default:
+        return <PrimitiveModel
+          { ...this.props }
+          getComponent={ getComponent }
+          getConfigs={ getConfigs }
+          schema={ schema }
+          name={ name }
+          deprecated={deprecated}
+          required={ required }/>
+    }
+  }
+}

package/src/core/plugins/json-schema-5/components/models.jsx

@@ -0,0 +1,139 @@
+import React, { Component } from "react"
+import Im, { Map } from "immutable"
+import PropTypes from "prop-types"
+
+/* eslint-disable  react/jsx-no-bind */
+
+export default class Models extends Component {
+  static propTypes = {
+    getComponent: PropTypes.func,
+    specSelectors: PropTypes.object,
+    specActions: PropTypes.object.isRequired,
+    layoutSelectors: PropTypes.object,
+    layoutActions: PropTypes.object,
+    getConfigs: PropTypes.func.isRequired
+  }
+
+  getSchemaBasePath = () => {
+    const isOAS3 = this.props.specSelectors.isOAS3()
+    return isOAS3 ? ["components", "schemas"] : ["definitions"]
+  }
+
+  getCollapsedContent = () => {
+    return " "
+  }
+
+  handleToggle = (name, isExpanded) => {
+    const { layoutActions } = this.props
+    layoutActions.show([...this.getSchemaBasePath(), name], isExpanded)
+    if(isExpanded) {
+      this.props.specActions.requestResolvedSubtree([...this.getSchemaBasePath(), name])
+    }
+  }
+
+  onLoadModels = (ref) => {
+    if (ref) {
+      this.props.layoutActions.readyToScroll(this.getSchemaBasePath(), ref)
+    }
+  }
+
+  onLoadModel = (ref) => {
+    if (ref) {
+      const name = ref.getAttribute("data-name")
+      this.props.layoutActions.readyToScroll([...this.getSchemaBasePath(), name], ref)
+    }
+  }
+
+  render(){
+    let { specSelectors, getComponent, layoutSelectors, layoutActions, getConfigs } = this.props
+    let definitions = specSelectors.definitions()
+    let { docExpansion, defaultModelsExpandDepth } = getConfigs()
+    if (!definitions.size || defaultModelsExpandDepth < 0) return null
+
+    const specPathBase = this.getSchemaBasePath()
+    let showModels = layoutSelectors.isShown(specPathBase, defaultModelsExpandDepth > 0 && docExpansion !== "none")
+    const isOAS3 = specSelectors.isOAS3()
+
+    const ModelWrapper = getComponent("ModelWrapper")
+    const Collapse = getComponent("Collapse")
+    const ModelCollapse = getComponent("ModelCollapse")
+    const JumpToPath = getComponent("JumpToPath", true)
+    const ArrowUpIcon = getComponent("ArrowUpIcon")
+    const ArrowDownIcon = getComponent("ArrowDownIcon")
+
+    return <section className={ showModels ? "models is-open" : "models"} ref={this.onLoadModels}>
+      <h4>
+        <button
+          aria-expanded={showModels}
+          className="models-control"
+          onClick={() => layoutActions.show(specPathBase, !showModels)}
+        >
+          <span>{isOAS3 ? "Schemas" : "Models"}</span>
+          {showModels ? <ArrowUpIcon /> : <ArrowDownIcon />}
+        </button>
+      </h4>
+      <Collapse isOpened={showModels}>
+        {
+          definitions.entrySeq().map(([name])=>{
+
+            const fullPath = [...specPathBase, name]
+            const specPath = Im.List(fullPath)
+
+            const schemaValue = specSelectors.specResolvedSubtree(fullPath)
+            const rawSchemaValue = specSelectors.specJson().getIn(fullPath)
+
+            const schema = Map.isMap(schemaValue) ? schemaValue : Im.Map()
+            const rawSchema = Map.isMap(rawSchemaValue) ? rawSchemaValue : Im.Map()
+
+            const displayName = schema.get("title") || rawSchema.get("title") || name
+            const isShown = layoutSelectors.isShown(fullPath, false)
+
+            if( isShown && (schema.size === 0 && rawSchema.size > 0) ) {
+              // Firing an action in a container render is not great,
+              // but it works for now.
+              this.props.specActions.requestResolvedSubtree(fullPath)
+            }
+
+            const content = <ModelWrapper name={ name }
+              expandDepth={ defaultModelsExpandDepth }
+              schema={ schema || Im.Map() }
+              displayName={displayName}
+              fullPath={fullPath}
+              specPath={specPath}
+              getComponent={ getComponent }
+              specSelectors={ specSelectors }
+              getConfigs = {getConfigs}
+              layoutSelectors = {layoutSelectors}
+              layoutActions = {layoutActions}
+              includeReadOnly = {true}
+              includeWriteOnly = {true}/>
+
+            const title = <span className="model-box">
+              <span className="model model-title">
+                {displayName}
+              </span>
+            </span>
+
+            return <div id={ `model-${name}` } className="model-container" key={ `models-section-${name}` }
+                    data-name={name} ref={this.onLoadModel} >
+              <span className="models-jump-to-path"><JumpToPath path={specPath} /></span>
+              <ModelCollapse
+                classes="model-box"
+                collapsedContent={this.getCollapsedContent(name)}
+                onToggle={this.handleToggle}
+                title={title}
+                displayName={displayName}
+                modelName={name}
+                specPath={specPath}
+                layoutSelectors={layoutSelectors}
+                layoutActions={layoutActions}
+                hideSelfOnExpand={true}
+                expanded={ defaultModelsExpandDepth > 0 && isShown }
+                >{content}</ModelCollapse>
+              </div>
+          }).toArray()
+        }
+      </Collapse>
+    </section>
+  }
+}

package/src/core/plugins/json-schema-5/components/object-model.jsx

@@ -0,0 +1,340 @@
+/**
+ * @prettier
+ */
+import React, { Component } from "react"
+import PropTypes from "prop-types"
+import { List } from "immutable"
+import ImPropTypes from "react-immutable-proptypes"
+import { sanitizeUrl } from "core/utils/url"
+import classNames from "classnames"
+import { getExtensions } from "../../../utils"
+
+const braceOpen = "{"
+const braceClose = "}"
+const propClass = "property"
+
+export default class ObjectModel extends Component {
+  static propTypes = {
+    schema: PropTypes.object.isRequired,
+    getComponent: PropTypes.func.isRequired,
+    getConfigs: PropTypes.func.isRequired,
+    expanded: PropTypes.bool,
+    onToggle: PropTypes.func,
+    specSelectors: PropTypes.object.isRequired,
+    name: PropTypes.string,
+    displayName: PropTypes.string,
+    isRef: PropTypes.bool,
+    expandDepth: PropTypes.number,
+    depth: PropTypes.number,
+    specPath: ImPropTypes.list.isRequired,
+    includeReadOnly: PropTypes.bool,
+    includeWriteOnly: PropTypes.bool,
+  }
+
+  render() {
+    let {
+      schema,
+      name,
+      displayName,
+      isRef,
+      getComponent,
+      getConfigs,
+      depth,
+      onToggle,
+      expanded,
+      specPath,
+      ...otherProps
+    } = this.props
+    let { specSelectors, expandDepth, includeReadOnly, includeWriteOnly } =
+      otherProps
+    const { isOAS3 } = specSelectors
+    const isEmbedded = depth > 2 || (depth === 2 && specPath.last() !== "items")
+
+    if (!schema) {
+      return null
+    }
+
+    const { showExtensions } = getConfigs()
+    const extensions = showExtensions ? getExtensions(schema) : List()
+
+    let description = schema.get("description")
+    let properties = schema.get("properties")
+    let additionalProperties = schema.get("additionalProperties")
+    let title = schema.get("title") || displayName || name
+    let requiredProperties = schema.get("required")
+    let infoProperties = schema.filter(
+      (v, key) =>
+        ["maxProperties", "minProperties", "nullable", "example"].indexOf(
+          key
+        ) !== -1
+    )
+    let deprecated = schema.get("deprecated")
+    let externalDocsUrl = schema.getIn(["externalDocs", "url"])
+    let externalDocsDescription = schema.getIn(["externalDocs", "description"])
+
+    const JumpToPath = getComponent("JumpToPath", true)
+    const Markdown = getComponent("Markdown", true)
+    const Model = getComponent("Model")
+    const ModelCollapse = getComponent("ModelCollapse")
+    const Property = getComponent("Property")
+    const Link = getComponent("Link")
+    const ModelExtensions = getComponent("ModelExtensions")
+
+    const JumpToPathSection = () => {
+      return (
+        <span className="model-jump-to-path">
+          <JumpToPath path={specPath} />
+        </span>
+      )
+    }
+    const collapsedContent = (
+      <span>
+        <span>{braceOpen}</span>...<span>{braceClose}</span>
+        {isRef ? <JumpToPathSection /> : ""}
+      </span>
+    )
+
+    const allOf = specSelectors.isOAS3() ? schema.get("allOf") : null
+    const anyOf = specSelectors.isOAS3() ? schema.get("anyOf") : null
+    const oneOf = specSelectors.isOAS3() ? schema.get("oneOf") : null
+    const not = specSelectors.isOAS3() ? schema.get("not") : null
+
+    const titleEl = title && (
+      <span className="model-title">
+        {isRef && schema.get("$$ref") && (
+          <span
+            className={classNames("model-hint", {
+              "model-hint--embedded": isEmbedded,
+            })}
+          >
+            {schema.get("$$ref")}
+          </span>
+        )}
+        <span className="model-title__text">{title}</span>
+      </span>
+    )
+
+    return (
+      <span className="model">
+        <ModelCollapse
+          modelName={name}
+          title={titleEl}
+          onToggle={onToggle}
+          expanded={expanded ? true : depth <= expandDepth}
+          collapsedContent={collapsedContent}
+        >
+          <span className="brace-open object">{braceOpen}</span>
+          {!isRef ? null : <JumpToPathSection />}
+          <span className="inner-object">
+            {
+              <table className="model">
+                <tbody>
+                  {!description ? null : (
+                    <tr className="description">
+                      <td>description:</td>
+                      <td>
+                        <Markdown source={description} />
+                      </td>
+                    </tr>
+                  )}
+                  {externalDocsUrl && (
+                    <tr className={"external-docs"}>
+                      <td>externalDocs:</td>
+                      <td>
+                        <Link
+                          target="_blank"
+                          href={sanitizeUrl(externalDocsUrl)}
+                        >
+                          {externalDocsDescription || externalDocsUrl}
+                        </Link>
+                      </td>
+                    </tr>
+                  )}
+                  {!deprecated ? null : (
+                    <tr className={"property"}>
+                      <td>deprecated:</td>
+                      <td>true</td>
+                    </tr>
+                  )}
+                  {!(properties && properties.size)
+                    ? null
+                    : properties
+                        .entrySeq()
+                        .filter(([, value]) => {
+                          return (
+                            (!value.get("readOnly") || includeReadOnly) &&
+                            (!value.get("writeOnly") || includeWriteOnly)
+                          )
+                        })
+                        .map(([key, value]) => {
+                          let isDeprecated = isOAS3() && value.get("deprecated")
+                          let isRequired =
+                            List.isList(requiredProperties) &&
+                            requiredProperties.contains(key)
+
+                          let classNames = ["property-row"]
+
+                          if (isDeprecated) {
+                            classNames.push("deprecated")
+                          }
+
+                          if (isRequired) {
+                            classNames.push("required")
+                          }
+
+                          return (
+                            <tr key={key} className={classNames.join(" ")}>
+                              <td>
+                                {key}
+                                {isRequired && <span className="star">*</span>}
+                              </td>
+                              <td>
+                                <Model
+                                  key={`object-${name}-${key}_${value}`}
+                                  {...otherProps}
+                                  required={isRequired}
+                                  getComponent={getComponent}
+                                  specPath={specPath.push("properties", key)}
+                                  getConfigs={getConfigs}
+                                  schema={value}
+                                  depth={depth + 1}
+                                />
+                              </td>
+                            </tr>
+                          )
+                        })
+                        .toArray()}
+                  {extensions.size === 0 ? null : (
+                    <>
+                      <tr>
+                        <td>&nbsp;</td>
+                      </tr>
+                      <ModelExtensions
+                        extensions={extensions}
+                        propClass="extension"
+                      />
+                    </>
+                  )}
+                  {!additionalProperties ||
+                  !additionalProperties.size ? null : (
+                    <tr>
+                      <td>{"< * >:"}</td>
+                      <td>
+                        <Model
+                          {...otherProps}
+                          required={false}
+                          getComponent={getComponent}
+                          specPath={specPath.push("additionalProperties")}
+                          getConfigs={getConfigs}
+                          schema={additionalProperties}
+                          depth={depth + 1}
+                        />
+                      </td>
+                    </tr>
+                  )}
+                  {!allOf ? null : (
+                    <tr>
+                      <td>{"allOf ->"}</td>
+                      <td>
+                        {allOf.map((schema, k) => {
+                          return (
+                            <div key={k}>
+                              <Model
+                                {...otherProps}
+                                required={false}
+                                getComponent={getComponent}
+                                specPath={specPath.push("allOf", k)}
+                                getConfigs={getConfigs}
+                                schema={schema}
+                                depth={depth + 1}
+                              />
+                            </div>
+                          )
+                        })}
+                      </td>
+                    </tr>
+                  )}
+                  {!anyOf ? null : (
+                    <tr>
+                      <td>{"anyOf ->"}</td>
+                      <td>
+                        {anyOf.map((schema, k) => {
+                          return (
+                            <div key={k}>
+                              <Model
+                                {...otherProps}
+                                required={false}
+                                getComponent={getComponent}
+                                specPath={specPath.push("anyOf", k)}
+                                getConfigs={getConfigs}
+                                schema={schema}
+                                depth={depth + 1}
+                              />
+                            </div>
+                          )
+                        })}
+                      </td>
+                    </tr>
+                  )}
+                  {!oneOf ? null : (
+                    <tr>
+                      <td>{"oneOf ->"}</td>
+                      <td>
+                        {oneOf.map((schema, k) => {
+                          return (
+                            <div key={k}>
+                              <Model
+                                {...otherProps}
+                                required={false}
+                                getComponent={getComponent}
+                                specPath={specPath.push("oneOf", k)}
+                                getConfigs={getConfigs}
+                                schema={schema}
+                                depth={depth + 1}
+                              />
+                            </div>
+                          )
+                        })}
+                      </td>
+                    </tr>
+                  )}
+                  {!not ? null : (
+                    <tr>
+                      <td>{"not ->"}</td>
+                      <td>
+                        <div>
+                          <Model
+                            {...otherProps}
+                            required={false}
+                            getComponent={getComponent}
+                            specPath={specPath.push("not")}
+                            getConfigs={getConfigs}
+                            schema={not}
+                            depth={depth + 1}
+                          />
+                        </div>
+                      </td>
+                    </tr>
+                  )}
+                </tbody>
+              </table>
+            }
+          </span>
+          <span className="brace-close">{braceClose}</span>
+        </ModelCollapse>
+        {infoProperties.size
+          ? infoProperties
+              .entrySeq()
+              .map(([key, v]) => (
+                <Property
+                  key={`${key}-${v}`}
+                  propKey={key}
+                  propVal={v}
+                  propClass={propClass}
+                />
+              ))
+          : null}
+      </span>
+    )
+  }
+}