@upendra19/swagger-ui-custom 1.0.0

package/src/core/plugins/oas31/components/contact.jsx

@@ -0,0 +1,43 @@
+/**
+ * @prettier
+ */
+import React from "react"
+import PropTypes from "prop-types"
+
+import { sanitizeUrl } from "core/utils/url"
+
+const Contact = ({ getComponent, specSelectors }) => {
+  const name = specSelectors.selectContactNameField()
+  const url = specSelectors.selectContactUrl()
+  const email = specSelectors.selectContactEmailField()
+
+  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>
+  )
+}
+
+Contact.propTypes = {
+  getComponent: PropTypes.func.isRequired,
+  specSelectors: PropTypes.shape({
+    selectContactNameField: PropTypes.func.isRequired,
+    selectContactUrl: PropTypes.func.isRequired,
+    selectContactEmailField: PropTypes.func.isRequired,
+  }).isRequired,
+}
+
+export default Contact

package/src/core/plugins/oas31/components/info.jsx

@@ -0,0 +1,99 @@
+/**
+ * @prettier
+ */
+import React from "react"
+import PropTypes from "prop-types"
+
+import { sanitizeUrl } from "core/utils/url"
+
+const Info = ({ getComponent, specSelectors }) => {
+  const version = specSelectors.version()
+  const url = specSelectors.url()
+  const basePath = specSelectors.basePath()
+  const host = specSelectors.host()
+  const summary = specSelectors.selectInfoSummaryField()
+  const description = specSelectors.selectInfoDescriptionField()
+  const title = specSelectors.selectInfoTitleField()
+  const termsOfServiceUrl = specSelectors.selectInfoTermsOfServiceUrl()
+  const externalDocsUrl = specSelectors.selectExternalDocsUrl()
+  const externalDocsDesc = specSelectors.selectExternalDocsDescriptionField()
+  const contact = specSelectors.contact()
+  const license = specSelectors.license()
+
+  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", true)
+  const Contact = getComponent("Contact", true)
+  const JsonSchemaDialect = getComponent("JsonSchemaDialect", true)
+
+  return (
+    <div className="info">
+      <hgroup className="main">
+        <h1 className="title">
+          {title}
+          <span>
+            {version && <VersionStamp version={version} />}
+            <OpenAPIVersion oasVersion="3.1" />
+          </span>
+        </h1>
+
+        {(host || basePath) && <InfoBasePath host={host} basePath={basePath} />}
+        {url && <InfoUrl getComponent={getComponent} url={url} />}
+      </hgroup>
+
+      {summary && <p className="info__summary">{summary}</p>}
+
+      <div className="info__description description">
+        <Markdown source={description} />
+      </div>
+
+      {termsOfServiceUrl && (
+        <div className="info__tos">
+          <Link target="_blank" href={sanitizeUrl(termsOfServiceUrl)}>
+            Terms of service
+          </Link>
+        </div>
+      )}
+
+      {contact.size > 0 && <Contact />}
+
+      {license.size > 0 && <License />}
+
+      {externalDocsUrl && (
+        <Link
+          className="info__extdocs"
+          target="_blank"
+          href={sanitizeUrl(externalDocsUrl)}
+        >
+          {externalDocsDesc || externalDocsUrl}
+        </Link>
+      )}
+
+      <JsonSchemaDialect />
+    </div>
+  )
+}
+
+Info.propTypes = {
+  getComponent: PropTypes.func.isRequired,
+  specSelectors: PropTypes.shape({
+    version: PropTypes.func.isRequired,
+    url: PropTypes.func.isRequired,
+    basePath: PropTypes.func.isRequired,
+    host: PropTypes.func.isRequired,
+    selectInfoSummaryField: PropTypes.func.isRequired,
+    selectInfoDescriptionField: PropTypes.func.isRequired,
+    selectInfoTitleField: PropTypes.func.isRequired,
+    selectInfoTermsOfServiceUrl: PropTypes.func.isRequired,
+    selectExternalDocsUrl: PropTypes.func.isRequired,
+    selectExternalDocsDescriptionField: PropTypes.func.isRequired,
+    contact: PropTypes.func.isRequired,
+    license: PropTypes.func.isRequired,
+  }).isRequired,
+}
+
+export default Info

package/src/core/plugins/oas31/components/json-schema-dialect.jsx

