feat(oas31): add support for includeReadOnly/WriteOnly options (#8675)

Refs #8513

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

@@ -21,10 +21,7 @@ const PatternProperties = ({ schema }) => {
     <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--patternProperties">
       <ul>
         {Object.entries(patternProperties).map(([propertyName, schema]) => (
-          <li
+          <li key={propertyName} className="json-schema-2020-12-property">
-            key={propertyName}
-            className="json-schema-2020-12-property json-schema-2020-12-property"
-          >
             <JSONSchema name={propertyName} schema={schema} />
           </li>
         ))}

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

@@ -45,7 +45,7 @@ import ExpandDeepButton from "./components/ExpandDeepButton/ExpandDeepButton"
 import ChevronRightIcon from "./components/icons/ChevronRight"
 import { upperFirst, hasKeyword, isExpandable } from "./fn"
 import { JSONSchemaDeepExpansionContext } from "./context"
-import { useFn, useComponent, useIsExpandedDeeply } from "./hooks"
+import { useFn, useConfig, useComponent, useIsExpandedDeeply } from "./hooks"
 import { withJSONSchemaContext } from "./hoc"
 
 const JSONSchema202012Plugin = () => ({
@@ -101,6 +101,7 @@ const JSONSchema202012Plugin = () => ({
       isExpandable,
       hasKeyword,
       useFn,
+      useConfig,
       useComponent,
       useIsExpandedDeeply,
     },

src/core/plugins/oas31/index.js

@@ -58,7 +58,11 @@ import JSONSchema202012KeywordDiscriminator from "./json-schema-2020-12-extensio
 import JSONSchema202012KeywordExternalDocs from "./json-schema-2020-12-extensions/components/keywords/ExternalDocs"
 import JSONSchema202012KeywordDescriptionWrapper from "./json-schema-2020-12-extensions/wrap-components/keywords/Description"
 import JSONSchema202012KeywordDefaultWrapper from "./json-schema-2020-12-extensions/wrap-components/keywords/Default"
-import { makeIsExpandable } from "./json-schema-2020-12-extensions/fn"
+import JSONSchema202012KeywordPropertiesWrapper from "./json-schema-2020-12-extensions/wrap-components/keywords/Properties"
+import {
+  makeIsExpandable,
+  getProperties,
+} from "./json-schema-2020-12-extensions/fn"
 
 const OAS31Plugin = ({ getSystem }) => {
   const system = getSystem()
@@ -75,6 +79,7 @@ const OAS31Plugin = ({ getSystem }) => {
     pluginFn.jsonSchema202012 = {
       ...fn.jsonSchema202012,
       isExpandable: makeIsExpandable(fn.jsonSchema202012.isExpandable, system),
+      getProperties,
     }
   }
 
@@ -105,6 +110,8 @@ const OAS31Plugin = ({ getSystem }) => {
       JSONSchema202012KeywordDescription:
         JSONSchema202012KeywordDescriptionWrapper,
       JSONSchema202012KeywordDefault: JSONSchema202012KeywordDefaultWrapper,
+      JSONSchema202012KeywordProperties:
+        JSONSchema202012KeywordPropertiesWrapper,
     },
     statePlugins: {
       spec: {

src/core/plugins/oas31/json-schema-2020-12-extensions/components/keywords/Properties.jsx

@@ -0,0 +1,56 @@
+/**
+ * @prettier
+ */
+import React from "react"
+import PropTypes from "prop-types"
+import classNames from "classnames"
+
+const Properties = ({ schema, getSystem }) => {
+  const { fn } = getSystem()
+  const { useComponent } = fn.jsonSchema202012
+  const { getDependentRequired, getProperties } = fn.jsonSchema202012.useFn()
+  const config = fn.jsonSchema202012.useConfig()
+  const required = Array.isArray(schema?.required) ? schema.required : []
+  const JSONSchema = useComponent("JSONSchema")
+  const properties = getProperties(schema, config)
+
+  /**
+   * Rendering.
+   */
+  if (Object.keys(properties).length === 0) {
+    return null
+  }
+
+  return (
+    <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--properties">
+      <ul>
+        {Object.entries(properties).map(([propertyName, propertySchema]) => {
+          const isRequired = required.includes(propertyName)
+          const dependentRequired = getDependentRequired(propertyName, schema)
+
+          return (
+            <li
+              key={propertyName}
+              className={classNames("json-schema-2020-12-property", {
+                "json-schema-2020-12-property--required": isRequired,
+              })}
+            >
+              <JSONSchema
+                name={propertyName}
+                schema={propertySchema}
+                dependentRequired={dependentRequired}
+              />
+            </li>
+          )
+        })}
+      </ul>
+    </div>
+  )
+}
+
+Properties.propTypes = {
+  schema: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]).isRequired,
+  getSystem: PropTypes.func.isRequired,
+}
+
+export default Properties

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

@@ -15,3 +15,23 @@ export const makeIsExpandable = (original, { fn }) => {
     schema?.discriminator ||
     schema?.externalDocs
 }
+
+export const getProperties = (
+  schema,
+  { includeReadOnly, includeWriteOnly }
+) => {
+  // shortcut
+  if (!schema?.properties) return {}
+
+  const properties = Object.entries(schema.properties)
+  const filteredProperties = properties.filter(([, value]) => {
+    const isReadOnly = value?.readOnly === true
+    const isWriteOnly = value?.writeOnly === true
+
+    return (
+      (!isReadOnly || includeReadOnly) && (!isWriteOnly || includeWriteOnly)
+    )
+  })
+
+  return Object.fromEntries(filteredProperties)
+}

src/core/plugins/oas31/json-schema-2020-12-extensions/wrap-components/keywords/Properties.jsx

@@ -0,0 +1,9 @@
+/**
+ * @prettier
+ */
+import PropertiesKeyword from "../../components/keywords/Properties"
+import { createOnlyOAS31ComponentWrapper } from "../../../fn"
+
+const PropertiesWrapper = createOnlyOAS31ComponentWrapper(PropertiesKeyword)
+
+export default PropertiesWrapper

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

@@ -4,7 +4,10 @@
 import React from "react"
 
 import { createOnlyOAS31ComponentWrapper } from "../fn"
-import { makeIsExpandable } from "../json-schema-2020-12-extensions/fn"
+import {
+  makeIsExpandable,
+  getProperties,
+} from "../json-schema-2020-12-extensions/fn"
 
 const ModelWrapper = createOnlyOAS31ComponentWrapper(
   ({ getSystem, ...props }) => {
@@ -140,6 +143,7 @@ const ModelWrapper = createOnlyOAS31ComponentWrapper(
           fn.jsonSchema202012.isExpandable,
           system
         ),
+        getProperties,
       },
     })
 

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

@@ -4,7 +4,10 @@
 import React from "react"
 
 import { createOnlyOAS31ComponentWrapper } from "../fn"
-import { makeIsExpandable } from "../json-schema-2020-12-extensions/fn"
+import {
+  makeIsExpandable,
+  getProperties,
+} from "../json-schema-2020-12-extensions/fn"
 
 const ModelsWrapper = createOnlyOAS31ComponentWrapper(({ getSystem }) => {
   const system = getSystem()
@@ -83,6 +86,8 @@ const ModelsWrapper = createOnlyOAS31ComponentWrapper(({ getSystem }) => {
     config: {
       default$schema: "https://spec.openapis.org/oas/3.1/dialect/base",
       defaultExpandedLevels: configs.defaultModelsExpandDepth - 1,
+      includeReadOnly: true,
+      includeWriteOnly: true,
     },
     components: {
       JSONSchema,
@@ -131,6 +136,7 @@ const ModelsWrapper = createOnlyOAS31ComponentWrapper(({ getSystem }) => {
     fn: {
       upperFirst: fn.upperFirst,
       isExpandable: makeIsExpandable(fn.jsonSchema202012.isExpandable, system),
+      getProperties,
     },
   })