feat(oas31): add support for Schema Object xml keyword (#8657)

Refs #8513

src/core/plugins/json-schema-2020-12/index.js

@@ -44,7 +44,8 @@ import Accordion from "./components/Accordion/Accordion"
 import ExpandDeepButton from "./components/ExpandDeepButton/ExpandDeepButton"
 import ChevronRightIcon from "./components/icons/ChevronRight"
 import { upperFirst, hasKeyword, isExpandable } from "./fn"
-import { useFn } from "./hooks"
+import { JSONSchemaDeepExpansionContext } from "./context"
+import { useFn, useComponent, useIsExpandedDeeply } from "./hooks"
 import { withJSONSchemaContext } from "./hoc"
 
 const JSONSchema202012Plugin = () => ({
@@ -92,6 +93,7 @@ const JSONSchema202012Plugin = () => ({
     JSONSchema202012ExpandDeepButton: ExpandDeepButton,
     JSONSchema202012ChevronRightIcon: ChevronRightIcon,
     withJSONSchema202012Context: withJSONSchemaContext,
+    JSONSchema202012DeepExpansionContext: () => JSONSchemaDeepExpansionContext,
   },
   fn: {
     upperFirst,
@@ -99,6 +101,8 @@ const JSONSchema202012Plugin = () => ({
       isExpandable,
       hasKeyword,
       useFn,
+      useComponent,
+      useIsExpandedDeeply,
     },
   },
 })

src/core/plugins/oas31/index.js

@@ -51,6 +51,7 @@ import {
 } from "./spec-extensions/wrap-selectors"
 import { selectLicenseUrl as selectOAS31LicenseUrl } from "./selectors"
 import JSONSchema202012KeywordExample from "./json-schema-2020-12-extensions/components/keywords/Example"
+import JSONSchema202012KeywordXml from "./json-schema-2020-12-extensions/components/keywords/Xml"
 import JSONSchema202012KeywordDescriptionWrapper from "./json-schema-2020-12-extensions/wrap-components/keywords/Description"
 import JSONSchema202012KeywordDefaultWrapper from "./json-schema-2020-12-extensions/wrap-components/keywords/Default"
 import { makeIsExpandable } from "./json-schema-2020-12-extensions/fn"
@@ -84,6 +85,7 @@ const OAS31Plugin = ({ getSystem }) => {
       OAS31VersionPragmaFilter: VersionPragmaFilter,
       OAS31Models: Models,
       JSONSchema202012KeywordExample,
+      JSONSchema202012KeywordXml,
     },
     wrapComponents: {
       InfoContainer: InfoWrapper,

src/core/plugins/oas31/json-schema-2020-12-extensions/components/keywords/Example.jsx

@@ -4,7 +4,8 @@
 import React from "react"
 import PropTypes from "prop-types"
 
-const Example = ({ schema, fn }) => {
+const Example = ({ schema, getSystem }) => {
+  const { fn } = getSystem()
   const { hasKeyword, stringify } = fn.jsonSchema202012.useFn()
 
   if (!hasKeyword(schema, "example")) return null
@@ -23,11 +24,7 @@ const Example = ({ schema, fn }) => {
 
 Example.propTypes = {
   schema: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
-  fn: PropTypes.shape({
+  getSystem: PropTypes.func.isRequired,
-    jsonSchema202012: PropTypes.shape({
-      useFn: PropTypes.func.isRequired,
-    }).isRequired,
-  }).isRequired,
 }
 
 export default Example

src/core/plugins/oas31/json-schema-2020-12-extensions/components/keywords/Xml.jsx

@@ -0,0 +1,115 @@
+/**
+ * @prettier
+ */
+import React, { useCallback, useState } from "react"
+import PropTypes from "prop-types"
+import classNames from "classnames"
+
+const Xml = ({ schema, getSystem }) => {
+  const xml = schema?.xml || {}
+  const { fn, getComponent } = getSystem()
+  const { useIsExpandedDeeply, useComponent } = fn.jsonSchema202012
+  const isExpandedDeeply = useIsExpandedDeeply()
+  const [expanded, setExpanded] = useState(isExpandedDeeply)
+  const [expandedDeeply, setExpandedDeeply] = useState(false)
+  const Accordion = useComponent("Accordion")
+  const ExpandDeepButton = useComponent("ExpandDeepButton")
+  const JSONSchemaDeepExpansionContext = getComponent(
+    "JSONSchema202012DeepExpansionContext"
+  )()
+
+  /**
+   * Event handlers.
+   */
+  const handleExpansion = useCallback(() => {
+    setExpanded((prev) => !prev)
+  }, [])
+  const handleExpansionDeep = useCallback((e, expandedDeepNew) => {
+    setExpanded(expandedDeepNew)
+    setExpandedDeeply(expandedDeepNew)
+  }, [])
+
+  /**
+   * Rendering.
+   */
+  if (Object.keys(xml).length === 0) {
+    return null
+  }
+
+  return (
+    <JSONSchemaDeepExpansionContext.Provider value={expandedDeeply}>
+      <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--xml">
+        <Accordion expanded={expanded} onChange={handleExpansion}>
+          <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--secondary">
+            XML
+          </span>
+        </Accordion>
+        <ExpandDeepButton expanded={expanded} onClick={handleExpansionDeep} />
+        {xml.attribute === true && (
+          <span className="json-schema-2020-12__attribute json-schema-2020-12__attribute--muted">
+            attribute
+          </span>
+        )}
+        {xml.wrapped === true && (
+          <span className="json-schema-2020-12__attribute json-schema-2020-12__attribute--muted">
+            wrapped
+          </span>
+        )}
+        <strong className="json-schema-2020-12__attribute json-schema-2020-12__attribute--primary">
+          object
+        </strong>
+        <ul
+          className={classNames("json-schema-2020-12-keyword__children", {
+            "json-schema-2020-12-keyword__children--collapsed": !expanded,
+          })}
+        >
+          {expanded && (
+            <>
+              <li className="json-schema-2020-12-property">
+                {xml.name && (
+                  <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword">
+                    <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--secondary">
+                      name
+                    </span>
+                    <span className="json-schema-2020-12-keyword__value json-schema-2020-12-keyword__value--secondary">
+                      {xml.name}
+                    </span>
+                  </div>
+                )}
+
+                {xml.namespace && (
+                  <div className="json-schema-2020-12-keyword">
+                    <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--secondary">
+                      namespace
+                    </span>
+                    <span className="json-schema-2020-12-keyword__value json-schema-2020-12-keyword__value--secondary">
+                      {xml.namespace}
+                    </span>
+                  </div>
+                )}
+
+                {xml.prefix && (
+                  <div className="json-schema-2020-12-keyword">
+                    <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--secondary">
+                      prefix
+                    </span>
+                    <span className="json-schema-2020-12-keyword__value json-schema-2020-12-keyword__value--secondary">
+                      {xml.prefix}
+                    </span>
+                  </div>
+                )}
+              </li>
+            </>
+          )}
+        </ul>
+      </div>
+    </JSONSchemaDeepExpansionContext.Provider>
+  )
+}
+
+Xml.propTypes = {
+  schema: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
+  getSystem: PropTypes.func.isRequired,
+}
+
+export default Xml

src/core/plugins/oas31/json-schema-2020-12-extensions/fn.js

@@ -8,5 +8,6 @@ export const makeIsExpandable = (original, { fn }) => {
 
   const { hasKeyword } = fn.jsonSchema202012
 
-  return (schema) => original(schema) || hasKeyword(schema, "example")
+  return (schema) =>
+    original(schema) || hasKeyword(schema, "example") || schema?.xml
 }

src/core/plugins/oas31/json-schema-2020-12-extensions/wrap-components/keywords/Default.jsx

@@ -6,13 +6,15 @@ import { createOnlyOAS31ComponentWrapper } from "../../../fn"
 
 const DefaultWrapper = createOnlyOAS31ComponentWrapper(
   ({ schema, getSystem, originalComponent: KeywordDefault }) => {
-    const { getComponent, fn } = getSystem()
+    const { getComponent } = getSystem()
     const KeywordExample = getComponent("JSONSchema202012KeywordExample")
+    const KeywordXml = getComponent("JSONSchema202012KeywordXml")
 
     return (
       <>
         <KeywordDefault schema={schema} />
-        <KeywordExample schema={schema} fn={fn} />
+        <KeywordExample schema={schema} getSystem={getSystem} />
+        <KeywordXml schema={schema} getSystem={getSystem} />
       </>
     )
   }