fix(oas31): allow override names of top level schemas (#9787)

Refs #9713

Co-authored-by: Oliwia Rogala <oliwia.rogala@smartbear.com>

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

@@ -13,11 +13,7 @@ const Title = ({ title = "", schema }) => {
 
   if (!renderedTitle) return null
 
-  return (
-    <div className="json-schema-2020-12__title">
-      {title || fn.getTitle(schema)}
-    </div>
-  )
+  return <div className="json-schema-2020-12__title">{renderedTitle}</div>
 }
 
 Title.propTypes = {

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

@@ -10,12 +10,17 @@ export const upperFirst = (value) => {
   return value
 }
 
-export const getTitle = (schema) => {
+/**
+ * Lookup can be `basic` or `extended`. By default the lookup is `extended`.
+ */
+export const getTitle = (schema, { lookup = "extended" } = {}) => {
   const fn = useFn()
 
-  if (schema?.title) return fn.upperFirst(schema.title)
-  if (schema?.$anchor) return fn.upperFirst(schema.$anchor)
-  if (schema?.$id) return schema.$id
+  if (schema?.title != null) return fn.upperFirst(String(schema.title))
+  if (lookup === "extended") {
+    if (schema?.$anchor != null) return fn.upperFirst(String(schema.$anchor))
+    if (schema?.$id != null) return String(schema.$id)
+  }
 
   return ""
 }
@@ -116,18 +121,18 @@ export const getType = (schema, processedSchemas = new WeakSet()) => {
   const typeString = Array.isArray(type)
     ? type.map((t) => (t === "array" ? getArrayType() : t)).join(" | ")
     : type === "array"
-    ? getArrayType()
-    : [
-        "null",
-        "boolean",
-        "object",
-        "array",
-        "number",
-        "integer",
-        "string",
-      ].includes(type)
-    ? type
-    : inferType()
+      ? getArrayType()
+      : [
+            "null",
+            "boolean",
+            "object",
+            "array",
+            "number",
+            "integer",
+            "string",
+          ].includes(type)
+        ? type
+        : inferType()
 
   const handleCombiningKeywords = (keyword, separator) => {
     if (Array.isArray(schema[keyword])) {

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

@@ -12,6 +12,7 @@ const Models = ({
   layoutActions,
   getComponent,
   getConfigs,
+  fn,
 }) => {
   const schemas = specSelectors.selectSchemas()
   const hasSchemas = Object.keys(schemas).length > 0
@@ -23,6 +24,7 @@ const Models = ({
   const JSONSchema202012 = getComponent("JSONSchema202012")
   const ArrowUpIcon = getComponent("ArrowUpIcon")
   const ArrowDownIcon = getComponent("ArrowDownIcon")
+  const { getTitle } = fn.jsonSchema202012.useFn()
 
   /**
    * Effects.
@@ -86,15 +88,19 @@ const Models = ({
         </button>
       </h4>
       <Collapse isOpened={isOpen}>
-        {Object.entries(schemas).map(([schemaName, schema]) => (
-          <JSONSchema202012
-            key={schemaName}
-            ref={handleJSONSchema202012Ref(schemaName)}
-            schema={schema}
-            name={schemaName}
-            onExpand={handleJSONSchema202012Expand(schemaName)}
-          />
-        ))}
+        {Object.entries(schemas).map(([schemaName, schema]) => {
+          const name = getTitle(schema, { lookup: "basic" }) || schemaName
+
+          return (
+            <JSONSchema202012
+              key={schemaName}
+              ref={handleJSONSchema202012Ref(schemaName)}
+              schema={schema}
+              name={name}
+              onExpand={handleJSONSchema202012Expand(schemaName)}
+            />
+          )
+        })}
       </Collapse>
     </section>
   )
@@ -117,6 +123,11 @@ Models.propTypes = {
     show: PropTypes.func.isRequired,
     readyToScroll: PropTypes.func.isRequired,
   }).isRequired,
+  fn: PropTypes.shape({
+    jsonSchema202012: PropTypes.func.shape({
+      useFn: PropTypes.func.isRequired,
+    }).isRequired,
+  }).isRequired,
 }
 
 export default Models