From 553551572e459e27fa6aadc9d259ac82c073b023 Mon Sep 17 00:00:00 2001
From: "trinh.truongthiphuong" <trinh.truongthiphuong@ncc.asia>
Date: Tue, 23 Sep 2025 10:33:46 +0700
Subject: [PATCH 1/2] mark e2e to verify message is pinned

---
 .../PinnedMessages/ItemPinMessage.tsx         |  9 ++++++--
 .../lib/components/ChannelTopbar/index.tsx    |  1 +
 .../components/MessageWithSystem/index.tsx    |  8 +++++--
 .../MessageWithUser/MessageLineSystem.tsx     | 23 +++++++++++++------
 libs/utils/src/lib/e2e-testing/constants.ts   | 21 ++++++++++++++---
 5 files changed, 48 insertions(+), 14 deletions(-)

diff --git a/libs/components/src/lib/components/ChannelTopbar/TopBarComponents/PinnedMessages/ItemPinMessage.tsx b/libs/components/src/lib/components/ChannelTopbar/TopBarComponents/PinnedMessages/ItemPinMessage.tsx
index 35d97147d8..386c58a411 100644
--- a/libs/components/src/lib/components/ChannelTopbar/TopBarComponents/PinnedMessages/ItemPinMessage.tsx
+++ b/libs/components/src/lib/components/ChannelTopbar/TopBarComponents/PinnedMessages/ItemPinMessage.tsx
@@ -71,7 +71,7 @@ const ItemPinMessage = (props: ItemPinMessageProps) => {
 	return (
 		<div
 			key={pinMessage.id}
-			data-e2e={generateE2eId('common.pin_message', `msg-${pinMessage.id}`)}
+			data-e2e={generateE2eId('common.pin_message')}
 			className="relative flex flex-row justify-between  py-3 px-3 mx-2 w-widthPinMess cursor-default rounded overflow-hidden border-theme-primary bg-item-theme group/item-pinMess"
 		>
 			<div className="flex items-start gap-2 w-full ">
@@ -118,10 +118,15 @@ const ItemPinMessage = (props: ItemPinMessageProps) => {
 				</div>
 			</div>
 			<div className="absolute h-fit flex gap-x-2 items-center opacity-0 right-2 top-2 group-hover/item-pinMess:opacity-100">
-				<button onClick={handleJumpMess} className="text-xs border-theme-primary rounded-lg p-1 h-fit text-theme-primary-hover">
+				<button
+					data-e2e={generateE2eId('common.pin_message.button.jump')}
+					onClick={handleJumpMess}
+					className="text-xs border-theme-primary rounded-lg p-1 h-fit text-theme-primary-hover"
+				>
 					Jump
 				</button>
 				<button
+					data-e2e={generateE2eId('common.pin_message.button.remove_pin')}
 					className=" mr-1 bg-theme-input bg-secondary-button-hover text-theme-primary-hover rounded-full w-6 h-6 items-center justify-center text-[10px] px-3 py-2 flex"
 					onClick={handleUnpinConfirm}
 				>
diff --git a/libs/components/src/lib/components/ChannelTopbar/index.tsx b/libs/components/src/lib/components/ChannelTopbar/index.tsx
index c4384961b5..c2195bd20e 100644
--- a/libs/components/src/lib/components/ChannelTopbar/index.tsx
+++ b/libs/components/src/lib/components/ChannelTopbar/index.tsx
@@ -899,6 +899,7 @@ function PinButton({ styleCss, mode }: { styleCss: string; mode?: number }) {
 						className="absolute border-theme-primary
 		 w-[8px] h-[8px] rounded-full bg-colorDanger outline outline-1 outline-transparent
 		  font-bold text-[11px] flex items-center justify-center -bottom-[0.05rem] -right-[0.075rem]"
+						data-e2e={generateE2eId('chat.channel_message.header.button.pin.pin_badge')}
 					></div>
 				)}
 			</button>
diff --git a/libs/components/src/lib/components/MessageWithSystem/index.tsx b/libs/components/src/lib/components/MessageWithSystem/index.tsx
index ea7a523d68..a951659de8 100644
--- a/libs/components/src/lib/components/MessageWithSystem/index.tsx
+++ b/libs/components/src/lib/components/MessageWithSystem/index.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
 import type { MessagesEntity } from '@mezon/store';
 import { Icons } from '@mezon/ui';
-import { TypeMessage, addMention, convertDateStringI18n } from '@mezon/utils';
+import { TypeMessage, addMention, convertDateStringI18n, generateE2eId } from '@mezon/utils';
 import type { ReactNode } from 'react';
 import React, { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -46,7 +46,10 @@ function MessageWithSystem({
 					messageId={message?.id}
 					className={'fullBoxText relative group'}
 				>
-					<div className={`flex items-start min-h-8 relative w-full px-3 text-theme-primary pt-2 pl-5 ${isCustom ? 'pb-2' : ''}`}>
+					<div
+						data-e2e={generateE2eId('chat.system_message', message?.code.toString())}
+						className={`flex items-start min-h-8 relative w-full px-3 text-theme-primary pt-2 pl-5 ${isCustom ? 'pb-2' : ''}`}
+					>
 						{message?.code === TypeMessage.Welcome && <Icons.WelcomeIcon defaultSize="size-8 flex-shrink-0" />}
 						{message?.code === TypeMessage.UpcomingEvent && <Icons.UpcomingEventIcon defaultSize="size-8 flex-shrink-0" />}
 						{message?.code === TypeMessage.CreateThread && <Icons.ThreadIcon defaultSize="size-6 flex-shrink-0" />}
@@ -117,6 +120,7 @@ const HoverStateWrapper: React.FC<HoverStateWrapperProps> = ({
 	};
 	return (
 		<div
+			data-e2e={generateE2eId('chat.system_message')}
 			className={`message-list-item ${_isSearchMessage ? 'w-full' : ''}  relative message-container  ${className || ''}`}
 			onMouseEnter={handleMouseEnter}
 			onMouseLeave={handleMouseLeave}
diff --git a/libs/components/src/lib/components/MessageWithUser/MessageLineSystem.tsx b/libs/components/src/lib/components/MessageWithUser/MessageLineSystem.tsx
index 87553ae4fc..8f80848a07 100644
--- a/libs/components/src/lib/components/MessageWithUser/MessageLineSystem.tsx
+++ b/libs/components/src/lib/components/MessageWithUser/MessageLineSystem.tsx
@@ -1,5 +1,6 @@
 import { channelsActions, messagesActions, pinMessageActions, threadsActions, useAppDispatch } from '@mezon/store';
-import { ETokenMessage, IExtendedMessage, IMessageWithUser, TypeMessage, convertTimeStringI18n, parseThreadInfo } from '@mezon/utils';
+import type { IExtendedMessage, IMessageWithUser } from '@mezon/utils';
+import { ETokenMessage, TypeMessage, convertTimeStringI18n, generateE2eId, parseThreadInfo } from '@mezon/utils';
 import { ChannelStreamMode } from 'mezon-js';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -147,13 +148,21 @@ const RenderContentSystem = ({ message, data, mode, isSearchMessage, isJumMessag
 				{content}{' '}
 				{message.code === TypeMessage.CreatePin && (
 					<>
-						{translateMessage('systemMessages.pinned')}{' '}
-						<span onClick={getIdMessageToJump} className="font-semibold cursor-pointer hover:underline">
-							{translateMessage('systemMessages.aMessage')}
+						pinned{' '}
+						<span
+							onClick={getIdMessageToJump}
+							data-e2e={generateE2eId('chat.system_message.pin_message.button.jump_to_message')}
+							className="font-semibold cursor-pointer hover:underline"
+						>
+							a message
 						</span>{' '}
-						{translateMessage('systemMessages.toThisChannel')}{' '}
-						<span onClick={handleShowPinMessage} className="font-semibold cursor-pointer hover:underline">
-							{translateMessage('systemMessages.allPinned')}
+						to this channel. See{' '}
+						<span
+							onClick={handleShowPinMessage}
+							className="font-semibold cursor-pointer hover:underline"
+							data-e2e={generateE2eId('chat.system_message.pin_message.button.see_all_pinned')}
+						>
+							all pinned
 						</span>{' '}
 						{translateMessage('systemMessages.messages')}
 					</>
diff --git a/libs/utils/src/lib/e2e-testing/constants.ts b/libs/utils/src/lib/e2e-testing/constants.ts
index 9859d097f6..c5d9c0f4f9 100644
--- a/libs/utils/src/lib/e2e-testing/constants.ts
+++ b/libs/utils/src/lib/e2e-testing/constants.ts
@@ -297,7 +297,9 @@ export const DATA_E2E_IDENTIFIER = {
 					file: '',
 					mute: '',
 					inbox: '',
-					pin: '',
+					pin: {
+						pin_badge: ''
+					},
 					canvas: '',
 					thread: {
 						modal: {
@@ -352,7 +354,15 @@ export const DATA_E2E_IDENTIFIER = {
 				}
 			}
 		},
-		suggest_item: ''
+		suggest_item: '',
+		system_message: {
+			pin_message: {
+				button: {
+					jump_to_message: '',
+					see_all_pinned: ''
+				}
+			}
+		}
 	},
 	onboarding: {
 		chat: {
@@ -405,7 +415,12 @@ export const DATA_E2E_IDENTIFIER = {
 		item_pin_message: {
 			username: ''
 		},
-		pin_message: ''
+		pin_message: {
+			button: {
+				jump: '',
+				remove_pin: ''
+			}
+		}
 	},
 	modal: {
 		too_many_upload: '',

From 56898c4e6522c19456f07fff79407c44424b1fd2 Mon Sep 17 00:00:00 2001
From: "trinh.truongthiphuong" <trinh.truongthiphuong@ncc.asia>
Date: Tue, 23 Sep 2025 10:49:33 +0700
Subject: [PATCH 2/2] resolve conflict

---
 .../TopBarComponents/PinnedMessages/ItemPinMessage.tsx |  6 +++---
 .../src/lib/components/MessageWithSystem/index.tsx     |  4 ++--
 .../components/MessageWithUser/MessageLineSystem.tsx   | 10 +++++-----
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/libs/components/src/lib/components/ChannelTopbar/TopBarComponents/PinnedMessages/ItemPinMessage.tsx b/libs/components/src/lib/components/ChannelTopbar/TopBarComponents/PinnedMessages/ItemPinMessage.tsx
index 386c58a411..ce9ebacbbf 100644
--- a/libs/components/src/lib/components/ChannelTopbar/TopBarComponents/PinnedMessages/ItemPinMessage.tsx
+++ b/libs/components/src/lib/components/ChannelTopbar/TopBarComponents/PinnedMessages/ItemPinMessage.tsx
@@ -71,8 +71,8 @@ const ItemPinMessage = (props: ItemPinMessageProps) => {
 	return (
 		<div
 			key={pinMessage.id}
-			data-e2e={generateE2eId('common.pin_message')}
 			className="relative flex flex-row justify-between  py-3 px-3 mx-2 w-widthPinMess cursor-default rounded overflow-hidden border-theme-primary bg-item-theme group/item-pinMess"
+			data-e2e={generateE2eId('common.pin_message')}
 		>
 			<div className="flex items-start gap-2 w-full ">
 				<div className="pointer-events-none">
@@ -119,16 +119,16 @@ const ItemPinMessage = (props: ItemPinMessageProps) => {
 			</div>
 			<div className="absolute h-fit flex gap-x-2 items-center opacity-0 right-2 top-2 group-hover/item-pinMess:opacity-100">
 				<button
-					data-e2e={generateE2eId('common.pin_message.button.jump')}
 					onClick={handleJumpMess}
 					className="text-xs border-theme-primary rounded-lg p-1 h-fit text-theme-primary-hover"
+					data-e2e={generateE2eId('common.pin_message.button.jump')}
 				>
 					Jump
 				</button>
 				<button
-					data-e2e={generateE2eId('common.pin_message.button.remove_pin')}
 					className=" mr-1 bg-theme-input bg-secondary-button-hover text-theme-primary-hover rounded-full w-6 h-6 items-center justify-center text-[10px] px-3 py-2 flex"
 					onClick={handleUnpinConfirm}
+					data-e2e={generateE2eId('common.pin_message.button.remove_pin')}
 				>
 					✕
 				</button>
diff --git a/libs/components/src/lib/components/MessageWithSystem/index.tsx b/libs/components/src/lib/components/MessageWithSystem/index.tsx
index a951659de8..7c4c91faa1 100644
--- a/libs/components/src/lib/components/MessageWithSystem/index.tsx
+++ b/libs/components/src/lib/components/MessageWithSystem/index.tsx
@@ -47,8 +47,8 @@ function MessageWithSystem({
 					className={'fullBoxText relative group'}
 				>
 					<div
-						data-e2e={generateE2eId('chat.system_message', message?.code.toString())}
 						className={`flex items-start min-h-8 relative w-full px-3 text-theme-primary pt-2 pl-5 ${isCustom ? 'pb-2' : ''}`}
+						data-e2e={generateE2eId('chat.system_message', message?.code.toString())}
 					>
 						{message?.code === TypeMessage.Welcome && <Icons.WelcomeIcon defaultSize="size-8 flex-shrink-0" />}
 						{message?.code === TypeMessage.UpcomingEvent && <Icons.UpcomingEventIcon defaultSize="size-8 flex-shrink-0" />}
@@ -120,12 +120,12 @@ const HoverStateWrapper: React.FC<HoverStateWrapperProps> = ({
 	};
 	return (
 		<div
-			data-e2e={generateE2eId('chat.system_message')}
 			className={`message-list-item ${_isSearchMessage ? 'w-full' : ''}  relative message-container  ${className || ''}`}
 			onMouseEnter={handleMouseEnter}
 			onMouseLeave={handleMouseLeave}
 			onContextMenu={onContextMenu}
 			id={`msg-${messageId}`}
+			data-e2e={generateE2eId('chat.system_message')}
 		>
 			{children}
 			{isHover && popup && popup()}
diff --git a/libs/components/src/lib/components/MessageWithUser/MessageLineSystem.tsx b/libs/components/src/lib/components/MessageWithUser/MessageLineSystem.tsx
index 8f80848a07..51f9c1bc4d 100644
--- a/libs/components/src/lib/components/MessageWithUser/MessageLineSystem.tsx
+++ b/libs/components/src/lib/components/MessageWithUser/MessageLineSystem.tsx
@@ -148,21 +148,21 @@ const RenderContentSystem = ({ message, data, mode, isSearchMessage, isJumMessag
 				{content}{' '}
 				{message.code === TypeMessage.CreatePin && (
 					<>
-						pinned{' '}
+						{translateMessage('systemMessages.pinned')}{' '}
 						<span
 							onClick={getIdMessageToJump}
-							data-e2e={generateE2eId('chat.system_message.pin_message.button.jump_to_message')}
 							className="font-semibold cursor-pointer hover:underline"
+							data-e2e={generateE2eId('chat.system_message.pin_message.button.jump_to_message')}
 						>
-							a message
+							{translateMessage('systemMessages.aMessage')}
 						</span>{' '}
-						to this channel. See{' '}
+						{translateMessage('systemMessages.toThisChannel')}{' '}
 						<span
 							onClick={handleShowPinMessage}
 							className="font-semibold cursor-pointer hover:underline"
 							data-e2e={generateE2eId('chat.system_message.pin_message.button.see_all_pinned')}
 						>
-							all pinned
+							{translateMessage('systemMessages.allPinned')}
 						</span>{' '}
 						{translateMessage('systemMessages.messages')}
 					</>