Regression: Show username and real name on the message system (#25254)

apps/meteor/client/views/room/MessageList/components/MessageHeader.tsx

@@ -40,11 +40,16 @@ const MessageHeader: FC<{ message: IMessage }> = ({ message }) => {
 				title={!showUsername && !usernameAndRealNameAreSame ? `@${user.username}` : undefined}
 				data-username={user.username}
 				onClick={user.username !== undefined ? openUserCard(user.username) : undefined}
+				style={{ cursor: 'pointer' }}
 			>
 				{getUserDisplayName(user.name, user.username, showRealName)}
 			</MessageName>
 			{showUsername && (
-				<MessageUsername data-username={user.username} onClick={user.username !== undefined ? openUserCard(user.username) : undefined}>
+				<MessageUsername
+					data-username={user.username}
+					onClick={user.username !== undefined ? openUserCard(user.username) : undefined}
+					style={{ cursor: 'pointer' }}
+				>
 					@{user.username}
 				</MessageUsername>
 			)}

apps/meteor/client/views/room/MessageList/components/MessageSystem.tsx

@@ -7,6 +7,7 @@ import {
 	MessageSystemName,
 	MessageSystemTimestamp,
 	MessageSystemBlock,
+	MessageUsername,
 } from '@rocket.chat/fuselage';
 import React, { FC, memo } from 'react';
 
@@ -15,14 +16,23 @@ import Attachments from '../../../../components/Message/Attachments';
 import MessageActions from '../../../../components/Message/MessageActions';
 import UserAvatar from '../../../../components/avatar/UserAvatar';
 import { TranslationKey, useTranslation } from '../../../../contexts/TranslationContext';
+import { useUserData } from '../../../../hooks/useUserData';
+import { getUserDisplayName } from '../../../../lib/getUserDisplayName';
+import { UserPresence } from '../../../../lib/presence';
 import { useMessageActions, useMessageRunActionLink } from '../../contexts/MessageContext';
-import { useMessageListShowRealName } from '../contexts/MessageListContext';
+import { useMessageListShowRealName, useMessageListShowUsername } from '../contexts/MessageListContext';
 
 export const MessageSystem: FC<{ message: IMessage }> = ({ message }) => {
 	const t = useTranslation();
-	const { formatters } = useMessageActions();
+	const {
+		actions: { openUserCard },
+		formatters,
+	} = useMessageActions();
 	const runActionLink = useMessageRunActionLink();
-	const showUsername = useMessageListShowRealName();
+	const showRealName = useMessageListShowRealName();
+	const user: UserPresence = { ...message.u, roles: [], ...useUserData(message.u._id) };
+	const usernameAndRealNameAreSame = !user.name || user.username === user.name;
+	const showUsername = useMessageListShowUsername() && showRealName && !usernameAndRealNameAreSame;
 
 	const messageType = MessageTypes.getType(message);
 
@@ -33,7 +43,18 @@ export const MessageSystem: FC<{ message: IMessage }> = ({ message }) => {
 			</MessageSystemLeftContainer>
 			<MessageSystemContainer>
 				<MessageSystemBlock>
-					<MessageSystemName>{(showUsername && message.u.name) || message.u.username}</MessageSystemName>
+					<MessageSystemName onClick={user.username !== undefined ? openUserCard(user.username) : undefined} style={{ cursor: 'pointer' }}>
+						{getUserDisplayName(user.name, user.username, showRealName)}
+					</MessageSystemName>
+					{showUsername && (
+						<MessageUsername
+							data-username={user.username}
+							onClick={user.username !== undefined ? openUserCard(user.username) : undefined}
+							style={{ cursor: 'pointer' }}
+						>
+							@{user.username}
+						</MessageUsername>
+					)}
 					{messageType && (
 						<MessageSystemBody
 							dangerouslySetInnerHTML={{