feat: standardize username display (#38532)

Author: juliajforesti

.changeset/wet-beers-end.md

@@ -0,0 +1,5 @@
+---
+'@rocket.chat/meteor': minor
+---
+
+Standardizes the display of username with `@` before

apps/meteor/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultipleOption.tsx

@@ -24,7 +24,7 @@ const UserAutoCompleteMultipleOption = ({ label, ...props }: UserAutoCompleteMul
 
 		return (
 			<>
-				{name} {!_federated && <OptionDescription>({username})</OptionDescription>}
+				{name} {!_federated && <OptionDescription>@{username}</OptionDescription>}
 			</>
 		);
 	}, [_federated, name, useRealName, username]);

apps/meteor/client/views/room/composer/ComposerBoxPopupUser.tsx

@@ -1,7 +1,9 @@
 import { OptionAvatar, OptionColumn, OptionContent, OptionInput } from '@rocket.chat/fuselage';
 import { UserAvatar } from '@rocket.chat/ui-avatar';
+import { useSetting } from '@rocket.chat/ui-contexts';
 import { useTranslation } from 'react-i18next';
 
+import { getUserDisplayNames } from '../../../../lib/getUserDisplayNames';
 import ReactiveUserStatus from '../../../components/UserStatus/ReactiveUserStatus';
 
 export type ComposerBoxPopupUserProps = {
@@ -19,6 +21,9 @@ export type ComposerBoxPopupUserProps = {
 
 function ComposerBoxPopupUser({ _id, system, username, name, nickname, outside, suggestion, variant }: ComposerBoxPopupUserProps) {
 	const { t } = useTranslation();
+	const useRealName = useSetting('UI_Use_Real_Name', false);
+
+	const [nameOrUsername, displayUsername] = getUserDisplayNames(name, username, useRealName);
 
 	return (
 		<>
@@ -31,15 +36,15 @@ function ComposerBoxPopupUser({ _id, system, username, name, nickname, outside,
 						<ReactiveUserStatus uid={_id} />
 					</OptionColumn>
 					<OptionContent>
-						<strong>{name ?? username}</strong> {name && name !== username && username}
-						{nickname && <span className='popup-user-nickname'>({nickname})</span>}
+						<strong>{nameOrUsername}</strong> {displayUsername && `@${displayUsername}`}
+						{nickname && <span className='popup-user-nickname'> ({nickname})</span>}
 					</OptionContent>
 				</>
 			)}
 
 			{system && (
 				<OptionContent>
-					<strong>{username}</strong> {name}
+					<strong>@{username}</strong> {name}
 				</OptionContent>
 			)}
 

apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembersItem.tsx

@@ -67,7 +67,7 @@ const RoomMembersItem = ({
 			</OptionAvatar>
 			<OptionColumn>{federated ? <Icon name='globe' size='x16' /> : <ReactiveUserStatus uid={_id} />}</OptionColumn>
 			<OptionContent data-qa={`MemberItem-${username}`}>
-				{nameOrUsername} {displayUsername && <OptionDescription>({displayUsername})</OptionDescription>}
+				{nameOrUsername} {displayUsername && <OptionDescription>@{displayUsername}</OptionDescription>}
 			</OptionContent>
 			{subscription?.status === 'INVITED' && (
 				<OptionColumn>

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

@@ -111,8 +111,8 @@ test.describe.serial('message-mentions', () => {
 		await poHomeChannel.navbar.openChat('general');
 		await poHomeChannel.composer.inputMessage.type('@');
 
-		await expect(poHomeChannel.content.messagePopupUsers.locator('role=listitem >> text="all"')).toBeVisible();
-		await expect(poHomeChannel.content.messagePopupUsers.locator('role=listitem >> text="here"')).toBeVisible();
+		await expect(poHomeChannel.content.messagePopupUsers.locator('role=listitem >> text="@all"')).toBeVisible();
+		await expect(poHomeChannel.content.messagePopupUsers.locator('role=listitem >> text="@here"')).toBeVisible();
 	});
 
 	test.describe('users not in channel', () => {