Feat/63412/change avatar profile

apps/chat/src/app/pages/member/TableMemberItem.tsx

@@ -14,7 +14,7 @@ import {
 } from '@mezon/store';
 import { HighlightMatchBold, Icons } from '@mezon/ui';
 import type { ChannelMembersEntity } from '@mezon/utils';
-import { DEFAULT_ROLE_COLOR, EPermission, EVERYONE_ROLE_ID, createImgproxyUrl } from '@mezon/utils';
+import { DEFAULT_ROLE_COLOR, EPermission, EVERYONE_ROLE_ID, createImgproxyUrl, generateE2eId } from '@mezon/utils';
 import { formatDistance } from 'date-fns';
 import Tooltip from 'rc-tooltip';
 import type { MouseEvent } from 'react';
@@ -184,7 +184,7 @@ const TableMemberItem = ({ userId, username, avatar, clanJoinTime, mezonJoinTime
 			ref={itemRef}
 		>
 			<div className="flex-3 p-1">
-				<div className="flex flex-row gap-2 items-center">
+				<div className="flex flex-row gap-2 items-center" data-e2e={generateE2eId('clan_page.member_list.user_info')}>
 					<AvatarImage
 						alt={username}
 						username={username}

libs/components/src/lib/components/ChannelList/ChannelListComponents/index.tsx

@@ -152,7 +152,7 @@ export const Events = memo(() => {
 				onClick={handleClose}
 				className={`self-stretch inline-flex cursor-pointer px-2 rounded-lg h-[34px] ${isMemberPath ? 'bg-button-secondary border-theme-primary text-theme-primary-active' : ''} bg-item-hover text-theme-primary text-theme-primary-hover`}
 			>
-				<div className="grow w-5 flex-row items-center gap-2 flex">
+				<div className="grow w-5 flex-row items-center gap-2 flex" data-e2e={generateE2eId('clan_page.side_bar.button.members')}>
 					<div className="w-5 h-5 relative flex flex-row items-center">
 						<div className="w-5 h-5 ">
 							<Icons.MemberList defaultSize="w-5 h-5" />

libs/components/src/lib/components/ChannelTopbar/index.tsx

@@ -953,6 +953,7 @@ function ChannelListButton() {
 				title={t('tooltips.members')}
 				onClick={handleClick}
 				className={`text-theme-primary text-theme-primary-hover ${isActive ? 'text-theme-primary-active' : ''}`}
+				data-e2e={generateE2eId('chat.channel_message.header.button.member')}
 			>
 				<Icons.MemberList defaultSize="size-5" />
 			</button>

libs/components/src/lib/components/FooterProfile/index.tsx

@@ -296,7 +296,12 @@ function FooterProfile({ name, status, avatar, userId, isDM }: FooterProfileProp
 			 w-full group focus-visible:outline-none footer-profile  `}
 			>
 				<div className={`footer-profile h-10 flex-1 flex pl-2 items-center  text-theme-primary bg-item-hover rounded-md`}>
-					<div ref={modalControlRef} className="cursor-pointer flex items-center gap-3 relative flex-1" onClick={handleClick}>
+					<div
+						ref={modalControlRef}
+						className="cursor-pointer flex items-center gap-3 relative flex-1"
+						onClick={handleClick}
+						data-e2e={generateE2eId('footer_profile.avatar')}
+					>
 						<AvatarImage
 							alt={''}
 							username={name}
@@ -309,7 +314,7 @@ function FooterProfile({ name, status, avatar, userId, isDM }: FooterProfileProp
 							<UserStatusIconDM status={userCustomStatus?.user_status} />
 						</div>
 						<div className="flex flex-col overflow-hidden flex-1">
-							<p className="text-sm font-medium truncate max-w-[150px] max-sbm:max-w-[100px] text-theme-secondary">{name}</p>
+							<p className="text-sm font-medium truncate max-w-[150px] max-sbm:max-w-[100px] text-theme-secondary" data-e2e={generateE2eId('footer_profile.name')}>{name}</p>
 							<p className="text-[11px] text-left line-clamp-1 leading-[14px] truncate max-w-[150px] max-sbm:max-w-[100px]">
 								{userCustomStatus.status}
 							</p>

libs/components/src/lib/components/MarkdownFormatText/MentionUser.tsx

@@ -14,6 +14,7 @@ import {
 	WIDTH_CHANNEL_LIST_BOX,
 	WIDTH_CLAN_SIDE_BAR,
 	WIDTH_PANEL_PROFILE,
+	generateE2eId,
 	getNameForPrioritize
 } from '@mezon/utils';
 import { ChannelStreamMode, ChannelType } from 'mezon-js';
@@ -172,6 +173,7 @@ const MentionUser = ({
 					style={{ textDecoration: 'none' }}
 					className={`select-all cursor-pointer outline-none font-medium px-0.1 rounded-sm whitespace-nowrap bg-mention color-mention hover-mention   ${isJumMessageEnabled ? '' : 'hover:none'}`}
 					suppressContentEditableWarning={true}
+					data-e2e={generateE2eId('chat.channel_message.mention_user')}
 				>
 					{displayToken.display}
 				</a>

libs/components/src/lib/components/MemberList/listMember.tsx

@@ -11,7 +11,7 @@ import {
 	useAppSelector
 } from '@mezon/store';
 import { Icons } from '@mezon/ui';
-import { createImgproxyUrl, isLinuxDesktop, isWindowsDesktop, useSyncEffect, useWindowSize } from '@mezon/utils';
+import { createImgproxyUrl, generateE2eId, isLinuxDesktop, isWindowsDesktop, useSyncEffect, useWindowSize } from '@mezon/utils';
 import isElectron from 'is-electron';
 import { memo, useEffect, useMemo, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
@@ -233,6 +233,7 @@ const ListMember = () => {
 								height: `${virtualRow.size}px`,
 								transform: `translateY(${virtualRow.start}px)`
 							}}
+							data-e2e={generateE2eId('chat.channel_message.member_list.item')}
 						>
 							<div className="flex items-center px-4 h-full">
 								{typeof user === 'object' && 'onlineSeparate' in user ? (

libs/components/src/lib/components/MessageBox/FileSelectionButton.tsx

@@ -40,7 +40,7 @@ function FileSelectionButton({ currentChannelId }: FileSelectionButtonProps) {
 	};
 	return (
 		<label className="pl-3 flex items-center h-11" data-e2e={generateE2eId('mention.selected_file')}>
-			<input id="preview_img" type="file" onChange={handleChange} className="w-full hidden" multiple />
+			<input id="preview_img" type="file" onChange={handleChange} className="w-full hidden" multiple  data-e2e={generateE2eId('user_setting.profile.user_profile.upload.avatar_input')} />
 			<div className="flex flex-row h-6 w-6 items-center justify-center cursor-pointer text-theme-primary text-theme-primary-hover">
 				<Icons.AddCircle className="" />
 			</div>

libs/components/src/lib/components/ModalUserProfile/AvatarProfile.tsx

@@ -1,7 +1,7 @@
 import { channelMembersActions, selectCurrentClanId, useAppDispatch, userClanProfileActions } from '@mezon/store';
 import { Icons } from '@mezon/ui';
 import type { ChannelMembersEntity, EUserStatus, IUserAccount } from '@mezon/utils';
-import { ActivitiesType, createImgproxyUrl } from '@mezon/utils';
+import { ActivitiesType, createImgproxyUrl, generateE2eId } from '@mezon/utils';
 import type { ApiUserActivity } from 'mezon-js/api.gen';
 import React, { useMemo } from 'react';
 import { useSelector } from 'react-redux';
@@ -61,7 +61,7 @@ const AvatarProfile = ({
 	}, [activityByUserId, customStatus, activityNames]);
 
 	return (
-		<div className=" text-theme-primary flex flex-1 flex-row gap-[6px] mt-[-50px] px-[16px]">
+		<div className=" text-theme-primary flex flex-1 flex-row gap-[6px] mt-[-50px] px-[16px]" data-e2e={generateE2eId('user_setting.profile.user_profile.preview.avatar')}>
 			<div className="relative h-fit">
 				<AvatarImage
 					alt={username || ''}

libs/components/src/lib/components/SettingProfile/ImageEditor/ImageEditor.tsx

@@ -1,5 +1,5 @@
 import { Icons } from '@mezon/ui';
-import type { ImageSourceObject } from '@mezon/utils';
+import { generateE2eId, type ImageSourceObject } from '@mezon/utils';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -297,7 +297,7 @@ const ImageEditorFooter = React.memo(({ handleReset, handleClose, handleApply, t
 				onClick={handleApply}
 				className="bg-[#5865F2] hover:bg-[#4752C4] text-white text-sm px-4 py-2 rounded-md"
 				title={t('applyChanges')}
-				data-e2e={'button.base'}
+				data-e2e={generateE2eId('user_setting.profile.user_profile.upload.avatar_input.apply_button')}
 			>
 				{t('apply')}
 			</button>

libs/components/src/lib/contexts/MemberContextMenu/MemberMenuItem.tsx

@@ -1,3 +1,4 @@
+import { generateE2eId } from '@mezon/utils';
 import { FC, ReactNode } from 'react';
 import { Item } from 'react-contexify';
 
@@ -41,7 +42,7 @@ export const MemberMenuItem: FC<MemberMenuItemProps> = ({ label, onClick, isWarn
 				}}
 				className={`${isWarning ? 'text-[#E13542] ' : 'text-theme-primary-hover'} p-1`}
 			>
-				<span className="truncate max-w-[160px] block overflow-hidden text-ellipsis whitespace-nowrap" title={label}>
+				<span className="truncate max-w-[160px] block overflow-hidden text-ellipsis whitespace-nowrap" title={label} data-e2e={generateE2eId('chat.channel_message.member_list.item.actions.view_profile')}>
 					{label}
 				</span>
 				{rightElement}

libs/utils/src/lib/e2e-testing/constants.ts

@@ -14,6 +14,10 @@ export const DATA_E2E_IDENTIFIER = {
 	avatar: {
 		image: ''
 	},
+	footer_profile: {
+		avatar: '',
+		name: ''
+	},
 	button: {
 		base: ''
 	},
@@ -91,14 +95,18 @@ export const DATA_E2E_IDENTIFIER = {
 			button: {
 				add_clan: '',
 				add_channel: '',
-				events: ''
+				events: '',
+				members: ''
 			},
 			panel: {
 				category_panel: '',
 				add_channel: '',
 				events: ''
 			}
 		},
+		member_list: {
+			user_info: ''
+		},
 		modal: {
 			create_category: {
 				input: {
@@ -306,6 +314,7 @@ export const DATA_E2E_IDENTIFIER = {
 					file: '',
 					mute: '',
 					inbox: '',
+					member: '',
 					pin: {
 						pin_badge: ''
 					},
@@ -342,6 +351,14 @@ export const DATA_E2E_IDENTIFIER = {
 				checkbox: {
 					private_thread: ''
 				}
+			},
+			mention_user: '',
+			member_list: {
+				item: {
+					actions: {
+						view_profile: ''
+					}
+				}
 			}
 		},
 		mention: {
@@ -391,6 +408,9 @@ export const DATA_E2E_IDENTIFIER = {
 			button_setting: '',
 			tab_profile: '',
 			user_profile: {
+				preview: {
+					avatar: ''
+				},
 				input: {
 					display_name: '',
 					about_me: ''
@@ -403,7 +423,10 @@ export const DATA_E2E_IDENTIFIER = {
 					about_me_length: ''
 				},
 				upload: {
-					direct_message_icon_input: ''
+					direct_message_icon_input: '',
+					avatar_input: {
+						apply_button: ''
+					}
 				}
 			},
 			clan_profile: {