refactor: apply pr requested changes

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

@@ -1,6 +1,5 @@
 import { HOME_PATH, buildItemPath } from '../../../../src/config/paths';
 import {
-  HOME_MODAL_ITEM_ID,
   ITEM_MENU_MOVE_BUTTON_CLASS,
   buildItemMenu,
   buildItemMenuButtonId,
@@ -51,7 +50,7 @@ describe('Move Item in Grid', () => {
 
     // move
     const { id: movedItem } = SAMPLE_ITEMS.items[2];
-    const { id: toItem, path: toItemPath } = SAMPLE_ITEMS.items[3];
+    const { id: toItem, path: toItemPath } = SAMPLE_ITEMS.items[1];
     moveItem({ id: movedItem, toItemPath });
 
     cy.wait('@moveItems').then(({ request: { body, url } }) => {
@@ -70,8 +69,7 @@ describe('Move Item in Grid', () => {
 
     // move
     const { id: movedItem } = SAMPLE_ITEMS.items[2];
-    const toItem = HOME_MODAL_ITEM_ID;
-    moveItem({ id: movedItem, toItemPath: toItem });
+    moveItem({ id: movedItem, toItemPath: 'selectionModalMyGraasp' });
 
     cy.wait('@moveItems').then(({ request: { body, url } }) => {
       expect(body.parentId).to.equal(undefined);

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

@@ -1,6 +1,5 @@
 import { HOME_PATH, buildItemPath } from '../../../../src/config/paths';
 import {
-  HOME_MODAL_ITEM_ID,
   ITEM_MENU_MOVE_BUTTON_CLASS,
   buildItemMenu,
   buildItemMenuButtonId,
@@ -57,7 +56,7 @@ describe('Move Item in List', () => {
 
     // move
     const { id: movedItem } = SAMPLE_ITEMS.items[2];
-    const { id: toItem, path: toItemPath } = SAMPLE_ITEMS.items[3];
+    const { id: toItem, path: toItemPath } = SAMPLE_ITEMS.items[1];
     moveItem({ id: movedItem, toItemPath });
 
     cy.wait('@moveItems').then(({ request: { body, url } }) => {
@@ -77,8 +76,7 @@ describe('Move Item in List', () => {
 
     // move
     const { id: movedItem } = SAMPLE_ITEMS.items[2];
-    const toItem = HOME_MODAL_ITEM_ID;
-    moveItem({ id: movedItem, toItemPath: toItem });
+    moveItem({ id: movedItem, toItemPath: 'selectionModalMyGraasp' });
 
     cy.wait('@moveItems').then(({ request: { body, url } }) => {
       expect(body.parentId).to.equal(undefined);

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

@@ -1,6 +1,5 @@
 import { HOME_PATH, buildItemPath } from '../../../../src/config/paths';
 import {
-  HOME_MODAL_ITEM_ID,
   ITEMS_TABLE_MOVE_SELECTED_ITEMS_ID,
   buildItemsTableRowIdAttribute,
 } from '../../../../src/config/selectors';
@@ -55,7 +54,7 @@ describe('Move Items in List', () => {
 
     // move
     const itemIds = [SAMPLE_ITEMS.items[2].id, SAMPLE_ITEMS.items[4].id];
-    const { id: toItem, path: toItemPath } = SAMPLE_ITEMS.items[3];
+    const { id: toItem, path: toItemPath } = SAMPLE_ITEMS.items[1];
     moveItems({ itemIds, toItemPath });
 
     cy.wait('@moveItems').then(({ request: { body, url } }) => {
@@ -75,8 +74,7 @@ describe('Move Items in List', () => {
 
     // move
     const itemIds = [SAMPLE_ITEMS.items[2].id, SAMPLE_ITEMS.items[4].id];
-    const toItem = HOME_MODAL_ITEM_ID;
-    moveItems({ itemIds, toItemPath: toItem });
+    moveItems({ itemIds, toItemPath: 'selectionModalMyGraasp' });
 
     cy.wait('@moveItems').then(({ request: { body, url } }) => {
       expect(body.parentId).to.equal(undefined);

src/components/main/itemSelectionModal/ItemSelectionModal.tsx

@@ -11,7 +11,10 @@ import { DiscriminatedItem } from '@graasp/sdk';
 
 import { useBuilderTranslation } from '../../../config/i18n';
 import { hooks } from '../../../config/queryClient';
-import { TREE_MODAL_CONFIRM_BUTTON_ID } from '../../../config/selectors';
+import {
+  HOME_MODAL_ITEM_ID,
+  TREE_MODAL_CONFIRM_BUTTON_ID,
+} from '../../../config/selectors';
 import { BUILDER } from '../../../langs/constants';
 import CancelButton from '../../common/CancelButton';
 import AccessibleNavigationTree from './AccessibleNavigationTree';
@@ -20,6 +23,7 @@ import ChildrenNavigationTree from './ChildrenNavigationTree';
 import RootNavigationTree from './RootNavigationTree';
 
 const dialogId = 'items-tree-modal';
+const MY_GRAASP_BREADCRUMB_ID = 'selectionModalMyGraasp';
 
 export type ItemSelectionModalProps = {
   buttonText: (itemName?: string) => string;
@@ -55,7 +59,7 @@ const ItemSelectionModal = ({
   // my graasp displays accessible items
   const MY_GRAASP_BREADCRUMB = {
     name: translateBuilder(BUILDER.MY_ITEMS_TITLE),
-    id: 'selectionModalMyGraasp',
+    id: MY_GRAASP_BREADCRUMB_ID,
   };
 
   const SPECIAL_BREADCRUMB_IDS = [ROOT_BREADCRUMB.id, MY_GRAASP_BREADCRUMB.id];
@@ -87,6 +91,12 @@ const ItemSelectionModal = ({
     handleClose();
   };
 
+  // row menu navigation
+  const onNavigate = (item: NavigationElement) => {
+    setSelectedNavigationItem(item);
+    setSelectedItem(item);
+  };
+
   // does not show breadcrumbs on root
   const renderBreadcrumbs = () => {
     if (selectedNavigationItem.id === ROOT_BREADCRUMB.id) {
@@ -112,21 +122,7 @@ const ItemSelectionModal = ({
     // element itself
     elements.push(selectedNavigationItem);
 
-    return (
-      <Breadcrumbs
-        elements={elements}
-        onSelect={(item: NavigationElement) => {
-          setSelectedNavigationItem(item);
-          setSelectedItem(item);
-        }}
-      />
-    );
-  };
-
-  // row menu navigation
-  const onNavigate = (item: NavigationElement) => {
-    setSelectedNavigationItem(item);
-    setSelectedItem(item);
+    return <Breadcrumbs elements={elements} onSelect={onNavigate} />;
   };
 
   return (
@@ -141,9 +137,11 @@ const ItemSelectionModal = ({
         <Stack
           direction="column"
           sx={{
+            // needs a min height to avoid too small modal (reduce flickering)
             minHeight: 270,
             position: 'relative',
           }}
+          id={HOME_MODAL_ITEM_ID}
         >
           {renderBreadcrumbs()}
 

src/components/main/itemSelectionModal/RootNavigationTree.tsx

@@ -1,6 +1,6 @@
 import { Typography } from '@mui/material';
 
-import { DiscriminatedItem } from '@graasp/sdk';
+import { DiscriminatedItem, ItemType } from '@graasp/sdk';
 
 import { useBuilderTranslation } from '@/config/i18n';
 import { hooks } from '@/config/queryClient';
@@ -26,9 +26,13 @@ const RootNavigationTree = ({
   rootMenuItems,
   selectedId,
 }: RootNavigationTreeProps): JSX.Element => {
+  const { t: translateBuilder } = useBuilderTranslation();
+
   // todo: to change with real recent items (most used)
   const { data: recentItems } = hooks.useAccessibleItems({}, { pageSize: 5 });
-  const { t: translateBuilder } = useBuilderTranslation();
+  const recentFolders = recentItems?.data?.filter(
+    ({ type }) => type === ItemType.FOLDER,
+  );
 
   const { data: parents } = hooks.useParents({
     id: items[0].id,
@@ -50,19 +54,23 @@ const RootNavigationTree = ({
           //   root items cannot be disabled - but they are disabled by the button
         />
       ))}
-      <Typography color="darkgrey" variant="subtitle2">
-        {translateBuilder(BUILDER.ITEM_SELECTION_NAVIGATION_RECENT_ITEMS)}
-      </Typography>
-      {recentItems?.data?.map((item) => (
-        <RowMenu
-          key={item.name}
-          item={item}
-          onNavigate={onNavigate}
-          selectedId={selectedId}
-          onClick={onClick}
-          isDisabled={isDisabled}
-        />
-      ))}
+      {recentFolders && (
+        <>
+          <Typography color="darkgrey" variant="subtitle2">
+            {translateBuilder(BUILDER.ITEM_SELECTION_NAVIGATION_RECENT_ITEMS)}
+          </Typography>
+          {recentFolders.map((item) => (
+            <RowMenu
+              key={item.name}
+              item={item}
+              onNavigate={onNavigate}
+              selectedId={selectedId}
+              onClick={onClick}
+              isDisabled={isDisabled}
+            />
+          ))}
+        </>
+      )}
       {/* show second parent to allow moving a level above */}
       {parents && parents.length > 1 && (
         <>

src/components/main/itemSelectionModal/RowMenu.tsx

@@ -82,16 +82,16 @@ const RowMenu = ({
             {item.name}
           </Typography>
         </StyledButton>
+        {(isHoverActive || selectedId === item.id) && (
+          <IconButton
+            onClick={() => onNavigate(item)}
+            id={buildItemRowArrowId(item.id)}
+            size="small"
+          >
+            <KeyboardArrowRightIcon />
+          </IconButton>
+        )}
       </Stack>
-      {(isHoverActive || selectedId === item.id) && (
-        <IconButton
-          sx={{ p: 0 }}
-          onClick={() => onNavigate(item)}
-          id={buildItemRowArrowId(item.id)}
-        >
-          <KeyboardArrowRightIcon />
-        </IconButton>
-      )}
     </Stack>
   );
 };

src/langs/en.json

@@ -166,7 +166,7 @@
   "MOVE_ITEM_MODAL_TITLE": "Where do you want to move this item?",
   "MOVE_ITEM_MODAL_TITLE_zero": "Where do you want to move this item?",
   "MOVE_ITEM_MODAL_TITLE_one": "Where do you want to move {{name}}?",
-  "MOVE_ITEM_MODAL_TITLE_two": "Where do you want to move {{name}} and one another?",
+  "MOVE_ITEM_MODAL_TITLE_two": "Where do you want to move {{name}} and one other?",
   "MOVE_ITEM_MODAL_TITLE_other": "Where do you want to move {{name}} and {{count}} others?",
   "MY_ITEMS_TITLE": "My Graasp",
   "NAVIGATION_FAVORITE_ITEMS_TITLE": "Favorite Items",