fix: duplicated island (#742)

* fix: remove island when displaying a children * fix: island duplication bug
graasp · Jun 10, 2024 · 06c115f · 06c115f
1 parent 3634090
commit 06c115f
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 3 deletions.
diff --git a/cypress/e2e/island.cy.ts b/cypress/e2e/island.cy.ts
@@ -1,15 +1,23 @@
-import { PackedFolderItemFactory } from '@graasp/sdk';
+import {
+  DocumentItemExtra,
+  PackedFolderItemFactory,
+  getDocumentExtra,
+} from '@graasp/sdk';
 
 import { buildContentPagePath } from '@/config/paths';
 import {
   ITEM_CHATBOX_BUTTON_ID,
   ITEM_MAP_BUTTON_ID,
+  NAVIGATION_ISLAND_CY,
+  buildDataCyWrapper,
+  buildDocumentId,
   buildTreeItemClass,
 } from '@/config/selectors';
 
 import {
   DOCUMENT_WITHOUT_CHAT_BOX,
   DOCUMENT_WITH_CHAT_BOX,
+  getFolderWithShortcutFixture,
 } from '../fixtures/items';
 
 describe('Island', () => {
@@ -111,4 +119,19 @@ describe('Island', () => {
         .should('be.disabled');
     });
   });
+
+  it('Shows only one island when folder contains shortcut', () => {
+    const items = getFolderWithShortcutFixture();
+    const parent = items[0];
+    const documentTarget = items[1];
+    cy.setUpApi({ items });
+    cy.visit(buildContentPagePath({ rootId: parent.id, itemId: parent.id }));
+    cy.get(`#${buildDocumentId(documentTarget.id)}`).should(
+      'contain',
+      getDocumentExtra(documentTarget.extra as DocumentItemExtra).content,
+    );
+    cy.get(buildDataCyWrapper(NAVIGATION_ISLAND_CY))
+      .should('be.visible')
+      .and('have.length', 1);
+  });
 });
diff --git a/cypress/fixtures/items.ts b/cypress/fixtures/items.ts
@@ -1,4 +1,11 @@
-import { ItemType, PermissionLevel, buildPathFromIds } from '@graasp/sdk';
+import {
+  DocumentItemFactory,
+  FolderItemFactory,
+  ItemType,
+  PermissionLevel,
+  ShortcutItemFactory,
+  buildPathFromIds,
+} from '@graasp/sdk';
 import { DEFAULT_LANG } from '@graasp/translations';
 
 import { v4 } from 'uuid';
@@ -364,6 +371,30 @@ export const FOLDER_WITH_HIDDEN_ITEMS: { items: MockItem[] } = {
   ],
 };
 
+export const getFolderWithShortcutFixture = (): MockItem[] => {
+  const parent = FolderItemFactory({ name: 'Lesson', creator: CURRENT_USER });
+  const child = FolderItemFactory({
+    parentItem: parent,
+    name: 'Part 1',
+    creator: CURRENT_USER,
+  });
+  const documentItem = DocumentItemFactory({
+    extra: { document: { content: 'I am a document' } },
+    creator: CURRENT_USER,
+  });
+  return [
+    parent,
+    documentItem,
+    child,
+    DocumentItemFactory({ parentItem: parent, creator: CURRENT_USER }),
+    ShortcutItemFactory({
+      parentItem: parent,
+      creator: CURRENT_USER,
+      extra: { shortcut: { target: documentItem.id } },
+    }),
+  ];
+};
+
 export const FOLDER_WITH_COLLAPSIBLE_SHORTCUT_ITEMS: { items: MockItem[] } = {
   items: [
     // original for the shortcut

diff --git a/src/config/selectors.ts b/src/config/selectors.ts
@@ -37,6 +37,9 @@ export const buildTreeItemClass = (id: string): string => `buildTreeItem-${id}`;
 export const buildTreeShortcutItemClass = (id: string): string =>
   `buildTreeShortcutItem-${id}`;
 
+export const buildDataCyWrapper = (dataCy: string): string =>
+  `[data-cy="${dataCy}"]`;
+
 export const HEADER_MEMBER_MENU_BUTTON_ID = 'headerMemberMenuButton';
 export const HEADER_MEMBER_MENU_SEE_PROFILE_BUTTON_ID =
   'headerMemberMenuSeeProfileButton';
@@ -65,6 +68,8 @@ export const APP_NAVIGATION_PLATFORM_SWITCH_BUTTON_IDS = {
   [Platform.Analytics]: 'appNavigationPlatformSwitchButtonAnalytics',
 };
 
+export const NAVIGATION_ISLAND_CY = 'navigationIsland';
+
 export const TREE_NODE_GROUP_CLASS = 'tree-node-group';
 export const BACK_TO_SHORTCUT_ID = 'backToButtonShortcut';
 export const ITEM_MAP_BUTTON_ID = 'itemMapButton';
diff --git a/src/modules/item/Item.tsx b/src/modules/item/Item.tsx
@@ -513,7 +513,10 @@ const Item = ({
     return (
       <>
         <ItemContentWrapper item={item} />
-        <NavigationIsland />
+        {
+          // only render the island when the item is not a children
+          isChildren ? false : <NavigationIsland />
+        }
       </>
     );
   }

diff --git a/src/modules/navigationIsland/NavigationIsland.tsx b/src/modules/navigationIsland/NavigationIsland.tsx
@@ -1,5 +1,7 @@
 import { Box, Stack } from '@mui/material';
 
+import { NAVIGATION_ISLAND_CY } from '@/config/selectors';
+
 import useChatButton from './ChatButton';
 // import useGeolocationButton from './GeolocationButton';
 import usePinnedItemsButton from './PinnedItemsButton';
@@ -24,6 +26,7 @@ const NavigationIslandBox = (): JSX.Element | false => {
 
   return (
     <Box
+      data-cy={NAVIGATION_ISLAND_CY}
       // set some background and shadow
       bgcolor="white"
       boxShadow="0px 3px 6px 0px rgba(0, 0, 0, 0.25)"