fix(json-schema-2020-12): expand deeply all Schema Objects and complex keywords (#9581)

Refs #9508
Supersedes #9510

Co-authored-by: Julien Bourges <[email protected]>

Author: glowcloud

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

@@ -5,13 +5,14 @@ import React, { useCallback, useState } from "react"
 import classNames from "classnames"
 
 import { schema } from "../../prop-types"
-import { useComponent, useIsExpandedDeeply } from "../../hooks"
+import { useComponent, useIsExpanded, useIsExpandedDeeply } from "../../hooks"
 import { JSONSchemaDeepExpansionContext } from "../../context"
 
 const $defs = ({ schema }) => {
   const $defs = schema?.$defs || {}
+  const isExpanded = useIsExpanded()
   const isExpandedDeeply = useIsExpandedDeeply()
-  const [expanded, setExpanded] = useState(isExpandedDeeply)
+  const [expanded, setExpanded] = useState(isExpanded || isExpandedDeeply)
   const [expandedDeeply, setExpandedDeeply] = useState(false)
   const Accordion = useComponent("Accordion")
   const ExpandDeepButton = useComponent("ExpandDeepButton")

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

@@ -5,11 +5,16 @@ import React, { useCallback, useState } from "react"
 import classNames from "classnames"
 
 import { schema } from "../../../prop-types"
-import { useComponent, useIsExpandedDeeply } from "../../../hooks"
+import {
+  useComponent,
+  useIsExpanded,
+  useIsExpandedDeeply,
+} from "../../../hooks"
 
 const $vocabulary = ({ schema }) => {
+  const isExpanded = useIsExpanded()
   const isExpandedDeeply = useIsExpandedDeeply()
-  const [expanded, setExpanded] = useState(isExpandedDeeply)
+  const [expanded, setExpanded] = useState(isExpanded || isExpandedDeeply)
   const Accordion = useComponent("Accordion")
 
   const handleExpansion = useCallback(() => {

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

@@ -5,14 +5,20 @@ import React, { useCallback, useState } from "react"
 import classNames from "classnames"
 
 import { schema } from "../../prop-types"
-import { useFn, useComponent, useIsExpandedDeeply } from "../../hooks"
+import {
+  useFn,
+  useComponent,
+  useIsExpanded,
+  useIsExpandedDeeply,
+} from "../../hooks"
 import { JSONSchemaDeepExpansionContext } from "../../context"
 
 const AllOf = ({ schema }) => {
   const allOf = schema?.allOf || []
   const fn = useFn()
+  const isExpanded = useIsExpanded()
   const isExpandedDeeply = useIsExpandedDeeply()
-  const [expanded, setExpanded] = useState(isExpandedDeeply)
+  const [expanded, setExpanded] = useState(isExpanded || isExpandedDeeply)
   const [expandedDeeply, setExpandedDeeply] = useState(false)
   const Accordion = useComponent("Accordion")
   const ExpandDeepButton = useComponent("ExpandDeepButton")

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

@@ -5,14 +5,20 @@ import React, { useCallback, useState } from "react"
 import classNames from "classnames"
 
 import { schema } from "../../prop-types"
-import { useFn, useComponent, useIsExpandedDeeply } from "../../hooks"
+import {
+  useFn,
+  useComponent,
+  useIsExpanded,
+  useIsExpandedDeeply,
+} from "../../hooks"
 import { JSONSchemaDeepExpansionContext } from "../../context"
 
 const AnyOf = ({ schema }) => {
   const anyOf = schema?.anyOf || []
   const fn = useFn()
+  const isExpanded = useIsExpanded()
   const isExpandedDeeply = useIsExpandedDeeply()
-  const [expanded, setExpanded] = useState(isExpandedDeeply)
+  const [expanded, setExpanded] = useState(isExpanded || isExpandedDeeply)
   const [expandedDeeply, setExpandedDeeply] = useState(false)
   const Accordion = useComponent("Accordion")
   const ExpandDeepButton = useComponent("ExpandDeepButton")

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

@@ -5,13 +5,14 @@ import React, { useCallback, useState } from "react"
 import classNames from "classnames"
 
 import { schema } from "../../prop-types"
-import { useComponent, useIsExpandedDeeply } from "../../hooks"
+import { useComponent, useIsExpanded, useIsExpandedDeeply } from "../../hooks"
 import { JSONSchemaDeepExpansionContext } from "../../context"
 
 const DependentSchemas = ({ schema }) => {
   const dependentSchemas = schema?.dependentSchemas || []
+  const isExpanded = useIsExpanded()
   const isExpandedDeeply = useIsExpandedDeeply()
-  const [expanded, setExpanded] = useState(isExpandedDeeply)
+  const [expanded, setExpanded] = useState(isExpanded || isExpandedDeeply)
   const [expandedDeeply, setExpandedDeeply] = useState(false)
   const Accordion = useComponent("Accordion")
   const ExpandDeepButton = useComponent("ExpandDeepButton")

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

@@ -5,14 +5,20 @@ import React, { useCallback, useState } from "react"
 import classNames from "classnames"
 
 import { schema } from "../../prop-types"
-import { useFn, useComponent, useIsExpandedDeeply } from "../../hooks"
+import {
+  useFn,
+  useComponent,
+  useIsExpanded,
+  useIsExpandedDeeply,
+} from "../../hooks"
 import { JSONSchemaDeepExpansionContext } from "../../context"
 
 const OneOf = ({ schema }) => {
   const oneOf = schema?.oneOf || []
   const fn = useFn()
+  const isExpanded = useIsExpanded()
   const isExpandedDeeply = useIsExpandedDeeply()
-  const [expanded, setExpanded] = useState(isExpandedDeeply)
+  const [expanded, setExpanded] = useState(isExpanded || isExpandedDeeply)
   const [expandedDeeply, setExpandedDeeply] = useState(false)
   const Accordion = useComponent("Accordion")
   const ExpandDeepButton = useComponent("ExpandDeepButton")

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

@@ -5,14 +5,20 @@ import React, { useCallback, useState } from "react"
 import classNames from "classnames"
 
 import { schema } from "../../prop-types"
-import { useFn, useComponent, useIsExpandedDeeply } from "../../hooks"
+import {
+  useFn,
+  useComponent,
+  useIsExpandedDeeply,
+  useIsExpanded,
+} from "../../hooks"
 import { JSONSchemaDeepExpansionContext } from "../../context"
 
 const PrefixItems = ({ schema }) => {
   const prefixItems = schema?.prefixItems || []
   const fn = useFn()
+  const isExpanded = useIsExpanded()
   const isExpandedDeeply = useIsExpandedDeeply()
-  const [expanded, setExpanded] = useState(isExpandedDeeply)
+  const [expanded, setExpanded] = useState(isExpanded || isExpandedDeeply)
   const [expandedDeeply, setExpandedDeeply] = useState(false)
   const Accordion = useComponent("Accordion")
   const ExpandDeepButton = useComponent("ExpandDeepButton")

test/e2e-cypress/e2e/features/plugins/json-schema-2020-12/expansion.cy.js

@@ -0,0 +1,20 @@
+/**
+ * @prettier
+ */
+
+describe("JSON Schema 2020-12 complex keywords expansion", () => {
+  it("should deeply expand all Schemas and complex keywords", () => {
+    cy.visit("/pages/json-schema-2020-12-expansion/").then(
+      () => {
+        cy.get(".json-schema-2020-12-accordion")
+          .find(".json-schema-2020-12-accordion__icon--collapsed")
+          .should("not.exist")
+        cy.contains("anyOf1-p1-p2-p1").should("exist")
+        cy.contains("oneOf1-p1-p2-p1").should("exist")
+        cy.contains("Prefix items").should("exist")
+        cy.contains("exampleDef").should("exist")
+        cy.contains("https://json-schema.org/draft/2020-12/vocab/core").should("exist")
+      }
+    )
+  })
+})

test/e2e-cypress/static/pages/json-schema-2020-12-expansion/expansion.yaml

@@ -0,0 +1,100 @@
+openapi: "3.1.0"
+info:
+  version: "0.0.1"
+  title: "Swagger UI Webpack Setup"
+  description: "Demonstrates Swagger UI"
+components:
+  schemas: {}
+security: []
+paths:
+  /pets:
+    get:
+      responses:
+        200:
+          description: "OK"
+          content:
+            application/json:
+              schema:
+                $vocabulary: 
+                  https://json-schema.org/draft/2020-12/vocab/core: true
+                  https://json-schema.org/draft/2020-12/vocab/applicator: true
+                  https://json-schema.org/draft/2020-12/vocab/validation: true
+                  https://json-schema.org/draft/2020-12/vocab/meta-data: true
+                  https://json-schema.org/draft/2020-12/vocab/format-annotation: false
+                  https://example.com/my-custom-vocab: true
+                $defs: 
+                  exampleDef:
+                    type: string
+                allOf:
+                  - oneOf:
+                      - type: object
+                        properties:
+                          oneOf1-p1:
+                            type: object
+                            properties:
+                              oneOf1-p1-p1:
+                                type: string
+                              oneOf1-p1-p2:
+                                type: object
+                                properties:
+                                  oneOf1-p1-p2-p1:
+                                    type: string
+                          oneOf1-p2:
+                            type: string
+                      - type: object
+                        properties:
+                          oneOf2-p1:
+                            type: string
+                          oneOf2-p2:
+                            type: string
+                  - anyOf:
+                      - type: object
+                        properties:
+                          anyOf1-p1:
+                            type: object
+                            properties:
+                              anyOf1-p1-p1:
+                                type: string
+                              anyOf1-p1-p2:
+                                type: object
+                                properties:
+                                  anyOf1-p1-p2-p1:
+                                    type: string
+                          anyOf1-p2:
+                            type: string
+                      - type: object
+                        properties:
+                          anyOf2-p1:
+                            type: object
+                            properties:
+                              anyOf2-p1-p1:
+                                type: string
+                          anyOf2-p2:
+                            type: string
+                  - type: object
+                    properties:
+                      p1:
+                        type: object
+                        properties:
+                          p1-p1:
+                            type: string
+                          p1-p2:
+                            type: object
+                            properties:
+                              p1-p2-p1:
+                                type: string
+                        dependentSchemas:
+                          p1-p1:
+                            properties:
+                              p3: 
+                                type: array
+                                prefixItems: 
+                                  - type: string
+                                    enum: [a, b, c]
+                            required: [p3]
+                      p2:
+                        type: string
+                        prefixItems: 
+                          - type: string
+                            enum: [a, b, c]                  
+tags: []

test/e2e-cypress/static/pages/json-schema-2020-12-expansion/index.html

@@ -0,0 +1,65 @@
+<!-- HTML for dev server -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Swagger UI</title>
+  <link rel="stylesheet" type="text/css" href="/swagger-ui.css">
+  <style>
+    html {
+      box-sizing: border-box;
+      overflow: -moz-scrollbars-vertical;
+      overflow-y: scroll;
+    }
+    *,
+    *:before,
+    *:after {
+      box-sizing: inherit;
+    }
+    body {
+      margin:0;
+      background: #fafafa;
+    }
+  </style>
+</head>
+
+<body>
+
+<div id="swagger-ui"></div>
+
+<script src="/swagger-ui-bundle.js" charset="UTF-8"> </script>
+<script src="/swagger-ui-standalone-preset.js" charset="UTF-8"> </script>
+<script>
+  window.onload = function() {
+    window["SwaggerUIBundle"] = window["swagger-ui-bundle"]
+    window["SwaggerUIStandalonePreset"] = window["swagger-ui-standalone-preset"]
+    // Build a system
+    const ui = SwaggerUIBundle({
+      url: "./expansion.yaml",
+      dom_id: '#swagger-ui',
+      presets: [
+        SwaggerUIBundle.presets.apis,
+        SwaggerUIStandalonePreset
+      ],
+      plugins: [],
+      layout: "StandaloneLayout",
+      docExpansion: "full",
+      defaultModelExpandDepth: 100,
+      defaultModelRendering: "model",
+      onComplete: () => {
+        if(window.completeCount) {
+          window.completeCount++
+        } else {
+          window.completeCount = 1
+        }
+      },
+      queryConfigEnabled: true,
+    })
+
+    window.ui = ui
+  }
+</script>
+</body>
+
+</html>