From 161c5af17d066943a94a143dca22e0e9be7bc37a Mon Sep 17 00:00:00 2001
From: Vladimir Gorej <vladimir.gorej@gmail.com>
Date: Fri, 14 Apr 2023 15:27:44 +0200
Subject: [PATCH] feat(json-schema-2020-12): add support for title keyword

Refs #8513
---
 .../components/JSONSchema/JSONSchema.jsx      |  5 ++--
 .../components/JSONSchema/_json-schema.scss   | 16 ----------
 .../json-schema-2020-12/components/_all.scss  |  1 +
 .../components/keywords/Title/Title.jsx       | 29 +++++++++++++++++++
 .../components/keywords/Title/_title.scss     | 17 +++++++++++
 src/core/plugins/json-schema-2020-12/hoc.jsx  |  2 ++
 src/core/plugins/json-schema-2020-12/index.js |  2 ++
 .../plugins/oas31/wrap-components/models.jsx  |  3 ++
 8 files changed, 56 insertions(+), 19 deletions(-)
 create mode 100644 src/core/plugins/json-schema-2020-12/components/keywords/Title/Title.jsx
 create mode 100644 src/core/plugins/json-schema-2020-12/components/keywords/Title/_title.scss

diff --git a/src/core/plugins/json-schema-2020-12/components/JSONSchema/JSONSchema.jsx b/src/core/plugins/json-schema-2020-12/components/JSONSchema/JSONSchema.jsx
index 5578fb1f..103aaa38 100644
--- a/src/core/plugins/json-schema-2020-12/components/JSONSchema/JSONSchema.jsx
+++ b/src/core/plugins/json-schema-2020-12/components/JSONSchema/JSONSchema.jsx
@@ -30,6 +30,7 @@ const JSONSchema = ({ schema, name }) => {
   const KeywordProperties = useComponent("KeywordProperties")
   const KeywordType = useComponent("KeywordType")
   const KeywordFormat = useComponent("KeywordFormat")
+  const KeywordTitle = useComponent("KeywordTitle")
   const KeywordDescription = useComponent("KeywordDescription")
   const ExpandDeepButton = useComponent("ExpandDeepButton")
 
@@ -73,9 +74,7 @@ const JSONSchema = ({ schema, name }) => {
         >
           <div className="json-schema-2020-12-head">
             <Accordion expanded={expanded} onChange={handleExpansion}>
-              <div className="json-schema-2020-12__title">
-                {name || fn.getTitle(schema)}
-              </div>
+              <KeywordTitle title={name} schema={schema} />
             </Accordion>
             <ExpandDeepButton
               expanded={expanded}
diff --git a/src/core/plugins/json-schema-2020-12/components/JSONSchema/_json-schema.scss b/src/core/plugins/json-schema-2020-12/components/JSONSchema/_json-schema.scss
index e5283ada..1a97480b 100644
--- a/src/core/plugins/json-schema-2020-12/components/JSONSchema/_json-schema.scss
+++ b/src/core/plugins/json-schema-2020-12/components/JSONSchema/_json-schema.scss
@@ -17,27 +17,11 @@
     padding: 0 inherit 0 inherit;
   }
 
-  &__title {
-    @include text_headline($section-models-model-title-font-color);
-    display: inline-block;
-    font-weight: bold;
-  }
-
   &-body {
     margin: 2px 0;
     border-left: 1px dashed rgba($section-models-model-container-background-color, 0.1);
   }
 
-  &-property {
-    margin: 7px 0;
-
-    .json-schema-2020-12__title {
-      @include text_code();
-      font-size: 12px;
-      vertical-align: bottom;
-    }
-  }
-
   &__limit {
     @include text_code();
     margin-left: 10px;
diff --git a/src/core/plugins/json-schema-2020-12/components/_all.scss b/src/core/plugins/json-schema-2020-12/components/_all.scss
index 01f07e9d..fd167eb0 100644
--- a/src/core/plugins/json-schema-2020-12/components/_all.scss
+++ b/src/core/plugins/json-schema-2020-12/components/_all.scss
@@ -5,3 +5,4 @@
 @import './keywords/Type/type';
 @import './keywords/Format/format';
 @import './keywords/Description/description';
+@import './keywords/Title/title';
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
new file mode 100644
index 00000000..0ad3e639
--- /dev/null
+++ b/src/core/plugins/json-schema-2020-12/components/keywords/Title/Title.jsx
@@ -0,0 +1,29 @@
+/**
+ * @prettier
+ */
+import React from "react"
+import PropTypes from "prop-types"
+
+import { schema } from "../../../prop-types"
+import { useFn } from "../../../hooks"
+
+const Title = ({ title, schema }) => {
+  const fn = useFn()
+
+  return (
+    <div className="json-schema-2020-12__title">
+      {title || fn.getTitle(schema)}
+    </div>
+  )
+}
+
+Title.propTypes = {
+  title: PropTypes.string,
+  schema: schema.isRequired,
+}
+
+Title.defaultProps = {
+  title: "",
+}
+
+export default Title
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
new file mode 100644
index 00000000..11b5330c
--- /dev/null
+++ b/src/core/plugins/json-schema-2020-12/components/keywords/Title/_title.scss
@@ -0,0 +1,17 @@
+.json-schema-2020-12 {
+  &__title {
+    @include text_headline($section-models-model-title-font-color);
+    display: inline-block;
+    font-weight: bold;
+  }
+
+  &-property {
+    margin: 7px 0;
+
+    .json-schema-2020-12__title {
+      @include text_code();
+      font-size: 12px;
+      vertical-align: bottom;
+    }
+  }
+}
diff --git a/src/core/plugins/json-schema-2020-12/hoc.jsx b/src/core/plugins/json-schema-2020-12/hoc.jsx
index 1cd02519..9faa0868 100644
--- a/src/core/plugins/json-schema-2020-12/hoc.jsx
+++ b/src/core/plugins/json-schema-2020-12/hoc.jsx
@@ -8,6 +8,7 @@ import BooleanJSONSchema from "./components/BooleanJSONSchema/BooleanJSONSchema"
 import KeywordProperties from "./components/keywords/Properties"
 import KeywordType from "./components/keywords/Type/Type"
 import KeywordFormat from "./components/keywords/Format/Format"
+import KeywordTitle from "./components/keywords/Title/Title"
 import KeywordDescription from "./components/keywords/Description/Description"
 import Accordion from "./components/Accordion/Accordion"
 import ExpandDeepButton from "./components/ExpandDeepButton/ExpandDeepButton"
@@ -23,6 +24,7 @@ export const withJSONSchemaContext = (Component, overrides = {}) => {
       KeywordProperties,
       KeywordType,
       KeywordFormat,
+      KeywordTitle,
       KeywordDescription,
       Accordion,
       ExpandDeepButton,
diff --git a/src/core/plugins/json-schema-2020-12/index.js b/src/core/plugins/json-schema-2020-12/index.js
index e614eb1a..ee887dee 100644
--- a/src/core/plugins/json-schema-2020-12/index.js
+++ b/src/core/plugins/json-schema-2020-12/index.js
@@ -6,6 +6,7 @@ import BooleanJSONSchema from "./components/BooleanJSONSchema/BooleanJSONSchema"
 import KeywordProperties from "./components/keywords/Properties"
 import KeywordType from "./components/keywords/Type/Type"
 import KeywordFormat from "./components/keywords/Format/Format"
+import KeywordTitle from "./components/keywords/Title/Title"
 import KeywordDescription from "./components/keywords/Description/Description"
 import Accordion from "./components/Accordion/Accordion"
 import ExpandDeepButton from "./components/ExpandDeepButton/ExpandDeepButton"
@@ -20,6 +21,7 @@ const JSONSchema202012Plugin = () => ({
     JSONSchema202012KeywordProperties: KeywordProperties,
     JSONSchema202012KeywordType: KeywordType,
     JSONSchema202012KeywordFormat: KeywordFormat,
+    JSONSchema202012KeywordTitle: KeywordTitle,
     JSONSchema202012KeywordDescription: KeywordDescription,
     JSONSchema202012Accordion: Accordion,
     JSONSchema202012ExpandDeepButton: ExpandDeepButton,
diff --git a/src/core/plugins/oas31/wrap-components/models.jsx b/src/core/plugins/oas31/wrap-components/models.jsx
index 2338882d..c2cecfe2 100644
--- a/src/core/plugins/oas31/wrap-components/models.jsx
+++ b/src/core/plugins/oas31/wrap-components/models.jsx
@@ -13,10 +13,12 @@ const ModelsWrapper = createOnlyOAS31ComponentWrapper(({ getSystem }) => {
   const KeywordProperties = getComponent("JSONSchema202012KeywordProperties")
   const KeywordType = getComponent("JSONSchema202012KeywordType")
   const KeywordFormat = getComponent("JSONSchema202012KeywordFormat")
+  const KeywordTitle = getComponent("JSONSchema202012KeywordTitle")
   const KeywordDescription = getComponent(
     "JSONSchema202012KeywordDescription",
     true
   )
+
   const Accordion = getComponent("JSONSchema202012Accordion")
   const ExpandDeepButton = getComponent("JSONSchema202012ExpandDeepButton")
   const ChevronRightIcon = getComponent("JSONSchema202012ChevronRightIcon")
@@ -31,6 +33,7 @@ const ModelsWrapper = createOnlyOAS31ComponentWrapper(({ getSystem }) => {
       KeywordProperties,
       KeywordType,
       KeywordFormat,
+      KeywordTitle,
       KeywordDescription,
       Accordion,
       ExpandDeepButton,