From 71fc2c0e206659bb55a4ddab921f78cf7d03c3e4 Mon Sep 17 00:00:00 2001
From: dathaquoc <dat.haquoc@ncc.asia>
Date: Tue, 23 Sep 2025 09:08:34 +0700
Subject: [PATCH 1/2] feat-63412: change avatar profile

---
 .../src/lib/components/FooterProfile/index.tsx        |  7 ++++++-
 .../lib/components/MessageBox/FileSelectionButton.tsx |  2 +-
 .../lib/components/ModalUserProfile/AvatarProfile.tsx |  4 ++--
 .../SettingProfile/ImageEditor/ImageEditor.tsx        |  4 ++--
 libs/utils/src/lib/e2e-testing/constants.ts           | 11 ++++++++++-
 5 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/libs/components/src/lib/components/FooterProfile/index.tsx b/libs/components/src/lib/components/FooterProfile/index.tsx
index d988283399..46ecd65d88 100644
--- a/libs/components/src/lib/components/FooterProfile/index.tsx
+++ b/libs/components/src/lib/components/FooterProfile/index.tsx
@@ -295,7 +295,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}
diff --git a/libs/components/src/lib/components/MessageBox/FileSelectionButton.tsx b/libs/components/src/lib/components/MessageBox/FileSelectionButton.tsx
index 979c41e32d..a3a4453889 100644
--- a/libs/components/src/lib/components/MessageBox/FileSelectionButton.tsx
+++ b/libs/components/src/lib/components/MessageBox/FileSelectionButton.tsx
@@ -42,7 +42,7 @@ function FileSelectionButton({ currentClanId, currentChannelId, hasPermissionEdi
 	};
 	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>
diff --git a/libs/components/src/lib/components/ModalUserProfile/AvatarProfile.tsx b/libs/components/src/lib/components/ModalUserProfile/AvatarProfile.tsx
index 9be4a91bfb..f0eccfd3ef 100644
--- a/libs/components/src/lib/components/ModalUserProfile/AvatarProfile.tsx
+++ b/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 || ''}
diff --git a/libs/components/src/lib/components/SettingProfile/ImageEditor/ImageEditor.tsx b/libs/components/src/lib/components/SettingProfile/ImageEditor/ImageEditor.tsx
index 339e62da00..2f7e39a7ee 100644
--- a/libs/components/src/lib/components/SettingProfile/ImageEditor/ImageEditor.tsx
+++ b/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>
diff --git a/libs/utils/src/lib/e2e-testing/constants.ts b/libs/utils/src/lib/e2e-testing/constants.ts
index 9859d097f6..39a49d2a38 100644
--- a/libs/utils/src/lib/e2e-testing/constants.ts
+++ b/libs/utils/src/lib/e2e-testing/constants.ts
@@ -14,6 +14,9 @@ export const DATA_E2E_IDENTIFIER = {
 	avatar: {
 		image: ''
 	},
+	footer_profile: {
+		avatar: ''
+	},
 	button: {
 		base: ''
 	},
@@ -372,6 +375,9 @@ export const DATA_E2E_IDENTIFIER = {
 			button_setting: '',
 			tab_profile: '',
 			user_profile: {
+				preview: {
+					avatar: ''
+				},
 				input: {
 					display_name: '',
 					about_me: ''
@@ -384,7 +390,10 @@ export const DATA_E2E_IDENTIFIER = {
 					about_me_length: ''
 				},
 				upload: {
-					direct_message_icon_input: ''
+					direct_message_icon_input: '',
+					avatar_input: {
+						apply_button: ''
+					}
 				}
 			},
 			clan_profile: {

From a021812e1719a482c769a69babd19f1820ee7128 Mon Sep 17 00:00:00 2001
From: dathaquoc <dat.haquoc@ncc.asia>
Date: Wed, 24 Sep 2025 17:01:23 +0700
Subject: [PATCH 2/2] feat-63412: change clan avatar

---
 .../src/app/pages/member/TableMemberItem.tsx   |  4 ++--
 .../ChannelListComponents/index.tsx            |  2 +-
 .../src/lib/components/ChannelTopbar/index.tsx |  1 +
 .../src/lib/components/FooterProfile/index.tsx |  2 +-
 .../MarkdownFormatText/MentionUser.tsx         |  2 ++
 .../lib/components/MemberList/listMember.tsx   |  3 ++-
 .../MemberContextMenu/MemberMenuItem.tsx       |  3 ++-
 libs/utils/src/lib/e2e-testing/constants.ts    | 18 ++++++++++++++++--
 8 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/apps/chat/src/app/pages/member/TableMemberItem.tsx b/apps/chat/src/app/pages/member/TableMemberItem.tsx
index 6e8b8fc93c..c274374214 100644
--- a/apps/chat/src/app/pages/member/TableMemberItem.tsx
+++ b/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}
diff --git a/libs/components/src/lib/components/ChannelList/ChannelListComponents/index.tsx b/libs/components/src/lib/components/ChannelList/ChannelListComponents/index.tsx
index 04ca426432..1ef3cb1470 100644
--- a/libs/components/src/lib/components/ChannelList/ChannelListComponents/index.tsx
+++ b/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" />
diff --git a/libs/components/src/lib/components/ChannelTopbar/index.tsx b/libs/components/src/lib/components/ChannelTopbar/index.tsx
index c2195bd20e..0ed3135bcf 100644
--- a/libs/components/src/lib/components/ChannelTopbar/index.tsx
+++ b/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>
diff --git a/libs/components/src/lib/components/FooterProfile/index.tsx b/libs/components/src/lib/components/FooterProfile/index.tsx
index cc209d51b1..9a2e457ce7 100644
--- a/libs/components/src/lib/components/FooterProfile/index.tsx
+++ b/libs/components/src/lib/components/FooterProfile/index.tsx
@@ -314,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>
diff --git a/libs/components/src/lib/components/MarkdownFormatText/MentionUser.tsx b/libs/components/src/lib/components/MarkdownFormatText/MentionUser.tsx
index 0ae7aa96c9..b9806ca8d1 100644
--- a/libs/components/src/lib/components/MarkdownFormatText/MentionUser.tsx
+++ b/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>
diff --git a/libs/components/src/lib/components/MemberList/listMember.tsx b/libs/components/src/lib/components/MemberList/listMember.tsx
index 9f1ff6cc54..17981de852 100644
--- a/libs/components/src/lib/components/MemberList/listMember.tsx
+++ b/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 ? (
diff --git a/libs/components/src/lib/contexts/MemberContextMenu/MemberMenuItem.tsx b/libs/components/src/lib/contexts/MemberContextMenu/MemberMenuItem.tsx
index 0cc48601aa..b0a3c1016a 100644
--- a/libs/components/src/lib/contexts/MemberContextMenu/MemberMenuItem.tsx
+++ b/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}
diff --git a/libs/utils/src/lib/e2e-testing/constants.ts b/libs/utils/src/lib/e2e-testing/constants.ts
index 38b6d05242..8a3e330de3 100644
--- a/libs/utils/src/lib/e2e-testing/constants.ts
+++ b/libs/utils/src/lib/e2e-testing/constants.ts
@@ -15,7 +15,8 @@ export const DATA_E2E_IDENTIFIER = {
 		image: ''
 	},
 	footer_profile: {
-		avatar: ''
+		avatar: '',
+		name: ''
 	},
 	button: {
 		base: ''
@@ -94,7 +95,8 @@ export const DATA_E2E_IDENTIFIER = {
 			button: {
 				add_clan: '',
 				add_channel: '',
-				events: ''
+				events: '',
+				members: ''
 			},
 			panel: {
 				category_panel: '',
@@ -102,6 +104,9 @@ export const DATA_E2E_IDENTIFIER = {
 				events: ''
 			}
 		},
+		member_list: {
+			user_info: ''
+		},
 		modal: {
 			create_category: {
 				input: {
@@ -303,6 +308,7 @@ export const DATA_E2E_IDENTIFIER = {
 					file: '',
 					mute: '',
 					inbox: '',
+					member: '',
 					pin: {
 						pin_badge: ''
 					},
@@ -339,6 +345,14 @@ export const DATA_E2E_IDENTIFIER = {
 				checkbox: {
 					private_thread: ''
 				}
+			},
+			mention_user: '',
+			member_list: {
+				item: {
+					actions: {
+						view_profile: ''
+					}
+				}
 			}
 		},
 		mention: {