diff --git a/src/core/plugins/json-schema-2020-12/components/keywords/Title/Title.jsx b/src/core/plugins/json-schema-2020-12/components/keywords/Title/Title.jsx
index 5cbec01ce29..f62f696b1fd 100644
--- a/src/core/plugins/json-schema-2020-12/components/keywords/Title/Title.jsx
+++ b/src/core/plugins/json-schema-2020-12/components/keywords/Title/Title.jsx
@@ -9,11 +9,26 @@ import { useFn } from "../../../hooks"
const Title = ({ title = "", schema }) => {
const fn = useFn()
+ const schemaTitle = fn.getTitle(schema, { lookup: "basic" })
const renderedTitle = title || fn.getTitle(schema)
+ const hasSecondaryTitle =
+ typeof title === "string" &&
+ title !== "" &&
+ schemaTitle !== "" &&
+ !title.toLowerCase().includes(schemaTitle.toLowerCase())
if (!renderedTitle) return null
- return {renderedTitle}
+ return (
+
+ {renderedTitle}
+ {hasSecondaryTitle && (
+
+ {schemaTitle}
+
+ )}
+
+ )
}
Title.propTypes = {
diff --git a/src/core/plugins/json-schema-2020-12/components/keywords/Title/_title.scss b/src/core/plugins/json-schema-2020-12/components/keywords/Title/_title.scss
index 5dcfdb5e228..106bc85bb90 100644
--- a/src/core/plugins/json-schema-2020-12/components/keywords/Title/_title.scss
+++ b/src/core/plugins/json-schema-2020-12/components/keywords/Title/_title.scss
@@ -12,6 +12,12 @@
& .json-schema-2020-12-keyword__name {
margin: 0;
}
+
+ &-secondary {
+ margin-left: 10px;
+ font-weight: normal;
+ font-style: italic;
+ }
}
&-property {
diff --git a/test/e2e-cypress/e2e/features/plugins/json-schema-2020-12/schema-title.cy.js b/test/e2e-cypress/e2e/features/plugins/json-schema-2020-12/schema-title.cy.js
index 867178ce61b..2889b2d8979 100644
--- a/test/e2e-cypress/e2e/features/plugins/json-schema-2020-12/schema-title.cy.js
+++ b/test/e2e-cypress/e2e/features/plugins/json-schema-2020-12/schema-title.cy.js
@@ -18,4 +18,24 @@ describe("JSON Schema 2020-12 title keyword", () => {
.contains("Error")
.should("exist")
})
+
+ it("should render a title for schema properties", () => {
+ cy.visit(
+ "/?url=/documents/features/json-schema-2020-12-title.yaml&defaultModelsExpandDepth=2"
+ )
+ .get(".json-schema-2020-12-property")
+ .contains(".json-schema-2020-12__title", "nickname")
+ .contains("Pet nickname")
+ .should("exist")
+ })
+
+ it("should not repeat a property title that matches the property name", () => {
+ cy.visit(
+ "/?url=/documents/features/json-schema-2020-12-title.yaml&defaultModelsExpandDepth=2"
+ )
+ .get(".json-schema-2020-12-property")
+ .contains(".json-schema-2020-12__title", "color")
+ .find(".json-schema-2020-12__title-secondary")
+ .should("not.exist")
+ })
})
diff --git a/test/e2e-cypress/static/documents/features/json-schema-2020-12-title.yaml b/test/e2e-cypress/static/documents/features/json-schema-2020-12-title.yaml
index 63d82fc9f00..eec95c28a57 100644
--- a/test/e2e-cypress/static/documents/features/json-schema-2020-12-title.yaml
+++ b/test/e2e-cypress/static/documents/features/json-schema-2020-12-title.yaml
@@ -96,6 +96,12 @@ components:
type: string
tag:
type: string
+ nickname:
+ type: string
+ title: Pet nickname
+ color:
+ type: string
+ title: color
Pets:
title: My Pets
type: array