feat(json-schema-2020-12): add support for readOnly keyword (#8649)

Refs #8513

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

@@ -74,6 +74,7 @@ const JSONSchema = forwardRef(
     const KeywordDescription = useComponent("KeywordDescription")
     const KeywordDefault = useComponent("KeywordDefault")
     const KeywordDeprecated = useComponent("KeywordDeprecated")
+    const KeywordReadOnly = useComponent("KeywordReadOnly")
     const ExpandDeepButton = useComponent("ExpandDeepButton")
 
     /**
@@ -134,6 +135,7 @@ const JSONSchema = forwardRef(
                   <KeywordTitle title={name} schema={schema} />
                 )}
                 <KeywordDeprecated schema={schema} />
+                <KeywordReadOnly schema={schema} />
                 <KeywordType schema={schema} isCircular={isCircular} />
                 {constraints.length > 0 &&
                   constraints.map((constraint) => (

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

@@ -0,0 +1,18 @@
+/**
+ * @prettier
+ */
+import React from "react"
+
+import { schema } from "../../../prop-types"
+
+const ReadOnly = ({ schema }) => {
+  if (schema?.readOnly !== true) return null
+
+  return <span className="json-schema-2020-12__readonly">read-only</span>
+}
+
+ReadOnly.propTypes = {
+  schema: schema.isRequired,
+}
+
+export default ReadOnly

src/core/plugins/json-schema-2020-12/components/keywords/ReadOnly/_read-only.scss

@@ -0,0 +1,6 @@
+.json-schema-2020-12 {
+  &__readonly {
+    @extend .json-schema-2020-12__deprecated;
+    color: gray;
+  }
+}

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

@@ -75,3 +75,4 @@
 @import './Constraint/constraint';
 @import './DependentRequired/dependent-required';
 @import './Deprecated/deprecated';
+@import './ReadOnly/read-only';

src/core/plugins/json-schema-2020-12/hoc.jsx

@@ -40,6 +40,7 @@ import KeywordTitle from "./components/keywords/Title/Title"
 import KeywordDescription from "./components/keywords/Description/Description"
 import KeywordDefault from "./components/keywords/Default"
 import KeywordDeprecated from "./components/keywords/Deprecated/Deprecated"
+import KeywordReadOnly from "./components/keywords/ReadOnly/ReadOnly"
 import Accordion from "./components/Accordion/Accordion"
 import ExpandDeepButton from "./components/ExpandDeepButton/ExpandDeepButton"
 import ChevronRightIcon from "./components/icons/ChevronRight"
@@ -96,6 +97,7 @@ export const withJSONSchemaContext = (Component, overrides = {}) => {
       KeywordDescription,
       KeywordDefault,
       KeywordDeprecated,
+      KeywordReadOnly,
       Accordion,
       ExpandDeepButton,
       ChevronRightIcon,

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

@@ -38,6 +38,7 @@ import KeywordTitle from "./components/keywords/Title/Title"
 import KeywordDescription from "./components/keywords/Description/Description"
 import KeywordDefault from "./components/keywords/Default"
 import KeywordDeprecated from "./components/keywords/Deprecated/Deprecated"
+import KeywordReadOnly from "./components/keywords/ReadOnly/ReadOnly"
 import Accordion from "./components/Accordion/Accordion"
 import ExpandDeepButton from "./components/ExpandDeepButton/ExpandDeepButton"
 import ChevronRightIcon from "./components/icons/ChevronRight"
@@ -83,6 +84,7 @@ const JSONSchema202012Plugin = () => ({
     JSONSchema202012KeywordDescription: KeywordDescription,
     JSONSchema202012KeywordDefault: KeywordDefault,
     JSONSchema202012KeywordDeprecated: KeywordDeprecated,
+    JSONSchema202012KeywordReadOnly: KeywordReadOnly,
     JSONSchema202012Accordion: Accordion,
     JSONSchema202012ExpandDeepButton: ExpandDeepButton,
     JSONSchema202012ChevronRightIcon: ChevronRightIcon,

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

@@ -72,6 +72,7 @@ const ModelsWrapper = createOnlyOAS31ComponentWrapper(({ getSystem }) => {
   )
   const KeywordDefault = getComponent("JSONSchema202012KeywordDefault")
   const KeywordDeprecated = getComponent("JSONSchema202012KeywordDeprecated")
+  const KeywordReadOnly = getComponent("JSONSchema202012KeywordReadOnly")
   const Accordion = getComponent("JSONSchema202012Accordion")
   const ExpandDeepButton = getComponent("JSONSchema202012ExpandDeepButton")
   const ChevronRightIcon = getComponent("JSONSchema202012ChevronRightIcon")
@@ -120,6 +121,7 @@ const ModelsWrapper = createOnlyOAS31ComponentWrapper(({ getSystem }) => {
       KeywordDescription,
       KeywordDefault,
       KeywordDeprecated,
+      KeywordReadOnly,
       Accordion,
       ExpandDeepButton,
       ChevronRightIcon,