Fixes for missing schema details

src/components/Fields/Field.tsx

@@ -23,6 +23,7 @@ import type { FieldModel } from '../../services/models';
 export interface FieldProps extends SchemaOptions {
   className?: string;
   isLast?: boolean;
+  noItemsType?: boolean;
   showExamples?: boolean;
 
   field: FieldModel;

src/components/Fields/FieldDetails.tsx

@@ -29,7 +29,7 @@ import { ArrayItemDetails } from './ArrayItemDetails';
 export const FieldDetailsComponent = observer((props: FieldProps) => {
   const { enumSkipQuotes, hideSchemaTitles } = React.useContext(OptionsContext);
 
-  const { showExamples, field, renderDiscriminatorSwitch } = props;
+  const { showExamples, noItemsType, field, renderDiscriminatorSwitch } = props;
   const {
     schema,
     description,
@@ -98,7 +98,7 @@ export const FieldDetailsComponent = observer((props: FieldProps) => {
         <ConstraintsView constraints={schema.constraints} />
         <Pattern schema={schema} />
         {schema.isCircular && <RecursiveLabel> {l('recursive')} </RecursiveLabel>}
-        {isArrayType && schema.items && <ArrayItemDetails schema={schema.items} />}
+        {isArrayType && !noItemsType && schema.items && <ArrayItemDetails schema={schema.items} />}
       </div>
       {deprecated && (
         <div>

src/components/Schema/ArraySchema.tsx

@@ -37,7 +37,7 @@ export class ArraySchema extends React.PureComponent<SchemaProps> {
       <div>
         <ArrayOpenningLabel> Array {minMaxItems}</ArrayOpenningLabel>
         <PaddedSchema>
-          <Schema {...this.props} schema={itemsSchema} />
+          <Schema {...this.props} schema={itemsSchema} showFieldDetails={true} />
         </PaddedSchema>
         <ArrayClosingLabel />
       </div>

src/components/Schema/OneOfSchema.tsx

@@ -8,7 +8,6 @@ import {
 } from '../../common-elements/schema';
 import { Badge } from '../../common-elements/shelfs';
 import { SchemaModel } from '../../services/models';
-import { ConstraintsView } from '../Fields/FieldConstraints';
 import { Schema, SchemaProps } from './Schema';
 import { DiscriminatorDropdown } from './DiscriminatorDropdown';
 import { OptionsConsumer } from '../OptionsProvider';
@@ -81,8 +80,7 @@ export class OneOfSchema extends React.Component<SchemaProps> {
         <div>
           {oneOf[schema.activeOneOf].deprecated && <Badge type="warning">Deprecated</Badge>}
         </div>
-        <ConstraintsView constraints={activeSchema.constraints} />
-        <Schema {...this.props} schema={activeSchema} />
+        <Schema {...this.props} schema={activeSchema} showFieldDetails={true} noItemsType={true} />
       </div>
     );
   }

src/components/Schema/Schema.tsx

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { FieldDetails } from '../Fields/FieldDetails';
 
 import { FieldModel, SchemaModel } from '../../services/models';
+import styled from '../../styled-components';
 
 import { ArraySchema } from './ArraySchema';
 import { ObjectSchema } from './ObjectSchema';
@@ -12,10 +13,16 @@ import { RecursiveSchema } from './RecursiveSchema';
 
 import { isArray } from '../../utils/helpers';
 
+const Spacer = styled.div`
+  padding-top: ${({ theme }) => theme.spacing.unit * 2}px;
+`;
+
 export interface SchemaOptions {
+  noItemsType?: boolean;
   showTitle?: boolean;
   skipReadOnly?: boolean;
   skipWriteOnly?: boolean;
+  showFieldDetails?: boolean;
   level?: number;
 }
 
@@ -38,6 +45,22 @@ export class Schema extends React.Component<Partial<SchemaProps>> {
       return <RecursiveSchema schema={schema} />;
     }
 
+    // TODO: maybe adjust FieldDetails to accept schema
+    const field = {
+      schema,
+      name: '',
+      required: false,
+      description: schema.description,
+      externalDocs: schema.externalDocs,
+      deprecated: false,
+      toggle: () => null,
+      expanded: false,
+    } as any as FieldModel; // cast needed for hot-loader to not fail
+
+    const types = isArray(type) ? type : [type];
+    const showFieldDetails =
+      rest.showFieldDetails || (!types.includes('object') && !types.includes('array'));
+
     if (discriminatorProp !== undefined) {
       if (!oneOf || !oneOf.length) {
         console.warn(
@@ -49,46 +72,42 @@ export class Schema extends React.Component<Partial<SchemaProps>> {
       return activeSchema.isCircular ? (
         <RecursiveSchema schema={activeSchema} />
       ) : (
-        <ObjectSchema
-          {...rest}
-          level={level}
-          schema={activeSchema}
-          discriminator={{
-            fieldName: discriminatorProp,
-            parentSchema: schema,
-          }}
-        />
+        <div>
+          {showFieldDetails && <FieldDetails field={field} noItemsType={rest.noItemsType} />}
+          <ObjectSchema
+            {...rest}
+            level={level}
+            schema={activeSchema}
+            discriminator={{
+              fieldName: discriminatorProp,
+              parentSchema: schema,
+            }}
+          />
+        </div>
       );
     }
 
     if (oneOf !== undefined) {
       return <OneOfSchema schema={schema} {...rest} />;
     }
 
-    const types = isArray(type) ? type : [type];
-    if (types.includes('object')) {
-      if (schema.fields?.length) {
-        return <ObjectSchema {...(this.props as any)} level={level} />;
-      }
-    } else if (types.includes('array')) {
-      return <ArraySchema {...(this.props as any)} level={level} />;
-    }
-
-    // TODO: maybe adjust FieldDetails to accept schema
-    const field = {
-      schema,
-      name: '',
-      required: false,
-      description: schema.description,
-      externalDocs: schema.externalDocs,
-      deprecated: false,
-      toggle: () => null,
-      expanded: false,
-    } as any as FieldModel; // cast needed for hot-loader to not fail
-
     return (
       <div>
-        <FieldDetails field={field} />
+        {showFieldDetails && <FieldDetails field={field} noItemsType={rest.noItemsType} />}
+        {types.includes('object') ? (
+          schema.fields?.length ? (
+            <ObjectSchema {...(this.props as any)} level={level} />
+          ) : (
+            ''
+          )
+        ) : types.includes('array') ? (
+          <div>
+            {showFieldDetails && <Spacer></Spacer>}
+            <ArraySchema {...(this.props as any)} level={level} />
+          </div>
+        ) : (
+          ''
+        )}
       </div>
     );
   }