diff --git a/src/components/JsonViewer/JsonViewer.tsx b/src/components/JsonViewer/JsonViewer.tsx index 2bcfc146..8464765f 100644 --- a/src/components/JsonViewer/JsonViewer.tsx +++ b/src/components/JsonViewer/JsonViewer.tsx @@ -26,27 +26,37 @@ class Json extends React.PureComponent { return {this.renderInner}; } - renderInner = ({ renderCopyButton }) => ( - - - {renderCopyButton()} - - - - - {options => ( - (this.node = node!)} - dangerouslySetInnerHTML={{ - __html: jsonToHTML(this.props.data, options.jsonSampleExpandLevel), - }} - /> - )} - - - ); + renderInner = ({ renderCopyButton }) => { + const showFoldingButtons = this.props.data && Object.values(this.props.data).some( + (value) => typeof value === 'object' && value !== null, + ); + + return ( + + + {renderCopyButton()} + {showFoldingButtons && + <> + + + + } + + + {options => ( + (this.node = node!)} + dangerouslySetInnerHTML={{ + __html: jsonToHTML(this.props.data, options.jsonSampleExpandLevel), + }} + /> + )} + + + ); + }; expandAll = () => { const elements = this.node.getElementsByClassName('collapsible'); diff --git a/src/components/__tests__/JsonViewer.tsx b/src/components/__tests__/JsonViewer.tsx index 8649c14d..35b5d179 100644 --- 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()); + + expect(flatDataComponent.html()).not.toContain('Expand all'); + expect(flatDataComponent.html()).not.toContain('Collapse all'); + }); }); });