@@ -0,0 +1,60 @@
+/**
+ * @prettier
+ */
+
+import React from "react"
+import PropTypes from "prop-types"
+
+import { sanitizeUrl } from "core/utils/url"
+
+const JsonSchemaDialect = ({ getComponent, specSelectors }) => {
+  const jsonSchemaDialect = specSelectors.selectJsonSchemaDialectField()
+  const jsonSchemaDialectDefault = specSelectors.selectJsonSchemaDialectDefault() // prettier-ignore
+
+  const Link = getComponent("Link")
+
+  return (
+    <>
+      {jsonSchemaDialect && jsonSchemaDialect === jsonSchemaDialectDefault && (
+        <p className="info__jsonschemadialect">
+          JSON Schema dialect:{" "}
+          <Link target="_blank" href={sanitizeUrl(jsonSchemaDialect)}>
+            {jsonSchemaDialect}
+          </Link>
+        </p>
+      )}
+
+      {jsonSchemaDialect && jsonSchemaDialect !== jsonSchemaDialectDefault && (
+        <div className="error-wrapper">
+          <div className="no-margin">
+            <div className="errors">
+              <div className="errors-wrapper">
+                <h4 className="center">Warning</h4>
+                <p className="message">
+                  <strong>OpenAPI.jsonSchemaDialect</strong> field contains a
+                  value different from the default value of{" "}
+                  <Link target="_blank" href={jsonSchemaDialectDefault}>
+                    {jsonSchemaDialectDefault}
+                  </Link>
+                  . Values different from the default one are currently not
+                  supported. Please either omit the field or provide it with the
+                  default value.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  )
+}
+
+JsonSchemaDialect.propTypes = {
+  getComponent: PropTypes.func.isRequired,
+  specSelectors: PropTypes.shape({
+    selectJsonSchemaDialectField: PropTypes.func.isRequired,
+    selectJsonSchemaDialectDefault: PropTypes.func.isRequired,
+  }).isRequired,
+}
+
+export default JsonSchemaDialect

package/src/core/plugins/oas31/components/license.jsx

@@ -0,0 +1,38 @@
+/**
+ * @prettier
+ */
+import React from "react"
+import PropTypes from "prop-types"
+
+import { sanitizeUrl } from "core/utils/url"
+
+const License = ({ getComponent, specSelectors }) => {
+  const name = specSelectors.selectLicenseNameField()
+  const url = specSelectors.selectLicenseUrl()
+
+  const Link = getComponent("Link")
+
+  return (
+    <div className="info__license">
+      {url ? (
+        <div className="info__license__url">
+          <Link target="_blank" href={sanitizeUrl(url)}>
+            {name}
+          </Link>
+        </div>
+      ) : (
+        <span>{name}</span>
+      )}
+    </div>
+  )
+}
+
+License.propTypes = {
+  getComponent: PropTypes.func.isRequired,
+  specSelectors: PropTypes.shape({
+    selectLicenseNameField: PropTypes.func.isRequired,
+    selectLicenseUrl: PropTypes.func.isRequired,
+  }).isRequired,
+}
+
+export default License

package/src/core/plugins/oas31/components/model/_model.scss

@@ -0,0 +1,23 @@
+.model-box {
+  // inferred names of Schema Objects
+  &
+    .json-schema-2020-12:not(.json-schema-2020-12--embedded)
+    > .json-schema-2020-12-head
+    .json-schema-2020-12__title:first-of-type {
+    font-size: 16px;
+  }
+
+  & > .json-schema-2020-12 {
+    margin: 0;
+  }
+
+  .json-schema-2020-12 {
+    padding: 0;
+    background-color: transparent;
+  }
+
+  .json-schema-2020-12-accordion,
+  .json-schema-2020-12-expand-deep-button {
+    background-color: transparent;
+  }
+}

package/src/core/plugins/oas31/components/model/model.jsx

@@ -0,0 +1,54 @@
+/**
+ * @prettier
+ */
+import React, { forwardRef, useCallback } from "react"
+import PropTypes from "prop-types"
+import ImPropTypes from "react-immutable-proptypes"
+
+const decodeRefName = (uri) => {
+  const unescaped = uri.replace(/~1/g, "/").replace(/~0/g, "~")
+  try {
+    return decodeURIComponent(unescaped)
+  } catch {
+    return unescaped
+  }
+}
+const getModelName = (uri) => {
+  if (typeof uri === "string" && uri.includes("#/components/schemas/")) {
+    return decodeRefName(uri.replace(/^.*#\/components\/schemas\//, ""))
+  }
+  return null
+}
+
+const Model = forwardRef(
+  ({ schema, getComponent, onToggle = () => {}, specPath }, ref) => {
+    const JSONSchema202012 = getComponent("JSONSchema202012")
+    const name = getModelName(schema.get("$$ref"))
+
+    const handleExpand = useCallback(
+      (e, expanded) => {
+        onToggle(name, expanded)
+      },
+      [name, onToggle]
+    )
+
+    return (
+      <JSONSchema202012
+        name={name}
+        schema={schema.toJS()}
+        ref={ref}
+        onExpand={handleExpand}
+        identifier={specPath.toJS().join("_")}
+      />
+    )
+  }
+)
+
+Model.propTypes = {
+  schema: ImPropTypes.map.isRequired,
+  getComponent: PropTypes.func.isRequired,
+  onToggle: PropTypes.func,
+  specPath: ImPropTypes.list.isRequired,
+}
+
+export default Model

package/src/core/plugins/oas31/components/models/_models.scss

@@ -0,0 +1,11 @@
+.models
+  .json-schema-2020-12:not(.json-schema-2020-12--embedded)
+  > .json-schema-2020-12-head
+  .json-schema-2020-12__title:first-of-type {
+  font-size: 16px;
+}
+
+.models .json-schema-2020-12:not(.json-schema-2020-12--embedded) {
+  width: calc(100% - 40px);
+  overflow-x: auto;
+}

package/src/core/plugins/oas31/components/models/models.jsx

@@ -0,0 +1,141 @@
+/**
+ * @prettier
+ */
+import React, { useCallback, useEffect } from "react"
+import PropTypes from "prop-types"
+import classNames from "classnames"
+
+const Models = ({
+  specActions,
+  specSelectors,
+  layoutSelectors,
+  layoutActions,
+  getComponent,
+  getConfigs,
+  fn,
+}) => {
+  const schemas = specSelectors.selectSchemas()
+  const hasSchemas = Object.keys(schemas).length > 0
+  const schemasPath = ["components", "schemas"]
+  const { docExpansion, defaultModelsExpandDepth } = getConfigs()
+  const isOpenDefault = defaultModelsExpandDepth > 0 && docExpansion !== "none"
+  const isOpen = layoutSelectors.isShown(schemasPath, isOpenDefault)
+  const Collapse = getComponent("Collapse")
+  const JSONSchema202012 = getComponent("JSONSchema202012")
+  const ArrowUpIcon = getComponent("ArrowUpIcon")
+  const ArrowDownIcon = getComponent("ArrowDownIcon")
+  const { getTitle } = fn.jsonSchema202012.useFn()
+
+  /**
+   * Effects.
+   */
+  useEffect(() => {
+    const includesExpandedSchema = Object.entries(schemas).some(
+      ([schemaName]) =>
+        layoutSelectors.isShown([...schemasPath, schemaName], false)
+    )
+    const isOpenAndExpanded =
+      isOpen && (defaultModelsExpandDepth > 1 || includesExpandedSchema)
+    const isResolved = specSelectors.specResolvedSubtree(schemasPath) != null
+    if (isOpenAndExpanded && !isResolved) {
+      specActions.requestResolvedSubtree(schemasPath)
+    }
+  }, [isOpen, defaultModelsExpandDepth])
+
+  /**
+   * Event handlers.
+   */
+
+  const handleModelsExpand = useCallback(() => {
+    layoutActions.show(schemasPath, !isOpen)
+  }, [isOpen])
+  const handleModelsRef = useCallback((node) => {
+    if (node !== null) {
+      layoutActions.readyToScroll(schemasPath, node)
+    }
+  }, [])
+  const handleJSONSchema202012Ref = (schemaName) => (node) => {
+    if (node !== null) {
+      layoutActions.readyToScroll([...schemasPath, schemaName], node)
+    }
+  }
+  const handleJSONSchema202012Expand = (schemaName) => (e, expanded) => {
+    const schemaPath = [...schemasPath, schemaName]
+    if (expanded) {
+      const isResolved = specSelectors.specResolvedSubtree(schemaPath) != null
+      if (!isResolved) {
+        specActions.requestResolvedSubtree([...schemasPath, schemaName])
+      }
+      layoutActions.show(schemaPath, true)
+    } else {
+      layoutActions.show(schemaPath, false)
+    }
+  }
+
+  /**
+   * Rendering.
+   */
+
+  if (!hasSchemas || defaultModelsExpandDepth < 0) {
+    return null
+  }
+
+  return (
+    <section
+      className={classNames("models", { "is-open": isOpen })}
+      ref={handleModelsRef}
+    >
+      <h4>
+        <button
+          aria-expanded={isOpen}
+          className="models-control"
+          onClick={handleModelsExpand}
+        >
+          <span>Schemas</span>
+          {isOpen ? <ArrowUpIcon /> : <ArrowDownIcon />}
+        </button>
+      </h4>
+      <Collapse isOpened={isOpen}>
+        {Object.entries(schemas).map(([schemaName, schema]) => {
+          const name = getTitle(schema, { lookup: "basic" }) || schemaName
+
+          return (
+            <JSONSchema202012
+              key={schemaName}
+              ref={handleJSONSchema202012Ref(schemaName)}
+              schema={schema}
+              name={name}
+              onExpand={handleJSONSchema202012Expand(schemaName)}
+            />
+          )
+        })}
+      </Collapse>
+    </section>
+  )
+}
+
+Models.propTypes = {
+  getComponent: PropTypes.func.isRequired,
+  getConfigs: PropTypes.func.isRequired,
+  specSelectors: PropTypes.shape({
+    selectSchemas: PropTypes.func.isRequired,
+    specResolvedSubtree: PropTypes.func.isRequired,
+  }).isRequired,
+  specActions: PropTypes.shape({
+    requestResolvedSubtree: PropTypes.func.isRequired,
+  }).isRequired,
+  layoutSelectors: PropTypes.shape({
+    isShown: PropTypes.func.isRequired,
+  }).isRequired,
+  layoutActions: PropTypes.shape({
+    show: PropTypes.func.isRequired,
+    readyToScroll: PropTypes.func.isRequired,
+  }).isRequired,
+  fn: PropTypes.shape({
+    jsonSchema202012: PropTypes.func.shape({
+      useFn: PropTypes.func.isRequired,
+    }).isRequired,
+  }).isRequired,
+}
+
+export default Models

package/src/core/plugins/oas31/components/version-pragma-filter.jsx

@@ -0,0 +1,73 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+const VersionPragmaFilter = ({
+  bypass,
+  isSwagger2,
+  isOAS3,
+  isOAS31,
+  alsoShow,
+  children,
+}) => {
+  if (bypass) {
+    return <div>{children}</div>
+  }
+
+  if (isSwagger2 && (isOAS3 || isOAS31)) {
+    return (
+      <div className="version-pragma">
+        {alsoShow}
+        <div className="version-pragma__message version-pragma__message--ambiguous">
+          <div>
+            <h3>Unable to render this definition</h3>
+            <p>
+              <code>swagger</code> and <code>openapi</code> fields cannot be
+              present in the same Swagger or OpenAPI definition. Please remove
+              one of the fields.
+            </p>
+            <p>
+              Supported version fields are <code>swagger: &quot;2.0&quot;</code> and
+              those that match <code>openapi: 3.x.y</code> (for example,{" "}
+              <code>openapi: 3.1.0</code>).
+            </p>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  if (!isSwagger2 && !isOAS3 && !isOAS31) {
+    return (
+      <div className="version-pragma">
+        {alsoShow}
+        <div className="version-pragma__message version-pragma__message--missing">
+          <div>
+            <h3>Unable to render this definition</h3>
+            <p>
+              The provided definition does not specify a valid version field.
+            </p>
+            <p>
+              Please indicate a valid Swagger or OpenAPI version field.
+              Supported version fields are <code>swagger: &quot;2.0&quot;</code> and
+              those that match <code>openapi: 3.x.y</code> (for example,{" "}
+              <code>openapi: 3.1.0</code>).
+            </p>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return <div>{children}</div>
+}
+
+VersionPragmaFilter.propTypes = {
+  isSwagger2: PropTypes.bool.isRequired,
+  isOAS3: PropTypes.bool.isRequired,
+  isOAS31: PropTypes.bool.isRequired,
+  bypass: PropTypes.bool,
+  alsoShow: PropTypes.element,
+  children: PropTypes.any,
+}
+
+export default VersionPragmaFilter

package/src/core/plugins/oas31/components/webhooks.jsx

@@ -0,0 +1,49 @@
+/**
+ * @prettier
+ */
+import React from "react"
+import PropTypes from "prop-types"
+import { List } from "immutable"
+
+const Webhooks = ({ specSelectors, getComponent }) => {
+  const operationDTOs = specSelectors.selectWebhooksOperations()
+  if (!operationDTOs) {
+    return null
+  }
+  const pathItemNames = Object.keys(operationDTOs)
+
+  const OperationContainer = getComponent("OperationContainer", true)
+
+  if (pathItemNames.length === 0) return null
+
+  return (
+    <div className="webhooks">
+      <h2>Webhooks</h2>
+
+      {pathItemNames.map((pathItemName) => (
+        <div key={`${pathItemName}-webhook`}>
+          {operationDTOs[pathItemName].map((operationDTO) => (
+            <OperationContainer
+              key={`${pathItemName}-${operationDTO.method}-webhook`}
+              op={operationDTO.operation}
+              tag="webhooks"
+              method={operationDTO.method}
+              path={pathItemName}
+              specPath={List(operationDTO.specPath)}
+              allowTryItOut={false}
+            />
+          ))}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+Webhooks.propTypes = {
+  specSelectors: PropTypes.shape({
+    selectWebhooksOperations: PropTypes.func.isRequired,
+  }).isRequired,
+  getComponent: PropTypes.func.isRequired,
+}
+
+export default Webhooks