Collapsible JSON viewer for example code

If example code language is JSON, it now renders with collapsible JSON viewer

Author: kanadgupta

packages/api-explorer/__tests__/Example.test.jsx

@@ -43,20 +43,27 @@ test('should show each example', () => {
   expect(example.find('pre').length).toEqual(2);
 });
 
-test('should correctly highlight syntax', () => {
+test('should display json viewer', () => {
   const exampleOas = new Oas(exampleResults);
   const example = shallow(
     <Example {...props} oas={exampleOas} operation={exampleOas.operation('/results', 'get')} />,
   );
 
-  // Asserting all JSON keys from the example oas.json
+  // Asserting all JSON examples are displayed with JSON viewer from the example oas.json
   expect(
     example
       .find('pre')
       .at(0)
       .render()
-      .find('.cm-property').length,
-  ).toBe(3);
+      .find('.react-json-view').length,
+  ).toBe(1);
+});
+
+test('should correctly highlight XML syntax', () => {
+  const exampleOas = new Oas(exampleResults);
+  const example = shallow(
+    <Example {...props} oas={exampleOas} operation={exampleOas.operation('/results', 'get')} />,
+  );
 
   // Asserting that there are XML tags
   expect(

packages/api-explorer/src/Example.jsx

@@ -1,5 +1,6 @@
 const React = require('react');
 const PropTypes = require('prop-types');
+const ReactJson = require('react-json-view').default;
 const showCodeResults = require('./lib/show-code-results');
 
 // const { replaceVars } = require('./lib/replace-vars');
@@ -24,13 +25,32 @@ function Example({ operation, result, oas, selected, setExampleTab, exampleRespo
           <ExampleTabs examples={examples} selected={selected} setExampleTab={setExampleTab} />
           <div className="code-sample-body">
             {examples.map((example, index) => {
+              const isJson = example.language && example.language === 'application/json';
               return (
                 <pre
                   className={`tomorrow-night tabber-body tabber-body-${index}`}
                   style={{ display: index === selected ? 'block' : '' }}
                   key={index} // eslint-disable-line react/no-array-index-key
                 >
-                  {syntaxHighlighter(example.code, example.language, { dark: true })}
+                  {isJson ? (
+                    <ReactJson
+                      src={JSON.parse(example.code)}
+                      collapsed={1}
+                      collapseStringsAfterLength={100}
+                      enableClipboard={false}
+                      theme="tomorrow"
+                      name={null}
+                      displayDataTypes={false}
+                      displayObjectSize={false}
+                      style={{
+                        padding: '20px 10px',
+                        backgroundColor: 'transparent',
+                        fontSize: '12px',
+                      }}
+                    />
+                  ) : (
+                    <div>{syntaxHighlighter(example.code, example.language, { dark: true })}</div>
+                  )}
                 </pre>
               );
             })}