Merge branch 'main' of https://github.com/graasp/graasp-builder into …

…542-bugs-reporting

.github/workflows/cypress.yml

@@ -4,8 +4,6 @@ name: Cypress CI
 on:
   # Triggers the workflow on push events except for the main branch
   push:
-    branches-ignore:
-      - main
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.head_ref || github.ref }}
@@ -18,12 +16,12 @@ jobs:
     timeout-minutes: 50
     steps:
       - name: Check out code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: '18'
+          node-version: 18
 
       - name: Yarn Install and Cache
         uses: graasp/graasp-deploy/.github/actions/yarn-install-and-cache@v1
@@ -56,7 +54,6 @@ jobs:
           install: false
           # we launch the app in preview mode to avoid issues with hmr websockets from vite polluting the mocks
           start: yarn preview:test
-          browser: chrome
           quiet: true
           config-file: cypress.config.ts
           cache-key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}

cypress.config.ts

@@ -19,12 +19,6 @@ export default defineConfig({
     setupNodeEvents(on, config) {
       // eslint-disable-next-line @typescript-eslint/no-var-requires, global-require
       require('@cypress/code-coverage/task')(on, config);
-      on('before:browser:launch', (browser, launchOptions) => {
-        if (browser.name === 'chrome' && browser.isHeadless) {
-          launchOptions.args.push('--headless=old');
-        }
-        return launchOptions;
-      });
       return config;
     },
     baseUrl: `http://localhost:${process.env.VITE_PORT || 3333}`,

cypress/e2e/item/create/createApp.cy.ts

@@ -1,6 +1,9 @@
 import { HOME_PATH, buildItemPath } from '../../../../src/config/paths';
 import ITEM_LAYOUT_MODES from '../../../../src/enums/itemLayoutModes';
-import { GRAASP_APP_ITEM } from '../../../fixtures/apps';
+import {
+  GRAASP_APP_ITEM,
+  GRAASP_CUSTOM_APP_ITEM,
+} from '../../../fixtures/apps';
 import { SAMPLE_ITEMS } from '../../../fixtures/items';
 import { createApp } from '../../../support/createUtils';
 
@@ -56,7 +59,7 @@ describe('Create App', () => {
       });
     });
 
