fix(oas31): resolve schemas in 'Schemas section' only if expanded (#8616)

Refs #8606

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

@@ -21,11 +21,11 @@ import {
   JSONSchemaCyclesContext,
 } from "../../context"
 
-const JSONSchema = forwardRef(({ schema, name }, ref) => {
+const JSONSchema = forwardRef(({ schema, name, onExpand }, ref) => {
   const fn = useFn()
   const isExpandedDeeply = useIsExpandedDeeply()
   const [expanded, setExpanded] = useState(isExpandedDeeply)
-  const [expandedDeeply, setExpandedDeeply] = useState(false)
+  const [expandedDeeply, setExpandedDeeply] = useState(isExpandedDeeply)
   const [level, nextLevel] = useLevel()
   const isEmbedded = useIsEmbedded()
   const isExpandable = fn.isExpandable(schema)
@@ -68,18 +68,6 @@ const JSONSchema = forwardRef(({ schema, name }, ref) => {
   const KeywordDescription = useComponent("KeywordDescription")
   const ExpandDeepButton = useComponent("ExpandDeepButton")
 
-  /**
-   * Event handlers.
-   */
-  const handleExpansion = useCallback((e, expandedNew) => {
-    setExpanded(expandedNew)
-    !expandedNew && setExpandedDeeply(false)
-  }, [])
-  const handleExpansionDeep = useCallback((e, expandedDeepNew) => {
-    setExpanded(expandedDeepNew)
-    setExpandedDeeply(expandedDeepNew)
-  }, [])
-
   /**
    * Effects handlers.
    */
@@ -91,6 +79,26 @@ const JSONSchema = forwardRef(({ schema, name }, ref) => {
     setExpandedDeeply(expandedDeeply)
   }, [expandedDeeply])
 
+  /**
+   * Event handlers.
+   */
+  const handleExpansion = useCallback(
+    (e, expandedNew) => {
+      setExpanded(expandedNew)
+      !expandedNew && setExpandedDeeply(false)
+      onExpand(e, expandedNew, false)
+    },
+    [onExpand]
+  )
+  const handleExpansionDeep = useCallback(
+    (e, expandedDeepNew) => {
+      setExpanded(expandedDeepNew)
+      setExpandedDeeply(expandedDeepNew)
+      onExpand(e, expandedDeepNew, true)
+    },
+    [onExpand]
+  )
+
   return (
     <JSONSchemaLevelContext.Provider value={nextLevel}>
       <JSONSchemaDeepExpansionContext.Provider value={expandedDeeply}>
@@ -173,10 +181,12 @@ const JSONSchema = forwardRef(({ schema, name }, ref) => {
 JSONSchema.propTypes = {
   name: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   schema: propTypes.schema.isRequired,
+  onExpand: PropTypes.func,
 }
 
 JSONSchema.defaultProps = {
   name: "",
+  onExpand: () => {},
 }
 
 export default JSONSchema

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

@@ -27,33 +27,39 @@ const Models = ({
    * Effects.
    */
   useEffect(() => {
-    if (isOpen && specSelectors.specResolvedSubtree(schemasPath) == null) {
+    const isOpenAndExpanded = isOpen && defaultModelsExpandDepth > 1
+    const isResolved = specSelectors.specResolvedSubtree(schemasPath) != null
+    if (isOpenAndExpanded && !isResolved) {
       specActions.requestResolvedSubtree(schemasPath)
     }
-  }, [isOpen])
+  }, [isOpen, defaultModelsExpandDepth])
 
   /**
    * Event handlers.
    */
 
-  const handleCollapse = useCallback(() => {
+  const handleModelsExpand = useCallback(() => {
     layoutActions.show(schemasPath, !isOpen)
-  }, [isOpen, layoutActions])
+  }, [isOpen])
-
+  const handleModelsRef = useCallback((node) => {
-  const handleModelsRef = useCallback(
-    (node) => {
     if (node !== null) {
       layoutActions.readyToScroll(schemasPath, node)
     }
-    },
+  }, [])
-    [layoutActions]
-  )
-
   const handleJSONSchema202012Ref = (schemaName) => (node) => {
     if (node !== null) {
       layoutActions.readyToScroll([...schemasPath, schemaName], node)
     }
   }
+  const handleJSONSchema202012Expand = (schemaName) => (e, expanded) => {
+    if (expanded) {
+      const schemaPath = [...schemasPath, schemaName]
+      const isResolved = specSelectors.specResolvedSubtree(schemaPath) != null
+      if (!isResolved) {
+        specActions.requestResolvedSubtree([...schemasPath, schemaName])
+      }
+    }
+  }
 
   /**
    * Rendering.
@@ -72,7 +78,7 @@ const Models = ({
         <button
           aria-expanded={isOpen}
           className="models-control"
-          onClick={handleCollapse}
+          onClick={handleModelsExpand}
         >
           <span>Schemas</span>
           <svg width="20" height="20" aria-hidden="true" focusable="false">
@@ -87,6 +93,7 @@ const Models = ({
             ref={handleJSONSchema202012Ref(schemaName)}
             schema={schema}
             name={fn.upperFirst(schemaName)}
+            onExpand={handleJSONSchema202012Expand(schemaName)}
           />
         ))}
       </Collapse>