fix: improve openapi 3.1

demo/openapi-3-1.yaml

@@ -1166,6 +1166,11 @@ components:
           description: User status
           type: integer
           format: int32
+        image:
+          description: User image
+          type: string
+          contentEncoding: base64
+          contentMediaType: image/png
       xml:
         name: User
   requestBodies:

src/components/Fields/FieldDetails.tsx

@@ -59,7 +59,7 @@ export class FieldDetails extends React.PureComponent<FieldProps, { patternShown
       } else {
         const label = l('example') + ':';
         const raw = !!field.in;
-        renderedExamples = <FieldDetail label={label} value={getSerializedValue(field, field.example)} raw={raw}  />;
+        renderedExamples = <FieldDetail label={label} value={getSerializedValue(field, field.example)} raw={raw} />;
       }
     }
 
@@ -76,6 +76,20 @@ export class FieldDetails extends React.PureComponent<FieldProps, { patternShown
               &gt;{' '}
             </TypeFormat>
           )}
+          {schema.contentEncoding && (
+            <TypeFormat>
+              {' '}&lt;
+              {schema.contentEncoding}
+              &gt;{' '}
+            </TypeFormat>
+          )}
+          {schema.contentMediaType && (
+            <TypeFormat>
+              {' '}&lt;
+              {schema.contentMediaType}
+              &gt;{' '}
+            </TypeFormat>
+          )}
           {schema.title && !hideSchemaTitles && <TypeTitle> ({schema.title}) </TypeTitle>}
           <ConstraintsView constraints={schema.constraints} />
           {schema.pattern && !hideSchemaPattern && (
@@ -110,7 +124,7 @@ export class FieldDetails extends React.PureComponent<FieldProps, { patternShown
           <ExternalDocumentation externalDocs={schema.externalDocs} compact={true} />
         )}
         {(renderDiscriminatorSwitch && renderDiscriminatorSwitch(this.props)) || null}
-        {field.const && (<FieldDetail label={l('const') + ':'} value={field.const}/>) || null}
+        {field.const && (<FieldDetail label={l('const') + ':'} value={field.const} />) || null}
       </div>
     );
   }

src/components/Schema/ArraySchema.tsx

@@ -4,7 +4,8 @@ import { Schema, SchemaProps } from './Schema';
 
 import { ArrayClosingLabel, ArrayOpenningLabel } from '../../common-elements';
 import styled from '../../styled-components';
-import {humanizeConstraints} from "../../utils";
+import { humanizeConstraints } from '../../utils';
+import { TypeName } from '../../common-elements/fields';
 
 const PaddedSchema = styled.div`
   padding-left: ${({ theme }) => theme.spacing.unit * 2}px;
@@ -13,12 +14,20 @@ const PaddedSchema = styled.div`
 export class ArraySchema extends React.PureComponent<SchemaProps> {
   render() {
     const itemsSchema = this.props.schema.items!;
+    const schema = this.props.schema;
+
     const itemConstraintSchema = (
       min: number | undefined = undefined,
       max: number | undefined = undefined,
     ) => ({ type: 'array', minItems: min, maxItems: max });
 
-    const minMaxItems = humanizeConstraints(itemConstraintSchema(itemsSchema.schema.minItems, itemsSchema.schema.maxItems));
+    const minMaxItems = humanizeConstraints(itemConstraintSchema(itemsSchema?.schema?.minItems, itemsSchema?.schema?.maxItems));
+
+    if (schema.displayType && !itemsSchema && !minMaxItems.length) {
+      return (<div>
+        <TypeName>{schema.displayType}</TypeName>
+      </div>);
+    }
 
     return (
       <div>

src/components/__tests__/__snapshots__/DiscriminatorDropdown.test.tsx.snap

@@ -20,6 +20,8 @@ exports[`Components SchemaView discriminator should correctly render discriminat
             "activeOneOf": 0,
             "const": "",
             "constraints": Array [],
+            "contentEncoding": undefined,
+            "contentMediaType": undefined,
             "default": undefined,
             "deprecated": false,
             "description": "",
@@ -71,6 +73,8 @@ exports[`Components SchemaView discriminator should correctly render discriminat
             "activeOneOf": 0,
             "const": "",
             "constraints": Array [],
+            "contentEncoding": undefined,
+            "contentMediaType": undefined,
             "default": undefined,
             "deprecated": false,
             "description": "",

src/services/models/Schema.ts

@@ -61,6 +61,8 @@ export class SchemaModel {
   schema: MergedOpenAPISchema;
   extensions?: Record<string, any>;
   const: any;
+  contentEncoding?: string;
+  contentMediaType?: string;
 
   /**
    * @param isChild if schema discriminator Child
@@ -120,10 +122,14 @@ export class SchemaModel {
     this.readOnly = !!schema.readOnly;
     this.writeOnly = !!schema.writeOnly;
     this.const = schema.const || '';
+    this.contentEncoding = schema.contentEncoding;
+    this.contentMediaType = schema.contentMediaType;
 
-    if (!!schema.nullable) {
-      if (Array.isArray(this.type) && !this.type.includes('null')) {
+    if (!!schema.nullable || schema['x-nullable']) {
+      if (Array.isArray(this.type) && !this.type.some((value) => value === null || value === 'null')) {
         this.type = [...this.type, 'null'];
+      } else if (!Array.isArray(this.type) && (this.type !== null || this.type !== 'null')) {
+        this.type = [this.type, 'null'];
       }
     }
 

src/types/open-api.ts

@@ -147,6 +147,8 @@ export interface OpenAPISchema {
   enum?: any[];
   example?: any;
   const?: string;
+  contentEncoding?: string;
+  contentMediaType?: string;
 }
 
 export interface OpenAPIDiscriminator {

src/utils/__tests__/__snapshots__/loadAndBundleSpec.test.ts.snap

@@ -2187,6 +2187,12 @@ Object {
           "id": Object {
             "$ref": "#/components/schemas/Id",
           },
+          "image": Object {
+            "contentEncoding": "base64",
+            "contentMediaType": "image/png",
+            "description": "User image",
+            "type": "string",
+          },
           "lastName": Object {
             "description": "User last name",
             "example": "Smith",

src/utils/openapi.ts

@@ -83,6 +83,8 @@ const schemaKeywordTypes = {
   maxLength: 'string',
   minLength: 'string',
   pattern: 'string',
+  contentEncoding: 'string',
+  contentMediaType: 'string',
 
   items: 'array',
   maxItems: 'array',