kyy/swagger-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Refs #9508
Supersedes #9510

Co-authored-by: Julien Bourges <julien.bourges@actility.com>
This commit is contained in:
Oliwia Rogala
2024-02-14 10:16:34 +01:00
committed by GitHub
parent 0115054aa3
commit 0aed3bc831
10 changed files with 230 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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")

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

@@ -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(() => {

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

@@ -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")

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

@@ -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")

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

@@ -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")

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

@@ -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")

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

@@ -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")

20
test/e2e-cypress/e2e/features/plugins/json-schema-2020-12/expansion.cy.js Normal file
View File

@@ -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")
}
)
})
})

100
test/e2e-cypress/static/pages/json-schema-2020-12-expansion/expansion.yaml Normal file
View File

@@ -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: []

65
test/e2e-cypress/static/pages/json-schema-2020-12-expansion/index.html Normal file
View File

@@ -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>