feat: migrate Copy and CreateShortcut modals to ItemSelectionModal (#988

) feat: update showonlyme checkbox to switch fix: refetch queries on mount and update selection modal
graasp · Feb 9, 2024 · d11d13f · d11d13f
1 parent 94efc60
commit d11d13f
Show file tree

Hide file tree

Showing 44 changed files with 615 additions and 634 deletions.
diff --git a/cypress/e2e/item/copy/gridCopyItem.cy.ts b/cypress/e2e/item/copy/gridCopyItem.cy.ts
@@ -1,19 +1,27 @@
 import { HOME_PATH, buildItemPath } from '../../../../src/config/paths';
 import {
-  HOME_MODAL_ITEM_ID,
   ITEM_MENU_COPY_BUTTON_CLASS,
+  MY_GRAASP_ITEM_PATH,
   buildItemCard,
   buildItemMenu,
   buildItemMenuButtonId,
 } from '../../../../src/config/selectors';
 import { ITEM_LAYOUT_MODES } from '../../../../src/enums';
 import { SAMPLE_ITEMS } from '../../../fixtures/items';
 
-const copyItem = ({ id, toItemPath }: { id: string; toItemPath: string }) => {
+const copyItem = ({
+  id,
+  toItemPath,
+  rootId,
+}: {
+  id: string;
+  toItemPath: string;
+  rootId?: string;
+}) => {
   const menuSelector = `#${buildItemMenuButtonId(id)}`;
   cy.get(menuSelector).click();
   cy.get(`#${buildItemMenu(id)} .${ITEM_MENU_COPY_BUTTON_CLASS}`).click();
-  cy.fillTreeModal(toItemPath);
+  cy.handleTreeMenu(toItemPath, rootId);
 };
 
 describe('Copy Item in Grid', () => {
@@ -63,7 +71,7 @@ describe('Copy Item in Grid', () => {
 
     // copy
     const { id: copyItemId } = SAMPLE_ITEMS.items[2];
-    const toItemPath = HOME_MODAL_ITEM_ID;
+    const toItemPath = MY_GRAASP_ITEM_PATH;
     copyItem({ id: copyItemId, toItemPath });
 
     cy.wait('@copyItems').then(({ request: { url } }) => {

diff --git a/cypress/e2e/item/copy/listCopyItem.cy.ts b/cypress/e2e/item/copy/listCopyItem.cy.ts
@@ -1,19 +1,13 @@
+import { HOME_PATH, buildItemPath } from '../../../../src/config/paths';
 import {
-  HOME_PATH,
-  SHARED_ITEMS_PATH,
-  buildItemPath,
-} from '../../../../src/config/paths';
-import {
-  HOME_MODAL_ITEM_ID,
   ITEM_MENU_COPY_BUTTON_CLASS,
-  TREE_MODAL_SHARED_ITEMS_ID,
+  MY_GRAASP_ITEM_PATH,
   buildItemMenu,
   buildItemMenuButtonId,
   buildItemsTableRowIdAttribute,
 } from '../../../../src/config/selectors';
 import ITEM_LAYOUT_MODES from '../../../../src/enums/itemLayoutModes';
 import { SAMPLE_ITEMS } from '../../../fixtures/items';
-import { SHARED_ITEMS } from '../../../fixtures/sharedItems';
 
 const copyItem = ({
   id,
@@ -26,7 +20,7 @@ const copyItem = ({
 }) => {
   cy.get(`#${buildItemMenuButtonId(id)}`).click();
   cy.get(`#${buildItemMenu(id)} .${ITEM_MENU_COPY_BUTTON_CLASS}`).click();
-  cy.fillTreeModal(toItemPath, rootId);
+  cy.handleTreeMenu(toItemPath, rootId);
 };
 
 describe('Copy Item in List', () => {
@@ -76,33 +70,12 @@ describe('Copy Item in List', () => {
 
     // copy
     const { id: copyItemId } = SAMPLE_ITEMS.items[2];
-    copyItem({ id: copyItemId, toItemPath: HOME_MODAL_ITEM_ID });
+    copyItem({ id: copyItemId, toItemPath: MY_GRAASP_ITEM_PATH });
 
     cy.wait('@copyItems').then(({ request: { url } }) => {
       expect(url).to.contain(copyItemId);
 
       cy.get(buildItemsTableRowIdAttribute(copyItemId)).should('exist');
     });
   });
-
-  it('copy item in a shared item', () => {
-    cy.setUpApi(SHARED_ITEMS);
-    const { path } = SHARED_ITEMS.items[0];
-
-    // go to children item
-    cy.visit(SHARED_ITEMS_PATH);
-    cy.switchMode(ITEM_LAYOUT_MODES.LIST);
-
-    // copy
-    const { id: copyItemId } = SHARED_ITEMS.items[1];
-    copyItem({
-      id: copyItemId,
-      toItemPath: path,
-      rootId: TREE_MODAL_SHARED_ITEMS_ID,
-    });
-
-    cy.wait('@copyItems').then(() => {
-      cy.get(buildItemsTableRowIdAttribute(copyItemId)).should('exist');
-    });
-  });
 });
diff --git a/cypress/e2e/item/copy/listCopyMultiple.cy.ts b/cypress/e2e/item/copy/listCopyMultiple.cy.ts
@@ -1,7 +1,7 @@
 import { HOME_PATH, buildItemPath } from '../../../../src/config/paths';
 import {
-  HOME_MODAL_ITEM_ID,
   ITEMS_TABLE_COPY_SELECTED_ITEMS_ID,
+  MY_GRAASP_ITEM_PATH,
   buildItemsTableRowIdAttribute,
 } from '../../../../src/config/selectors';
 import ITEM_LAYOUT_MODES from '../../../../src/enums/itemLayoutModes';
@@ -10,17 +10,19 @@ import { SAMPLE_ITEMS } from '../../../fixtures/items';
 const copyItems = ({
   itemIds,
   toItemPath,
+  rootId,
 }: {
   itemIds: string[];
   toItemPath: string;
+  rootId?: string;
 }) => {
   // check selected ids
   itemIds.forEach((id) => {
     cy.get(`${buildItemsTableRowIdAttribute(id)} input`).click();
   });
 
   cy.get(`#${ITEMS_TABLE_COPY_SELECTED_ITEMS_ID}`).click();
-  cy.fillTreeModal(toItemPath);
+  cy.handleTreeMenu(toItemPath, rootId);
 };
 
 describe('Copy items in List', () => {
@@ -74,7 +76,7 @@ describe('Copy items in List', () => {
 
     // copy
     const itemIds = [SAMPLE_ITEMS.items[2].id, SAMPLE_ITEMS.items[4].id];
-    copyItems({ itemIds, toItemPath: HOME_MODAL_ITEM_ID });
+    copyItems({ itemIds, toItemPath: MY_GRAASP_ITEM_PATH });
 
     cy.wait('@copyItems').then(({ request: { url } }) => {
       itemIds.forEach((id) => {

diff --git a/cypress/e2e/item/create/createShortcut.cy.ts b/cypress/e2e/item/create/createShortcut.cy.ts
@@ -5,6 +5,7 @@ import * as qs from 'qs';
 import { HOME_PATH } from '../../../../src/config/paths';
 import {
   ITEM_MENU_SHORTCUT_BUTTON_CLASS,
+  MY_GRAASP_ITEM_PATH,
   buildItemMenu,
   buildItemMenuButtonId,
 } from '../../../../src/config/selectors';
@@ -16,12 +17,14 @@ import { SAMPLE_ITEMS } from '../../../fixtures/items';
 const createShortcut = ({
   id,
   toItemPath,
+  rootId,
 }: {
   id: string;
   toItemPath: string;
+  rootId?: string;
 }) => {
   cy.get(`#${buildItemMenu(id)} .${ITEM_MENU_SHORTCUT_BUTTON_CLASS}`).click();
-  cy.fillTreeModal(toItemPath);
+  cy.handleTreeMenu(toItemPath, rootId);
 };
 
 const createShortcutInGrid = ({
@@ -39,13 +42,15 @@ const createShortcutInGrid = ({
 const createShortcutInList = ({
   id,
   toItemPath,
+  rootId,
 }: {
   id: string;
   toItemPath?: string;
+  rootId?: string;
 }) => {
   const menuSelector = `#${buildItemMenuButtonId(id)}`;
   cy.get(menuSelector).click();
-  createShortcut({ id, toItemPath });
+  createShortcut({ id, toItemPath, rootId });
 };
 
 const checkCreateShortcutRequest = ({
@@ -77,8 +82,7 @@ describe('Create Shortcut', () => {
       cy.visit(HOME_PATH);
 
       const { id } = SAMPLE_ITEMS.items[0];
-      // toItemId: TREE_MODAL_MY_ITEMS_ID
-      createShortcutInList({ id });
+      createShortcutInList({ id, toItemPath: MY_GRAASP_ITEM_PATH });
 
       checkCreateShortcutRequest({ id });
     });
@@ -123,8 +127,7 @@ describe('Create Shortcut', () => {
       cy.switchMode(ITEM_LAYOUT_MODES.GRID);
 
       const { id } = SAMPLE_ITEMS.items[0];
-      // toItemId: TREE_MODAL_MY_ITEMS_ID
-      createShortcutInGrid({ id });
+      createShortcutInGrid({ id, toItemPath: MY_GRAASP_ITEM_PATH });
 
       checkCreateShortcutRequest({ id });
     });

diff --git a/cypress/e2e/item/move/gridMoveItem.cy.ts b/cypress/e2e/item/move/gridMoveItem.cy.ts
@@ -1,6 +1,7 @@
 import { HOME_PATH, buildItemPath } from '../../../../src/config/paths';
 import {
   ITEM_MENU_MOVE_BUTTON_CLASS,
+  MY_GRAASP_ITEM_PATH,
   buildItemMenu,
   buildItemMenuButtonId,
 } from '../../../../src/config/selectors';
@@ -69,7 +70,7 @@ describe('Move Item in Grid', () => {
 
     // move
     const { id: movedItem } = SAMPLE_ITEMS.items[2];
-    moveItem({ id: movedItem, toItemPath: 'selectionModalMyGraasp' });
+    moveItem({ id: movedItem, toItemPath: MY_GRAASP_ITEM_PATH });
 
     cy.wait('@moveItems').then(({ request: { body, url } }) => {
       expect(body.parentId).to.equal(undefined);

diff --git a/cypress/e2e/item/move/listMoveItem.cy.ts b/cypress/e2e/item/move/listMoveItem.cy.ts
@@ -1,6 +1,7 @@
 import { HOME_PATH, buildItemPath } from '../../../../src/config/paths';
 import {
   ITEM_MENU_MOVE_BUTTON_CLASS,
+  MY_GRAASP_ITEM_PATH,
   buildItemMenu,
   buildItemMenuButtonId,
   buildItemRowArrowId,
@@ -112,7 +113,7 @@ describe('Move Item in List', () => {
 
     // move
     const { id: movedItem } = SAMPLE_ITEMS.items[2];
-    moveItem({ id: movedItem, toItemPath: 'selectionModalMyGraasp' });
+    moveItem({ id: movedItem, toItemPath: MY_GRAASP_ITEM_PATH });
 
     cy.wait('@moveItems').then(({ request: { body, url } }) => {
       expect(body.parentId).to.equal(undefined);

diff --git a/cypress/e2e/item/move/listMoveMultiple.cy.ts b/cypress/e2e/item/move/listMoveMultiple.cy.ts
@@ -1,6 +1,7 @@
 import { HOME_PATH, buildItemPath } from '../../../../src/config/paths';
 import {
   ITEMS_TABLE_MOVE_SELECTED_ITEMS_ID,
+  MY_GRAASP_ITEM_PATH,
   buildItemsTableRowIdAttribute,
 } from '../../../../src/config/selectors';
 import { ITEM_LAYOUT_MODES } from '../../../../src/enums';
@@ -71,7 +72,7 @@ describe('Move Items in List', () => {
 
     // move
     const itemIds = [SAMPLE_ITEMS.items[2].id, SAMPLE_ITEMS.items[4].id];
-    moveItems({ itemIds, toItemPath: 'selectionModalMyGraasp' });
+    moveItems({ itemIds, toItemPath: MY_GRAASP_ITEM_PATH });
 
     cy.wait('@moveItems').then(({ request: { body, url } }) => {
       expect(body.parentId).to.equal(undefined);

diff --git a/cypress/support/commands/item.ts b/cypress/support/commands/item.ts
@@ -81,45 +81,6 @@ Cypress.Commands.add(
   },
 );
 
-Cypress.Commands.add(
-  'fillTreeModal',
-  (toItemPath, treeRootId = HOME_MODAL_ITEM_ID) => {
-    const ids = getParentsIdsFromPath(toItemPath);
-
-    cy.wait(TREE_VIEW_PAUSE);
-
-    [treeRootId, ...ids].forEach((value, idx, array) => {
-      cy.get(`#${treeRootId}`).then(($tree) => {
-        // click on the element
-        if (idx === array.length - 1) {
-          cy.wrap($tree)
-            .get(
-              `#${buildTreeItemId(value, treeRootId)} .MuiTreeItem-label input`,
-            )
-            .first()
-            .click();
-        }
-        // if can't find children click on parent (current value)
-        if (
-          idx !== array.length - 1 &&
-          !$tree.find(
-            `#${buildTreeItemId(
-              array[idx + 1],
-              treeRootId,
-            )} .MuiTreeItem-label`,
-          ).length
-        ) {
-          cy.wrap($tree)
-            .get(`#${buildTreeItemId(value, treeRootId)} .MuiTreeItem-label`)
-            .first()
-            .click();
-        }
-      });
-    });
-
-    cy.get(`#${TREE_MODAL_CONFIRM_BUTTON_ID}`).click();
-  },
-);
 Cypress.Commands.add(
   'fillBaseItemModal',
   ({ name = '' }, { confirm = true } = {}) => {

diff --git a/cypress/support/index.ts b/cypress/support/index.ts
@@ -44,7 +44,6 @@ declare global {
         wsClientStub: any,
       ): void;
 
-      fillTreeModal(path: string, rootId?: string): void;
       handleTreeMenu(path: string, rootId?: string): void;
       switchMode(mode: string): void;
       goToItemInGrid(path: string): void;

diff --git a/src/components/Root.tsx b/src/components/Root.tsx
@@ -22,6 +22,7 @@ import {
 import App from './App';
 import FallbackComponent from './Fallback';
 import { CurrentUserContextProvider } from './context/CurrentUserContext';
+import { FilterItemsContextProvider } from './context/FilterItemsContext';
 import ModalProviders from './context/ModalProviders';
 
 const Root = (): JSX.Element => (
@@ -34,7 +35,9 @@ const Root = (): JSX.Element => (
           <Router>
             <ModalProviders>
               <CurrentUserContextProvider>
-                <App />
+                <FilterItemsContextProvider>
+                  <App />
+                </FilterItemsContextProvider>
               </CurrentUserContextProvider>
             </ModalProviders>
           </Router>