From 3605c0034c20edb6fccac78f089a373d0455b39a Mon Sep 17 00:00:00 2001
From: Sammy Teillet <sammy.teillet@gmail.com>
Date: Thu, 4 May 2023 14:58:43 +0200
Subject: [PATCH] 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
---
 .../components/table/table-header/FilterDropdownButton.tsx  | 6 +++++-
 .../__stories__/FilterDropdownButton.stories.tsx            | 2 ++
 .../table-header/__tests__/FilterDropdownButton.test.tsx    | 4 ++--
 front/src/services/search/search.ts                         | 1 +
 4 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/front/src/components/table/table-header/FilterDropdownButton.tsx b/front/src/components/table/table-header/FilterDropdownButton.tsx
index 5fe6480a0..23a0a6808 100644
--- a/front/src/components/table/table-header/FilterDropdownButton.tsx
+++ b/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
diff --git a/front/src/components/table/table-header/__stories__/FilterDropdownButton.stories.tsx b/front/src/components/table/table-header/__stories__/FilterDropdownButton.stories.tsx
index b2a1cb026..b07f1a260 100644
--- a/front/src/components/table/table-header/__stories__/FilterDropdownButton.stories.tsx
+++ b/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: {
diff --git a/front/src/components/table/table-header/__tests__/FilterDropdownButton.test.tsx b/front/src/components/table/table-header/__tests__/FilterDropdownButton.test.tsx
index a4641cedb..adb5eea25 100644
--- a/front/src/components/table/table-header/__tests__/FilterDropdownButton.test.tsx
+++ b/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();
   });
 
diff --git a/front/src/services/search/search.ts b/front/src/services/search/search.ts
index 9353efbb9..bf0f7e18c 100644
--- a/front/src/services/search/search.ts
+++ b/front/src/services/search/search.ts
@@ -72,6 +72,7 @@ export const useSearch = (): [
     {
       variables: {
         where,
+        limit: 5,
       },
       skip: !filter,
     },