From 1c641cd2630578e36f09c11bf8b88aae8431c3f2 Mon Sep 17 00:00:00 2001 From: Nandika Agrawal <93462818+Nandika-A@users.noreply.github.com> Date: Sun, 15 Sep 2024 20:07:54 +0530 Subject: [PATCH] Fixes multiple add members screen layout issues #2232 (#2254) * Added translations for the headings * Added icons besides member names * Added tests for checking if image is displayed for existing user * Added translations in all languages * Added test to check if profile image is displayed for existing user * Added test for avartar image --- public/locales/en/translation.json | 15 +++- public/locales/fr/translation.json | 13 ++- public/locales/hi/translation.json | 15 +++- public/locales/sp/translation.json | 5 +- public/locales/zh/translation.json | 15 +++- src/screens/OrganizationPeople/AddMember.tsx | 22 +++++ .../OrganizationPeople.test.tsx | 84 ++++++++++++++++++- 7 files changed, 159 insertions(+), 10 deletions(-) diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index c5dac73839..02276aa73f 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -198,7 +198,16 @@ "enterLastName": "Enter your last name", "enterConfirmPassword": "Enter Password to confirm", "organization": "Organization", - "invalidDetailsMessage": "Please enter valid details." + "invalidDetailsMessage": "Please enter valid details.", + "firstName": "First Name", + "lastName": "Last Name", + "emailAddress": "Email Address", + "enterEmail": "Enter your email address", + "password": "Password", + "enterPassword": "Enter your password", + "confirmPassword": "Confirm Password", + "cancel": "Cancel", + "create": "Create" }, "organizationTags": { "title": "Organization Tags", @@ -993,7 +1002,9 @@ "organization": "Organization", "invalidDetailsMessage": "Please provide all required details.", "passwordNotMatch": "Passwords do not match.", - "addMember": "Add Member" + "addMember": "Add Member", + "user": "User", + "profile": "Profile" }, "eventActionItems": { "title": "Action Items", diff --git a/public/locales/fr/translation.json b/public/locales/fr/translation.json index beb5c0c11c..4018ec425b 100644 --- a/public/locales/fr/translation.json +++ b/public/locales/fr/translation.json @@ -198,7 +198,18 @@ "enterLastName": "Entrez votre nom de famille", "enterConfirmPassword": "Entrez votre mot de passe pour confirmer", "organization": "Organisation", - "invalidDetailsMessage": "Veuillez saisir des informations valides." + "invalidDetailsMessage": "Veuillez saisir des informations valides.", + "firstName": "Prénom", + "lastName": "Nom de famille", + "emailAddress": "Adresse e-mail", + "enterEmail": "Entrez votre adresse e-mail", + "password": "Mot de passe", + "enterPassword": "Entrez votre mot de passe", + "confirmPassword": "Confirmez le mot de passe", + "cancel": "Annuler", + "create": "Créer", + "user": "Utilisateur", + "profile": "Profil" }, "organizationTags": { "title": "Étiquettes d'Organisation", diff --git a/public/locales/hi/translation.json b/public/locales/hi/translation.json index 7acb28ed80..133fa91d1b 100644 --- a/public/locales/hi/translation.json +++ b/public/locales/hi/translation.json @@ -198,7 +198,16 @@ "enterLastName": "अपना अंतिम नाम दर्ज करें", "enterConfirmPassword": "पुष्टि करने के लिए अपना पासवर्ड दर्ज करें", "organization": "संगठन", - "invalidDetailsMessage": "कृपया वैध विवरण दर्ज करें." + "invalidDetailsMessage": "कृपया वैध विवरण दर्ज करें.", + "firstName": "पहला नाम", + "lastName": "अंतिम नाम", + "emailAddress": "ईमेल पता", + "enterEmail": "अपना ईमेल पता दर्ज करें", + "password": "पासवर्ड", + "enterPassword": "अपना पासवर्ड दर्ज करें", + "confirmPassword": "पासवर्ड की पुष्टि करें", + "cancel": "रद्द करें", + "create": "सृजन करें" }, "organizationTags": { "title": "संस्थान टैग", @@ -994,7 +1003,9 @@ "organization": "संगठन", "invalidDetailsMessage": "कृपया सभी आवश्यक विवरण प्रदान करें।", "passwordNotMatch": "सांकेतिक शब्द मेल नहीं खाते।", - "addMember": "सदस्य जोड़ें" + "addMember": "सदस्य जोड़ें", + "user": "उपयोगकर्ता", + "profile": "प्रोफ़ाइल" }, "eventActionItems": { "title": "एक्शन आइटम्स", diff --git a/public/locales/sp/translation.json b/public/locales/sp/translation.json index e89f09269d..e360b9f9ab 100644 --- a/public/locales/sp/translation.json +++ b/public/locales/sp/translation.json @@ -292,7 +292,9 @@ "organization": "Organización", "create": "Crear", "cancel": "Cancelar", - "invalidDetailsMessage": "Ingrese detalles válidos." + "invalidDetailsMessage": "Ingrese detalles válidos.", + "addMembers": "Agregar miembros", + "searchFullName": "Ingrese el nombre completo" }, "organizationTags": { "title": "Etiquetas de Organización", @@ -1226,6 +1228,7 @@ "invalidDetailsMessage": "Por favor proporcione todos los detalles requeridos.", "passwordNotMatch": "Las contraseñas no coinciden.", "user": "Usuario", + "profile": "Perfil", "addMember": "Agregar miembro" }, "eventActionItems": { diff --git a/public/locales/zh/translation.json b/public/locales/zh/translation.json index 9914a27286..0e1f2bd47e 100644 --- a/public/locales/zh/translation.json +++ b/public/locales/zh/translation.json @@ -198,7 +198,16 @@ "enterLastName": "输入您的姓氏", "enterConfirmPassword": "输入您的密码进行确认", "organization": "组织", - "invalidDetailsMessage": "请输入有效的详细信息。" + "invalidDetailsMessage": "请输入有效的详细信息。", + "firstName": "名字", + "lastName": "姓氏", + "emailAddress": "电子邮件地址", + "enterEmail": "输入你的电子邮件地址", + "password": "密码", + "enterPassword": "输入你的密码", + "confirmPassword": "确认密码", + "cancel": "取消", + "create": "创建" }, "organizationTags": { "title": "组织标签", @@ -994,7 +1003,9 @@ "organization": "组织", "invalidDetailsMessage": "请提供所有必需的详细信息。", "passwordNotMatch": "密码不匹配。", - "addMember": "添加会员" + "addMember": "添加会员", + "user": "用户", + "profile": "个人资料" }, "eventActionItems": { "title": "行动项目", diff --git a/src/screens/OrganizationPeople/AddMember.tsx b/src/screens/OrganizationPeople/AddMember.tsx index 24136204cb..4c1f15106e 100644 --- a/src/screens/OrganizationPeople/AddMember.tsx +++ b/src/screens/OrganizationPeople/AddMember.tsx @@ -31,6 +31,7 @@ import type { InterfaceQueryUserListItem, } from 'utils/interfaces'; import styles from './OrganizationPeople.module.css'; +import Avatar from 'components/Avatar/Avatar'; const StyledTableCell = styled(TableCell)(({ theme }) => ({ [`&.${tableCellClasses.head}`]: { @@ -366,6 +367,9 @@ function AddMember(): JSX.Element { # + + {translateAddMember('profile')} + {translateAddMember('user')} @@ -389,6 +393,24 @@ function AddMember(): JSX.Element { {index + 1} + + {userDetails.user.image ? ( + avatar + ) : ( + + )} + { userEvent.click(screen.getByTestId('existingUser')); await wait(); - expect(screen.getByTestId('addExistingUserModal')).toBeInTheDocument(); + expect( + screen.getAllByTestId('addExistingUserModal').length, + ).toBeGreaterThan(0); await wait(); - userEvent.click(screen.getByTestId('addBtn')); + const addBtn = screen.getAllByTestId('addBtn'); + userEvent.click(addBtn[0]); }); test('Open and search existing user', async () => { @@ -1353,3 +1382,54 @@ describe('Organization People Page', () => { expect(screen.queryByText(/Nothing Found !!/i)).toBeInTheDocument(); }); }); + +test('Open and check if profile image is displayed for existing user', async () => { + window.location.assign('/orgpeople/orgid'); + render( + + + + + + + + + , + ); + + // Wait for the component to finish rendering + await wait(); + + // Click on the dropdown toggle to open the menu + userEvent.click(screen.getByTestId('addMembers')); + await wait(); + + // Click on the "Admins" option in the dropdown menu + userEvent.click(screen.getByTestId('existingUser')); + await wait(); + + expect(screen.getByTestId('addExistingUserModal')).toBeInTheDocument(); + await wait(); + + expect(screen.getAllByTestId('user').length).toBeGreaterThan(0); + await wait(); + + // Check if the image is rendered + expect(screen.getAllByTestId('profileImage').length).toBeGreaterThan(0); + await wait(); + + const images = await screen.findAllByAltText('avatar'); + expect(images.length).toBeGreaterThan(0); + await wait(); + + const avatarImages = await screen.findAllByAltText('Dummy Avatar'); + expect(avatarImages.length).toBeGreaterThan(0); + await wait(); +});