refactor(oas31): concentrate OpenAPI 3.1.0 code to separate plugin (#8475)

Refs #8474

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

@@ -0,0 +1,155 @@
+/**
+ * @prettier
+ */
+import React from "react"
+import PropTypes from "prop-types"
+import ImPropTypes from "react-immutable-proptypes"
+import { sanitizeUrl } from "core/utils"
+import { safeBuildUrl } from "core/utils/url"
+
+export class InfoBasePath extends React.Component {
+  static propTypes = {
+    host: PropTypes.string,
+    basePath: PropTypes.string,
+  }
+
+  render() {
+    const { host, basePath } = this.props
+
+    return (
+      <pre className="base-url">
+        [ Base URL: {host}
+        {basePath} ]
+      </pre>
+    )
+  }
+}
+
+export class InfoUrl extends React.PureComponent {
+  static propTypes = {
+    url: PropTypes.string.isRequired,
+    getComponent: PropTypes.func.isRequired,
+  }
+
+  render() {
+    const { url, getComponent } = this.props
+    const Link = getComponent("Link")
+
+    return (
+      <Link target="_blank" href={sanitizeUrl(url)}>
+        <span className="url"> {url}</span>
+      </Link>
+    )
+  }
+}
+
+class Info extends React.Component {
+  static propTypes = {
+    title: PropTypes.any,
+    description: PropTypes.any,
+    version: PropTypes.any,
+    info: PropTypes.object,
+    url: PropTypes.string,
+    host: PropTypes.string,
+    basePath: PropTypes.string,
+    externalDocs: ImPropTypes.map,
+    getComponent: PropTypes.func.isRequired,
+    oas3selectors: PropTypes.func,
+    selectedServer: PropTypes.string,
+  }
+
+  render() {
+    const {
+      info,
+      url,
+      host,
+      basePath,
+      getComponent,
+      externalDocs,
+      selectedServer,
+      url: specUrl,
+    } = this.props
+    const version = info.get("version")
+    const summary = info.get("summary")
+    const description = info.get("description")
+    const title = info.get("title")
+    const termsOfServiceUrl = safeBuildUrl(
+      info.get("termsOfService"),
+      specUrl,
+      { selectedServer }
+    )
+    const contactData = info.get("contact")
+    const licenseData = info.get("license")
+    const rawExternalDocsUrl = externalDocs && externalDocs.get("url")
+    const externalDocsUrl = safeBuildUrl(rawExternalDocsUrl, specUrl, {
+      selectedServer,
+    })
+    const externalDocsDescription =
+      externalDocs && externalDocs.get("description")
+
+    const Markdown = getComponent("Markdown", true)
+    const Link = getComponent("Link")
+    const VersionStamp = getComponent("VersionStamp")
+    const InfoUrl = getComponent("InfoUrl")
+    const InfoBasePath = getComponent("InfoBasePath")
+    const License = getComponent("License")
+    const Contact = getComponent("Contact")
+
+    return (
+      <div className="info">
+        <hgroup className="main">
+          <h2 className="title">
+            {title}
+            {version && <VersionStamp version={version}></VersionStamp>}
+          </h2>
+          {host || basePath ? (
+            <InfoBasePath host={host} basePath={basePath} />
+          ) : null}
+          {url && <InfoUrl getComponent={getComponent} url={url} />}
+        </hgroup>
+        {summary && (
+          <div className="info__summary">
+            <Markdown source={summary} />
+          </div>
+        )}
+        <div className="description">
+          <Markdown source={description} />
+        </div>
+        {termsOfServiceUrl && (
+          <div className="info__tos">
+            <Link target="_blank" href={sanitizeUrl(termsOfServiceUrl)}>
+              Terms of service
+            </Link>
+          </div>
+        )}
+        {contactData?.size > 0 && (
+          <Contact
+            getComponent={getComponent}
+            data={contactData}
+            selectedServer={selectedServer}
+            url={url}
+          />
+        )}
+        {licenseData?.size > 0 && (
+          <License
+            getComponent={getComponent}
+            license={licenseData}
+            selectedServer={selectedServer}
+            url={url}
+          />
+        )}
+        {externalDocsUrl ? (
+          <Link
+            className="info__extdocs"
+            target="_blank"
+            href={sanitizeUrl(externalDocsUrl)}
+          >
+            {externalDocsDescription || externalDocsUrl}
+          </Link>
+        ) : null}
+      </div>
+    )
+  }
+}
+
+export default Info

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

@@ -0,0 +1,52 @@
+/**
+ * @prettier
+ */
+import React from "react"
+import PropTypes from "prop-types"
+import { safeBuildUrl } from "core/utils/url"
+import { sanitizeUrl } from "core/utils"
+
+class License extends React.Component {
+  static propTypes = {
+    license: PropTypes.object,
+    getComponent: PropTypes.func.isRequired,
+    selectedServer: PropTypes.string,
+    url: PropTypes.string.isRequired,
+  }
+
+  render() {
+    const { license, getComponent, selectedServer, url: specUrl } = this.props
+    const name = license.get("name", "License")
+    const url = sanitizeUrl(
+      safeBuildUrl(license.get("url"), specUrl, { selectedServer })
+    )
+    const identifier = license.get("identifier", "")
+    const spdxURL = sanitizeUrl(`https://spdx.org/licenses/${identifier}.html`)
+
+    const Link = getComponent("Link")
+
+    return (
+      <div className="info__license">
+        {identifier && (
+          <div className="info__license__url">
+            <Link target="_blank" href={spdxURL}>
+              {name}
+            </Link>
+          </div>
+        )}
+
+        {url && !identifier && (
+          <div className="info__license__url">
+            <Link target="_blank" href={url}>
+              {name}
+            </Link>
+          </div>
+        )}
+
+        {!url && !identifier && <span>{name}</span>}
+      </div>
+    )
+  }
+}
+
+export default License

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

@@ -0,0 +1,59 @@
+import React from "react"
+import PropTypes from "prop-types"
+import { fromJS } from "immutable"
+import ImPropTypes from "react-immutable-proptypes"
+
+// Todo: nice to have: similar to operation-tags, could have an expand/collapse button
+// to show/hide all webhook items
+const Webhooks = (props) => {
+  const { specSelectors, getComponent, specPath } = props
+
+  const webhooksPathItems = specSelectors.webhooks()
+  if (!webhooksPathItems || webhooksPathItems?.size < 1) {
+    return null
+  }
+  const OperationContainer = getComponent("OperationContainer", true)
+
+  const pathItemsElements = webhooksPathItems.entrySeq().map(([pathItemName, pathItem], i) => {
+    const operationsElements = pathItem.entrySeq().map(([operationMethod, operation], j) => {
+      const op = fromJS({
+        operation
+      })
+      // using defaultProps for `specPath`; may want to remove from props
+      // and/or if extract to separate PathItem component, allow for use
+      // with both OAS3.1 "webhooks" and "components.pathItems" features
+      return <OperationContainer
+        {...props}
+        op={op}
+        key={`${pathItemName}--${operationMethod}--${j}`}
+        tag={""}
+        method={operationMethod}
+        path={pathItemName}
+        specPath={specPath.push("webhooks", pathItemName, operationMethod)}
+        allowTryItOut={false}
+      />
+    })
+    return <div key={`${pathItemName}-${i}`}>
+      {operationsElements}
+    </div>
+  })
+
+  return (
+    <div className="webhooks">
+      <h2>Webhooks</h2>
+      {pathItemsElements}
+    </div>
+  )
+}
+
+Webhooks.propTypes = {
+  specSelectors: PropTypes.object.isRequired,
+  getComponent: PropTypes.func.isRequired,
+  specPath: ImPropTypes.list,
+}
+
+Webhooks.defaultProps = {
+  specPath: fromJS([])
+}
+
+export default Webhooks