feat: add option to show the description when using the SchemaDefininition component

src/components/SchemaDefinition/SchemaDefinition.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import { Markdown } from '../Markdown/Markdown';
 import { DarkRightPanel, MiddlePanel, MimeLabel, Row, Section } from '../../common-elements';
 import { MediaTypeModel, OpenAPIParser, RedocNormalizedOptions } from '../../services';
 import styled from '../../styled-components';
@@ -15,6 +16,7 @@ export interface ObjectDescriptionProps {
   showReadOnly?: boolean;
   showWriteOnly?: boolean;
   showExample?: boolean;
+  showDescription?: boolean;
   parser: OpenAPIParser;
   options: RedocNormalizedOptions;
 }
@@ -54,11 +56,19 @@ export class SchemaDefinition extends React.PureComponent<ObjectDescriptionProps
   }
 
   render() {
-    const { showReadOnly = true, showWriteOnly = false, showExample = true } = this.props;
+    const {
+      showReadOnly = true,
+      showWriteOnly = false,
+      showExample = true,
+      showDescription = false,
+    } = this.props;
     return (
       <Section>
         <Row>
           <MiddlePanel>
+            {showDescription && this.mediaModel.schema?.description && (
+              <Markdown source={this.mediaModel.schema.description} />
+            )}
             <Schema
               skipWriteOnly={!showWriteOnly}
               skipReadOnly={!showReadOnly}

src/components/__tests__/SchemaDefinition.test.tsx

@@ -22,6 +22,15 @@ describe('Components', () => {
         components: {
           schemas: {
             test: {
+              description: 'schema_description',
+              type: 'object',
+              properties: {
+                id: {
+                  type: 'string',
+                },
+              },
+            },
+            test_no_description: {
               type: 'object',
               properties: {
                 id: {
@@ -78,5 +87,68 @@ describe('Components', () => {
         expect(component.html().includes('<code>')).toBe(false);
       });
     });
+
+    describe('Show description constraints', () => {
+      it('should hide the description as default', () => {
+        const component = shallow(
+          withTheme(
+            <SchemaDefinition
+              schemaRef="#/components/schemas/test"
+              parser={parser}
+              options={options}
+              showExample={false}
+            />,
+          ),
+        );
+        expect(component.html().includes('schema_description')).toBe(false);
+      });
+
+      it('should hide the description if `showDescription` is `false`', () => {
+        const component = shallow(
+          withTheme(
+            <SchemaDefinition
+              schemaRef="#/components/schemas/test"
+              parser={parser}
+              options={options}
+              showExample={false}
+              showDescription={false}
+            />,
+          ),
+        );
+        expect(component.html().includes('schema_description')).toBe(false);
+      });
+
+      it('should show the description if `showDescription` is `true`', () => {
+        const component = shallow(
+          withTheme(
+            <SchemaDefinition
+              schemaRef="#/components/schemas/test"
+              parser={parser}
+              options={options}
+              showExample={false}
+              showDescription={true}
+            />,
+          ),
+        );
+        expect(component.html().includes('schema_description')).toBe(true);
+      });
+
+      it('not to thrown error if `showDescription` is `true` and without description', () => {
+        const component = shallow(
+          withTheme(
+            <SchemaDefinition
+              schemaRef="#/components/schemas/test_no_description"
+              parser={parser}
+              options={options}
+              showExample={false}
+              showDescription={true}
+            />,
+          ),
+        );
+        expect(() => {
+          component.html();
+        }).not.toThrow();
+      });
+    });
   });
 });