chore: Add roomName on Composer placeholder (#29255)

Co-authored-by: Guilherme Gazzo <guilhermegazzo@gmail.com>

.changeset/rare-bats-compare.md

@@ -0,0 +1,5 @@
+---
+"@rocket.chat/meteor": minor
+---
+
+chore: Add `roomName` on Composer placeholder

apps/meteor/client/hooks/useRoomName.ts

@@ -0,0 +1,25 @@
+import type { IRoom } from '@rocket.chat/core-typings';
+import { isDirectMessageRoom } from '@rocket.chat/core-typings';
+import { useUserSubscription } from '@rocket.chat/ui-contexts';
+
+import { useUserDisplayName } from './useUserDisplayName';
+
+/**
+ *
+ * Hook to get the name of the room
+ *
+ * @param room - Room object
+ * @returns Room name
+ * @public
+ *
+ */
+export const useRoomName = (room: IRoom) => {
+	const subscription = useUserSubscription(room._id);
+	const username = useUserDisplayName({ name: subscription?.fname, username: subscription?.name });
+
+	if (isDirectMessageRoom(room)) {
+		return username;
+	}
+
+	return room.fname || room.name;
+};

apps/meteor/client/views/room/components/body/composer/messageBox/MessageBox.tsx

@@ -11,7 +11,7 @@ import {
 	MessageComposerActionsDivider,
 	MessageComposerToolbarSubmit,
 } from '@rocket.chat/ui-composer';
-import { useTranslation, useUserPreference, useLayout } from '@rocket.chat/ui-contexts';
+import { useTranslation, useUserPreference, useLayout, useUserRoom } from '@rocket.chat/ui-contexts';
 import { useMutation } from '@tanstack/react-query';
 import type { ReactElement, MouseEventHandler, FormEvent, KeyboardEventHandler, KeyboardEvent, Ref, ClipboardEventHandler } from 'react';
 import React, { memo, useRef, useReducer, useCallback } from 'react';
@@ -40,6 +40,7 @@ import MessageBoxActionsToolbar from './MessageBoxActionsToolbar';
 import MessageBoxFormattingToolbar from './MessageBoxFormattingToolbar';
 import MessageBoxReplies from './MessageBoxReplies';
 import { useMessageBoxAutoFocus } from './hooks/useMessageBoxAutoFocus';
+import { useMessageBoxPlaceholder } from './hooks/useMessageBoxPlaceholder';
 
 const reducer = (_: unknown, event: FormEvent<HTMLInputElement>): boolean => {
 	const target = event.target as HTMLInputElement;
@@ -107,16 +108,17 @@ const MessageBox = ({
 	readOnly,
 	tshow,
 }: MessageBoxProps): ReactElement => {
+	const chat = useChat();
+	const t = useTranslation();
+	const room = useUserRoom(rid);
+	const composerPlaceholder = useMessageBoxPlaceholder(t('Message'), room);
+
 	const [typing, setTyping] = useReducer(reducer, false);
 
 	const { isMobile } = useLayout();
 	const sendOnEnterBehavior = useUserPreference<'normal' | 'alternative' | 'desktop'>('sendOnEnter') || isMobile;
 	const sendOnEnter = sendOnEnterBehavior == null || sendOnEnterBehavior === 'normal' || (sendOnEnterBehavior === 'desktop' && !isMobile);
 
-	const t = useTranslation();
-
-	const chat = useChat();
-
 	if (!chat) {
 		throw new Error('Chat context not found');
 	}
@@ -373,12 +375,12 @@ const MessageBox = ({
 				{isRecordingAudio && <AudioMessageRecorder rid={rid} isMicrophoneDenied={isMicrophoneDenied} />}
 				<MessageComposerInput
 					ref={mergedRefs as unknown as Ref<HTMLInputElement>}
-					aria-label={t('Message')}
+					aria-label={composerPlaceholder}
 					name='msg'
 					disabled={isRecording || !canSend}
 					onChange={setTyping}
 					style={textAreaStyle}
-					placeholder={t('Message')}
+					placeholder={composerPlaceholder}
 					onKeyDown={handler}
 					onPaste={handlePaste}
 					aria-activedescendant={ariaActiveDescendant}

apps/meteor/client/views/room/components/body/composer/messageBox/hooks/useMessageBoxPlaceholder.ts

@@ -0,0 +1,18 @@
+import type { IRoom } from '@rocket.chat/core-typings';
+import { isDirectMessageRoom } from '@rocket.chat/core-typings';
+
+import { useRoomName } from '../../../../../../../hooks/useRoomName';
+
+export const useMessageBoxPlaceholder = (placeholder: string, room?: IRoom) => {
+	if (!room) {
+		throw new Error('In order to get the placeholder a `room` must be provided');
+	}
+
+	const roomName = useRoomName(room);
+
+	if (isDirectMessageRoom(room)) {
+		return `${placeholder} @${roomName}`;
+	}
+
+	return `${placeholder} #${roomName}`;
+};

apps/meteor/tests/e2e/message-actions.spec.ts

@@ -34,7 +34,7 @@ test.describe.serial('message-actions', () => {
 		await poHomeChannel.content.sendMessage('this is a message for reply');
 		await poHomeChannel.content.openLastMessageMenu();
 		await page.locator('[data-qa-id="reply-in-thread"]').click();
-		await page.locator('.rcx-vertical-bar').locator('role=textbox[name="Message"]').type('this is a reply message');
+		await page.locator('.rcx-vertical-bar').locator(`role=textbox[name="Message #${targetChannel}"]`).type('this is a reply message');
 		await page.keyboard.press('Enter');
 
 		await expect(poHomeChannel.tabs.flexTabViewThreadMessage).toHaveText('this is a reply message');

apps/meteor/tests/e2e/team-management.spec.ts

@@ -45,7 +45,7 @@ test.describe.serial('teams-management', () => {
 		await poHomeTeam.content.openLastMessageMenu();
 
 		await page.locator('[data-qa-id="reply-in-thread"]').click();
-		await page.locator('.rcx-vertical-bar').locator('role=textbox[name="Message"]').type('any-reply-message');
+		await page.locator('.rcx-vertical-bar').locator(`role=textbox[name="Message #${targetTeam}"]`).type('any-reply-message');
 		await page.keyboard.press('Enter');
 
 		await expect(poHomeTeam.tabs.flexTabViewThreadMessage).toHaveText('any-reply-message');

apps/meteor/tests/e2e/threads.spec.ts

@@ -106,7 +106,7 @@ test.describe.serial('Threads', () => {
 		});
 
 		test('expect delete the thread message and keep thread open if has more than one message', async ({ page }) => {
-			await page.locator('.rcx-vertical-bar').locator('role=textbox[name="Message"]').type('another reply message');
+			await page.locator('.rcx-vertical-bar').locator(`role=textbox[name="Message #${targetChannel}"]`).type('another reply message');
 			await page.keyboard.press('Enter');
 
 			await poHomeChannel.content.openLastThreadMessageMenu();