fix: Expand/Collapse all buttons disappears for flat structures (#1424)

Co-authored-by: AvroraPolnareff <araintheskywith@gmail.com>
Co-authored-by: Roman Hotsiy <gotsijroman@gmail.com>
Co-authored-by: anastasiia-developer <anastasiia@redocly.com>

src/components/JsonViewer/JsonViewer.tsx

@@ -26,27 +26,37 @@ class Json extends React.PureComponent<JsonProps> {
     return <CopyButtonWrapper data={this.props.data}>{this.renderInner}</CopyButtonWrapper>;
   }
 
-  renderInner = ({ renderCopyButton }) => (
+  renderInner = ({ renderCopyButton }) => {
-    <JsonViewerWrap>
+    const showFoldingButtons = this.props.data && Object.values(this.props.data).some(
-      <SampleControls>
+      (value) => typeof value === 'object' && value !== null,
-        {renderCopyButton()}
+    );
-        <button onClick={this.expandAll}> Expand all </button>
+
-        <button onClick={this.collapseAll}> Collapse all </button>
+    return (
-      </SampleControls>
+      <JsonViewerWrap>
-      <OptionsContext.Consumer>
+        <SampleControls>
-        {options => (
+          {renderCopyButton()}
-          <PrismDiv
+          {showFoldingButtons &&
-            className={this.props.className}
+            <>
-            // tslint:disable-next-line
+              <button onClick={this.expandAll}> Expand all </button>
-            ref={node => (this.node = node!)}
+              <button onClick={this.collapseAll}> Collapse all </button>
-            dangerouslySetInnerHTML={{
+            </>
-              __html: jsonToHTML(this.props.data, options.jsonSampleExpandLevel),
+          }
-            }}
+        </SampleControls>
-          />
+        <OptionsContext.Consumer>
-        )}
+          {options => (
-      </OptionsContext.Consumer>
+            <PrismDiv
-    </JsonViewerWrap>
+              className={this.props.className}
-  );
+              // tslint:disable-next-line
+              ref={node => (this.node = node!)}
+              dangerouslySetInnerHTML={{
+                __html: jsonToHTML(this.props.data, options.jsonSampleExpandLevel),
+              }}
+            />
+          )}
+        </OptionsContext.Consumer>
+      </JsonViewerWrap>
+    );
+  };
 
   expandAll = () => {
     const elements = this.node.getElementsByClassName('collapsible');

src/components/__tests__/JsonViewer.tsx

@@ -42,5 +42,13 @@ describe('Components', () => {
 
       expect(ClipboardService.copySelected as jest.Mock).toHaveBeenCalled();
     });
+
+    test('Expand/Collapse buttons disappears for flat structures', () => {
+      const flatData = { a: 1, b: '2', c: null };
+      const flatDataComponent = mount(withTheme(<JsonViewer data={flatData} />));
+
+      expect(flatDataComponent.html()).not.toContain('Expand all');
+      expect(flatDataComponent.html()).not.toContain('Collapse all');
+    });
   });
 });