⚡️(frontend) search users with at least 5 characters

We now only search for users when the query
is at least 5 characters long.

Author: AntoLC

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;
   }[];
 

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();

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('&');
 

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 }],
     },
   );