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

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

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

@@ -0,0 +1,21 @@
+/**
+ * @prettier
+ */
+
+describe("JSON Schema 2020-12 title keyword", () => {
+  it("should render a correct title for schemas", () => {
+    cy.visit("/?url=/documents/features/json-schema-2020-12-title.yaml")
+      .get(".json-schema-2020-12__title")
+      .eq(0)
+      .contains("My Pet")
+      .should("exist")
+      .get(".json-schema-2020-12__title")
+      .eq(1)
+      .contains("My Pets")
+      .should("exist")
+      .get(".json-schema-2020-12__title")
+      .eq(2)
+      .contains("Error")
+      .should("exist")
+  })
+})

test/e2e-cypress/static/documents/features/json-schema-2020-12-title.yaml

@@ -0,0 +1,114 @@
+openapi: 3.1.0
+info:
+  version: 1.0.0
+  title: Swagger Petstore
+  license:
+    name: MIT
+    url: https://opensource.org/licenses/MIT
+servers:
+  - url: http://petstore.swagger.io/v1
+paths:
+  /pets:
+    get:
+      summary: List all pets
+      operationId: listPets
+      tags:
+        - pets
+      parameters:
+        - name: limit
+          in: query
+          description: How many items to return at one time (max 100)
+          required: false
+          schema:
+            type: integer
+            format: int32
+      responses:
+        '200':
+          description: A paged array of pets
+          headers:
+            x-next:
+              description: A link to the next page of responses
+              schema:
+                type: string
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Pets'
+        default:
+          description: unexpected error
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Error'
+    post:
+      summary: Create a pet
+      operationId: createPets
+      tags:
+        - pets
+      responses:
+        '201':
+          description: Null response
+        default:
+          description: unexpected error
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Error'
+  /pets/{petId}:
+    get:
+      summary: Info for a specific pet
+      operationId: showPetById
+      tags:
+        - pets
+      parameters:
+        - name: petId
+          in: path
+          required: true
+          description: The id of the pet to retrieve
+          schema:
+            type: string
+      responses:
+        '200':
+          description: Expected response to a valid request
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Pet'
+        default:
+          description: unexpected error
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Error'
+components:
+  schemas:
+    Pet:
+      title: My Pet
+      type: object
+      required:
+        - id
+        - name
+      properties:
+        id:
+          type: integer
+          format: int64
+        name:
+          type: string
+        tag:
+          type: string
+    Pets:
+      title: My Pets
+      type: array
+      items:
+        $ref: '#/components/schemas/Pet'
+    Error:
+      type: object
+      required:
+        - code
+        - message
+      properties:
+        code:
+          type: integer
+          format: int32
+        message:
+          type: string