diff --git a/src/frontend/apps/desk/src/features/members/__tests__/MemberGrid.test.tsx b/src/frontend/apps/desk/src/features/members/__tests__/MemberGrid.test.tsx index 45e8541..fdd3016 100644 --- a/src/frontend/apps/desk/src/features/members/__tests__/MemberGrid.test.tsx +++ b/src/frontend/apps/desk/src/features/members/__tests__/MemberGrid.test.tsx @@ -37,6 +37,9 @@ describe('MemberGrid', () => { ); expect(screen.getByText('This table is empty')).toBeInTheDocument(); + expect( + screen.getByLabelText('Add members to the team'), + ).toBeInTheDocument(); }); it('checks the render with members', async () => { @@ -202,4 +205,14 @@ describe('MemberGrid', () => { expect(await screen.findByText('All broken :(')).toBeInTheDocument(); }); + + it('cannot add members when current role is member', () => { + render(, { + wrapper: AppWrapper, + }); + + expect( + screen.queryByLabelText('Add members to the team'), + ).not.toBeInTheDocument(); + }); }); diff --git a/src/frontend/apps/desk/src/features/members/components/MemberGrid.tsx b/src/frontend/apps/desk/src/features/members/components/MemberGrid.tsx index 5cd7e1c..32f00a7 100644 --- a/src/frontend/apps/desk/src/features/members/components/MemberGrid.tsx +++ b/src/frontend/apps/desk/src/features/members/components/MemberGrid.tsx @@ -5,9 +5,9 @@ import { useTranslation } from 'react-i18next'; import IconUser from '@/assets/icons/icon-user.svg'; import { Box, Card, TextErrors } from '@/components'; import { useCunninghamTheme } from '@/cunningham'; -import { Team } from '@/features/teams/api'; +import { Team } from '@/features/teams'; -import { useTeamAccesses } from '../api/useTeamsAccesses'; +import { useTeamAccesses } from '../api/'; import { PAGE_SIZE } from '../conf'; import { Role } from '../types'; @@ -46,19 +46,21 @@ export const MemberGrid = ({ team, currentRole }: MemberGridProps) => { return ( <> - - - + {currentRole !== Role.MEMBER && ( + + + + )} { {isModalMemberOpen && ( setIsModalMemberOpen(false)} team={team} /> diff --git a/src/frontend/apps/desk/src/features/members/components/ModalAddMembers.tsx b/src/frontend/apps/desk/src/features/members/components/ModalAddMembers.tsx index 62edc2d..90c2984 100644 --- a/src/frontend/apps/desk/src/features/members/components/ModalAddMembers.tsx +++ b/src/frontend/apps/desk/src/features/members/components/ModalAddMembers.tsx @@ -3,9 +3,12 @@ import { useState } from 'react'; import { useTranslation } from 'react-i18next'; import { createGlobalStyle } from 'styled-components'; -import { Box } from '@/components'; +import { Box, Text } from '@/components'; import { Team } from '@/features/teams'; +import { Role } from '../types'; + +import { ChooseRole } from './ChooseRole'; import { OptionSelect, SearchMembers } from './SearchMembers'; const GlobalStyle = createGlobalStyle` @@ -15,13 +18,19 @@ const GlobalStyle = createGlobalStyle` `; interface ModalAddMembersProps { + currentRole: Role; onClose: () => void; team: Team; } -export const ModalAddMembers = ({ onClose, team }: ModalAddMembersProps) => { +export const ModalAddMembers = ({ + currentRole, + onClose, + team, +}: ModalAddMembersProps) => { const { t } = useTranslation(); - const [, setSelectedMembers] = useState([]); + const [selectedMembers, setSelectedMembers] = useState([]); + const [, setSelectedRole] = useState(Role.MEMBER); return ( { closeOnClickOutside hideCloseButton rightActions={ - } @@ -45,6 +59,19 @@ export const ModalAddMembers = ({ onClose, team }: ModalAddMembersProps) => { + {selectedMembers.length > 0 && ( + + + {t('Choose a role')} + + + + )} ); diff --git a/src/frontend/apps/desk/src/i18n/translations.json b/src/frontend/apps/desk/src/i18n/translations.json index 23ade51..3f86d75 100644 --- a/src/frontend/apps/desk/src/i18n/translations.json +++ b/src/frontend/apps/desk/src/i18n/translations.json @@ -12,6 +12,7 @@ "Admin": "Admin", "Cancel": "Annuler", "Cells icon": "Icône Cellules", + "Choose a role": "Choisissez un rôle", "Contacts": "Contacts", "Create a new team": "Créer un nouveau groupe", "Create new team card": "Carte créer une nouvelle équipe", diff --git a/src/frontend/apps/desk/src/pages/teams/[id].tsx b/src/frontend/apps/desk/src/pages/teams/[id].tsx index 44b2a06..e59b626 100644 --- a/src/frontend/apps/desk/src/pages/teams/[id].tsx +++ b/src/frontend/apps/desk/src/pages/teams/[id].tsx @@ -57,7 +57,7 @@ const Team = ({ id }: TeamProps) => { return ( <> - + ); }; 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 5cfba6f..e0323c3 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 @@ -34,6 +34,8 @@ test.describe('Members Create', () => { await page.getByLabel('Add members to the team').click(); + await expect(page.getByRole('radio', { name: 'Owner' })).toBeHidden(); + const inputSearch = page.getByLabel(/Find a member to add to the team/); for (let i = 0; i < 2; i++) { @@ -51,6 +53,11 @@ test.describe('Members Create', () => { ).toBeVisible(); await expect(page.getByLabel(`Remove ${users[i].name}`)).toBeVisible(); } + + await expect(page.getByText(/Choose a role/)).toBeVisible(); + await expect(page.getByRole('radio', { name: 'Member' })).toBeChecked(); + await expect(page.getByRole('radio', { name: 'Owner' })).toBeVisible(); + await expect(page.getByRole('radio', { name: 'Admin' })).toBeVisible(); }); test('it selects non existing email', async ({ page, browserName }) => {