fix: fix expanding chapters bug (#1942)

* fix: fix expanding chapters bug

* chore: make hidrated version working

* chore: added further subchapters to cover the issue

* chore: changeset

.changeset/fuzzy-planets-explain.md

@@ -0,0 +1,6 @@
+---
+'@commercetools-docs/gatsby-theme-docs': patch
+'@commercetools-website/docs-smoke-test': patch
+---
+
+Fix issue with multiple expanding chapters working in "tanem" when expanded

packages/gatsby-theme-docs/src/hooks/use-sidebar-navigation-items.js

@@ -39,7 +39,12 @@ function createAncestorsTree(data) {
   function traverse(chapters, parentPath = [], level = 0) {
     chapters.forEach((chapter, index) => {
       if (chapter.pages) {
-        const currentPath = [...parentPath, `${level}-${index}`];
+        let newPath = `${parentPath.join('#')}#${level}-${index}`;
+        if (newPath.startsWith('#')) {
+          newPath = newPath.substring(1);
+        }
+        const currentPath = [...parentPath, newPath];
+
         ancestorsArray.push(currentPath);
 
         if (chapter.pages.length > 0) {

packages/gatsby-theme-docs/src/layouts/internals/sidebar.js

@@ -277,18 +277,23 @@ const Title = styled.span`
       : designSystem.typography.fontWeights.regular};
 `;
 
-const ChapterTitle = (props) => (
-  <ChapterTitleWrapper level={props.level} onClick={() => props.toggleExpand()}>
-    <Title isExpanded={props.isExpanded} level={props.level}>
-      {props.text}
-    </Title>
-    {props.isExpanded ? (
-      <AngleDownIcon size="medium" />
-    ) : (
-      <AngleRightIcon size="medium" />
-    )}
-  </ChapterTitleWrapper>
-);
+const ChapterTitle = (props) => {
+  return (
+    <ChapterTitleWrapper
+      level={props.level}
+      onClick={() => props.toggleExpand()}
+    >
+      <Title isExpanded={props.isExpanded} level={props.level}>
+        {props.text}
+      </Title>
+      {props.isExpanded ? (
+        <AngleDownIcon size="medium" />
+      ) : (
+        <AngleRightIcon size="medium" />
+      )}
+    </ChapterTitleWrapper>
+  );
+};
 ChapterTitle.propTypes = {
   text: PropTypes.string.isRequired,
   isExpanded: PropTypes.bool,
@@ -326,17 +331,16 @@ const Chapter = (props) => {
     props.location
   );
   const { ancestorsMap } = useSidebarNavigationItems();
-  const chapterId = `${props.level}-${props.index}`;
+  const chapterId =
+    props.level === 1 && props.parentChapterId
+      ? `${props.parentChapterId}#${props.level}-${props.index}`
+      : `${props.level}-${props.index}`;
   const { setExpandedChapters } = useContext(SidebarContextApi);
   const { expandedChapters } = useContext(SidebarContextState);
 
   useEffect(() => {
     if (isSelectedChapter) {
-      const initialState = getItemAncestors(
-        props.level,
-        props.index,
-        ancestorsMap
-      );
+      const initialState = getItemAncestors(chapterId, ancestorsMap);
       const expandedItemsList =
         initialState.length > 0 ? initialState : [chapterId];
 
@@ -356,6 +360,7 @@ const Chapter = (props) => {
     if (expandedChapters?.includes(chapterId)) {
       // close the chapter (and all its descendants, if any)
       const descendants = getItemDescendants(
+        chapterId,
         props.level,
         props.index,
         ancestorsMap
@@ -402,6 +407,7 @@ const Chapter = (props) => {
                   index={pageIndex}
                   level={1}
                   chapter={page}
+                  parentChapterId={chapterId}
                   location={props.location}
                   onLinkClick={props.onLinkClick}
                   nextScrollPosition={props.nextScrollPosition}
@@ -429,6 +435,7 @@ const Chapter = (props) => {
 Chapter.propTypes = {
   index: PropTypes.number.isRequired,
   level: PropTypes.number.isRequired,
+  parentChapterId: PropTypes.string,
   chapter: PropTypes.object.isRequired,
   onLinkClick: PropTypes.func,
   nextScrollPosition: PropTypes.number.isRequired,

packages/gatsby-theme-docs/src/layouts/internals/sidebar.utils.js

@@ -1,17 +1,23 @@
-export const getItemDescendants = (level, index, ancestorsMap) => {
+export const getItemDescendants = (
+  subChapterId,
+  level,
+  index,
+  ancestorsMap
+) => {
   const chapterId = `${level}-${index}`;
   if (level === 1) {
-    return [chapterId];
+    return [subChapterId];
   } else {
     const descendantsArray = ancestorsMap.filter((element) =>
       element.includes(chapterId)
     );
-    return [].concat(...descendantsArray);
+    return (chapterId.includes('#') ? [subChapterId] : []).concat(
+      ...descendantsArray
+    );
   }
 };
 
-export const getItemAncestors = (level, index, ancestorsMap) => {
-  const chapterId = `${level}-${index}`;
+export const getItemAncestors = (chapterId, ancestorsMap) => {
   const ancestorsArray = ancestorsMap.filter(
     (element) => element.includes(chapterId) && element.indexOf(chapterId) > 0
   );

websites/docs-smoke-test/src/content/empty-pages-2/empty-page-eight.mdx

@@ -0,0 +1,3 @@
+---
+title: Empty page
+---

websites/docs-smoke-test/src/content/empty-pages-2/empty-page-eleven.mdx

@@ -0,0 +1,3 @@
+---
+title: Empty page
+---

websites/docs-smoke-test/src/content/empty-pages-2/empty-page-five.mdx

@@ -0,0 +1,3 @@
+---
+title: Empty page
+---

websites/docs-smoke-test/src/content/empty-pages-2/empty-page-four.mdx

@@ -0,0 +1,3 @@
+---
+title: Empty page
+---

websites/docs-smoke-test/src/content/empty-pages-2/empty-page-fourteen.mdx

@@ -0,0 +1,3 @@
+---
+title: Empty page
+---

websites/docs-smoke-test/src/content/empty-pages-2/empty-page-nine.mdx

@@ -0,0 +1,3 @@
+---
+title: Empty page
+---

websites/docs-smoke-test/src/content/empty-pages-2/empty-page-one.mdx

@@ -0,0 +1,3 @@
+---
+title: Empty page
+---

websites/docs-smoke-test/src/content/empty-pages-2/empty-page-seven.mdx

@@ -0,0 +1,3 @@
+---
+title: Empty page
+---

websites/docs-smoke-test/src/content/empty-pages-2/empty-page-six.mdx

@@ -0,0 +1,3 @@
+---
+title: Empty page
+---

websites/docs-smoke-test/src/content/empty-pages-2/empty-page-ten.mdx

@@ -0,0 +1,3 @@
+---
+title: Empty page
+---

websites/docs-smoke-test/src/content/empty-pages-2/empty-page-thirteen.mdx

@@ -0,0 +1,3 @@
+---
+title: Empty page
+---

websites/docs-smoke-test/src/content/empty-pages-2/empty-page-three.mdx

@@ -0,0 +1,3 @@
+---
+title: Empty page
+---

websites/docs-smoke-test/src/content/empty-pages-2/empty-page-twelve.mdx

@@ -0,0 +1,3 @@
+---
+title: Empty page
+---

websites/docs-smoke-test/src/content/empty-pages-2/empty-page-two.mdx

@@ -0,0 +1,3 @@
+---
+title: Empty page
+---

websites/docs-smoke-test/src/content/empty-pages-2/overview-1.mdx

@@ -0,0 +1,10 @@
+---
+title: Empty pages
+showTimeToRead: false
+timeToRead: false
+---
+
+# Contents of this chapter
+
+- [PageWithLongNameThatOverflowsBecauseItsOneWord](/empty-pages/empty-page-three)
+- [BetaPageWithLongNameThatOverflowsBecauseItsOneWord](/empty-pages/empty-page-four)

websites/docs-smoke-test/src/content/empty-pages-2/overview.mdx

@@ -0,0 +1,10 @@
+---
+title: Empty pages
+showTimeToRead: false
+timeToRead: false
+---
+
+# Contents of this chapter
+
+- [Page with some very long title too much for our innocent API to handle](/empty-pages/empty-page-one)
+- [Beta Page with some very long title too much for our innocent API to handle](/empty-pages/empty-page-two)

websites/docs-smoke-test/src/data/navigation.yaml

@@ -69,6 +69,30 @@
           path: /empty-pages/empty-page-ten
         - title: third level page 3
           path: /empty-pages/empty-page-eleven
+- chapter-title: Further Subchapters
+  pages:
+    - title: Subchapter One
+      pages:
+        - title: third level page 1
+          path: /empty-pages-2/empty-page-five
+        - title: third level page 2
+          path: /empty-pages-2/empty-page-six
+        - title: third level page 3
+          path: /empty-pages-2/empty-page-seven
+    - title: Normal Chapter 1
+      path: /empty-pages-2/empty-page-twelve
+    - title: Normal Chapter 2
+      path: /empty-pages-2/empty-page-thirteen
+    - title: Normal Chapter 3
+      path: /empty-pages-2/empty-page-fourteen
+    - title: Subchapter Two
+      pages:
+        - title: third level page 1
+          path: /empty-pages-2/empty-page-nine
+        - title: third level page 2
+          path: /empty-pages-2/empty-page-ten
+        - title: third level page 3
+          path: /empty-pages-2/empty-page-eleven
 - chapter-title: Chapter 9999 With a Longer Multi-Word Name that Wraps
   pages:
     - title: Page with some very long title too much for our innocent API to handle