feat: remove uppy and use upload hooks (#1295)

* feat: remove uppy and use upload hooks * refactor: update tests * refactor: fix test * refactor: fix return type * refactor: update ui * refactor: update deps
graasp · Jun 26, 2024 · 153f503 · 153f503
1 parent f937836
commit 153f503
Show file tree

Hide file tree

Showing 51 changed files with 1,077 additions and 1,910 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -5,38 +5,35 @@
     "prettier",
     "plugin:@typescript-eslint/recommended",
     "plugin:react-hooks/recommended",
-    "eslint:recommended"
-  ],
-  "plugins": [
-    "@typescript-eslint",
-    "react-hooks"
+    "eslint:recommended",
   ],
+  "plugins": ["@typescript-eslint", "react-hooks"],
   "env": {
     "browser": true,
     "node": true,
     "mocha": true,
-    "jest": true
+    "jest": true,
   },
   "globals": {
     "cy": true,
     "Cypress": true,
-    "JSX": "readonly"
+    "JSX": "readonly",
   },
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "ecmaFeatures": {
-      "jsx": true
+      "jsx": true,
     },
     "ecmaVersion": "latest",
-    "sourceType": "module"
+    "sourceType": "module",
   },
   "rules": {
     "import/order": "off",
     "react/function-component-definition": [
       2,
       {
-        "namedComponents": "arrow-function"
-      }
+        "namedComponents": "arrow-function",
+      },
     ],
     "react/jsx-uses-react": "off",
     "react/react-in-jsx-scope": "off",
@@ -49,31 +46,16 @@
     "jsx-a11y/anchor-is-valid": [
       "error",
       {
-        "components": [
-          "Link"
-        ],
-        "specialLink": [
-          "to",
-          "hrefLeft",
-          "hrefRight"
-        ],
-        "aspects": [
-          "noHref",
-          "invalidHref",
-          "preferButton"
-        ]
-      }
+        "components": ["Link"],
+        "specialLink": ["to", "hrefLeft", "hrefRight"],
+        "aspects": ["noHref", "invalidHref", "preferButton"],
+      },
     ],
     "react/jsx-filename-extension": [
       "warn",
       {
-        "extensions": [
-          ".js",
-          ".jsx",
-          ".ts",
-          ".tsx"
-        ]
-      }
+        "extensions": [".js", ".jsx", ".ts", ".tsx"],
+      },
     ],
     "import/no-named-as-default": "off",
     "react/static-property-placement": [
@@ -85,20 +67,15 @@
         "contextType": "static public field",
         "defaultProps": "static public field",
         "displayName": "static public field",
-        "propTypes": "static public field"
-      }
-    ],
-    "react/state-in-constructor": [
-      "error",
-      "never"
+        "propTypes": "static public field",
+      },
     ],
+    "react/state-in-constructor": ["error", "never"],
     "no-console": [
       1,
       {
-        "allow": [
-          "error"
-        ]
-      }
+        "allow": ["error"],
+      },
     ],
     "import/extensions": [
       "error",
@@ -107,87 +84,60 @@
         "js": "never",
         "jsx": "never",
         "ts": "never",
-        "tsx": "never"
-      }
+        "tsx": "never",
+      },
     ],
     "react/prop-types": "off",
     "react/require-default-props": "off",
     // eslint rule reports false error
     "no-shadow": "off",
-    "@typescript-eslint/no-shadow": [
-      "error"
-    ],
+    "@typescript-eslint/no-shadow": ["error"],
     "no-unused-vars": "off",
     "@typescript-eslint/no-unused-vars": [
       "error",
       {
         "argsIgnorePattern": "^_",
         "varsIgnorePattern": "^_",
-        "caughtErrorsIgnorePattern": "^_"
-      }
+        "caughtErrorsIgnorePattern": "^_",
+      },
     ],
     "import/no-extraneous-dependencies": [
       "error",
       {
-        "devDependencies": true
-      }
+        "devDependencies": true,
+      },
     ],
+    "import/prefer-default-export": "off",
   },
   "overrides": [
     {
       // enable the rule specifically for TypeScript files
-      "files": [
-        "*.ts",
-        "*.tsx"
-      ],
+      "files": ["*.ts", "*.tsx"],
       "rules": {
-        "@typescript-eslint/explicit-module-boundary-types": [
-          "error"
-        ]
-      }
+        "@typescript-eslint/explicit-module-boundary-types": ["error"],
+      },
     },
     {
       // enable the rule specifically for src files
-      "files": [
-        "src/**/*.js",
-        "src/**/*.tsx",
-        "src/**/*.ts"
-      ],
+      "files": ["src/**/*.js", "src/**/*.tsx", "src/**/*.ts"],
       "rules": {
-        "no-restricted-syntax": [
-          "error"
-        ]
-      }
-    }
+        "no-restricted-syntax": ["error"],
+      },
+    },
   ],
   "settings": {
-    "import/extensions": [
-      ".js",
-      ".jsx",
-      ".ts",
-      ".tsx"
-    ],
+    "import/extensions": [".js", ".jsx", ".ts", ".tsx"],
     "import/parsers": {
-      "@typescript-eslint/parser": [
-        ".ts",
-        ".tsx"
-      ]
+      "@typescript-eslint/parser": [".ts", ".tsx"],
     },
     "import/resolver": {
       "typescript": {
-        "directory": "./tsconfig.json"
+        "directory": "./tsconfig.json",
       },
       "node": {
-        "extensions": [
-          ".js",
-          ".jsx",
-          ".ts",
-          ".tsx"
-        ]
-      }
-    }
+        "extensions": [".js", ".jsx", ".ts", ".tsx"],
+      },
+    },
   },
-  "ignorePatterns": [
-    "node_modules/*"
-  ]
+  "ignorePatterns": ["node_modules/*"],
 }
diff --git a/cypress/e2e/item/create/createLink.cy.ts b/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] });

diff --git a/cypress/e2e/item/create/importH5p.cy.ts b/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');
+  });
+});
diff --git a/cypress/e2e/item/home/home.cy.ts b/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);

diff --git a/cypress/e2e/item/upload/dropzoneUpload.cy.ts b/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');
     });

diff --git a/cypress/fixtures/files/accordion.h5p b/cypress/fixtures/files/accordion.h5p
diff --git a/cypress/fixtures/invitations.ts b/cypress/fixtures/invitations.ts
@@ -43,7 +43,6 @@ const itemsWithInvitations: DiscriminatedItem[] = [
   }),
 ];
 
-// eslint-disable-next-line import/prefer-default-export
 export const ITEMS_WITH_INVITATIONS: ApiConfig = {
   items: [
     itemsWithInvitations[0],

diff --git a/cypress/fixtures/navigationItems.ts b/cypress/fixtures/navigationItems.ts
@@ -3,7 +3,6 @@ import { DiscriminatedItem, ItemType, buildDocumentExtra } from '@graasp/sdk';
 import { DEFAULT_FOLDER_ITEM } from './items';
 import { CURRENT_USER } from './members';
 
-// eslint-disable-next-line import/prefer-default-export
 export const FOLDER_WITH_TWO_DOCUMENTS: DiscriminatedItem[] = [
   {
     ...DEFAULT_FOLDER_ITEM,

diff --git a/cypress/support/commands.ts b/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);
   },
 );