Skip to content

Commit

Permalink
Fixes multiple add members screen layout issues #2232 (#2254)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
Nandika-A authored Sep 15, 2024
1 parent ceb5cce commit 1c641cd
Show file tree
Hide file tree
Showing 7 changed files with 159 additions and 10 deletions.
15 changes: 13 additions & 2 deletions public/locales/en/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
13 changes: 12 additions & 1 deletion public/locales/fr/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
15 changes: 13 additions & 2 deletions public/locales/hi/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -198,7 +198,16 @@
"enterLastName": "अपना अंतिम नाम दर्ज करें",
"enterConfirmPassword": "पुष्टि करने के लिए अपना पासवर्ड दर्ज करें",
"organization": "संगठन",
"invalidDetailsMessage": "कृपया वैध विवरण दर्ज करें."
"invalidDetailsMessage": "कृपया वैध विवरण दर्ज करें.",
"firstName": "पहला नाम",
"lastName": "अंतिम नाम",
"emailAddress": "ईमेल पता",
"enterEmail": "अपना ईमेल पता दर्ज करें",
"password": "पासवर्ड",
"enterPassword": "अपना पासवर्ड दर्ज करें",
"confirmPassword": "पासवर्ड की पुष्टि करें",
"cancel": "रद्द करें",
"create": "सृजन करें"
},
"organizationTags": {
"title": "संस्थान टैग",
Expand Down Expand Up @@ -994,7 +1003,9 @@
"organization": "संगठन",
"invalidDetailsMessage": "कृपया सभी आवश्यक विवरण प्रदान करें।",
"passwordNotMatch": "सांकेतिक शब्द मेल नहीं खाते।",
"addMember": "सदस्य जोड़ें"
"addMember": "सदस्य जोड़ें",
"user": "उपयोगकर्ता",
"profile": "प्रोफ़ाइल"
},
"eventActionItems": {
"title": "एक्शन आइटम्स",
Expand Down
5 changes: 4 additions & 1 deletion public/locales/sp/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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": {
Expand Down
15 changes: 13 additions & 2 deletions public/locales/zh/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -198,7 +198,16 @@
"enterLastName": "输入您的姓氏",
"enterConfirmPassword": "输入您的密码进行确认",
"organization": "组织",
"invalidDetailsMessage": "请输入有效的详细信息。"
"invalidDetailsMessage": "请输入有效的详细信息。",
"firstName": "名字",
"lastName": "姓氏",
"emailAddress": "电子邮件地址",
"enterEmail": "输入你的电子邮件地址",
"password": "密码",
"enterPassword": "输入你的密码",
"confirmPassword": "确认密码",
"cancel": "取消",
"create": "创建"
},
"organizationTags": {
"title": "组织标签",
Expand Down Expand Up @@ -994,7 +1003,9 @@
"organization": "组织",
"invalidDetailsMessage": "请提供所有必需的详细信息。",
"passwordNotMatch": "密码不匹配。",
"addMember": "添加会员"
"addMember": "添加会员",
"user": "用户",
"profile": "个人资料"
},
"eventActionItems": {
"title": "行动项目",
Expand Down
22 changes: 22 additions & 0 deletions src/screens/OrganizationPeople/AddMember.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}`]: {
Expand Down Expand Up @@ -366,6 +367,9 @@ function AddMember(): JSX.Element {
<TableHead>
<TableRow>
<StyledTableCell>#</StyledTableCell>
<StyledTableCell align="center">
{translateAddMember('profile')}
</StyledTableCell>
<StyledTableCell align="center">
{translateAddMember('user')}
</StyledTableCell>
Expand All @@ -389,6 +393,24 @@ function AddMember(): JSX.Element {
<StyledTableCell component="th" scope="row">
{index + 1}
</StyledTableCell>
<StyledTableCell
align="center"
data-testid="profileImage"
>
{userDetails.user.image ? (
<img
src={userDetails.user.image ?? undefined}
alt="avatar"
className={styles.TableImage}
/>
) : (
<Avatar
avatarStyle={styles.TableImage}
name={`${userDetails.user.firstName} ${userDetails.user.lastName}`}
data-testid="avatarImage"
/>
)}
</StyledTableCell>
<StyledTableCell align="center">
<Link
className={styles.membername}
Expand Down
84 changes: 82 additions & 2 deletions src/screens/OrganizationPeople/OrganizationPeople.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -423,6 +423,32 @@ const MOCKS: TestMock[] = [
user: {
firstName: 'Vyvyan',
lastName: 'Kerry',
image: 'tempUrl',
_id: '65378abd85008f171cf2990d',
email: '[email protected]',
createdAt: '2023-04-13T04:53:17.742Z',
joinedOrganizations: [
{
_id: '6537904485008f171cf29924',
name: 'Unity Foundation',
creator: {
_id: '64378abd85008f171cf2990d',
firstName: 'Wilt',
lastName: 'Shepherd',
image: null,
email: '[email protected]',
createdAt: '2023-04-13T04:53:17.742Z',
},
__typename: 'Organization',
},
],
__typename: 'User',
},
},
{
user: {
firstName: 'Nandika',
lastName: 'Agrawal',
image: null,
_id: '65378abd85008f171cf2990d',
email: '[email protected]',
Expand Down Expand Up @@ -916,10 +942,13 @@ describe('Organization People Page', () => {
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 () => {
Expand Down Expand Up @@ -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(
<MockedProvider
addTypename={true}
link={link}
defaultOptions={{
watchQuery: { fetchPolicy: 'no-cache' },
query: { fetchPolicy: 'no-cache' },
}}
>
<BrowserRouter>
<Provider store={store}>
<I18nextProvider i18n={i18nForTest}>
<OrganizationPeople />
</I18nextProvider>
</Provider>
</BrowserRouter>
</MockedProvider>,
);

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

0 comments on commit 1c641cd

Please sign in to comment.