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>
Redocly · Apr 26, 2022 · 2ca8e08 · 2ca8e08
1 parent 8240404
commit 2ca8e08
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 21 deletions.
diff --git a/src/components/JsonViewer/JsonViewer.tsx b/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 }) => (
-    <JsonViewerWrap>
-      <SampleControls>
-        {renderCopyButton()}
-        <button onClick={this.expandAll}> Expand all </button>
-        <button onClick={this.collapseAll}> Collapse all </button>
-      </SampleControls>
-      <OptionsContext.Consumer>
-        {options => (
-          <PrismDiv
-            className={this.props.className}
-            // tslint:disable-next-line
-            ref={node => (this.node = node!)}
-            dangerouslySetInnerHTML={{
-              __html: jsonToHTML(this.props.data, options.jsonSampleExpandLevel),
-            }}
-          />
-        )}
-      </OptionsContext.Consumer>
-    </JsonViewerWrap>
-  );
+  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 => (
+            <PrismDiv
+              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');

diff --git a/src/components/__tests__/JsonViewer.tsx b/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');
+    });
   });
 });