From c5fa72c3511476019f5e9cff2b8ea34e732627d6 Mon Sep 17 00:00:00 2001
From: Osamu Nakamura <osamu0329nakamura@gmail.com>
Date: Sun, 27 Oct 2024 20:33:12 +0900
Subject: [PATCH] feat: add option to show the description when using the
 `SchemaDefinition` component.

---
 .../SchemaDefinition/SchemaDefinition.tsx     | 12 +++-
 .../__tests__/SchemaDefinition.test.tsx       | 72 +++++++++++++++++++
 2 files changed, 83 insertions(+), 1 deletion(-)

diff --git a/src/components/SchemaDefinition/SchemaDefinition.tsx b/src/components/SchemaDefinition/SchemaDefinition.tsx
index b9398912..4cf427bd 100644
--- a/src/components/SchemaDefinition/SchemaDefinition.tsx
+++ b/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}
diff --git a/src/components/__tests__/SchemaDefinition.test.tsx b/src/components/__tests__/SchemaDefinition.test.tsx
index 215f6ecb..c771b1e2 100644
--- a/src/components/__tests__/SchemaDefinition.test.tsx
+++ b/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();
+      });
+    });
   });
 });