feat(oas31): render JSON Schema 2020-12 in Operations and Webhooks (#8673)

Includes Callback Objects as well.

Refs #8513

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

@@ -11,6 +11,7 @@ import {
   useLevel,
   useFn,
   useIsEmbedded,
+  useIsExpanded,
   useIsExpandedDeeply,
   useIsCircular,
   useRenderedSchemas,
@@ -24,8 +25,9 @@ import {
 const JSONSchema = forwardRef(
   ({ schema, name, dependentRequired, onExpand }, ref) => {
     const fn = useFn()
+    const isExpanded = useIsExpanded()
     const isExpandedDeeply = useIsExpandedDeeply()
-    const [expanded, setExpanded] = useState(isExpandedDeeply)
+    const [expanded, setExpanded] = useState(isExpanded || isExpandedDeeply)
     const [expandedDeeply, setExpandedDeeply] = useState(isExpandedDeeply)
     const [level, nextLevel] = useLevel()
     const isEmbedded = useIsEmbedded()

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

@@ -9,6 +9,9 @@ import { useFn } from "../../../hooks"
 
 const Title = ({ title, schema }) => {
   const fn = useFn()
+  const renderedTitle = title || fn.getTitle(schema)
+
+  if (!renderedTitle) return null
 
   return (
     <div className="json-schema-2020-12__title">

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

@@ -3,6 +3,8 @@
     @include text_headline($section-models-model-title-font-color);
     display: inline-block;
     font-weight: bold;
+    font-size: 12px;
+    line-height: normal;
 
     & .json-schema-2020-12-keyword__name {
       margin: 0;

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

@@ -38,12 +38,15 @@ export const useIsEmbedded = () => {
   return level > 0
 }
 
-export const useIsExpandedDeeply = () => {
+export const useIsExpanded = () => {
   const [level] = useLevel()
   const { defaultExpandedLevels } = useConfig()
-  const isExpandedByDefault = defaultExpandedLevels - level > 0
 
-  return isExpandedByDefault || useContext(JSONSchemaDeepExpansionContext)
+  return defaultExpandedLevels - level > 0
+}
+
+export const useIsExpandedDeeply = () => {
+  return useContext(JSONSchemaDeepExpansionContext)
 }
 
 export const useRenderedSchemas = (schema = undefined) => {