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,12 +26,21 @@ class Json extends React.PureComponent<JsonProps> {
     return <CopyButtonWrapper data={this.props.data}>{this.renderInner}</CopyButtonWrapper>;
   }
 
-  renderInner = ({ renderCopyButton }) => (
+  renderInner = ({ renderCopyButton }) => {
+    const showFoldingButtons = this.props.data && Object.values(this.props.data).some(
+      (value) => typeof value === 'object' && value !== null,
+    );
+
+    return (
       <JsonViewerWrap>
         <SampleControls>
           {renderCopyButton()}
+          {showFoldingButtons &&
+            <>
               <button onClick={this.expandAll}> Expand all </button>
               <button onClick={this.collapseAll}> Collapse all </button>
+            </>
+          }
         </SampleControls>
         <OptionsContext.Consumer>
           {options => (
@@ -47,6 +56,7 @@ class Json extends React.PureComponent<JsonProps> {
         </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');
+    });
   });
 });