feat(json-schema-2020-12): detect expandable behavior

Refs #8513

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

@@ -3,4 +3,5 @@
   font-size: 12px;
   color: rgb(175, 174, 174);
   border: none;
+  padding-right: 0;
 }

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

@@ -9,6 +9,7 @@ import * as propTypes from "../../prop-types"
 import {
   useComponent,
   useLevel,
+  useFn,
   useIsEmbedded,
   useIsExpandedDeeply,
 } from "../../hooks"
@@ -18,11 +19,13 @@ import {
 } from "../../context"
 
 const JSONSchema = ({ schema, name }) => {
+  const fn = useFn()
   const isExpandedDeeply = useIsExpandedDeeply()
   const [expanded, setExpanded] = useState(isExpandedDeeply)
   const [expandedDeeply, setExpandedDeeply] = useState(false)
   const [level, nextLevel] = useLevel()
   const isEmbedded = useIsEmbedded()
+  const isExpandable = fn.isExpandable(schema)
   const Accordion = useComponent("Accordion")
   const KeywordProperties = useComponent("KeywordProperties")
   const KeywordType = useComponent("KeywordType")
@@ -63,13 +66,19 @@ const JSONSchema = ({ schema, name }) => {
           })}
         >
           <div className="json-schema-2020-12-head">
-            <Accordion expanded={expanded} onChange={handleExpansion}>
+            {isExpandable ? (
+              <>
+                <Accordion expanded={expanded} onChange={handleExpansion}>
+                  <KeywordTitle title={name} schema={schema} />
+                </Accordion>
+                <ExpandDeepButton
+                  expanded={expanded}
+                  onClick={handleExpansionDeep}
+                />
+              </>
+            ) : (
               <KeywordTitle title={name} schema={schema} />
-            </Accordion>
+            )}
-            <ExpandDeepButton
-              expanded={expanded}
-              onClick={handleExpansionDeep}
-            />
             <KeywordType schema={schema} />
             <KeywordFormat schema={schema} />
           </div>

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

@@ -4,10 +4,9 @@
 import React from "react"
 
 import { schema } from "../../prop-types"
-import { useFn, useComponent } from "../../hooks"
+import { useComponent } from "../../hooks"
 
 const Properties = ({ schema }) => {
-  const fn = useFn()
   const JSONSchema = useComponent("JSONSchema")
   const properties = schema?.properties || {}
 

src/core/plugins/json-schema-2020-12/components/keywords/Title/_title.scss

@@ -11,7 +11,7 @@
     .json-schema-2020-12__title {
       @include text_code();
       font-size: 12px;
-      vertical-align: bottom;
+      vertical-align: middle;
     }
   }
 }

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

@@ -1,7 +1,18 @@
-.json-schema-2020-12__type {
+.json-schema-2020-12 {
-  @include text_code();
+  &__type {
-  color: $prop-type-font-color;
+    @include text_code();
-  font-size: 12px;
+    color: $prop-type-font-color;
-  text-transform: lowercase;
+    font-size: 12px;
-  font-weight: bold;
+    text-transform: lowercase;
+    font-weight: bold;
+    padding-left: 10px;
+  }
+
+  &-property {
+    .json-schema-2020-12__type {
+      vertical-align: middle;
+    }
+  }
 }
+
+

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

@@ -63,7 +63,7 @@ export const getType = (schema, processedSchemas = new WeakSet()) => {
       schema.exclusiveMaximum ||
       schema.multipleOf
     ) {
-      return "number|integer"
+      return "number | integer"
     } else if (schema.const !== undefined) {
       if (schema.const === null) {
         return "null"
@@ -110,3 +110,7 @@ export const getType = (schema, processedSchemas = new WeakSet()) => {
 }
 
 export const isBooleanJSONSchema = (schema) => typeof schema === "boolean"
+
+export const isExpandable = (schema) => {
+  return schema?.description || schema?.properties
+}

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

@@ -13,7 +13,13 @@ 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, getType } from "./fn"
+import {
+  getTitle,
+  isBooleanJSONSchema,
+  upperFirst,
+  getType,
+  isExpandable,
+} from "./fn"
 
 export const withJSONSchemaContext = (Component, overrides = {}) => {
   const value = {
@@ -38,6 +44,7 @@ export const withJSONSchemaContext = (Component, overrides = {}) => {
       getTitle,
       getType,
       isBooleanJSONSchema,
+      isExpandable,
       ...overrides.fn,
     },
   }