Fix: Don't show empty sidebar (#1423)

Author: elevatebart

src/client/rsg-components/TableOfContents/TableOfContents.js

@@ -45,7 +45,12 @@ export default class TableOfContents extends Component {
 		// we need to make sure not to loose the subsections.
 		// We will treat those subsecttions as the new roots.
 		const firstLevel =
-			sections.length === 1 ? sections[0].sections || sections[0].components : sections;
+			sections.length === 1
+				? // only use subsections if there actually are subsections
+				  sections[0].sections && sections[0].sections.length
+					? sections[0].sections
+					: sections[0].components
+				: sections;
 		const filtered = filterSectionsByName(firstLevel, searchTerm);
 
 		return this.renderLevel(filtered, useRouterLinks);

src/client/rsg-components/TableOfContents/TableOfContents.spec.js

@@ -119,3 +119,63 @@ it('should call a callback when input value changed', () => {
 
 	expect(onSearchTermChange).toBeCalledWith(newSearchTerm);
 });
+
+it('should render content of subsections of a section that has no components', () => {
+	const actual = shallow(
+		<TableOfContents
+			sections={[{ sections: [{ contents: 'intro.md' }, { contents: 'chapter.md' }] }]}
+		/>
+	);
+
+	expect(actual.find('ComponentsList').prop('items')).toMatchInlineSnapshot(`
+Array [
+  Object {
+    "components": Array [],
+    "content": false,
+    "contents": "intro.md",
+    "heading": false,
+    "sections": Array [],
+  },
+  Object {
+    "components": Array [],
+    "content": false,
+    "contents": "chapter.md",
+    "heading": false,
+    "sections": Array [],
+  },
+]
+`);
+});
+
+it('should render components of a single top section as root', () => {
+	const actual = shallow(<TableOfContents sections={[{ components }]} />);
+
+	expect(actual.find('ComponentsList').prop('items')).toMatchInlineSnapshot(`
+Array [
+  Object {
+    "components": Array [],
+    "content": false,
+    "heading": false,
+    "name": "Button",
+    "sections": Array [],
+    "slug": "button",
+  },
+  Object {
+    "components": Array [],
+    "content": false,
+    "heading": false,
+    "name": "Input",
+    "sections": Array [],
+    "slug": "input",
+  },
+  Object {
+    "components": Array [],
+    "content": false,
+    "heading": false,
+    "name": "Textarea",
+    "sections": Array [],
+    "slug": "textarea",
+  },
+]
+`);
+});