fix: collapsible shortcuts

.github/workflows/cypress.yml

@@ -18,7 +18,7 @@ jobs:
     steps:
       # Check-out repository under $GITHUB_WORKSPACE, so the job can access it
       - name: Check out code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Yarn Install and Cache
         uses: graasp/graasp-deploy/.github/actions/yarn-install-and-cache@v1

cypress/e2e/collapsed.cy.ts

@@ -0,0 +1,22 @@
+import { buildMainPath } from '@/config/paths';
+import { buildCollapsibleId } from '@/config/selectors';
+
+import { FOLDER_WITH_COLLAPSIBLE_SHORTCUT_ITEMS } from '../fixtures/items';
+
+describe('Collapsible', () => {
+  beforeEach(() => {
+    cy.setUpApi({
+      items: FOLDER_WITH_COLLAPSIBLE_SHORTCUT_ITEMS.items,
+    });
+  });
+
+  it('Shows a collapsible wrapper around a collapsible shortcut', () => {
+    const parent = FOLDER_WITH_COLLAPSIBLE_SHORTCUT_ITEMS.items[1];
+    cy.visit(buildMainPath({ rootId: parent.id }));
+    const collapsedShortcut = FOLDER_WITH_COLLAPSIBLE_SHORTCUT_ITEMS.items[2];
+    // collapsible document should show as collapsed
+    cy.get(`#${buildCollapsibleId(collapsedShortcut.id)}`)
+      .should('be.visible')
+      .and('contain.text', collapsedShortcut.name);
+  });
+});

cypress/fixtures/items.ts

@@ -8,6 +8,7 @@ import {
 import { v4 } from 'uuid';
 
 import {
+  GRAASP_DOCUMENT_ITEM,
   GRAASP_DOCUMENT_ITEM_HIDDEN,
   GRAASP_DOCUMENT_ITEM_PUBLIC_HIDDEN,
   GRAASP_DOCUMENT_ITEM_PUBLIC_VISIBLE,
@@ -232,6 +233,33 @@ export const FOLDER_WITH_HIDDEN_ITEMS: { items: MockItem[] } = {
   ],
 };
 
+export const FOLDER_WITH_COLLAPSIBLE_SHORTCUT_ITEMS: { items: MockItem[] } = {
+  items: [
+    // original for the shortcut
+    GRAASP_DOCUMENT_ITEM,
+    {
+      ...DEFAULT_FOLDER_ITEM,
+      id: 'ecafbd2a-5688-11eb-ae93-0242ac130008',
+      name: 'parent folder',
+      path: 'ecafbd2a_5688_11eb_ae93_0242ac130008',
+      settings: {
+        isPinned: false,
+        showChatbox: false,
+      },
+    },
+    // shortcut with collapse enabled
+    {
+      ...GRAASP_DOCUMENT_ITEM_VISIBLE,
+      name: 'Shortcut to original document',
+      type: ItemType.SHORTCUT,
+      extra: {
+        [ItemType.SHORTCUT]: { target: 'ecafbd2a-5688-12eb-ae91-0242ac130002' },
+      },
+      settings: { isCollapsible: true },
+    },
+  ],
+};
+
 export const PUBLIC_FOLDER_WITH_HIDDEN_ITEMS: { items: MockItem[] } = {
   items: [
     {

package.json

@@ -35,10 +35,10 @@
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
     "@graasp/chatbox": "2.0.1",
-    "@graasp/query-client": "1.7.0",
-    "@graasp/sdk": "1.4.0",
+    "@graasp/query-client": "1.8.2",
+    "@graasp/sdk": "1.6.0",
     "@graasp/translations": "1.18.3",
-    "@graasp/ui": "3.4.0",
+    "@graasp/ui": "3.5.1",
     "@mui/icons-material": "5.14.6",
     "@mui/lab": "5.0.0-alpha.141",
     "@mui/material": "5.14.6",
@@ -74,7 +74,7 @@
     "@vitejs/plugin-react": "^4.0.4",
     "commitlint": "17.7.1",
     "concurrently": "8.2.1",
-    "cypress": "12.17.4",
+    "cypress": "13.2.0",
     "cypress-iframe": "1.0.1",
     "cypress-vite": "1.4.2",
     "env-cmd": "10.1.0",

src/config/selectors.ts

@@ -21,6 +21,10 @@ export const HIDDEN_WRAPPER_ID_CY = 'hiddenWrapper';
 export const buildHiddenWrapperId = (id: string, isHidden: boolean): string =>
   `${HIDDEN_WRAPPER_ID_CY}-${id}-${isHidden ? 'grayed' : 'visible'}`;
 
+export const COLLAPSIBLE_WRAPPER_ID = 'collapsibleWrapper';
+export const buildCollapsibleId = (id: string): string =>
+  `${COLLAPSIBLE_WRAPPER_ID}-${id}`;
+
 export const BUILDER_EDIT_BUTTON_ID = 'builderEditButton';
 
 export const PANEL_CLOSE_BUTTON_SELECTOR = '[data-testid="ChevronRightIcon"]';

src/modules/item/Item.tsx

@@ -14,6 +14,7 @@ import {
   ItemRecord,
   LocalFileItemTypeRecord,
   S3FileItemTypeRecord,
+  ShortcutItemTypeRecord,
 } from '@graasp/sdk/frontend';
 import { FAILURE_MESSAGES, PLAYER } from '@graasp/translations';
 import {
@@ -26,6 +27,7 @@ import {
   ItemSkeleton,
   LinkItem,
   TextEditor,
+  withCollapse,
 } from '@graasp/ui';
 
 import { List } from 'immutable';
@@ -41,6 +43,7 @@ import { hooks } from '@/config/queryClient';
 import {
   FOLDER_NAME_TITLE_CLASS,
   buildAppId,
+  buildCollapsibleId,
   buildDocumentId,
   buildFileId,
   buildFolderButtonId,
@@ -253,6 +256,27 @@ const H5PContent = ({ item }: { item: H5PItemTypeRecord }): JSX.Element => {
   );
 };
 
+const ShortcutContent = ({
+  item,
+}: {
+  item: ShortcutItemTypeRecord;
+}): JSX.Element => {
+  if (item.settings.isCollapsible) {
+    return (
+      <span id={buildCollapsibleId(item.id)}>
+        {withCollapse({ item })(
+          // eslint-disable-next-line @typescript-eslint/no-use-before-define
+          <Item isChildren id={item.extra?.shortcut?.target} />,
+        )}
+      </span>
+    );
+  }
+  return (
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    <Item isChildren id={item.extra?.shortcut?.target} />
+  );
+};
+
 type ItemContentProps = {
   item: ItemRecord;
 };
@@ -312,10 +336,7 @@ const ItemContent = ({ item }: ItemContentProps) => {
     }
 
     case ItemType.SHORTCUT: {
-      return (
-        // eslint-disable-next-line @typescript-eslint/no-use-before-define
-        <Item isChildren id={item.extra?.shortcut?.target} />
-      );
+      return <ShortcutContent item={item} />;
     }
 
     default: