feat: Optionally render object schema title and descriptions

docs/config.md

@@ -66,6 +66,14 @@ If set to `true`, the pattern is not shown in the schema.
 
 Hides the schema title next to to the type.
 
+### hideObjectTitle
+
+Hides the object title in the schema.
+
+### hideObjectDescription
+
+Hides the object description in the schema.
+
 ### hideSecuritySection
 
 Hides the Security panel section.

src/components/Fields/Field.tsx

@@ -104,7 +104,8 @@ export class Field extends React.Component<FieldProps> {
                   schema={field.schema}
                   skipReadOnly={this.props.skipReadOnly}
                   skipWriteOnly={this.props.skipWriteOnly}
-                  showTitle={this.props.showTitle}
+                  hideObjectTitle={this.props.hideObjectTitle}
+                  hideObjectDescription={this.props.hideObjectDescription}
                   level={this.props.level}
                 />
               </InnerPropertiesWrap>

src/components/Parameters/Parameters.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { DropdownOrLabel, DropdownOrLabelProps } from '../DropdownOrLabel/DropdownOrLabel';
 import { ParametersGroup } from './ParametersGroup';
+import { OptionsContext } from '../OptionsProvider';
 
 import { UnderlinedHeader } from '../../common-elements';
 
@@ -29,6 +30,8 @@ export interface ParametersProps {
 const PARAM_PLACES = ['path', 'query', 'cookie', 'header'];
 
 export class Parameters extends React.PureComponent<ParametersProps> {
+  static contextType = OptionsContext;
+
   orderParams(params: FieldModel[]): Record<string, FieldModel[]> {
     const res = {};
     params.forEach(param => {
@@ -38,6 +41,7 @@ export class Parameters extends React.PureComponent<ParametersProps> {
   }
 
   render() {
+    const { hideObjectTitle, hideObjectDescription } = this.context;
     const { body, parameters = [] } = this.props;
     if (body === undefined && parameters === undefined) {
       return null;
@@ -63,6 +67,8 @@ export class Parameters extends React.PureComponent<ParametersProps> {
             content={bodyContent}
             description={bodyDescription}
             bodyRequired={bodyRequired}
+            hideObjectTitle={hideObjectTitle}
+            hideObjectDescription={hideObjectDescription}
           />
         )}
       </>
@@ -90,8 +96,10 @@ export function BodyContent(props: {
   content: MediaContentModel;
   description?: string;
   bodyRequired?: boolean;
+  hideObjectTitle?: boolean;
+  hideObjectDescription?: boolean;
 }): JSX.Element {
-  const { content, description, bodyRequired } = props;
+  const { content, description, bodyRequired, hideObjectTitle, hideObjectDescription } = props;
   const { isRequestType } = content;
   return (
     <MediaTypesSwitch
@@ -108,6 +116,8 @@ export function BodyContent(props: {
             <Schema
               skipReadOnly={isRequestType}
               skipWriteOnly={!isRequestType}
+              hideObjectTitle={hideObjectTitle}
+              hideObjectDescription={hideObjectDescription}
               key="schema"
               schema={schema}
             />

src/components/Responses/ResponseDetails.tsx

@@ -11,9 +11,13 @@ import { Extensions } from '../Fields/Extensions';
 import { Markdown } from '../Markdown/Markdown';
 import { ResponseHeaders } from './ResponseHeaders';
 import { ConstraintsView } from '../Fields/FieldConstraints';
+import { OptionsContext } from '../OptionsProvider';
 
 export class ResponseDetails extends React.PureComponent<{ response: ResponseModel }> {
+  static contextType = OptionsContext;
+
   render() {
+    const { hideObjectTitle, hideObjectDescription } = this.context;
     const { description, extensions, headers, content } = this.props.response;
     return (
       <>
@@ -27,7 +31,13 @@ export class ResponseDetails extends React.PureComponent<{ response: ResponseMod
                 {schema?.type === 'object' && (
                   <ConstraintsView constraints={schema?.constraints || []} />
                 )}
-                <Schema skipWriteOnly={true} key="schema" schema={schema} />
+                <Schema
+                  hideObjectTitle={hideObjectTitle}
+                  hideObjectDescription={hideObjectDescription}
+                  skipWriteOnly={true}
+                  key="schema"
+                  schema={schema}
+                />
               </>
             );
           }}

src/components/Schema/ObjectSchema.tsx

@@ -1,9 +1,13 @@
 import { observer } from 'mobx-react';
 import * as React from 'react';
 
+import styled from '../../styled-components';
+import { H3 } from '../../common-elements/headers';
+import { Markdown } from '../Markdown/Markdown';
+
 import { SchemaModel } from '../../services/models';
 
-import { PropertiesTable, PropertiesTableCaption } from '../../common-elements/fields-layout';
+import { PropertiesTable } from '../../common-elements/fields-layout';
 import { Field } from '../Fields/Field';
 import { DiscriminatorDropdown } from './DiscriminatorDropdown';
 import { SchemaProps } from './Schema';
@@ -18,13 +22,26 @@ export interface ObjectSchemaProps extends SchemaProps {
   };
 }
 
+export const ObjectSchemaDetails = styled.div`
+  margin: 0 0 0.5em 0;
+`;
+
+export const ObjectSchemaTitle = styled(H3)`
+  margin: 0.5em 0 0 0;
+`;
+
+export const ObjectSchemaDescription = styled.div`
+  margin: 0.5em 0 0 0;
+`;
+
 export const ObjectSchema = observer(
   ({
-    schema: { fields = [], title },
+    schema: { fields = [], title, description },
-    showTitle,
     discriminator,
     skipReadOnly,
     skipWriteOnly,
+    hideObjectTitle,
+    hideObjectDescription,
     level,
   }: ObjectSchemaProps) => {
     const { expandSingleSchemaField, showObjectSchemaExamples, schemaExpansionLevel } =
@@ -48,8 +65,17 @@ export const ObjectSchema = observer(
       (expandSingleSchemaField && filteredFields.length === 1) || schemaExpansionLevel >= level!;
 
     return (
+      <div>
+        <ObjectSchemaDetails>
+          {!hideObjectTitle && <ObjectSchemaTitle>{title}</ObjectSchemaTitle>}
+          {!hideObjectDescription && (
+            <ObjectSchemaDescription>
+              <Markdown compact={true} source={description} />
+            </ObjectSchemaDescription>
+          )}
+        </ObjectSchemaDetails>
+
         <PropertiesTable>
-        {showTitle && <PropertiesTableCaption>{title}</PropertiesTableCaption>}
           <tbody>
             {mapWithLast(filteredFields, (field, isLast) => {
               return (
@@ -72,13 +98,15 @@ export const ObjectSchema = observer(
                   showExamples={showObjectSchemaExamples}
                   skipReadOnly={skipReadOnly}
                   skipWriteOnly={skipWriteOnly}
-                showTitle={showTitle}
+                  hideObjectTitle={hideObjectTitle}
+                  hideObjectDescription={hideObjectDescription}
                   level={level}
                 />
               );
             })}
           </tbody>
         </PropertiesTable>
+      </div>
     );
   },
 );

src/components/Schema/Schema.tsx

@@ -13,9 +13,10 @@ import { RecursiveSchema } from './RecursiveSchema';
 import { isArray } from '../../utils/helpers';
 
 export interface SchemaOptions {
-  showTitle?: boolean;
   skipReadOnly?: boolean;
   skipWriteOnly?: boolean;
+  hideObjectTitle?: boolean;
+  hideObjectDescription?: boolean;
   level?: number;
 }
 

src/components/SchemaDefinition/SchemaDefinition.tsx

@@ -14,6 +14,8 @@ export interface ObjectDescriptionProps {
   exampleRef?: string;
   showReadOnly?: boolean;
   showWriteOnly?: boolean;
+  showObjectTitle?: boolean;
+  showObjectDescription?: boolean;
   showExample?: boolean;
   parser: OpenAPIParser;
   options: RedocNormalizedOptions;
@@ -54,7 +56,13 @@ export class SchemaDefinition extends React.PureComponent<ObjectDescriptionProps
   }
 
   render() {
-    const { showReadOnly = true, showWriteOnly = false, showExample = true } = this.props;
+    const {
+      showReadOnly = true,
+      showWriteOnly = false,
+      showExample = true,
+      showObjectTitle = false,
+      showObjectDescription = false,
+    } = this.props;
     return (
       <Section>
         <Row>
@@ -62,6 +70,8 @@ export class SchemaDefinition extends React.PureComponent<ObjectDescriptionProps
             <Schema
               skipWriteOnly={!showWriteOnly}
               skipReadOnly={!showReadOnly}
+              hideObjectTitle={!showObjectTitle}
+              hideObjectDescription={!showObjectDescription}
               schema={this.mediaModel.schema}
             />
           </MiddlePanel>

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

@@ -2865,7 +2865,19 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
 `;
 
 exports[`Components SchemaView discriminator should correctly render discriminator dropdown 1`] = `
-<styled.table>
+<div>
+  <styled.div>
+    <Styled(styled.h2)>
+      Dog
+    </Styled(styled.h2)>
+    <styled.div>
+      <Markdown
+        compact={true}
+        source=""
+      />
+    </styled.div>
+  </styled.div>
+  <styled.table>
     <tbody>
       <Field
         expandByDefault={false}
@@ -3003,5 +3015,6 @@ exports[`Components SchemaView discriminator should correctly render discriminat
         showExamples={false}
       />
     </tbody>
-</styled.table>
+  </styled.table>
+</div>
 `;

src/services/RedocNormalizedOptions.ts

@@ -39,6 +39,8 @@ export interface RedocRawOptions {
   showObjectSchemaExamples?: boolean | string;
   showSecuritySchemeType?: boolean;
   hideSecuritySection?: boolean;
+  hideObjectTitle?: boolean | string;
+  hideObjectDescription?: boolean | string;
 
   unstable_ignoreMimeParameters?: boolean;