refactor: Moves getUserDisplayName outside from meteor app (RocketC…

…hat#35031)

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';

apps/meteor/client/views/conference/ConferencePage.tsx

@@ -1,9 +1,9 @@
+import { useUserDisplayName } from '@rocket.chat/ui-client';
 import { useRoute, useSetModal, useUser } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import { useEffect } from 'react';
 
 import ConferencePageError from './ConferencePageError';
-import { useUserDisplayName } from '../../hooks/useUserDisplayName';
 import { useVideoConfOpenCall } from '../room/contextualBar/VideoConference/hooks/useVideoConfOpenCall';
 import PageLoading from '../root/PageLoading';
 

apps/meteor/client/views/omnichannel/contactHistory/MessageList/ContactHistoryMessage.tsx

@@ -19,10 +19,10 @@ import {
 	Bubble,
 } from '@rocket.chat/fuselage';
 import { UserAvatar } from '@rocket.chat/ui-avatar';
+import { useUserDisplayName } from '@rocket.chat/ui-client';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { getUserDisplayName } from '../../../../../lib/getUserDisplayName';
 import MessageContentBody from '../../../../components/message/MessageContentBody';
 import StatusIndicators from '../../../../components/message/StatusIndicators';
 import Attachments from '../../../../components/message/content/Attachments';
@@ -44,6 +44,7 @@ const ContactHistoryMessage = ({ message, sequential, isNewDay, showUserAvatar }
 
 	const format = useFormatDate();
 	const formatTime = useFormatTime();
+	const displayName = useUserDisplayName(message.u);
 
 	const quotes = message?.attachments?.filter(isQuoteAttachment) || [];
 
@@ -106,7 +107,7 @@ const ContactHistoryMessage = ({ message, sequential, isNewDay, showUserAvatar }
 					{!sequential && (
 						<MessageHeaderTemplate>
 							<MessageName title={`@${message.u.username}`} data-username={message.u.username}>
-								{message.alias || getUserDisplayName(message.u.name, message.u.username, false)}
+								{message.alias || displayName}
 							</MessageName>
 							<MessageUsername data-username={message.u.username} data-qa-type='username'>
 								@{message.u.username}

apps/meteor/client/views/outlookCalendar/hooks/useOutlookOpenCall.ts

@@ -1,6 +1,6 @@
+import { useUserDisplayName } from '@rocket.chat/ui-client';
 import { useUser } from '@rocket.chat/ui-contexts';
 
-import { useUserDisplayName } from '../../../hooks/useUserDisplayName';
 import { useVideoConfOpenCall } from '../../room/contextualBar/VideoConference/hooks/useVideoConfOpenCall';
 
 export const useOutlookOpenCall = (meetingUrl?: string) => {

apps/meteor/client/views/room/UserCard/UserCardWithData.tsx

@@ -1,3 +1,4 @@
+import { getUserDisplayName } from '@rocket.chat/core-typings';
 import type { IRoom } from '@rocket.chat/core-typings';
 import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { GenericMenu } from '@rocket.chat/ui-client';
@@ -6,7 +7,6 @@ import type { ReactElement } from 'react';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { getUserDisplayName } from '../../../../lib/getUserDisplayName';
 import LocalTime from '../../../components/LocalTime';
 import { UserCard, UserCardAction, UserCardRole, UserCardSkeleton } from '../../../components/UserCard';
 import { ReactiveUserStatus } from '../../../components/UserStatus';

apps/meteor/client/views/room/body/RoomForeword/RoomForewordUsernameList.tsx

@@ -1,22 +1,19 @@
 import type { IUser } from '@rocket.chat/core-typings';
 import { Margins } from '@rocket.chat/fuselage';
-import { useSetting } from '@rocket.chat/ui-contexts';
 
 import RoomForewordUsernameListItem from './RoomForewordUsernameListItem';
 import { roomCoordinator } from '../../../../lib/rooms/roomCoordinator';
 
 type RoomForewordUsernameListProps = { usernames: Array<NonNullable<IUser['username']>> };
 
 const RoomForewordUsernameList = ({ usernames }: RoomForewordUsernameListProps) => {
-	const useRealName = useSetting('UI_Use_Real_Name', false);
 	return (
 		<Margins inline={4}>
 			{usernames.map((username) => (
 				<RoomForewordUsernameListItem
 					username={username}
 					key={username}
 					href={roomCoordinator.getRouteLink('d', { name: username }) || undefined}
-					useRealName={useRealName}
 				/>
 			))}
 		</Margins>

apps/meteor/client/views/room/body/RoomForeword/RoomForewordUsernameListItem.tsx

@@ -1,23 +1,23 @@
 import type { IUser } from '@rocket.chat/core-typings';
 import { Icon, Tag, Skeleton } from '@rocket.chat/fuselage';
+import { useUserDisplayName } from '@rocket.chat/ui-client';
 
-import { getUserDisplayName } from '../../../../../lib/getUserDisplayName';
 import { useUserInfoQuery } from '../../../../hooks/useUserInfoQuery';
 
 type RoomForewordUsernameListItemProps = {
 	href: string | undefined;
 	username: NonNullable<IUser['username']>;
-	useRealName: boolean;
 };
 
-const RoomForewordUsernameListItem = ({ username, href, useRealName }: RoomForewordUsernameListItemProps) => {
+const RoomForewordUsernameListItem = ({ username, href }: RoomForewordUsernameListItemProps) => {
 	const { data, isLoading, isError, isSuccess } = useUserInfoQuery({ username });
+	const displayName = useUserDisplayName({ name: data?.user?.name, username });
 
 	return (
 		<Tag icon={<Icon name='user' size='x20' />} data-username={username} large href={href}>
 			{isLoading && <Skeleton variant='rect' />}
 			{isError && username}
-			{isSuccess && getUserDisplayName(data?.user?.name, username, useRealName)}
+			{isSuccess && displayName}
 		</Tag>
 	);
 };

apps/meteor/client/views/room/composer/messageBox/MessageBoxReplies.tsx

@@ -1,13 +1,8 @@
-import type { MessageQuoteAttachment } from '@rocket.chat/core-typings';
-import { css } from '@rocket.chat/css-in-js';
-import { IconButton, Box, Margins } from '@rocket.chat/fuselage';
-import { useSetting } from '@rocket.chat/ui-contexts';
+import { Box } from '@rocket.chat/fuselage';
 import type { ReactElement } from 'react';
 import { memo, useSyncExternalStore } from 'react';
 
-import { getUserDisplayName } from '../../../../../lib/getUserDisplayName';
-import { QuoteAttachment } from '../../../../components/message/content/attachments/QuoteAttachment';
-import AttachmentProvider from '../../../../providers/AttachmentProvider';
+import MessageBoxReply from './MessageBoxReply';
 import { useChat } from '../../contexts/ChatContext';
 
 const MessageBoxReplies = (): ReactElement | null => {
@@ -19,49 +14,14 @@ const MessageBoxReplies = (): ReactElement | null => {
 
 	const replies = useSyncExternalStore(chat.composer.quotedMessages.subscribe, chat.composer.quotedMessages.get);
 
-	const useRealName = useSetting('UI_Use_Real_Name', false);
-
 	if (!replies.length) {
 		return null;
 	}
 
-	const closeWrapperStyle = css`
-		position: absolute;
-		right: 0.5rem;
-		top: 0.75rem;
-	`;
-
 	return (
 		<Box mbe={8} position='relative' overflowY='auto' maxHeight='x256'>
-			{replies.map((reply, key) => (
-				<Margins block={4} key={key}>
-					<Box display='flex' position='relative'>
-						<AttachmentProvider>
-							<QuoteAttachment
-								attachment={
-									{
-										text: reply.msg,
-										md: reply.md,
-										author_name: reply.alias || getUserDisplayName(reply.u.name, reply.u.username, useRealName),
-										author_icon: `/avatar/${reply.u.username}`,
-										ts: reply.ts,
-										attachments: reply?.attachments?.map((obj) => ({ ...obj, collapsed: true })),
-										collapsed: true,
-									} as MessageQuoteAttachment
-								}
-							/>
-						</AttachmentProvider>
-						<Box
-							className={closeWrapperStyle}
-							data-mid={reply._id}
-							onClick={(): void => {
-								chat.composer?.dismissQuotedMessage(reply._id);
-							}}
-						>
-							<IconButton mini icon='cross' />
-						</Box>
-					</Box>
-				</Margins>
+			{replies.map((reply) => (
+				<MessageBoxReply key={reply._id} reply={reply} />
 			))}
 		</Box>
 	);