feat: improve table and views (#1215)

* feat: allow drag and drop for list item * refactor: change new button layout * refactor: fix tests * refactor: fix small layout issues * refactor: fix small layout issues * refactor: fix small layout issues * refactor: set back packages
graasp · Jul 12, 2024 · 57da3f3 · 57da3f3
1 parent 05820cd
commit 57da3f3
Show file tree

Hide file tree

Showing 136 changed files with 4,510 additions and 4,970 deletions.
diff --git a/cypress/e2e/item/bookmarks/bookmarks.cy.ts b/cypress/e2e/item/bookmarks/bookmarks.cy.ts
@@ -3,15 +3,22 @@ import {
   PackedItemBookmarkFactory,
 } from '@graasp/sdk';
 
-import i18n from '../../../../src/config/i18n';
+import { SortingOptions } from '@/components/table/types';
+import { BUILDER } from '@/langs/constants';
+
+import i18n, { BUILDER_NAMESPACE } from '../../../../src/config/i18n';
 import { BOOKMARKED_ITEMS_PATH, HOME_PATH } from '../../../../src/config/paths';
 import {
+  BOOKMARKED_ITEMS_ERROR_ALERT_ID,
   BOOKMARKED_ITEMS_ID,
-  BOOKMARKED_ITEM_BUTTON_CLASS,
+  BOOKMARK_ICON_SELECTOR,
   CREATE_ITEM_BUTTON_ID,
-  buildItemMenu,
-  buildItemMenuButtonId,
-  buildItemsTableRowIdAttribute,
+  ITEM_SEARCH_INPUT_ID,
+  SORTING_ORDERING_SELECTOR_ASC,
+  SORTING_ORDERING_SELECTOR_DESC,
+  SORTING_SELECT_SELECTOR,
+  UNBOOKMARK_ICON_SELECTOR,
+  buildItemCard,
 } from '../../../../src/config/selectors';
 import { CURRENT_USER } from '../../../fixtures/members';
 
@@ -22,47 +29,66 @@ const BOOKMARKED_ITEMS = [
 const ITEMS = BOOKMARKED_ITEMS.map(({ item }) => item);
 const NON_BOOKMARKED_ITEM = PackedFolderItemFactory();
 
-const toggleBookmarkButton = (itemId: string) => {
-  // todo: remove when refactoring the table
-  cy.wait(500);
-  cy.get(`#${buildItemMenuButtonId(itemId)}`).click();
-  cy.get(`#${buildItemMenu(itemId)} .${BOOKMARKED_ITEM_BUTTON_CLASS}`).click();
+const removefromBookmark = (itemId: string) => {
+  cy.get(`#${buildItemCard(itemId)} ${UNBOOKMARK_ICON_SELECTOR}`).click();
+};
+
+const addToBookmark = (itemId: string) => {
+  cy.get(`#${buildItemCard(itemId)} ${BOOKMARK_ICON_SELECTOR}`).click();
 };
 
 describe('Bookmarked Item', () => {
   describe('Member has no bookmarked items', () => {
     beforeEach(() => {
       cy.setUpApi({
         items: ITEMS,
-        bookmarkedItems: BOOKMARKED_ITEMS,
       });
       cy.visit(BOOKMARKED_ITEMS_PATH);
     });
 
     it('Show empty table', () => {
-      cy.get(`#${BOOKMARKED_ITEMS_ID}`).should('exist');
+      i18n.changeLanguage(CURRENT_USER.extra.lang as string);
+      const text = i18n.t(BUILDER.BOOKMARKS_NO_ITEM, { ns: BUILDER_NAMESPACE });
+      cy.get(`#${BOOKMARKED_ITEMS_ID}`).should('contain', text);
     });
   });
 
-  describe('Member has several valid bookmarked items', () => {
+  describe('Member has bookmarked items', () => {
     beforeEach(() => {
       cy.setUpApi({
         items: [...ITEMS, NON_BOOKMARKED_ITEM],
         bookmarkedItems: BOOKMARKED_ITEMS,
       });
       i18n.changeLanguage(CURRENT_USER.extra.lang as string);
-      cy.visit(HOME_PATH);
+      cy.visit(BOOKMARKED_ITEMS_PATH);
+    });
+
+    it('Empty search', () => {
+      const searchText = 'mysearch';
+      cy.get(`#${ITEM_SEARCH_INPUT_ID}`).type(searchText);
+      const text = i18n.t(BUILDER.BOOKMARKS_NO_ITEM_SEARCH, {
+        search: searchText,
+        ns: BUILDER_NAMESPACE,
+      });
+      cy.get(`#${BOOKMARKED_ITEMS_ID}`).should('contain', text);
     });
 
     it("New button doesn't exist", () => {
-      cy.visit(BOOKMARKED_ITEMS_PATH);
       cy.get(`#${CREATE_ITEM_BUTTON_ID}`).should('not.exist');
     });
 
-    it('add item to bookmarks', () => {
+    it('Check bookmarked items view', () => {
+      for (const { item } of BOOKMARKED_ITEMS) {
+        cy.get(`#${buildItemCard(item.id)}`).should('be.visible');
+      }
+    });
+
+    it('Add item to bookmarks', () => {
+      cy.visit(HOME_PATH);
+
       const item = NON_BOOKMARKED_ITEM;
 
-      toggleBookmarkButton(item.id);
+      addToBookmark(item.id);
 
       cy.wait('@bookmarkItem').then(({ request }) => {
         expect(request.url).to.contain(item.id);
@@ -72,19 +98,40 @@ describe('Bookmarked Item', () => {
     it('remove item from bookmarks', () => {
       const itemId = ITEMS[1].id;
 
-      toggleBookmarkButton(itemId);
+      removefromBookmark(itemId);
 
       cy.wait('@unbookmarkItem').then(({ request }) => {
         expect(request.url).to.contain(itemId);
       });
     });
 
-    it('check bookmarked items view', () => {
-      cy.visit(BOOKMARKED_ITEMS_PATH);
-
-      const itemId = ITEMS[1].id;
+    it('Sorting & Ordering', () => {
+      cy.get(`${SORTING_SELECT_SELECTOR} input`).should(
+        'have.value',
+        SortingOptions.ItemUpdatedAt,
+      );
+      cy.get(SORTING_ORDERING_SELECTOR_DESC).should('be.visible');
+
+      cy.get(SORTING_SELECT_SELECTOR).click();
+      cy.get('li[data-value="item.name"]').click();
+
+      // check items are ordered by name
+      cy.get(`#${BOOKMARKED_ITEMS_ID} h5`).then(($e) => {
+        BOOKMARKED_ITEMS.sort((a, b) => (a.item.name < b.item.name ? 1 : -1));
+        for (let idx = 0; idx < BOOKMARKED_ITEMS.length; idx += 1) {
+          expect($e[idx].innerText).to.eq(BOOKMARKED_ITEMS[idx].item.name);
+        }
+      });
 
-      cy.get(buildItemsTableRowIdAttribute(itemId)).should('exist');
+      // change ordering
+      cy.get(SORTING_ORDERING_SELECTOR_DESC).click();
+      cy.get(SORTING_ORDERING_SELECTOR_ASC).should('be.visible');
+      cy.get(`#${BOOKMARKED_ITEMS_ID} h5`).then(($e) => {
+        BOOKMARKED_ITEMS.reverse();
+        for (let idx = 0; idx < BOOKMARKED_ITEMS.length; idx += 1) {
+          expect($e[idx].innerText).to.eq(BOOKMARKED_ITEMS[idx].item.name);
+        }
+      });
     });
   });
 
@@ -96,9 +143,7 @@ describe('Bookmarked Item', () => {
       });
       cy.visit(BOOKMARKED_ITEMS_PATH);
 
-      it('Show empty table', () => {
-        cy.get(`#${BOOKMARKED_ITEMS_ID}`).should('exist');
-      });
+      cy.get(`#${BOOKMARKED_ITEMS_ERROR_ALERT_ID}`).should('exist');
     });
   });
 });
diff --git a/cypress/e2e/item/copy/gridCopyItem.cy.ts → cypress/e2e/item/copy/copy.cy.ts b/cypress/e2e/item/copy/gridCopyItem.cy.ts → cypress/e2e/item/copy/copy.cy.ts
@@ -8,10 +8,8 @@ import {
   ITEM_MENU_COPY_BUTTON_CLASS,
   MY_GRAASP_ITEM_PATH,
   buildItemCard,
-  buildItemMenu,
-  buildItemMenuButtonId,
+  buildItemsGridMoreButtonSelector,
 } from '../../../../src/config/selectors';
-import { ItemLayoutMode } from '../../../../src/enums';
 
 const copyItem = ({
   id,
@@ -22,9 +20,8 @@ const copyItem = ({
   toItemPath: string;
   rootId?: string;
 }) => {
-  const menuSelector = `#${buildItemMenuButtonId(id)}`;
-  cy.get(menuSelector).click();
-  cy.get(`#${buildItemMenu(id)} .${ITEM_MENU_COPY_BUTTON_CLASS}`).click();
+  cy.get(buildItemsGridMoreButtonSelector(id)).click();
+  cy.get(`.${ITEM_MENU_COPY_BUTTON_CLASS}`).click();
   cy.handleTreeMenu(toItemPath, rootId);
 };
 
@@ -35,18 +32,17 @@ const FOLDER2 = PackedFolderItemFactory();
 
 const items = [IMAGE_ITEM, FOLDER, FOLDER2, IMAGE_ITEM_CHILD];
 
-describe('Copy Item in Grid', () => {
+describe('Copy Item', () => {
   it('copy item on Home', () => {
     cy.setUpApi({ items });
     cy.visit(HOME_PATH);
-    cy.switchMode(ItemLayoutMode.Grid);
 
     // copy
     const { id: copyItemId } = FOLDER;
     copyItem({ id: copyItemId, toItemPath: MY_GRAASP_ITEM_PATH });
 
     cy.wait('@copyItems').then(({ request: { url } }) => {
-      cy.get(`#${buildItemCard(copyItemId)}`).should('exist');
+      cy.get(`#${buildItemCard(copyItemId)}`).should('be.visible');
       expect(url).to.contain(copyItemId);
     });
   });
@@ -57,7 +53,6 @@ describe('Copy Item in Grid', () => {
 
     // go to children item
     cy.visit(buildItemPath(id));
-    cy.switchMode(ItemLayoutMode.Grid);
 
     // copy
     const { id: copyItemId } = IMAGE_ITEM_CHILD;
@@ -76,7 +71,6 @@ describe('Copy Item in Grid', () => {
 
     // go to children item
     cy.visit(buildItemPath(FOLDER.id));
-    cy.switchMode(ItemLayoutMode.Grid);
 
     // copy
     const { id } = IMAGE_ITEM_CHILD;

diff --git a/cypress/e2e/item/copy/listCopyItem.cy.ts b/cypress/e2e/item/copy/listCopyItem.cy.ts