From fb5400c26b0778cc3a28e3d9a42a20ac6c540d3a Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Fri, 21 Mar 2025 15:30:31 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F(frontend)=20search=20users?=
 =?UTF-8?q?=20with=20at=20least=205=20characters?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We now only search for users when the query
is at least 5 characters long.
---
 src/frontend/apps/e2e/__tests__/app-impress/common.ts  |  6 +++---
 .../__tests__/app-impress/doc-member-create.spec.ts    | 10 ++++++----
 .../src/features/docs/doc-share/api/useUsers.tsx       |  2 +-
 .../docs/doc-share/components/DocShareModal.tsx        |  3 ++-
 4 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/frontend/apps/e2e/__tests__/app-impress/common.ts b/src/frontend/apps/e2e/__tests__/app-impress/common.ts
index 23d0abe2..a6b55993 100644
--- a/src/frontend/apps/e2e/__tests__/app-impress/common.ts
+++ b/src/frontend/apps/e2e/__tests__/app-impress/common.ts
@@ -80,11 +80,11 @@ export const addNewMember = async (
   page: Page,
   index: number,
   role: 'Administrator' | 'Owner' | 'Member' | 'Editor' | 'Reader',
-  fillText: string = 'user',
+  fillText: string = 'user ',
 ) => {
   const responsePromiseSearchUser = page.waitForResponse(
     (response) =>
-      response.url().includes(`/users/?q=${fillText}`) &&
+      response.url().includes(`/users/?q=${encodeURIComponent(fillText)}`) &&
       response.status() === 200,
   );
 
@@ -97,7 +97,7 @@ export const addNewMember = async (
 
   // Intercept response
   const responseSearchUser = await responsePromiseSearchUser;
-  const users = (await responseSearchUser.json()).results as {
+  const users = (await responseSearchUser.json()) as {
     email: string;
   }[];
 
diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-member-create.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-member-create.spec.ts
index 7411c2ac..f47d0918 100644
--- a/src/frontend/apps/e2e/__tests__/app-impress/doc-member-create.spec.ts
+++ b/src/frontend/apps/e2e/__tests__/app-impress/doc-member-create.spec.ts
@@ -8,9 +8,11 @@ test.beforeEach(async ({ page }) => {
 
 test.describe('Document create member', () => {
   test('it selects 2 users and 1 invitation', async ({ page, browserName }) => {
+    const inputFill = 'user ';
     const responsePromise = page.waitForResponse(
       (response) =>
-        response.url().includes('/users/?q=user') && response.status() === 200,
+        response.url().includes(`/users/?q=${encodeURIComponent(inputFill)}`) &&
+        response.status() === 200,
     );
     await createDoc(page, 'select-multi-users', browserName, 1);
 
@@ -22,9 +24,9 @@ test.describe('Document create member', () => {
     await expect(inputSearch).toBeVisible();
 
     // Select user 1 and verify tag
-    await inputSearch.fill('user');
+    await inputSearch.fill(inputFill);
     const response = await responsePromise;
-    const users = (await response.json()).results as {
+    const users = (await response.json()) as {
       email: string;
       full_name?: string | null;
     }[];
@@ -45,7 +47,7 @@ test.describe('Document create member', () => {
     ).toBeVisible();
 
     // Select user 2 and verify tag
-    await inputSearch.fill('user');
+    await inputSearch.fill(inputFill);
     await quickSearchContent
       .getByTestId(`search-user-row-${users[1].email}`)
       .click();
diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/api/useUsers.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/api/useUsers.tsx
index cffef0ab..ed029222 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-share/api/useUsers.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/api/useUsers.tsx
@@ -16,7 +16,7 @@ export const getUsers = async ({
   docId,
 }: UsersParams): Promise<UsersResponse> => {
   const queriesParams = [];
-  queriesParams.push(query ? `q=${query}` : '');
+  queriesParams.push(query ? `q=${encodeURIComponent(query)}` : '');
   queriesParams.push(docId ? `document_id=${docId}` : '');
   const queryParams = queriesParams.filter(Boolean).join('&');
 
diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModal.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModal.tsx
index aa9df61b..80dccad7 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModal.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModal.tsx
@@ -58,6 +58,7 @@ export const DocShareModal = ({ doc, onClose }: Props) => {
   const canViewAccesses = doc.abilities.accesses_view;
   const showMemberSection = inputValue === '' && selectedUsers.length === 0;
   const showFooter = selectedUsers.length === 0 && !inputValue;
+  const MIN_CHARACTERS_FOR_SEARCH = 4;
 
   const onSelect = (user: User) => {
     setSelectedUsers((prev) => [...prev, user]);
@@ -76,7 +77,7 @@ export const DocShareModal = ({ doc, onClose }: Props) => {
   const searchUsersQuery = useUsers(
     { query: userQuery, docId: doc.id },
     {
-      enabled: !!userQuery,
+      enabled: userQuery?.length > MIN_CHARACTERS_FOR_SEARCH,
       queryKey: [KEY_LIST_USER, { query: userQuery }],
     },
   );