From df15b41a8778d5d9c456fb19d8c81a90fe4e0ab4 Mon Sep 17 00:00:00 2001 From: Anthony LC Date: Fri, 29 Mar 2024 11:19:12 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8(app-desk)=20cannot=20select=20user?= =?UTF-8?q?=20or=20email=20already=20selected?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add the teamid to the useUsers query, to not get the users that are already in the team - Add a check to not select a user or email that is already selected --- .../src/features/addMembers/api/useUsers.tsx | 11 +++++++-- .../addMembers/components/ModalAddMembers.tsx | 6 ++++- .../addMembers/components/SearchMembers.tsx | 24 +++++++++++++++---- .../__tests__/app-desk/member-create.spec.ts | 17 +++---------- 4 files changed, 36 insertions(+), 22 deletions(-) diff --git a/src/frontend/apps/desk/src/features/addMembers/api/useUsers.tsx b/src/frontend/apps/desk/src/features/addMembers/api/useUsers.tsx index a0670a7..d5af57d 100644 --- a/src/frontend/apps/desk/src/features/addMembers/api/useUsers.tsx +++ b/src/frontend/apps/desk/src/features/addMembers/api/useUsers.tsx @@ -2,18 +2,25 @@ import { UseQueryOptions, useQuery } from '@tanstack/react-query'; import { APIError, APIList, errorCauses, fetchAPI } from '@/api'; import { User } from '@/core/auth'; +import { Team } from '@/features/teams'; export type UsersParams = { query: string; + teamId: Team['id']; }; type UsersResponse = APIList; export const getUsers = async ({ query, + teamId, }: UsersParams): Promise => { - const queryParam = query ? `q=${query}` : ''; - const response = await fetchAPI(`users/?${queryParam}`); + const queriesParams = []; + queriesParams.push(query ? `q=${query}` : ''); + queriesParams.push(teamId ? `team_id=${teamId}` : ''); + const queryParams = queriesParams.filter(Boolean).join('&'); + + const response = await fetchAPI(`users/?${queryParams}`); if (!response.ok) { throw new APIError('Failed to get the users', await errorCauses(response)); diff --git a/src/frontend/apps/desk/src/features/addMembers/components/ModalAddMembers.tsx b/src/frontend/apps/desk/src/features/addMembers/components/ModalAddMembers.tsx index 7cf9bb0..01c1606 100644 --- a/src/frontend/apps/desk/src/features/addMembers/components/ModalAddMembers.tsx +++ b/src/frontend/apps/desk/src/features/addMembers/components/ModalAddMembers.tsx @@ -162,7 +162,11 @@ export const ModalAddMembers = ({ > - + {selectedMembers.length > 0 && ( diff --git a/src/frontend/apps/desk/src/features/addMembers/components/SearchMembers.tsx b/src/frontend/apps/desk/src/features/addMembers/components/SearchMembers.tsx index a664989..0b821e4 100644 --- a/src/frontend/apps/desk/src/features/addMembers/components/SearchMembers.tsx +++ b/src/frontend/apps/desk/src/features/addMembers/components/SearchMembers.tsx @@ -13,11 +13,13 @@ export type OptionsSelect = Options; interface SearchMembersProps { team: Team; + selectedMembers: OptionsSelect; setSelectedMembers: (value: OptionsSelect) => void; } export const SearchMembers = ({ team, + selectedMembers, setSelectedMembers, }: SearchMembersProps) => { const { t } = useTranslation(); @@ -27,7 +29,7 @@ export const SearchMembers = ({ null, ); const { data } = useUsers( - { query: userQuery }, + { query: userQuery, teamId: team.id }, { enabled: !!userQuery, queryKey: [KEY_LIST_USER, { query: userQuery }], @@ -41,16 +43,28 @@ export const SearchMembers = ({ return; } - let users: OptionsSelect = options.map((user) => ({ + const optionsFiltered = options.filter( + (user) => + !selectedMembers?.find( + (selectedUser) => selectedUser.value.email === user.email, + ), + ); + + let users: OptionsSelect = optionsFiltered.map((user) => ({ value: user, label: user.name || user.email, type: OptionType.NEW_MEMBER, })); if (userQuery && isValidEmail(userQuery)) { - const isFound = !!options.find((user) => user.email === userQuery); + const isFoundUser = !!optionsFiltered.find( + (user) => user.email === userQuery, + ); + const isFoundEmail = !!selectedMembers.find( + (selectedMember) => selectedMember.value.email === userQuery, + ); - if (!isFound) { + if (!isFoundUser && !isFoundEmail) { users = [ { value: { email: userQuery }, @@ -64,7 +78,7 @@ export const SearchMembers = ({ resolveOptionsRef.current(users); resolveOptionsRef.current = null; // eslint-disable-next-line react-hooks/exhaustive-deps - }, [options]); + }, [options, selectedMembers]); const loadOptions = (): Promise => { return new Promise((resolve) => { diff --git a/src/frontend/apps/e2e/__tests__/app-desk/member-create.spec.ts b/src/frontend/apps/e2e/__tests__/app-desk/member-create.spec.ts index a53249e..f6ed17e 100644 --- a/src/frontend/apps/e2e/__tests__/app-desk/member-create.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-desk/member-create.spec.ts @@ -176,14 +176,9 @@ test.describe('Members Create', () => { await page.getByLabel('Add members to the team').click(); await inputSearch.fill('test'); - await page.getByRole('option', { name: users[0].name }).click(); - await page.getByRole('radio', { name: 'Owner' }).click(); - - await page.getByRole('button', { name: 'Validate' }).click(); - await expect( - page.getByText(`Failed to add ${users[0].name} in the team`), - ).toBeVisible(); + page.getByRole('option', { name: users[0].name }), + ).toBeHidden(); }); test('it try to add twice the same invitation', async ({ @@ -218,12 +213,6 @@ test.describe('Members Create', () => { await page.getByLabel('Add members to the team').click(); await inputSearch.fill(email); - await page.getByRole('option', { name: email }).click(); - - await page.getByRole('button', { name: 'Validate' }).click(); - - await expect( - page.getByText(`Failed to create the invitation for ${email}`), - ).toBeVisible(); + await expect(page.getByRole('option', { name: email })).toBeHidden(); }); });