From 168189b2fdcf3667422ce3940ace3eedd0bdf284 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20St=C3=B6sel?=
 <42840862+andre-stoesel@users.noreply.github.com>
Date: Mon, 19 Sep 2022 09:44:44 +0000
Subject: [PATCH] feat: add option to hide the example code when using the
 `SchemaDefinition` component (#2157)

---
 .../SchemaDefinition/SchemaDefinition.tsx     | 18 ++--
 .../__tests__/SchemaDefinition.test.tsx       | 82 +++++++++++++++++++
 2 files changed, 94 insertions(+), 6 deletions(-)
 create mode 100644 src/components/__tests__/SchemaDefinition.test.tsx

diff --git a/src/components/SchemaDefinition/SchemaDefinition.tsx b/src/components/SchemaDefinition/SchemaDefinition.tsx
index a3c5189f39..b939891230 100644
--- a/src/components/SchemaDefinition/SchemaDefinition.tsx
+++ b/src/components/SchemaDefinition/SchemaDefinition.tsx
@@ -14,6 +14,7 @@ export interface ObjectDescriptionProps {
   exampleRef?: string;
   showReadOnly?: boolean;
   showWriteOnly?: boolean;
+  showExample?: boolean;
   parser: OpenAPIParser;
   options: RedocNormalizedOptions;
 }
@@ -53,7 +54,7 @@ export class SchemaDefinition extends React.PureComponent<ObjectDescriptionProps
   }
 
   render() {
-    const { showReadOnly = true, showWriteOnly = false } = this.props;
+    const { showReadOnly = true, showWriteOnly = false, showExample = true } = this.props;
     return (
       <Section>
         <Row>
@@ -64,11 +65,16 @@ export class SchemaDefinition extends React.PureComponent<ObjectDescriptionProps
               schema={this.mediaModel.schema}
             />
           </MiddlePanel>
-          <DarkRightPanel>
-            <MediaSamplesWrap>
-              <MediaTypeSamples renderDropdown={this.renderDropdown} mediaType={this.mediaModel} />
-            </MediaSamplesWrap>
-          </DarkRightPanel>
+          {showExample && (
+            <DarkRightPanel>
+              <MediaSamplesWrap>
+                <MediaTypeSamples
+                  renderDropdown={this.renderDropdown}
+                  mediaType={this.mediaModel}
+                />
+              </MediaSamplesWrap>
+            </DarkRightPanel>
+          )}
         </Row>
       </Section>
     );
diff --git a/src/components/__tests__/SchemaDefinition.test.tsx b/src/components/__tests__/SchemaDefinition.test.tsx
new file mode 100644
index 0000000000..215f6ecb05
--- /dev/null
+++ b/src/components/__tests__/SchemaDefinition.test.tsx
@@ -0,0 +1,82 @@
+/* tslint:disable:no-implicit-dependencies */
+
+import { shallow } from 'enzyme';
+import * as React from 'react';
+
+import { SchemaDefinition } from '..';
+import { OpenAPIParser } from '../../services';
+import { RedocNormalizedOptions } from '../../services/RedocNormalizedOptions';
+import { withTheme } from '../testProviders';
+
+const options = new RedocNormalizedOptions({});
+describe('Components', () => {
+  describe('SchemaDefinition', () => {
+    const parser = new OpenAPIParser(
+      {
+        openapi: '3.0',
+        info: {
+          title: 'test',
+          version: '0',
+        },
+        paths: {},
+        components: {
+          schemas: {
+            test: {
+              type: 'object',
+              properties: {
+                id: {
+                  type: 'string',
+                },
+              },
+            },
+          },
+        },
+      },
+      undefined,
+      options,
+    );
+
+    describe('Show example constraints', () => {
+      it('should show the example as default', () => {
+        const component = shallow(
+          withTheme(
+            <SchemaDefinition
+              schemaRef="#/components/schemas/test"
+              parser={parser}
+              options={options}
+            />,
+          ),
+        );
+        expect(component.html().includes('<code>')).toBe(true);
+      });
+
+      it('should show the example if `showExample` is `true`', () => {
+        const component = shallow(
+          withTheme(
+            <SchemaDefinition
+              schemaRef="#/components/schemas/test"
+              parser={parser}
+              options={options}
+              showExample={true}
+            />,
+          ),
+        );
+        expect(component.html().includes('<code>')).toBe(true);
+      });
+
+      it('should hide the example if `showExample` is `false`', () => {
+        const component = shallow(
+          withTheme(
+            <SchemaDefinition
+              schemaRef="#/components/schemas/test"
+              parser={parser}
+              options={options}
+              showExample={false}
+            />,
+          ),
+        );
+        expect(component.html().includes('<code>')).toBe(false);
+      });
+    });
+  });
+});