feat(json-schema-2020-12): add support for deep expandable behavior

Refs #8513

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

@@ -18,7 +18,11 @@ const Accordion = ({ expanded, children, onChange }) => {
   )
 
   return (
-    <button className="json-schema-2020-12-accordion" onClick={handleExpansion}>
+    <button
+      type="button"
+      className="json-schema-2020-12-accordion"
+      onClick={handleExpansion}
+    >
       <div className="json-schema-2020-12-accordion__children">{children}</div>
       <span
         className={classNames("json-schema-2020-12-accordion__icon", {

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

@@ -0,0 +1,31 @@
+/**
+ * @prettier
+ */
+import React, { useCallback } from "react"
+import PropTypes from "prop-types"
+
+const ExpandDeepButton = ({ expanded, onClick }) => {
+  const handleExpansion = useCallback(
+    (event) => {
+      onClick(event, !expanded)
+    },
+    [expanded, onClick]
+  )
+
+  return (
+    <button
+      type="button"
+      className="json-schema-2020-12-expand-deep-button"
+      onClick={handleExpansion}
+    >
+      {expanded ? "Collapse all" : "Expand all"}
+    </button>
+  )
+}
+
+ExpandDeepButton.propTypes = {
+  expanded: PropTypes.bool.isRequired,
+  onClick: PropTypes.func.isRequired,
+}
+
+export default ExpandDeepButton

src/core/plugins/json-schema-2020-12/components/ExpandDeepButton/_expand-deep-button.scss

@@ -0,0 +1,6 @@
+.json-schema-2020-12-expand-deep-button {
+  @include text_headline($section-models-model-title-font-color);
+  font-size: 12px;
+  color: #6b6b6b;
+  border: none;
+}

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

@@ -1,53 +1,91 @@
 /**
  * @prettier
  */
-import React, { useState, useCallback } from "react"
+import React, { useState, useCallback, useEffect } from "react"
 import PropTypes from "prop-types"
 import classNames from "classnames"
 
 import * as propTypes from "../../prop-types"
-import { useComponent, useFn, useLevel, useIsEmbedded } from "../../hooks"
-import { JSONSchemaLevelContext } from "../../context"
+import {
+  useComponent,
+  useFn,
+  useLevel,
+  useIsEmbedded,
+  useIsExpandedDeeply,
+} from "../../hooks"
+import {
+  JSONSchemaLevelContext,
+  JSONSchemaDeepExpansionContext,
+} from "../../context"
 
 const JSONSchema = ({ schema, name }) => {
-  const [expanded, setExpanded] = useState(false)
-
+  const isExpandedDeeply = useIsExpandedDeeply()
+  const [expanded, setExpanded] = useState(isExpandedDeeply)
+  const [expandedDeeply, setExpandedDeeply] = useState(false)
   const fn = useFn()
   const [level, nextLevel] = useLevel()
   const isEmbedded = useIsEmbedded()
   const BooleanJSONSchema = useComponent("BooleanJSONSchema")
   const Accordion = useComponent("Accordion")
   const KeywordProperties = useComponent("KeywordProperties")
+  const ExpandDeepButton = useComponent("ExpandDeepButton")
 
+  /**
+   * Event handlers.
+   */
   const handleExpansion = useCallback(() => {
     setExpanded((prev) => !prev)
   }, [])
+  const handleExpansionDeep = useCallback(() => {
+    setExpanded((prev) => !prev)
+    setExpandedDeeply((prev) => !prev)
+  }, [])
+
+  /**
+   * Effects handlers.
+   */
+  useEffect(() => {
+    setExpandedDeeply(isExpandedDeeply)
+  }, [isExpandedDeeply])
 
+  useEffect(() => {
+    setExpandedDeeply(expandedDeeply)
+  }, [expandedDeeply])
+
+  /**
+   * Rendering handlers.
+   */
   if (fn.isBooleanJSONSchema(schema)) {
     return <BooleanJSONSchema schema={schema} name={name} />
   }
 
   return (
     <JSONSchemaLevelContext.Provider value={nextLevel}>
-      <article
-        data-json-schema-level={level}
-        className={classNames("json-schema-2020-12", {
-          "json-schema-2020-12--embedded": isEmbedded,
-        })}
-      >
-        <div className="json-schema-2020-12-head">
-          <Accordion expanded={expanded} onChange={handleExpansion}>
-            <div className="json-schema-2020-12__title">
-              {name || fn.getTitle(schema)}
-            </div>
-          </Accordion>
-        </div>
-        {expanded && (
-          <div className="json-schema-2020-12-body">
-            <KeywordProperties schema={schema} />
+      <JSONSchemaDeepExpansionContext.Provider value={expandedDeeply}>
+        <article
+          data-json-schema-level={level}
+          className={classNames("json-schema-2020-12", {
+            "json-schema-2020-12--embedded": isEmbedded,
+          })}
+        >
+          <div className="json-schema-2020-12-head">
+            <Accordion expanded={expanded} onChange={handleExpansion}>
+              <div className="json-schema-2020-12__title">
+                {name || fn.getTitle(schema)}
+              </div>
+            </Accordion>
+            <ExpandDeepButton
+              expanded={expanded}
+              onClick={handleExpansionDeep}
+            />
           </div>
-        )}
-      </article>
+          {expanded && (
+            <div className="json-schema-2020-12-body">
+              <KeywordProperties schema={schema} />
+            </div>
+          )}
+        </article>
+      </JSONSchemaDeepExpansionContext.Provider>
     </JSONSchemaLevelContext.Provider>
   )
 }

src/core/plugins/json-schema-2020-12/components/_all.scss

@@ -1,3 +1,4 @@
 @import './BooleanJSONSchema/boolean-json-schema';
 @import './JSONSchema/json-schema';
 @import './Accordion/accordion';
+@import './ExpandDeepButton/expand-deep-button';

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

@@ -8,3 +8,6 @@ JSONSchemaContext.displayName = "JSONSchemaContext"
 
 export const JSONSchemaLevelContext = createContext(0)
 JSONSchemaLevelContext.displayName = "JSONSchemaLevelContext"
+
+export const JSONSchemaDeepExpansionContext = createContext(false)
+JSONSchemaDeepExpansionContext.displayName = "JSONSchemaDeepExpansionContext"

src/core/plugins/json-schema-2020-12/hoc.jsx

@@ -7,6 +7,7 @@ import JSONSchema from "./components/JSONSchema/JSONSchema"
 import BooleanJSONSchema from "./components/BooleanJSONSchema/BooleanJSONSchema"
 import KeywordProperties from "./components/keywords/Properties"
 import Accordion from "./components/Accordion/Accordion"
+import ExpandDeepButton from "./components/ExpandDeepButton/ExpandDeepButton"
 import ChevronRightIcon from "./components/icons/ChevronRight"
 import { JSONSchemaContext } from "./context"
 import { getTitle, isBooleanJSONSchema, upperFirst } from "./fn"
@@ -18,6 +19,7 @@ export const withJSONSchemaContext = (Component, overrides = {}) => {
       BooleanJSONSchema,
       KeywordProperties,
       Accordion,
+      ExpandDeepButton,
       ChevronRightIcon,
       ...overrides.components,
     },

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

@@ -3,7 +3,11 @@
  */
 import { useContext } from "react"
 
-import { JSONSchemaContext, JSONSchemaLevelContext } from "./context"
+import {
+  JSONSchemaContext,
+  JSONSchemaLevelContext,
+  JSONSchemaDeepExpansionContext,
+} from "./context"
 
 export const useConfig = () => {
   const { config } = useContext(JSONSchemaContext)
@@ -32,3 +36,7 @@ export const useIsEmbedded = () => {
 
   return level > 0
 }
+
+export const useIsExpandedDeeply = () => {
+  return useContext(JSONSchemaDeepExpansionContext)
+}

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

@@ -5,6 +5,7 @@ import JSONSchema from "./components/JSONSchema/JSONSchema"
 import BooleanJSONSchema from "./components/BooleanJSONSchema/BooleanJSONSchema"
 import JSONSchemaKeywordProperties from "./components/keywords/Properties"
 import Accordion from "./components/Accordion/Accordion"
+import ExpandDeepButton from "./components/ExpandDeepButton/ExpandDeepButton"
 import ChevronRightIcon from "./components/icons/ChevronRight"
 import { upperFirst } from "./fn"
 import { withJSONSchemaContext } from "./hoc"
@@ -15,6 +16,7 @@ const JSONSchema202012Plugin = () => ({
     BooleanJSONSchema202012: BooleanJSONSchema,
     JSONSchema202012KeywordProperties: JSONSchemaKeywordProperties,
     JSONSchema202012Accordion: Accordion,
+    JSONSchema202012ExpandDeepButton: ExpandDeepButton,
     JSONSchema202012ChevronRightIcon: ChevronRightIcon,
     withJSONSchema202012Context: withJSONSchemaContext,
   },

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

@@ -12,6 +12,7 @@ const ModelsWrapper = createOnlyOAS31ComponentWrapper(({ getSystem }) => {
   const BooleanJSONSchema = getComponent("BooleanJSONSchema202012")
   const KeywordProperties = getComponent("JSONSchema202012KeywordProperties")
   const Accordion = getComponent("JSONSchema202012Accordion")
+  const ExpandDeepButton = getComponent("JSONSchema202012ExpandDeepButton")
   const ChevronRightIcon = getComponent("JSONSchema202012ChevronRightIcon")
   const withSchemaContext = getComponent("withJSONSchema202012Context")
   const ModelsWithJSONContext = withSchemaContext(Models, {
@@ -23,6 +24,7 @@ const ModelsWrapper = createOnlyOAS31ComponentWrapper(({ getSystem }) => {
       BooleanJSONSchema,
       KeywordProperties,
       Accordion,
+      ExpandDeepButton,
       ChevronRightIcon,
     },
     fn: {