feat(json-schema-2020-12): handle cycles in rendering

Refs #8513

src/core/plugins/json-schema-2020-12/components/JSONSchema/JSONSchema.jsx

@@ -12,10 +12,13 @@ import {
   useFn,
   useIsEmbedded,
   useIsExpandedDeeply,
+  useIsCircular,
+  useRenderedSchemas,
 } from "../../hooks"
 import {
   JSONSchemaLevelContext,
   JSONSchemaDeepExpansionContext,
+  JSONSchemaCyclesContext,
 } from "../../context"
 
 const JSONSchema = ({ schema, name }) => {
@@ -26,6 +29,8 @@ const JSONSchema = ({ schema, name }) => {
   const [level, nextLevel] = useLevel()
   const isEmbedded = useIsEmbedded()
   const isExpandable = fn.isExpandable(schema)
+  const isCircular = useIsCircular(schema)
+  const renderedSchemas = useRenderedSchemas(schema)
   const Accordion = useComponent("Accordion")
   const KeywordProperties = useComponent("KeywordProperties")
   const KeywordType = useComponent("KeywordType")
@@ -59,14 +64,16 @@ const JSONSchema = ({ schema, name }) => {
   return (
     <JSONSchemaLevelContext.Provider value={nextLevel}>
       <JSONSchemaDeepExpansionContext.Provider value={expandedDeeply}>
+        <JSONSchemaCyclesContext.Provider value={renderedSchemas}>
           <article
             data-json-schema-level={level}
             className={classNames("json-schema-2020-12", {
               "json-schema-2020-12--embedded": isEmbedded,
+              "json-schema-2020-12--circular": isCircular,
             })}
           >
             <div className="json-schema-2020-12-head">
-            {isExpandable ? (
+              {isExpandable && !isCircular ? (
                 <>
                   <Accordion expanded={expanded} onChange={handleExpansion}>
                     <KeywordTitle title={name} schema={schema} />
@@ -79,16 +86,19 @@ const JSONSchema = ({ schema, name }) => {
               ) : (
                 <KeywordTitle title={name} schema={schema} />
               )}
-            <KeywordType schema={schema} />
+              <KeywordType schema={schema} isCircular={isCircular} />
               <KeywordFormat schema={schema} />
             </div>
             {expanded && (
               <div className="json-schema-2020-12-body">
                 <KeywordDescription schema={schema} />
+                {!isCircular && isExpandable && (
                   <KeywordProperties schema={schema} />
+                )}
               </div>
             )}
           </article>
+        </JSONSchemaCyclesContext.Provider>
       </JSONSchemaDeepExpansionContext.Provider>
     </JSONSchemaLevelContext.Provider>
   )

src/core/plugins/json-schema-2020-12/components/keywords/Type/Type.jsx

@@ -2,18 +2,28 @@
  * @prettier
  */
 import React from "react"
+import PropTypes from "prop-types"
 
 import { schema } from "../../../prop-types"
 import { useFn } from "../../../hooks"
 
-const Type = ({ schema }) => {
+const Type = ({ schema, isCircular }) => {
   const fn = useFn()
+  const type = fn.getType(schema)
+  const circularSuffix = isCircular ? " [circular]" : ""
 
-  return <span className="json-schema-2020-12__type">{fn.getType(schema)}</span>
+  return (
+    <span className="json-schema-2020-12__type">{`${type}${circularSuffix}`}</span>
+  )
 }
 
 Type.propTypes = {
   schema: schema.isRequired,
+  isCircular: PropTypes.bool,
+}
+
+Type.defaultProps = {
+  isCircular: false,
 }
 
 export default Type

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

@@ -11,3 +11,5 @@ JSONSchemaLevelContext.displayName = "JSONSchemaLevelContext"
 
 export const JSONSchemaDeepExpansionContext = createContext(false)
 JSONSchemaDeepExpansionContext.displayName = "JSONSchemaDeepExpansionContext"
+
+export const JSONSchemaCyclesContext = createContext(new Set())

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

@@ -7,6 +7,7 @@ import {
   JSONSchemaContext,
   JSONSchemaLevelContext,
   JSONSchemaDeepExpansionContext,
+  JSONSchemaCyclesContext,
 } from "./context"
 
 export const useConfig = () => {
@@ -40,3 +41,16 @@ export const useIsEmbedded = () => {
 export const useIsExpandedDeeply = () => {
   return useContext(JSONSchemaDeepExpansionContext)
 }
+
+export const useRenderedSchemas = (schema = undefined) => {
+  if (typeof schema === "undefined") {
+    return useContext(JSONSchemaCyclesContext)
+  }
+
+  const renderedSchemas = useContext(JSONSchemaCyclesContext)
+  return new Set([...renderedSchemas, schema])
+}
+export const useIsCircular = (schema) => {
+  const renderedSchemas = useRenderedSchemas()
+  return renderedSchemas.has(schema)
+}