build: move menu items tree

cypress/e2e/item/move/gridMoveItem.cy.ts

@@ -21,7 +21,7 @@ const moveItem = ({
     `#${buildItemMenu(movedItemId)} .${ITEM_MENU_MOVE_BUTTON_CLASS}`,
   ).click();
 
-  cy.fillTreeModal(toItemPath);
+  cy.handleTreeMenu(toItemPath);
 };
 
 describe('Move Item in Grid', () => {

cypress/e2e/item/move/listMoveItem.cy.ts

@@ -25,7 +25,7 @@ const moveItem = ({
     `#${buildItemMenu(movedItemId)} .${ITEM_MENU_MOVE_BUTTON_CLASS}`,
   ).click();
 
-  cy.fillTreeModal(toItemPath, rootId);
+  cy.handleTreeMenu(toItemPath, rootId);
 };
 
 describe('Move Item in List', () => {

cypress/e2e/item/move/listMoveMultiple.cy.ts

@@ -23,7 +23,7 @@ const moveItems = ({
 
   cy.wait(TABLE_ITEM_RENDER_TIME);
   cy.get(`#${ITEMS_TABLE_MOVE_SELECTED_ITEMS_ID}`).click();
-  cy.fillTreeModal(toItemPath);
+  cy.handleTreeMenu(toItemPath);
 };
 
 describe('Move Items in List', () => {

cypress/fixtures/items.ts

@@ -53,6 +53,11 @@ const sampleItems: DiscriminatedItem[] = [
     settings: {
       hasThumbnail: false,
     },
+    extra: {
+      [ItemType.FOLDER]: {
+        childrenOrder: ['fdf09f5a-5688-11eb-ae93-0242ac130004'],
+      },
+    },
   },
   {
     ...DEFAULT_FOLDER_ITEM,

cypress/support/commands/item.ts

@@ -15,6 +15,7 @@ import {
   TREE_MODAL_CONFIRM_BUTTON_ID,
   TREE_MODAL_MY_ITEMS_ID,
   buildItemFormAppOptionId,
+  buildItemRowArrowId,
   buildPermissionOptionId,
   buildTreeItemId,
 } from '../../../src/config/selectors';
@@ -44,6 +45,41 @@ Cypress.Commands.add(
   },
 );
 
+Cypress.Commands.add(
+  'handleTreeMenu',
+  (toItemPath, treeRootId = TREE_MODAL_MY_ITEMS_ID) => {
+    const ids = getParentsIdsFromPath(toItemPath);
+
+    cy.wait(TREE_VIEW_PAUSE);
+
+    [TREE_MODAL_MY_ITEMS_ID, ...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)}`)
+            .first()
+            .click();
+        }
+        // if can't find children click on parent (current value)
+        if (
+          idx !== array.length - 1 &&
+          !$tree.find(`#${buildTreeItemId(array[idx + 1], treeRootId)}`).length
+        ) {
+          cy.wrap($tree)
+            .get(`#${buildTreeItemId(value, treeRootId)}`)
+            .trigger('mouseover')
+            .get(`#${buildItemRowArrowId(value)}`)
+            .first()
+            .click();
+        }
+      });
+    });
+
+    cy.get(`#${TREE_MODAL_CONFIRM_BUTTON_ID}`).click();
+  },
+);
+
 Cypress.Commands.add(
   'fillTreeModal',
   (toItemPath, treeRootId = TREE_MODAL_MY_ITEMS_ID) => {
@@ -83,7 +119,6 @@ Cypress.Commands.add(
     cy.get(`#${TREE_MODAL_CONFIRM_BUTTON_ID}`).click();
   },
 );
-
 Cypress.Commands.add(
   'fillBaseItemModal',
   ({ name = '' }, { confirm = true } = {}) => {

cypress/support/index.ts

@@ -45,7 +45,7 @@ declare global {
       ): void;
 
       fillTreeModal(path: string, rootId?: string): void;
-
+      handleTreeMenu(path: string, rootId?: string): void;
       switchMode(mode: string): void;
       goToItemInGrid(path: string): void;
       goToItemInList(path: string): void;

src/components/common/MoveButton.tsx

@@ -1,4 +1,4 @@
-import { useContext } from 'react';
+import { useEffect, useState } from 'react';
 
 import { IconButtonProps } from '@mui/material/IconButton';
 
@@ -8,13 +8,18 @@ import {
   MoveButton as GraaspMoveButton,
 } from '@graasp/ui';
 
+import { validate } from 'uuid';
+
+import { mutations } from '@/config/queryClient';
+
 import { useBuilderTranslation } from '../../config/i18n';
 import {
   ITEM_MENU_MOVE_BUTTON_CLASS,
   ITEM_MOVE_BUTTON_CLASS,
+  TREE_MODAL_MY_ITEMS_ID,
 } from '../../config/selectors';
 import { BUILDER } from '../../langs/constants';
-import { MoveItemModalContext } from '../context/MoveItemModalContext';
+import TreeModal, { TreeModalProps } from '../main/MoveTreeModal';
 
 type MoveButtonProps = {
   itemIds: string[];
@@ -25,36 +30,78 @@ type MoveButtonProps = {
 };
 
 const MoveButton = ({
-  itemIds,
+  itemIds: defaultItemsIds,
   color = 'default',
   id,
   type = ActionButton.ICON_BUTTON,
   onClick,
-}: MoveButtonProps): JSX.Element | null => {
+}: MoveButtonProps): JSX.Element => {
   const { t: translateBuilder } = useBuilderTranslation();
+  const { mutate: moveItems } = mutations.useMoveItems();
 
-  const { openModal: openMoveModal } = useContext(MoveItemModalContext);
+  const [open, setOpen] = useState(false);
+  const [itemIds, setItemIds] = useState<string[] | null>(
+    defaultItemsIds || null,
+  );
 
-  // TODO: return error?
-  if (!openMoveModal) {
-    return null;
-  }
+  const openMoveModal = (newItemIds: string[]) => {
+    setOpen(true);
+    setItemIds(newItemIds);
+  };
+
+  const onClose = () => {
+    setOpen(false);
+    setItemIds(null);
+  };
+
+  const onConfirm: TreeModalProps['onConfirm'] = (payload) => {
+    // change item's root id to null
+    const newPayload = {
+      ...payload,
+      to:
+        payload.to &&
+        payload.to !== TREE_MODAL_MY_ITEMS_ID &&
+        validate(payload.to)
+          ? payload.to
+          : undefined,
+    };
+    moveItems(newPayload);
+    onClose();
+  };
+  useEffect(() => {
+    // sync itemIds with default one as there's no way to access setItemIds
+    setItemIds(defaultItemsIds);
+  }, [defaultItemsIds]);
 
   const handleMove = () => {
-    openMoveModal(itemIds);
-    onClick?.();
+    if (itemIds) {
+      openMoveModal(itemIds);
+      onClick?.();
+    }
   };
 
   return (
-    <GraaspMoveButton
-      color={color}
-      type={type}
-      id={id}
-      onClick={handleMove}
-      text={translateBuilder(BUILDER.MOVE_BUTTON)}
-      menuItemClassName={ITEM_MENU_MOVE_BUTTON_CLASS}
-      iconClassName={ITEM_MOVE_BUTTON_CLASS}
-    />
+    <>
+      <GraaspMoveButton
+        color={color}
+        type={type}
+        id={id}
+        onClick={handleMove}
+        text={translateBuilder(BUILDER.MOVE_BUTTON)}
+        menuItemClassName={ITEM_MENU_MOVE_BUTTON_CLASS}
+        iconClassName={ITEM_MOVE_BUTTON_CLASS}
+      />
+
+      {itemIds && (
+        <TreeModal
+          onClose={onClose}
+          open={open}
+          itemIds={itemIds}
+          onConfirm={onConfirm}
+          title={translateBuilder(BUILDER.MOVE_ITEM_MODAL_TITLE)}
+        />
+      )}
+    </>
   );
 };
 

src/components/context/ModalProviders.tsx

@@ -2,18 +2,15 @@ import { CopyItemModalProvider } from './CopyItemModalContext';
 import { CreateShortcutModalProvider } from './CreateShortcutModalContext';
 import { FlagItemModalProvider } from './FlagItemModalContext';
 import { LayoutContextProvider } from './LayoutContext';
-import { MoveItemModalProvider } from './MoveItemModalContext';
 
 type Props = { children: JSX.Element };
 
 const ModalProviders = ({ children }: Props): JSX.Element => (
   <LayoutContextProvider>
     <CopyItemModalProvider>
-      <MoveItemModalProvider>
-        <CreateShortcutModalProvider>
-          <FlagItemModalProvider>{children}</FlagItemModalProvider>
-        </CreateShortcutModalProvider>
-      </MoveItemModalProvider>
+      <CreateShortcutModalProvider>
+        <FlagItemModalProvider>{children}</FlagItemModalProvider>
+      </CreateShortcutModalProvider>
     </CopyItemModalProvider>
   </LayoutContextProvider>
 );

src/components/main/ItemMenu.tsx

@@ -128,36 +128,32 @@ const ItemMenu = ({
       >
         <MoreVertIcon />
       </IconButton>
-      {Boolean(anchorEl) && (
-        <Menu
-          id={buildItemMenu(item.id)}
-          anchorEl={anchorEl}
-          keepMounted
-          open={Boolean(anchorEl)}
-          onClose={handleClose}
+
+      <Menu
+        id={buildItemMenu(item.id)}
+        anchorEl={anchorEl}
+        keepMounted
+        open={Boolean(anchorEl)}
+        onClose={handleClose}
+      >
+        {renderAuthenticatedActions()}
+        {renderEditorActions()}
+        <MenuItem
+          onClick={handleCreateShortcut}
+          className={ITEM_MENU_SHORTCUT_BUTTON_CLASS}
         >
-          {renderAuthenticatedActions()}
-          {renderEditorActions()}
-          <MenuItem
-            onClick={handleCreateShortcut}
-            className={ITEM_MENU_SHORTCUT_BUTTON_CLASS}
-          >
-            <ListItemIcon>
-              <LabelImportantIcon />
-            </ListItemIcon>
-            {translateBuilder(BUILDER.ITEM_MENU_CREATE_SHORTCUT_MENU_ITEM)}
-          </MenuItem>
-          <MenuItem
-            onClick={handleFlag}
-            className={ITEM_MENU_FLAG_BUTTON_CLASS}
-          >
-            <ListItemIcon>
-              <FlagIcon />
-            </ListItemIcon>
-            {translateBuilder(BUILDER.ITEM_MENU_FLAG_MENU_ITEM)}
-          </MenuItem>
-        </Menu>
-      )}
+          <ListItemIcon>
+            <LabelImportantIcon />
+          </ListItemIcon>
+          {translateBuilder(BUILDER.ITEM_MENU_CREATE_SHORTCUT_MENU_ITEM)}
+        </MenuItem>
+        <MenuItem onClick={handleFlag} className={ITEM_MENU_FLAG_BUTTON_CLASS}>
+          <ListItemIcon>
+            <FlagIcon />
+          </ListItemIcon>
+          {translateBuilder(BUILDER.ITEM_MENU_FLAG_MENU_ITEM)}
+        </MenuItem>
+      </Menu>
     </>
   );
 };