feat: add option to hide the example code when using the SchemaDefinition component (#2157)

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>
+          {showExample && (
             <DarkRightPanel>
               <MediaSamplesWrap>
-              <MediaTypeSamples renderDropdown={this.renderDropdown} mediaType={this.mediaModel} />
+                <MediaTypeSamples
+                  renderDropdown={this.renderDropdown}
+                  mediaType={this.mediaModel}
+                />
               </MediaSamplesWrap>
             </DarkRightPanel>
+          )}
         </Row>
       </Section>
     );

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);
+      });
+    });
+  });
+});