diff --git a/.changeset/wet-beers-end.md b/.changeset/wet-beers-end.md new file mode 100644 index 0000000000000..b63ca6038c1fa --- /dev/null +++ b/.changeset/wet-beers-end.md @@ -0,0 +1,5 @@ +--- +'@rocket.chat/meteor': minor +--- + +Standardizes the display of username with `@` before diff --git a/apps/meteor/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultipleOption.tsx b/apps/meteor/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultipleOption.tsx index 709c2b5df0181..9a82c5eba53d5 100644 --- a/apps/meteor/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultipleOption.tsx +++ b/apps/meteor/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultipleOption.tsx @@ -24,7 +24,7 @@ const UserAutoCompleteMultipleOption = ({ label, ...props }: UserAutoCompleteMul return ( <> - {name} {!_federated && ({username})} + {name} {!_federated && @{username}} ); }, [_federated, name, useRealName, username]); diff --git a/apps/meteor/client/views/room/composer/ComposerBoxPopupUser.tsx b/apps/meteor/client/views/room/composer/ComposerBoxPopupUser.tsx index d01c4e07c120c..a823b14dd7b26 100644 --- a/apps/meteor/client/views/room/composer/ComposerBoxPopupUser.tsx +++ b/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, - {name ?? username} {name && name !== username && username} - {nickname && ({nickname})} + {nameOrUsername} {displayUsername && `@${displayUsername}`} + {nickname && ({nickname})} )} {system && ( - {username} {name} + @{username} {name} )} diff --git a/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembersItem.tsx b/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembersItem.tsx index 26e09d4ef4621..ef1448d50ff64 100644 --- a/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembersItem.tsx +++ b/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembersItem.tsx @@ -67,7 +67,7 @@ const RoomMembersItem = ({ {federated ? : } - {nameOrUsername} {displayUsername && ({displayUsername})} + {nameOrUsername} {displayUsername && @{displayUsername}} {subscription?.status === 'INVITED' && ( diff --git a/apps/meteor/tests/e2e/message-mentions.spec.ts b/apps/meteor/tests/e2e/message-mentions.spec.ts index 87ca04206bad3..d03c62edd4f5b 100644 --- a/apps/meteor/tests/e2e/message-mentions.spec.ts +++ b/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', () => {