fix: add item search in folder view

cypress/e2e/item/view/viewFolder.cy.ts

@@ -1,6 +1,7 @@
 import i18n from '../../../../src/config/i18n';
 import { HOME_PATH, buildItemPath } from '../../../../src/config/paths';
 import {
+  ITEM_SEARCH_INPUT_ID,
   NAVIGATION_ROOT_ID,
   buildItemCard,
   buildItemsTableRowIdAttribute,
@@ -56,22 +57,36 @@ describe('View Folder', () => {
         }
       });
     });
+
+    it('search', () => {
+      const { id } = SAMPLE_ITEMS.items[0];
+      cy.visit(buildItemPath(id));
+      cy.switchMode(ItemLayoutMode.Grid);
+
+      cy.get(`#${buildItemCard(SAMPLE_ITEMS.items[2].id)}`).should(
+        'be.visible',
+      );
+      cy.get(`#${ITEM_SEARCH_INPUT_ID}`).type(SAMPLE_ITEMS.items[3].name);
+      cy.get(`#${buildItemCard(SAMPLE_ITEMS.items[3].id)}`).should(
+        'be.visible',
+      );
+    });
   });
 
   describe('List', () => {
-    describe('Navigation', () => {
-      const allItems = [
-        ...SAMPLE_ITEMS.items,
-        GRAASP_LINK_ITEM,
-        IMAGE_ITEM_DEFAULT,
-        VIDEO_ITEM_S3,
-      ];
-      beforeEach(() => {
-        cy.setUpApi({
-          items: allItems,
-        });
+    const allItems = [
+      ...SAMPLE_ITEMS.items,
+      GRAASP_LINK_ITEM,
+      IMAGE_ITEM_DEFAULT,
+      VIDEO_ITEM_S3,
+    ];
+    beforeEach(() => {
+      cy.setUpApi({
+        items: allItems,
       });
+    });
 
+    describe('Navigation', () => {
       it('visit folder by id', () => {
         const { id } = SAMPLE_ITEMS.items[0];
         cy.visit(buildItemPath(id));
@@ -100,5 +115,19 @@ describe('View Folder', () => {
         });
       });
     });
+
+    it('search', () => {
+      const { id } = SAMPLE_ITEMS.items[0];
+      cy.visit(buildItemPath(id));
+      cy.switchMode(ItemLayoutMode.List);
+
+      cy.get(buildItemsTableRowIdAttribute(SAMPLE_ITEMS.items[2].id)).should(
+        'be.visible',
+      );
+      cy.get(`#${ITEM_SEARCH_INPUT_ID}`).type(SAMPLE_ITEMS.items[3].name);
+      cy.get(buildItemsTableRowIdAttribute(SAMPLE_ITEMS.items[3].id)).should(
+        'be.visible',
+      );
+    });
   });
 });

src/components/item/ItemContent.tsx

@@ -53,6 +53,7 @@ import ItemActions from '../main/ItemActions';
 import Items from '../main/Items';
 import NewItemButton from '../main/NewItemButton';
 import { OutletType } from '../pages/item/type';
+import { useItemSearch } from './ItemSearch';
 
 const { useChildren, useFileContentUrl, useEtherpad } = hooks;
 
@@ -183,9 +184,12 @@ const FolderContent = ({
   } = useChildren(item.id, {
     ordered: true,
   });
+  const itemSearch = useItemSearch();
 
   // TODO: use hook's filter when available
-  const folderChildren = children?.filter((f) => shouldDisplayItem(f.type));
+  const folderChildren = children?.filter(
+    (f) => shouldDisplayItem(f.type) && f.name.includes(itemSearch.text),
+  );
 
   if (isLoading) {
     return <Loader />;
@@ -202,7 +206,9 @@ const FolderContent = ({
       title={item.name}
       items={folderChildren ?? []}
       headerElements={
-        enableEditing ? [<NewItemButton key="newButton" />] : undefined
+        enableEditing
+          ? [itemSearch.input, <NewItemButton key="newButton" />]
+          : [itemSearch.input]
       }
       // todo: not exactly correct, since you could have write rights on some child,
       // but it's more tedious to check permissions over all selected items

src/components/item/ItemSearch.tsx

@@ -31,7 +31,7 @@ export const useItemSearch = ({
   onSearch,
 }: {
   onSearch?: () => void;
-}): {
+} = {}): {
   results?: DiscriminatedItem[];
   text: string;
   input: JSX.Element;