refactor: Moves getUserDisplayName outside from meteor app (#35031)

Author: dougfabris

apps/meteor/app/lib/server/functions/attachMessage.ts

@@ -1,6 +1,6 @@
+import { getUserDisplayName } from '@rocket.chat/core-typings';
 import type { IMessage, IRoom, MessageAttachment } from '@rocket.chat/core-typings';
 
-import { getUserDisplayName } from '../../../../lib/getUserDisplayName';
 import { roomCoordinator } from '../../../../server/lib/rooms/roomCoordinator';
 import { settings } from '../../../settings/server/cached';
 import { getUserAvatarURL } from '../../../utils/server/getUserAvatarURL';

apps/meteor/app/lib/server/startup/mentionUserNotInChannel.ts

@@ -1,12 +1,11 @@
 import { api } from '@rocket.chat/core-services';
 import type { IMessage } from '@rocket.chat/core-typings';
-import { isDirectMessageRoom, isEditedMessage, isOmnichannelRoom, isRoomFederated } from '@rocket.chat/core-typings';
+import { isDirectMessageRoom, isEditedMessage, isOmnichannelRoom, isRoomFederated, getUserDisplayName } from '@rocket.chat/core-typings';
 import { Subscriptions, Users } from '@rocket.chat/models';
 import type { ActionsBlock } from '@rocket.chat/ui-kit';
 import moment from 'moment';
 
 import { callbacks } from '../../../../lib/callbacks';
-import { getUserDisplayName } from '../../../../lib/getUserDisplayName';
 import { isTruthy } from '../../../../lib/isTruthy';
 import { i18n } from '../../../../server/lib/i18n';
 import { hasPermissionAsync } from '../../../authorization/server/functions/hasPermission';

apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/UserMenuHeader.tsx

@@ -1,12 +1,12 @@
 import type { IUser } from '@rocket.chat/core-typings';
 import { Box, Margins } from '@rocket.chat/fuselage';
 import { UserAvatar } from '@rocket.chat/ui-avatar';
+import { useUserDisplayName } from '@rocket.chat/ui-client';
 import { useSetting } from '@rocket.chat/ui-contexts';
 import { useTranslation } from 'react-i18next';
 
 import MarkdownText from '../../../components/MarkdownText';
 import { UserStatus } from '../../../components/UserStatus';
-import { useUserDisplayName } from '../../../hooks/useUserDisplayName';
 
 type UserMenuHeaderProps = { user: IUser };
 

apps/meteor/client/components/UserInfo/UserInfo.tsx

@@ -1,13 +1,13 @@
 import type { IUser, Serialized } from '@rocket.chat/core-typings';
 import { Box, Margins, Tag } from '@rocket.chat/fuselage';
+import { useUserDisplayName } from '@rocket.chat/ui-client';
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
 import type { ReactElement, ReactNode } from 'react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useTimeAgo } from '../../hooks/useTimeAgo';
 import { useUserCustomFields } from '../../hooks/useUserCustomFields';
-import { useUserDisplayName } from '../../hooks/useUserDisplayName';
 import { ContextualbarScrollableContent } from '../Contextualbar';
 import {
 	InfoPanel,

apps/meteor/client/components/message/MessageHeader.tsx

@@ -7,14 +7,14 @@ import {
 	MessageStatusPrivateIndicator,
 	MessageNameContainer,
 } from '@rocket.chat/fuselage';
+import { useUserDisplayName } from '@rocket.chat/ui-client';
 import type { KeyboardEvent, ReactElement } from 'react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import StatusIndicators from './StatusIndicators';
 import MessageRoles from './header/MessageRoles';
 import { useMessageListShowUsername, useMessageListShowRealName, useMessageListShowRoles } from './list/MessageListContext';
-import { getUserDisplayName } from '../../../lib/getUserDisplayName';
 import { useFormatDateAndTime } from '../../hooks/useFormatDateAndTime';
 import { useFormatTime } from '../../hooks/useFormatTime';
 import { useUserData } from '../../hooks/useUserData';
@@ -37,6 +37,7 @@ const MessageHeader = ({ message }: MessageHeaderProps): ReactElement => {
 	const user: UserPresence = { ...message.u, roles: [], ...useUserData(message.u._id) };
 	const usernameAndRealNameAreSame = !user.name || user.username === user.name;
 	const showUsername = useMessageListShowUsername() && showRealName && !usernameAndRealNameAreSame;
+	const displayName = useUserDisplayName(user);
 
 	const showRoles = useMessageListShowRoles();
 	const roles = useMessageRoles(message.u._id, message.rid, showRoles);
@@ -48,7 +49,7 @@ const MessageHeader = ({ message }: MessageHeaderProps): ReactElement => {
 				tabIndex={0}
 				role='button'
 				id={`${message._id}-displayName`}
-				aria-label={getUserDisplayName(user.name, user.username, showRealName)}
+				aria-label={displayName}
 				onClick={(e) => openUserCard(e, message.u.username)}
 				onKeyDown={(e: KeyboardEvent<HTMLSpanElement>) => {
 					(e.code === 'Enter' || e.code === 'Space') && openUserCard(e, message.u.username);
@@ -61,7 +62,7 @@ const MessageHeader = ({ message }: MessageHeaderProps): ReactElement => {
 					title={!showUsername && !usernameAndRealNameAreSame ? `@${user.username}` : undefined}
 					data-username={user.username}
 				>
-					{message.alias || getUserDisplayName(user.name, user.username, showRealName)}
+					{message.alias || displayName}
 				</MessageName>
 				{showUsername && (
 					<>

apps/meteor/client/components/message/variants/SystemMessage.tsx

@@ -12,13 +12,13 @@ import {
 	MessageNameContainer,
 } from '@rocket.chat/fuselage';
 import { UserAvatar } from '@rocket.chat/ui-avatar';
+import { useUserDisplayName } from '@rocket.chat/ui-client';
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
 import type { ComponentProps, ReactElement, KeyboardEvent } from 'react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { MessageTypes } from '../../../../app/ui-utils/client';
-import { getUserDisplayName } from '../../../../lib/getUserDisplayName';
 import { useFormatDateAndTime } from '../../../hooks/useFormatDateAndTime';
 import { useFormatTime } from '../../../hooks/useFormatTime';
 import { useUserData } from '../../../hooks/useUserData';
@@ -49,6 +49,7 @@ const SystemMessage = ({ message, showUserAvatar, ...props }: SystemMessageProps
 	const user: UserPresence = { ...message.u, roles: [], ...useUserData(message.u._id) };
 	const usernameAndRealNameAreSame = !user.name || user.username === user.name;
 	const showUsername = useMessageListShowUsername() && showRealName && !usernameAndRealNameAreSame;
+	const displayName = useUserDisplayName(user);
 
 	const messageType = MessageTypes.getType(message);
 
@@ -85,7 +86,7 @@ const SystemMessage = ({ message, showUserAvatar, ...props }: SystemMessageProps
 						style={{ cursor: 'pointer' }}
 						{...triggerProps}
 					>
-						<MessageSystemName>{getUserDisplayName(user.name, user.username, showRealName)}</MessageSystemName>
+						<MessageSystemName>{displayName}</MessageSystemName>
 						{showUsername && (
 							<>
 								{' '}

apps/meteor/client/hooks/useRoomName.ts

@@ -1,9 +1,8 @@
 import type { IRoom } from '@rocket.chat/core-typings';
 import { isDirectMessageRoom } from '@rocket.chat/core-typings';
+import { useUserDisplayName } from '@rocket.chat/ui-client';
 import { useUserSubscription } from '@rocket.chat/ui-contexts';
 
-import { useUserDisplayName } from './useUserDisplayName';
-
 /**
  *
  * Hook to get the name of the room

apps/meteor/client/lib/getUserDisplayName.spec.ts

@@ -0,0 +1,16 @@
+import { getUserDisplayName } from '@rocket.chat/core-typings';
+
+const fakeUser = {
+	name: 'John Doe',
+	username: 'john.doe',
+};
+
+it('should return username if UI_Use_Real_Name setting is false', () => {
+	const result = getUserDisplayName(fakeUser.name, fakeUser.username, false);
+	expect(result).toBe(fakeUser.username);
+});
+
+it('should return name if UI_Use_Real_Name setting is true', () => {
+	const result = getUserDisplayName(fakeUser.name, fakeUser.username, true);
+	expect(result).toBe(fakeUser.name);
+});

apps/meteor/client/sidebar/header/UserMenuHeader.tsx

@@ -1,12 +1,12 @@
 import type { IUser } from '@rocket.chat/core-typings';
 import { Box, Margins } from '@rocket.chat/fuselage';
 import { UserAvatar } from '@rocket.chat/ui-avatar';
+import { useUserDisplayName } from '@rocket.chat/ui-client';
 import { useSetting } from '@rocket.chat/ui-contexts';
 import { useTranslation } from 'react-i18next';
 
 import MarkdownText from '../../components/MarkdownText';
 import { UserStatus } from '../../components/UserStatus';
-import { useUserDisplayName } from '../../hooks/useUserDisplayName';
 
 const UserMenuHeader = ({ user }: { user: IUser }) => {
 	const { t } = useTranslation();

apps/meteor/client/views/admin/moderation/helpers/ContextMessage.tsx

@@ -2,6 +2,7 @@ import type { IMessage, MessageReport, MessageAttachment } from '@rocket.chat/co
 import { isE2EEMessage, isQuoteAttachment } from '@rocket.chat/core-typings';
 import { Message, MessageName, MessageToolbarItem, MessageToolbarWrapper, MessageUsername } from '@rocket.chat/fuselage';
 import { UserAvatar } from '@rocket.chat/ui-avatar';
+import { useUserDisplayName } from '@rocket.chat/ui-client';
 import { useSetting } from '@rocket.chat/ui-contexts';
 import { useTranslation } from 'react-i18next';
 
@@ -12,7 +13,6 @@ import UiKitMessageBlock from '../../../../components/message/uikit/UiKitMessage
 import { useFormatDate } from '../../../../hooks/useFormatDate';
 import { useFormatDateAndTime } from '../../../../hooks/useFormatDateAndTime';
 import { useFormatTime } from '../../../../hooks/useFormatTime';
-import { useUserDisplayName } from '../../../../hooks/useUserDisplayName';
 import MessageReportInfo from '../MessageReportInfo';
 import useDeleteMessage from '../hooks/useDeleteMessage';
 import { useDismissMessageAction } from '../hooks/useDismissMessageAction';