-    it('Create app by typing', () => {
+    it('Create a custom app', () => {
       cy.setUpApi(SAMPLE_ITEMS);
       const { id } = SAMPLE_ITEMS.items[0];
 
@@ -66,7 +69,7 @@ describe('Create App', () => {
       cy.switchMode(ITEM_LAYOUT_MODES.LIST);
 
       // create
-      createApp(GRAASP_APP_ITEM);
+      createApp(GRAASP_CUSTOM_APP_ITEM, { custom: true });
 
       cy.wait('@postItem').then(() => {
         // expect update

cypress/e2e/item/download/downloadItem.cy.ts

@@ -0,0 +1,42 @@
+import { buildDownloadButtonId } from '@/config/selectors';
+import { ITEM_LAYOUT_MODES } from '@/enums';
+
+import { SHARED_ITEMS_PATH, buildItemPath } from '../../../../src/config/paths';
+import { SAMPLE_PUBLIC_ITEMS } from '../../../fixtures/items';
+import { SIGNED_OUT_MEMBER } from '../../../fixtures/members';
+import { SHARED_ITEMS } from '../../../fixtures/sharedItems';
+
+describe('Download Item', () => {
+  it('Table View', () => {
+    cy.setUpApi(SHARED_ITEMS);
+    cy.visit(SHARED_ITEMS_PATH);
+    cy.wait('@getSharedItems').then(({ response: { body } }) => {
+      for (const item of body) {
+        cy.get(`#${buildDownloadButtonId(item.id)}`).should('exist');
+      }
+    });
+  });
+  it('Grid view', () => {
+    cy.setUpApi(SHARED_ITEMS);
+    cy.visit(SHARED_ITEMS_PATH);
+    cy.switchMode(ITEM_LAYOUT_MODES.GRID);
+    cy.wait('@getSharedItems').then(({ response: { body } }) => {
+      for (const item of body) {
+        cy.get(`#${buildDownloadButtonId(item.id)}`).should('exist');
+      }
+    });
+  });
+  it('download button for public item should be exist', () => {
+    const currentMember = SIGNED_OUT_MEMBER;
+    cy.setUpApi({
+      ...SAMPLE_PUBLIC_ITEMS,
+      currentMember,
+    });
+    const item = SAMPLE_PUBLIC_ITEMS.items[4];
+    cy.visit(buildItemPath(item.id));
+    cy.wait('@getItem').then(({ response: { body } }) => {
+      expect(body.id).to.equal(item.id);
+      cy.get(`#${buildDownloadButtonId(item.id)}`).should('exist');
+    });
+  });
+});

cypress/e2e/item/share/shareItem.cy.ts

@@ -1,12 +1,16 @@
 import { Context, ItemLoginSchemaType, ItemTagType } from '@graasp/sdk';
 
+import shortUUID from 'short-uuid';
+
 import { buildItemPath } from '@/config/paths';
 
 import { SETTINGS } from '../../../../src/config/constants';
 import {
   SHARE_ITEM_DIALOG_LINK_ID,
   SHARE_ITEM_DIALOG_LINK_SELECT_ID,
   SHARE_ITEM_PSEUDONYMIZED_SCHEMA_ID,
+  SHARE_ITEM_QR_BTN_ID,
+  SHARE_ITEM_QR_DIALOG_ID,
   SHARE_ITEM_VISIBILITY_SELECT_ID,
   buildShareButtonId,
 } from '../../../../src/config/selectors';
@@ -37,16 +41,17 @@ describe('Share Item', () => {
     cy.visit(buildItemPath(item.id));
     openShareItemTab(item.id);
 
+    const { fromUUID } = shortUUID();
     // sharing link
     cy.get(`#${SHARE_ITEM_DIALOG_LINK_ID}`).should(
       'contain',
-      `${buildGraaspPlayerView(item.id)}`,
+      `${buildGraaspPlayerView(fromUUID(item.id))}`,
     );
     cy.get(`#${SHARE_ITEM_DIALOG_LINK_SELECT_ID}`).click();
     cy.get(`li[data-value="${Context.Builder}"]`).click();
     cy.get(`#${SHARE_ITEM_DIALOG_LINK_ID}`).should(
       'have.text',
-      `${buildGraaspBuilderView(item.id)}`,
+      `${buildGraaspBuilderView(fromUUID(item.id))}`,
     );
 
     const visiblitySelect = cy.get(
@@ -126,4 +131,15 @@ describe('Share Item', () => {
       expect(url).to.include(item.id);
     });
   });
+
+  it('Share Item with QR Code', () => {
+    cy.setUpApi({ ...SAMPLE_PUBLIC_ITEMS });
+    const item = SAMPLE_PUBLIC_ITEMS.items[0];
+    cy.visit(buildItemPath(item.id));
+    openShareItemTab(item.id);
+
+    cy.get(`#${SHARE_ITEM_QR_BTN_ID}`).click();
+
+    cy.get(`#${SHARE_ITEM_QR_DIALOG_ID}`).should('exist');
+  });
 });

cypress/fixtures/apps.ts

@@ -23,7 +23,19 @@ export const GRAASP_APP_ITEM: AppItemType = {
   ...DEFAULT_FOLDER_ITEM,
   id: 'ecafbd2a-5688-12eb-ae91-0272ac130002',
   path: 'ecafbd2a_5688_12eb_ae91_0272ac130002',
-  name: 'my app',
+  name: 'test app',
+  description: 'my app description',
+  type: ItemType.APP,
+  extra: {
+    [ItemType.APP]: { url: APPS_LIST[0].url },
+  },
+  creator: CURRENT_USER,
+};
+export const GRAASP_CUSTOM_APP_ITEM: AppItemType = {
+  ...DEFAULT_FOLDER_ITEM,
+  id: 'ecafbd2a-5688-12eb-ae91-0272ac130002',
+  path: 'ecafbd2a_5688_12eb_ae91_0272ac130002',
+  name: 'Add Your Custom App',
   description: 'my app description',
   type: ItemType.APP,
   extra: {

cypress/fixtures/apps/apps.ts

@@ -2,6 +2,7 @@ import { App, Publisher } from '@graasp/sdk';
 
 export const APP_NAME = 'test app';
 export const NEW_APP_NAME = 'my new test app';
+export const CUSTOM_APP_URL = 'http://testapp.com';
 
 export const publisher: Publisher = {
   id: 'publisher-id',

cypress/fixtures/files.ts

@@ -26,6 +26,7 @@ export const IMAGE_ITEM_DEFAULT: LocalFileItemForTest = {
     size: 32439,
     mimetype: 'image/png',
     altText: 'myAltText',
+    content: '',
   }),
   // for testing: creating needs a fixture, reading needs an url
   createFilepath: ICON_FILEPATH,
@@ -50,6 +51,7 @@ export const IMAGE_ITEM_DEFAULT_WITH_MAX_WIDTH: LocalFileItemForTest = {
     size: 32439,
     mimetype: 'image/png',
     altText: 'myAltText',
+    content: '',
   }),
   // for testing: creating needs a fixture, reading needs an url
   createFilepath: ICON_FILEPATH,
@@ -72,6 +74,7 @@ export const VIDEO_ITEM_DEFAULT: LocalFileItemForTest = {
     size: 52345,
     mimetype: MimeTypes.Video.MP4,
     altText: 'myAltText',
+    content: '',
   }),
   // for testing: creating needs a fixture, reading needs an url
   createFilepath: VIDEO_FILEPATH,
@@ -94,6 +97,7 @@ export const PDF_ITEM_DEFAULT: LocalFileItemForTest = {
     size: 54321,
     mimetype: MimeTypes.PDF,
     altText: 'myAltText',
+    content: '',
   }),
   // for testing: creating needs a fixture, reading needs an url
   createFilepath: ICON_FILEPATH,
@@ -121,6 +125,7 @@ export const IMAGE_ITEM_S3: S3FileItemForTest = {
     mimetype: MimeTypes.Image.PNG,
     name: 'myfile',
     altText: 'myAltText',
+    content: '',
   }),
   // for testing: creating needs a fixture, reading needs an url
   createFilepath: ICON_FILEPATH,
@@ -143,6 +148,7 @@ export const VIDEO_ITEM_S3: S3FileItemForTest = {
     mimetype: MimeTypes.Video.MP4,
     name: 'myfile',
     altText: 'myAltText',
+    content: '',
   }),
   // for testing: creating needs a fixture, reading needs an url
   createFilepath: VIDEO_FILEPATH,
@@ -165,6 +171,7 @@ export const PDF_ITEM_S3: S3FileItemForTest = {
     mimetype: MimeTypes.PDF,
     name: 'myfile',
     altText: 'myAltText',
+    content: '',
   }),
   // for testing: creating needs a fixture, reading needs an url
   createFilepath: ICON_FILEPATH,

cypress/support/commands/item.ts

@@ -1,6 +1,7 @@
 import { ItemType, getAppExtra, getDocumentExtra } from '@graasp/sdk';
 
 import {
+  CUSTOM_APP_URL_ID,
   FOLDER_FORM_DESCRIPTION_ID,
   ITEM_FORM_APP_URL_ID,
   ITEM_FORM_CONFIRM_BUTTON_ID,
@@ -17,7 +18,11 @@ import {
   buildTreeItemId,
 } from '../../../src/config/selectors';
 import { getParentsIdsFromPath } from '../../../src/utils/item';
-import { APP_NAME, NEW_APP_NAME } from '../../fixtures/apps/apps';
+import {
+  APP_NAME,
+  CUSTOM_APP_URL,
+  NEW_APP_NAME,
+} from '../../fixtures/apps/apps';
 import { TREE_VIEW_PAUSE } from '../constants';
 
 Cypress.Commands.add(
@@ -137,14 +142,20 @@ Cypress.Commands.add(
 
 Cypress.Commands.add(
   'fillAppModal',
-  ({ name = '', extra }, { confirm = true, type = false } = {}) => {
+  (
+    { name = '', extra },
+    { confirm = true, type = false, custom = false } = {},
+  ) => {
     cy.fillBaseItemModal({ name }, { confirm: false });
 
-    cy.get(`#${ITEM_FORM_APP_URL_ID}`).click();
     if (type) {
       cy.get(`#${ITEM_FORM_APP_URL_ID}`).type(getAppExtra(extra)?.url);
+    } else if (custom) {
+      cy.get(`#${buildItemFormAppOptionId(name)}`).click();
+      // check name get added automatically
+      cy.get(`#${CUSTOM_APP_URL_ID}`).type(CUSTOM_APP_URL);
     } else {
-      cy.get(`#${buildItemFormAppOptionId(APP_NAME)}`).click();
+      cy.get(`#${buildItemFormAppOptionId(name)}`).click();
       // check name get added automatically
       cy.get(`#${ITEM_FORM_NAME_INPUT_ID}`).should('have.value', APP_NAME);
       // edit the app name

cypress/support/createUtils.ts

@@ -23,7 +23,7 @@ import { FileItemForTest } from './types';
 
 export const createApp = (
   payload: AppItemType,
-  options?: { confirm?: boolean },
+  options?: { confirm?: boolean; custom?: boolean },
 ): void => {
   cy.get(`#${CREATE_ITEM_BUTTON_ID}`).click();
   cy.get(`#${CREATE_ITEM_APP_ID}`).click();

cypress/support/index.ts

@@ -63,7 +63,7 @@ declare global {
       ): void;
       fillAppModal(
         payload: { name: string; extra?: AppItemExtra },
-        options?: { type?: boolean; confirm?: boolean },
+        options?: { type?: boolean; confirm?: boolean; custom?: boolean },
       ): void;
       fillFolderModal(
         arg1: { name?: string; description?: string },

package.json

@@ -17,10 +17,10 @@
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
     "@graasp/chatbox": "2.0.1",
-    "@graasp/query-client": "1.5.0",
-    "@graasp/sdk": "1.4.0",
+    "@graasp/query-client": "1.8.2",
+    "@graasp/sdk": "1.6.0",
     "@graasp/translations": "1.19.0",
-    "@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",
@@ -55,11 +55,13 @@
     "react-ga4": "2.1.0",
     "react-i18next": "13.2.0",
     "react-image-crop": "9.1.1",
+    "react-qr-code": "2.0.12",
     "react-query": "3.39.3",
     "react-quill": "2.0.0",
     "react-router": "6.15.0",
     "react-router-dom": "6.15.0",
     "react-toastify": "9.1.3",
+    "short-uuid": "4.2.2",
     "stylis": "4.3.0",
     "stylis-plugin-rtl": "2.1.1",
     "uuid": "9.0.0",
@@ -124,7 +126,7 @@
     "@typescript-eslint/parser": "6.5.0",
     "@vitejs/plugin-react": "4.0.4",
     "concurrently": "8.2.1",
-    "cypress": "12.17.4",
+    "cypress": "13.2.0",
     "cypress-localstorage-commands": "2.2.4",
     "env-cmd": "10.1.0",
     "eslint": "^8.47.0",