Feat/63745/thread-management

libs/components/src/lib/components/ChannelTopbar/TopBarComponents/Threads/CreateThread/PrivateThread.tsx

@@ -1,4 +1,5 @@
 import { selectIsPrivate, threadsActions, useAppDispatch } from '@mezon/store';
+import { generateE2eId } from '@mezon/utils';
 import { useSelector } from 'react-redux';
 
 type PrivateThreadProps = {
@@ -19,7 +20,13 @@ const PrivateThread = ({ label, title }: PrivateThreadProps) => {
 		<div className="flex flex-col mt-4 mb-4">
 			<span className="text-xs font-semibold uppercase mb-2 text-theme-primary-active">{title}</span>
 			<div className="flex items-center gap-2">
-				<input type="checkbox" onChange={handleToggle} id="private" className="w-6 h-6 rounded-lg focus:ring-transparent cursor-pointer" />
+				<input
+					type="checkbox"
+					onChange={handleToggle}
+					id="private"
+					className="w-6 h-6 rounded-lg focus:ring-transparent cursor-pointer"
+					data-e2e={generateE2eId('chat.channel_message.thread_box.checkbox.private_thread')}
+				/>
 				<label htmlFor="private" className="text-theme-primary text-base hover:text-theme-primary cursor-pointer">
 					{label}
 				</label>

libs/components/src/lib/components/ChannelTopbar/TopBarComponents/Threads/CreateThread/ThreadNameTextField.tsx

@@ -48,7 +48,7 @@ const ThreadNameTextField = ({ label, placeholder, value, className, onChange, o
 				className={className}
 				onKeyDown={handleKeyDown}
 				maxLength={Number(process.env.NX_MAX_LENGTH_NAME_ALLOWED)}
-				data-e2e={generateE2eId('chat.channel_message.thread_name_input.thread_box')}
+				data-e2e={generateE2eId('chat.channel_message.thread_box.input.thread_name')}
 			/>
 			{nameThreadError && <span className="text-[#e44141] text-xs italic font-thin">{nameThreadError}</span>}
 			{checkValidate && (

libs/components/src/lib/components/ChannelTopbar/TopBarComponents/Threads/ThreadModal/index.tsx

@@ -12,7 +12,7 @@ import {
 	useAppDispatch
 } from '@mezon/store';
 import { Icons } from '@mezon/ui';
-import { EOverriddenPermission, LIMIT, checkIsThread } from '@mezon/utils';
+import { EOverriddenPermission, LIMIT, checkIsThread, generateE2eId } from '@mezon/utils';
 import { RefObject, useCallback, useEffect, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
@@ -134,6 +134,7 @@ const ThreadModal = ({ onClose, rootRef }: ThreadsProps) => {
 							<button
 								onClick={handleCreateThread}
 								className=" px-3  text-center text-sm font-medium h-6 rounded-lg btn-primary btn-primary-hover"
+								data-e2e={generateE2eId('chat.channel_message.header.button.thread.modal.thread_management.button.create_thread')}
 							>
 								Create
 							</button>

libs/components/src/lib/components/ThreadListChannel/ThreadLink.tsx

@@ -7,7 +7,7 @@ import {
 	useAppSelector
 } from '@mezon/store';
 import { Icons } from '@mezon/ui';
-import { IChannel } from '@mezon/utils';
+import { IChannel, generateE2eId } from '@mezon/utils';
 import { ChannelStreamMode } from 'mezon-js';
 import React, { memo, useCallback, useImperativeHandle, useRef } from 'react';
 import { useModal } from 'react-modal-hook';
@@ -119,7 +119,11 @@ const ThreadLink = React.forwardRef<ThreadLinkRef, ThreadLinkProps>(({ thread, h
 				<div className="flex items-center gap-2">
 					{events[0] && <EventSchedule event={events[0]} className="inline" />}
 
-					<span title={thread?.channel_label && thread?.channel_label?.length >= 15 ? thread?.channel_label : ''} className="truncate">
+					<span
+						title={thread?.channel_label && thread?.channel_label?.length >= 15 ? thread?.channel_label : ''}
+						className="truncate"
+						data-e2e={generateE2eId('clan_page.channel_list.thread_item.name')}
+					>
 						{thread.channel_label}
 					</span>
 				</div>

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

@@ -149,6 +149,9 @@ export const DATA_E2E_IDENTIFIER = {
 					stream: ''
 				},
 				name: ''
+			},
+			thread_item: {
+				name: ''
 			}
 		}
 	},
@@ -209,7 +212,15 @@ export const DATA_E2E_IDENTIFIER = {
 					inbox: '',
 					pin: '',
 					canvas: '',
-					thread: '',
+					thread: {
+						modal: {
+							thread_management: {
+								button: {
+									create_thread: ''
+								}
+							}
+						}
+					},
 					chat: ''
 				}
 			},
@@ -226,8 +237,13 @@ export const DATA_E2E_IDENTIFIER = {
 				forward_message: '',
 				delete_message: ''
 			},
-			thread_name_input: {
-				thread_box: ''
+			thread_box: {
+				input: {
+					thread_name: ''
+				},
+				checkbox: {
+					private_thread: ''
+				}
 			}
 		},
 		mention: {