feat: remove uppy and use upload hooks

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

@@ -48,7 +48,7 @@ describe('Create Link', () => {
     });
   });
 
-  it('create folder in item', () => {
+  it('create link in item', () => {
     const FOLDER = PackedFolderItemFactory();
 
     cy.setUpApi({ items: [FOLDER] });

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

@@ -0,0 +1,65 @@
+import { ItemType, PackedFolderItemFactory } from '@graasp/sdk';
+
+import { HOME_PATH, buildItemPath } from '../../../../src/config/paths';
+import {
+  CREATE_ITEM_BUTTON_ID,
+  H5P_DASHBOARD_UPLOADER_ID,
+} from '../../../../src/config/selectors';
+import ItemLayoutMode from '../../../../src/enums/itemLayoutMode';
+import { createItem } from '../../../support/createUtils';
+
+const NEW_H5P_ITEM = {
+  filepath: 'files/accordion.h5p',
+  type: ItemType.H5P,
+};
+
+describe('Import H5P', () => {
+  it('import h5p on Home', () => {
+    cy.setUpApi();
+    cy.visit(HOME_PATH);
+
+    cy.switchMode(ItemLayoutMode.List);
+
+    // create
+
+    createItem(NEW_H5P_ITEM);
+
+    // check interface didn't crash
+    cy.wait(2000);
+    cy.get(`#${CREATE_ITEM_BUTTON_ID}`).should('be.visible');
+  });
+
+  it('create file in item', () => {
+    const FOLDER = PackedFolderItemFactory();
+
+    cy.setUpApi({ items: [FOLDER] });
+    const { id } = FOLDER;
+    cy.visit(buildItemPath(id));
+
+    cy.switchMode(ItemLayoutMode.List);
+
+    // create
+    createItem(NEW_H5P_ITEM);
+
+    // check interface didn't crash
+    cy.wait(3000);
+    cy.get(`#${CREATE_ITEM_BUTTON_ID}`).should('be.visible');
+  });
+
+  it('catch error', () => {
+    const FOLDER = PackedFolderItemFactory();
+
+    cy.setUpApi({ items: [FOLDER], importH5pError: true });
+    const { id } = FOLDER;
+    cy.visit(buildItemPath(id));
+
+    cy.switchMode(ItemLayoutMode.List);
+
+    // create
+    createItem(NEW_H5P_ITEM);
+
+    // H5P Upload button is still visible
+    cy.wait(3000);
+    cy.get(`#${H5P_DASHBOARD_UPLOADER_ID}`).should('be.visible');
+  });
+});

cypress/e2e/item/home/home.cy.ts

@@ -10,7 +10,7 @@ import { HOME_PATH, ITEMS_PATH } from '../../../../src/config/paths';
 import {
   ACCESSIBLE_ITEMS_NEXT_PAGE_BUTTON_SELECTOR,
   ACCESSIBLE_ITEMS_ONLY_ME_ID,
-  ITEMS_GRID_NO_ITEM_ID,
+  DROPZONE_HELPER_ID,
   ITEMS_GRID_PAGINATION_ID,
   ITEMS_TABLE_ROW,
   ITEM_SEARCH_INPUT_ID,
@@ -193,8 +193,8 @@ describe('Home', () => {
         const { id: childChildId } = FOLDER_CHILD;
         cy.goToItemInGrid(childChildId);
 
-        // expect no children
-        cy.get(`#${ITEMS_GRID_NO_ITEM_ID}`).should('exist');
+        // expect dropzone
+        cy.get(`#${DROPZONE_HELPER_ID}`).should('exist');
 
         // return parent with navigation and should display children
         cy.wait(NAVIGATION_LOAD_PAUSE);

cypress/e2e/item/upload/dropzoneUpload.cy.ts

@@ -11,7 +11,7 @@ describe('Dropzone Helper Visibility', () => {
       cy.setUpApi();
     });
 
-    it(' should display the dropzone on the home screen when no items', () => {
+    it('should display the dropzone on the home screen when no items', () => {
       cy.visit('/');
       cy.get(`#${DROPZONE_HELPER_ID}`).should('be.visible');
     });

cypress/support/commands.ts

@@ -66,6 +66,7 @@ import {
   mockGetRecycledItems,
   mockGetSharedItems,
   mockGetShortLinksItem,
+  mockImportH5p,
   mockImportZip,
   mockMoveItems,
   mockPatchAppData,
@@ -162,6 +163,7 @@ Cypress.Commands.add(
     postShortLinkError = false,
     patchShortLinkError = false,
     deleteShortLinkError = false,
+    importH5pError = false,
   } = {}) => {
     const cachedItems = JSON.parse(JSON.stringify(items));
     const cachedMembers = JSON.parse(JSON.stringify(members));
@@ -344,6 +346,8 @@ Cypress.Commands.add(
     mockDeleteShortLink(cachedShortLinks, deleteShortLinkError);
 
     mockGetLinkMetadata();
+
+    mockImportH5p(importH5pError);
   },
 );
 

cypress/support/createUtils.ts

@@ -12,9 +12,11 @@ import {
   CREATE_ITEM_CLOSE_BUTTON_ID,
   CREATE_ITEM_DOCUMENT_ID,
   CREATE_ITEM_FILE_ID,
+  CREATE_ITEM_H5P_ID,
   CREATE_ITEM_LINK_ID,
   CREATE_ITEM_ZIP_ID,
   DASHBOARD_UPLOADER_ID,
+  H5P_DASHBOARD_UPLOADER_ID,
   ZIP_DASHBOARD_UPLOADER_ID,
 } from '../../src/config/selectors';
 import { InternalItemType } from '../../src/config/types';
@@ -80,7 +82,10 @@ export const createFile = (
 
 // todo: question: only used by import zip ??
 export const createItem = (
-  payload: DiscriminatedItem | ZIPInternalItem,
+  payload:
+    | DiscriminatedItem
+    | ZIPInternalItem
+    | { type: 'h5p'; filepath: string },
   options?: { confirm?: boolean },
 ): void => {
   cy.get(`#${CREATE_ITEM_BUTTON_ID}`).click();
@@ -114,14 +119,17 @@ export const createItem = (
     case InternalItemType.ZIP: {
       cy.get(`#${CREATE_ITEM_ZIP_ID}`).click();
 
+      // drag-drop a file in the uploader
+      cy.attachFile(cy.get(`#${ZIP_DASHBOARD_UPLOADER_ID}`), payload?.filepath);
+      break;
+    }
+    case ItemType.H5P: {
+      cy.get(`#${CREATE_ITEM_H5P_ID}`).click();
+
       // drag-drop a file in the uploader
       cy.attachFile(
-        cy.get(`#${ZIP_DASHBOARD_UPLOADER_ID} .uppy-Dashboard-input`).first(),
-        payload?.filepath,
-        {
-          action: 'drag-drop',
-          force: true,
-        },
+        cy.get(`#${H5P_DASHBOARD_UPLOADER_ID}`),
+        (payload as { filepath: string })?.filepath,
       );
       break;
     }

cypress/support/server.ts

@@ -54,7 +54,6 @@ const {
   buildEditItemRoute,
   buildItemUnpublishRoute,
   buildGetItemRoute,
-  buildPostItemRoute,
   GET_OWN_ITEMS_ROUTE,
   buildPostItemMembershipRoute,
   buildGetMember,
@@ -104,6 +103,7 @@ const {
   buildPatchShortLinkRoute,
   buildDeleteShortLinkRoute,
   buildDeleteItemThumbnailRoute,
+  buildImportH5PRoute,
 } = API_ROUTES;
 
 const API_HOST = Cypress.env('VITE_GRAASP_API_HOST');
@@ -244,11 +244,7 @@ export const mockPostItem = (
   cy.intercept(
     {
       method: HttpMethod.Post,
-      url: new RegExp(
-        `${API_HOST}/${parseStringToRegExp(
-          buildPostItemRoute(ID_FORMAT),
-        )}$|${API_HOST}/${buildPostItemRoute()}$`,
-      ),
+      url: new RegExp(`${API_HOST}/items\\?parentId|${API_HOST}/items$`),
     },
     ({ body, reply }) => {
       if (shouldThrowError) {
@@ -825,11 +821,29 @@ export const mockImportZip = (shouldThrowError: boolean): void => {
         return reply({ statusCode: StatusCodes.BAD_REQUEST });
       }
 
-      return reply();
+      return reply({ statusCode: StatusCodes.ACCEPTED });
     },
   ).as('importZip');
 };
 
+export const mockImportH5p = (shouldThrowError: boolean): void => {
+  cy.intercept(
+    {
+      method: HttpMethod.Post,
+      url: new RegExp(
+        `${API_HOST}/${parseStringToRegExp(buildImportH5PRoute())}`,
+      ),
+    },
+    ({ reply }) => {
+      if (shouldThrowError) {
+        return reply({ statusCode: StatusCodes.BAD_REQUEST });
+      }
+
+      return reply({ statusCode: StatusCodes.ACCEPTED });
+    },
+  ).as('importH5p');
+};
+
 export const mockDefaultDownloadFile = (
   items: ItemForTest[],
   shouldThrowError: boolean,

package.json

@@ -21,23 +21,14 @@
     "@emotion/styled": "11.11.5",
     "@graasp/chatbox": "3.1.0",
     "@graasp/map": "1.15.0",
-    "@graasp/query-client": "3.13.0",
-    "@graasp/sdk": "4.13.0",
+    "@graasp/query-client": "github:graasp/graasp-query-client#upload-files",
+    "@graasp/sdk": "4.14.0",
     "@graasp/translations": "1.28.0",
-    "@graasp/ui": "4.19.3",
+    "@graasp/ui": "github:graasp/graasp-ui#file-uploader",
     "@mui/icons-material": "5.15.19",
     "@mui/lab": "5.0.0-alpha.170",
     "@mui/material": "5.15.19",
     "@sentry/react": "7.117.0",
-    "@uppy/core": "3.11.3",
-    "@uppy/dashboard": "3.8.3",
-    "@uppy/drag-drop": "3.1.0",
-    "@uppy/file-input": "3.1.2",
-    "@uppy/progress-bar": "3.1.1",
-    "@uppy/react": "3.3.1",
-    "@uppy/status-bar": "3.3.3",
-    "@uppy/tus": "3.5.5",
-    "@uppy/xhr-upload": "3.6.7",
     "axios": "1.7.2",
     "date-fns": "3.6.0",
     "filesize": "10.1.2",

src/components/Root.tsx

@@ -1,7 +1,6 @@
 import './styles.css';
 import '@ag-grid-community/styles/ag-grid.min.css';
 import '@ag-grid-community/styles/ag-theme-material.min.css';
-import '@uppy/core/dist/style.css';
 // hack to have the text editor styles available without having to bundle them with graasp/ui
 import 'katex/dist/katex.min.css';
 import 'react-quill/dist/quill.snow.css';