fix: navigation crash on expand non-present parent ids (#573)

* fix: add failing test * fix: navigation crashes on expand non present parents * fix: apply suggested changes
graasp · Mar 20, 2024 · 9215ecc · 9215ecc
1 parent 1c50dc6
commit 9215ecc
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 1 deletion.
diff --git a/cypress/e2e/navigation.cy.ts b/cypress/e2e/navigation.cy.ts
@@ -59,4 +59,17 @@ describe('Navigation', () => {
     cy.get(`.${buildTreeItemClass(child.id)}`).should('be.visible');
     cy.get(`.${buildTreeItemClass(child1.id)}`).should('be.visible');
   });
+
+  it('navigate successfully when opening child as root', () => {
+    cy.setUpApi({ items: FOLDER_WITH_SUBFOLDER_ITEM.items });
+    const child = FOLDER_WITH_SUBFOLDER_ITEM.items[1];
+    cy.visit(buildMainPath({ rootId: child.id }));
+
+    const childOfChild = FOLDER_WITH_SUBFOLDER_ITEM.items[3];
+    // we need to to use the `:visible` meta selector because there are 2 navigations (one for mobile hidden, and one for desktop)
+    cy.get(`.${buildTreeItemClass(child.id)}:visible`).click();
+    cy.get(`.${buildTreeItemClass(childOfChild.id)}:visible`).should(
+      'be.visible',
+    );
+  });
 });
diff --git a/cypress/fixtures/items.ts b/cypress/fixtures/items.ts
@@ -113,6 +113,18 @@ export const FOLDER_WITH_SUBFOLDER_ITEM: { items: MockItem[] } = {
         showChatbox: false,
       },
     },
+    {
+      ...DEFAULT_FOLDER_ITEM,
+      id: 'fdf09f5a-5688-11eb-ae93-0242ac130006',
+      name: 'document inside of child folder',
+      type: 'document',
+      extra: { document: { content: 'hello I am a document' } },
+      path: 'ecafbd2a_5688_11eb_ae93_0242ac130002.fdf09f5a_5688_11eb_ae93_0242ac130003.fdf09f5a_5688_11eb_ae93_0242ac130005.fdf09f5a_5688_11eb_ae93_0242ac130006',
+      settings: {
+        isPinned: true,
+        showChatbox: false,
+      },
+    },
   ],
 };
 export const FOLDER_WITH_SUBFOLDER_ITEM_AND_PARTIAL_ORDER: {

diff --git a/src/modules/navigation/tree/TreeView.tsx b/src/modules/navigation/tree/TreeView.tsx
@@ -100,6 +100,15 @@ const TreeView = ({
     ? getIdsFromPath(focusedItem.path)
     : defaultExpandedIds;
 
+  // need to filter the expandedIds to only include items that are present in the tree
+  // we should not include parents that are above the current player root
+  const availableItemIds = itemsToShow?.map(({ id: itemId }) => itemId);
+  // filter the items to expand to only keep the ones that are present in the tree.
+  // if there are no items in the tree we short circuit the filtering
+  const accessibleExpandedItems = availableItemIds?.length
+    ? expandedIds.filter((e) => availableItemIds?.includes(e))
+    : [];
+
   return (
     <Box
       id={id}
@@ -127,7 +136,7 @@ const TreeView = ({
         })}
         nodeRenderer={nodeRenderer}
         selectedIds={selectedIds}
-        expandedIds={expandedIds}
+        expandedIds={accessibleExpandedItems}
       />
     </Box>
   );