diff --git a/.github/workflows/cypress.yml b/.github/workflows/cypress.yml index e4bd6678..19fa7b98 100644 --- a/.github/workflows/cypress.yml +++ b/.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 diff --git a/cypress/e2e/collapsed.cy.ts b/cypress/e2e/collapsed.cy.ts new file mode 100644 index 00000000..44872e0c --- /dev/null +++ b/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); + }); +}); diff --git a/cypress/fixtures/items.ts b/cypress/fixtures/items.ts index d351ca74..2d57c4fd 100644 --- a/cypress/fixtures/items.ts +++ b/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: [ { diff --git a/package.json b/package.json index 5a04523d..f73ae4e6 100644 --- a/package.json +++ b/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", diff --git a/src/config/selectors.ts b/src/config/selectors.ts index e8b16168..9ef1a447 100644 --- a/src/config/selectors.ts +++ b/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"]'; diff --git a/src/modules/item/Item.tsx b/src/modules/item/Item.tsx index 2aa3bd03..3b89bca4 100644 --- a/src/modules/item/Item.tsx +++ b/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 ( + + {withCollapse({ item })( + // eslint-disable-next-line @typescript-eslint/no-use-before-define + , + )} + + ); + } + return ( + // eslint-disable-next-line @typescript-eslint/no-use-before-define + + ); +}; + 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 - - ); + return ; } default: diff --git a/yarn.lock b/yarn.lock index 679b624d..dd55db55 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1561,9 +1561,9 @@ __metadata: languageName: node linkType: hard -"@cypress/request@npm:2.88.12": - version: 2.88.12 - resolution: "@cypress/request@npm:2.88.12" +"@cypress/request@npm:^3.0.0": + version: 3.0.1 + resolution: "@cypress/request@npm:3.0.1" dependencies: aws-sign2: ~0.7.0 aws4: ^1.8.0 @@ -1578,12 +1578,12 @@ __metadata: json-stringify-safe: ~5.0.1 mime-types: ~2.1.19 performance-now: ^2.1.0 - qs: ~6.10.3 + qs: 6.10.4 safe-buffer: ^5.1.2 tough-cookie: ^4.1.3 tunnel-agent: ^0.6.0 uuid: ^8.3.2 - checksum: 2c6fbf7f3127d41bffca8374beaa8cf95450495a8a077b00309ea9d94dd2a4da450a77fe038e8ad26c97cdd7c39b65c53c850f8338ce9bc2dbe23ce2e2b48329 + checksum: 7175522ebdbe30e3c37973e204c437c23ce659e58d5939466615bddcd58d778f3a8ea40f087b965ae8b8138ea8d102b729c6eb18c6324f121f3778f4a2e8e727 languageName: node linkType: hard @@ -2102,32 +2102,33 @@ __metadata: languageName: node linkType: hard -"@graasp/query-client@npm:1.7.0": - version: 1.7.0 - resolution: "@graasp/query-client@npm:1.7.0" +"@graasp/query-client@npm:1.8.2": + version: 1.8.2 + resolution: "@graasp/query-client@npm:1.8.2" dependencies: - "@graasp/sdk": 1.4.0 - "@graasp/translations": 1.19.0 + "@graasp/sdk": 1.6.0 + "@graasp/translations": 1.19.1 axios: 0.27.2 crypto-js: 4.1.1 http-status-codes: 2.2.0 immutable: 4.3.2 qs: 6.11.2 react-query: 3.39.3 - uuid: 9.0.0 + uuid: 9.0.1 peerDependencies: - react: ^17.0.0 - checksum: b4488bc85cb2e8fa6cb3efb02a3e3a50af988b1cc049a34cf4dcad2aa2c3fd9b6a48aaac2a807612c9fedf7a99fcb6caef43942774d5a81b0cf0b62727abeb16 + react: ^17.0.0 || ^18.0.0 + checksum: 0a08a7a8aab70c7a82e93d58685520247a93afabbe19f8e20ad6b3cd090f0ffd44df43a3a9d55e1746e404861cbcd855bcad149f3a0c240ed4fd0a380d2099b0 languageName: node linkType: hard -"@graasp/sdk@npm:1.4.0": - version: 1.4.0 - resolution: "@graasp/sdk@npm:1.4.0" +"@graasp/sdk@npm:1.6.0": + version: 1.6.0 + resolution: "@graasp/sdk@npm:1.6.0" dependencies: "@aws-sdk/client-s3": 3.370.0 "@fastify/secure-session": 6.1.0 "@graasp/etherpad-api": 2.1.1 + date-fns: 2.30.0 fastify: 4.18.0 fluent-json-schema: 4.1.0 immutable: 4.3.2 @@ -2136,7 +2137,7 @@ __metadata: typeorm: 0.3.17 uuid: 9.0.0 validator: 13.11.0 - checksum: 224ed990ed7b68fe4b463d2d1e24fc503c5f5434703cb818a54d22ee9aa8e9997c3a02768ceec082bea604853aa4804ac4d454c746e38089e3e327e0ffcd4c27 + checksum: 6e115053e1eb3596238fddbe7df9cd453ac042ebbc54051d2dde85a40d31988ce96853b2fdf7e957a18530c788689ab56c4aef08ff2eb5896699022aaf10afcd languageName: node linkType: hard @@ -2149,20 +2150,20 @@ __metadata: languageName: node linkType: hard -"@graasp/translations@npm:1.19.0": - version: 1.19.0 - resolution: "@graasp/translations@npm:1.19.0" +"@graasp/translations@npm:1.19.1": + version: 1.19.1 + resolution: "@graasp/translations@npm:1.19.1" dependencies: i18next: 23.4.6 - checksum: b204158615ee2cb50c7aa9e993d52a4d8ec473c1d5c934f9926905eb7e019d46f900273dad896cf04911cf675d0b645e5b3b4c6f61f9ed58a0fa7aeda18fe734 + checksum: cceb6b31585866276302991bbe45e902742aa5b861dede970d0f76f4fcb40a9a93b37706556b81bb7547de83233b97f52bfa0208067c0af2df09f39c8616eb16 languageName: node linkType: hard -"@graasp/ui@npm:3.4.0": - version: 3.4.0 - resolution: "@graasp/ui@npm:3.4.0" +"@graasp/ui@npm:3.5.1": + version: 3.5.1 + resolution: "@graasp/ui@npm:3.5.1" dependencies: - "@graasp/sdk": 1.4.0 + "@graasp/sdk": 1.6.0 http-status-codes: 2.2.0 immutable: 4.3.2 katex: 0.16.8 @@ -2173,6 +2174,7 @@ __metadata: react-quill: 2.0.0-beta.4 react-rnd: 10.4.1 react-text-mask: 5.5.0 + short-uuid: 4.2.2 uuid: 9.0.0 peerDependencies: "@emotion/cache": ~11.10.7 || ~11.11.0 @@ -2195,7 +2197,7 @@ __metadata: optional: true ag-grid-react: optional: true - checksum: fc12ceaf940a5e0869346067427819eaa10cda9e531fd833b5324042ec7e5f32987ff40713079f03b69ae62fb68248b545d8ab97ada5c70fcedf5b8a0a55f3cd + checksum: 24ddabc4bc084b30da52df86a48e45b98e82078610f9065a4597ce7d00cd2b3fa41e2b0c832f992dc83610c386666368ffcb2e81fe69736aff316b2f0506714f languageName: node linkType: hard @@ -3289,13 +3291,6 @@ __metadata: languageName: node linkType: hard -"@types/node@npm:^16.18.39": - version: 16.18.46 - resolution: "@types/node@npm:16.18.46" - checksum: 1aed3fe9693f2098b8dac8c76c809c1925a456da00dd6f06c1ccb55c62ccfbbe7ec43ccfd12001f9cb4ff84e138292ae53456435dfecd5c4bb1324394c3e09c7 - languageName: node - linkType: hard - "@types/node@npm:^18.13.0": version: 18.17.12 resolution: "@types/node@npm:18.17.12" @@ -3303,6 +3298,13 @@ __metadata: languageName: node linkType: hard +"@types/node@npm:^18.17.5": + version: 18.18.0 + resolution: "@types/node@npm:18.18.0" + checksum: 61bcffa28eb713e7a4c66fd369df603369c3f834a783faeced95fe3e78903faa25f1a704d49e054f41d71b7915eeb066d10a37cc699421fcf5dd267f96ad5808 + languageName: node + linkType: hard + "@types/normalize-package-data@npm:^2.4.0": version: 2.4.1 resolution: "@types/normalize-package-data@npm:2.4.1" @@ -3743,6 +3745,13 @@ __metadata: languageName: node linkType: hard +"any-base@npm:^1.1.0": + version: 1.1.0 + resolution: "any-base@npm:1.1.0" + checksum: c1fd040de52e710e2de7d9ae4df52bac589f35622adb24686c98ce21c7b824859a8db9614bc119ed8614f42fd08918b2612e6a6c385480462b3100a1af59289d + languageName: node + linkType: hard + "any-promise@npm:^1.0.0": version: 1.3.0 resolution: "any-promise@npm:1.3.0" @@ -4897,13 +4906,13 @@ __metadata: languageName: node linkType: hard -"cypress@npm:12.17.4": - version: 12.17.4 - resolution: "cypress@npm:12.17.4" +"cypress@npm:13.2.0": + version: 13.2.0 + resolution: "cypress@npm:13.2.0" dependencies: - "@cypress/request": 2.88.12 + "@cypress/request": ^3.0.0 "@cypress/xvfb": ^1.2.4 - "@types/node": ^16.18.39 + "@types/node": ^18.17.5 "@types/sinonjs__fake-timers": 8.1.1 "@types/sizzle": ^2.3.2 arch: ^2.2.0 @@ -4946,7 +4955,7 @@ __metadata: yauzl: ^2.10.0 bin: cypress: bin/cypress - checksum: c9c79f5493b23e9c8cfb92d45d50ea9d0fae54210dde203bfa794a79436faf60108d826fe9007a7d67fddf7919802ad8f006b7ae56c5c198c75d5bc85bbc851b + checksum: 7647814f07626bd63e7b8dc4d066179fa40bf492c588bbc2626d983a2baab6cb77c29958dc92442f277e0a8e94866decc51c4de306021739c47e32baf5970219 languageName: node linkType: hard @@ -4973,7 +4982,7 @@ __metadata: languageName: node linkType: hard -"date-fns@npm:^2.29.3, date-fns@npm:^2.30.0": +"date-fns@npm:2.30.0, date-fns@npm:^2.29.3, date-fns@npm:^2.30.0": version: 2.30.0 resolution: "date-fns@npm:2.30.0" dependencies: @@ -6769,10 +6778,10 @@ __metadata: "@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 @@ -6790,7 +6799,7 @@ __metadata: clsx: 1.2.1 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 @@ -9834,21 +9843,21 @@ __metadata: languageName: node linkType: hard -"qs@npm:6.11.2": - version: 6.11.2 - resolution: "qs@npm:6.11.2" +"qs@npm:6.10.4": + version: 6.10.4 + resolution: "qs@npm:6.10.4" dependencies: side-channel: ^1.0.4 - checksum: e812f3c590b2262548647d62f1637b6989cc56656dc960b893fe2098d96e1bd633f36576f4cd7564dfbff9db42e17775884db96d846bebe4f37420d073ecdc0b + checksum: 31e4fedd759d01eae52dde6692abab175f9af3e639993c5caaa513a2a3607b34d8058d3ae52ceeccf37c3025f22ed5e90e9ddd6c2537e19c0562ddd10dc5b1eb languageName: node linkType: hard -"qs@npm:~6.10.3": - version: 6.10.4 - resolution: "qs@npm:6.10.4" +"qs@npm:6.11.2": + version: 6.11.2 + resolution: "qs@npm:6.11.2" dependencies: side-channel: ^1.0.4 - checksum: 31e4fedd759d01eae52dde6692abab175f9af3e639993c5caaa513a2a3607b34d8058d3ae52ceeccf37c3025f22ed5e90e9ddd6c2537e19c0562ddd10dc5b1eb + checksum: e812f3c590b2262548647d62f1637b6989cc56656dc960b893fe2098d96e1bd633f36576f4cd7564dfbff9db42e17775884db96d846bebe4f37420d073ecdc0b languageName: node linkType: hard @@ -10792,6 +10801,16 @@ __metadata: languageName: node linkType: hard +"short-uuid@npm:4.2.2": + version: 4.2.2 + resolution: "short-uuid@npm:4.2.2" + dependencies: + any-base: ^1.1.0 + uuid: ^8.3.2 + checksum: 5b718a026897f34483bc95cebb6814cff45538d462583053be9003403f459a104ea88ed893fa462589ef040abd454bf499298d55fa0081d61d987ab85cbf3fe4 + languageName: node + linkType: hard + "side-channel@npm:^1.0.4": version: 1.0.4 resolution: "side-channel@npm:1.0.4" @@ -11955,6 +11974,15 @@ __metadata: languageName: node linkType: hard +"uuid@npm:9.0.1": + version: 9.0.1 + resolution: "uuid@npm:9.0.1" + bin: + uuid: dist/bin/uuid + checksum: 39931f6da74e307f51c0fb463dc2462807531dc80760a9bff1e35af4316131b4fc3203d16da60ae33f07fdca5b56f3f1dd662da0c99fea9aaeab2004780cc5f4 + languageName: node + linkType: hard + "uuid@npm:^8.3.2": version: 8.3.2 resolution: "uuid@npm:8.3.2"