feat(oas31): add support for rendering OpenAPI.jsonSchemaDialect field (#8496)

Refs #8491

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

@@ -27,6 +27,7 @@ const Info = ({ getComponent, specSelectors }) => {
   const InfoBasePath = getComponent("InfoBasePath")
   const License = getComponent("License", true)
   const Contact = getComponent("Contact", true)
+  const JsonSchemaDialect = getComponent("JsonSchemaDialect", true)
 
   return (
     <div className="info">
@@ -67,6 +68,8 @@ const Info = ({ getComponent, specSelectors }) => {
           {externalDocsDesc || externalDocsUrl}
         </Link>
       )}
+
+      <JsonSchemaDialect />
     </div>
   )
 }

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"
+
+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

src/core/plugins/oas31/index.js

@@ -5,6 +5,7 @@ import Webhooks from "./components/webhooks"
 import License from "./components/license"
 import Contact from "./components/contact"
 import Info from "./components/info"
+import JsonSchemaDialect from "./components/json-schema-dialect"
 import VersionPragmaFilter from "./components/version-pragma-filter"
 import LicenseWrapper from "./wrap-components/license"
 import ContactWrapper from "./wrap-components/contact"
@@ -32,6 +33,8 @@ import {
   selectExternalDocsUrlField,
   selectExternalDocsUrl,
   selectWebhooksOperations,
+  selectJsonSchemaDialectField,
+  selectJsonSchemaDialectDefault,
 } from "./spec-extensions/selectors"
 import {
   isOAS3 as isOAS3SelectorWrapper,
@@ -57,6 +60,7 @@ const OAS31Plugin = ({ fn }) => {
     },
     components: {
       Webhooks,
+      JsonSchemaDialect,
       OAS31Info: Info,
       OAS31License: License,
       OAS31Contact: Contact,
@@ -97,6 +101,9 @@ const OAS31Plugin = ({ fn }) => {
 
           webhooks: createOnlyOAS31Selector(selectWebhooks),
           selectWebhooksOperations: createOnlyOAS31Selector(createSystemSelector(selectWebhooksOperations)), // prettier-ignore
+
+          selectJsonSchemaDialectField,
+          selectJsonSchemaDialectDefault,
         },
         wrapSelectors: {
           isOAS3: isOAS3SelectorWrapper,

src/core/plugins/oas31/spec-extensions/selectors.js

@@ -154,3 +154,10 @@ export const selectExternalDocsUrl = createSelector(
     return undefined
   }
 )
+
+export const selectJsonSchemaDialectField = () => (system) => {
+  return system.specSelectors.specJson().get("jsonSchemaDialect")
+}
+
+export const selectJsonSchemaDialectDefault = () =>
+  "https://spec.openapis.org/oas/3.1/dialect/base"