feature: display only 5 results in filter search (#96)

* feature: display only 5 results in filter search

* feature: Display laoding in a dropdown item

* test: use testid insread of text

front/src/components/table/table-header/FilterDropdownButton.tsx

@@ -65,7 +65,11 @@ export function FilterDropdownButton<FilterProperties>({
     selectedFilter: FilterType<FilterProperties>,
   ) => {
     if (filterSearchResults.loading) {
-      return 'LOADING';
+      return (
+        <DropdownButton.StyledDropdownItem data-testid="loading-search-results">
+          Loading
+        </DropdownButton.StyledDropdownItem>
+      );
     }
     return filterSearchResults.results.map((value, index) => (
       <DropdownButton.StyledDropdownItem

front/src/components/table/table-header/__stories__/FilterDropdownButton.stories.tsx

@@ -48,6 +48,7 @@ const mocks = [
             { lastname: { _ilike: '%%' } },
           ],
         },
+        limit: 5,
       },
     },
     result: {
@@ -66,6 +67,7 @@ const mocks = [
             { lastname: { _ilike: '%Jane%' } },
           ],
         },
+        limit: 5,
       },
     },
     result: {

front/src/components/table/table-header/__tests__/FilterDropdownButton.test.tsx

@@ -84,7 +84,7 @@ it('Checks the selection of top option for Doesnot include', async () => {
 
 it('Calls the filters when typing a new name', async () => {
   const setFilters = jest.fn();
-  const { getByText, getByPlaceholderText, queryByText } = render(
+  const { getByText, getByPlaceholderText, queryByText, getByTestId } = render(
     <RegularFilterDropdownButton setFilter={setFilters} />,
   );
 
@@ -100,7 +100,7 @@ it('Calls the filters when typing a new name', async () => {
   fireEvent.change(filterSearch, { target: { value: 'Jane' } });
 
   await waitFor(() => {
-    const loadingDiv = getByText('LOADING');
+    const loadingDiv = getByTestId('loading-search-results');
     expect(loadingDiv).toBeDefined();
   });
 

front/src/services/search/search.ts

@@ -72,6 +72,7 @@ export const useSearch = (): [
     {
       variables: {
         where,
+        limit: 5,
       },
       skip: !filter,
     },