Chore: Refactor message subcomponents (#27630)

apps/meteor/app/ui-utils/client/lib/RoomHistoryManager.ts

@@ -7,7 +7,7 @@ import { Emitter } from '@rocket.chat/emitter';
 import type { IMessage, IRoom, ISubscription, IUser } from '@rocket.chat/core-typings';
 import type { MutableRefObject } from 'react';
 
-import { waitUntilWrapperExists } from './waitUntilWrapperExists';
+import { waitForElement } from '../../../../client/lib/utils/waitForElement';
 import { readMessage } from './readMessages';
 import { getConfig } from '../../../../client/lib/utils/getConfig';
 import { ChatMessage, ChatSubscription } from '../../../models/client';
@@ -179,7 +179,7 @@ class RoomHistoryManagerClass extends Emitter {
 		room.unreadNotLoaded.set(result.unreadNotLoaded);
 		room.firstUnread.set(result.firstUnread);
 
-		const wrapper = await waitUntilWrapperExists();
+		const wrapper = await waitForElement('.messages-box .wrapper');
 
 		if (wrapper) {
 			previousHeight = wrapper.scrollHeight;
@@ -294,7 +294,7 @@ class RoomHistoryManagerClass extends Emitter {
 		const surroundingMessage = ChatMessage.findOne({ _id: message._id, _hidden: { $ne: true } });
 
 		if (surroundingMessage) {
-			await waitUntilWrapperExists(`[data-id='${message._id}']`);
+			await waitForElement(`[data-id='${message._id}']`);
 			const wrapper = $('.messages-box .wrapper');
 			const msgElement = $(`[data-id='${message._id}']`, wrapper);
 
@@ -332,7 +332,7 @@ class RoomHistoryManagerClass extends Emitter {
 
 		const result = await callWithErrorHandling('loadSurroundingMessages', message, defaultLimit);
 
-		if (!result || !result.messages) {
+		if (!result) {
 			return;
 		}
 
@@ -341,7 +341,7 @@ class RoomHistoryManagerClass extends Emitter {
 		readMessage.refreshUnreadMark(message.rid);
 
 		Tracker.afterFlush(async () => {
-			await waitUntilWrapperExists(`[data-id='${message._id}']`);
+			await waitForElement(`[data-id='${message._id}']`);
 			const wrapper = $('.messages-box .wrapper');
 			const msgElement = $(`[data-id=${message._id}]`, wrapper);
 

apps/meteor/client/components/RawText.tsx

@@ -1,7 +1,7 @@
 import type { ReactElement } from 'react';
 import React from 'react';
 
-// @deprecated
+/** @deprecated */
 const RawText = ({ children }: { children: string }): ReactElement => <span dangerouslySetInnerHTML={{ __html: children }} />;
 
 export default RawText;

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

@@ -0,0 +1,30 @@
+import { Box, Icon, MessageBody } from '@rocket.chat/fuselage';
+import { useTranslation } from '@rocket.chat/ui-contexts';
+import type { ReactElement } from 'react';
+import React, { memo } from 'react';
+
+type IgnoredContentProps = {
+	onShowMessageIgnored: () => void;
+};
+
+const IgnoredContent = ({ onShowMessageIgnored }: IgnoredContentProps): ReactElement => {
+	const t = useTranslation();
+
+	const showMessageIgnored = (event: React.SyntheticEvent): void => {
+		event.stopPropagation();
+
+		onShowMessageIgnored();
+	};
+
+	return (
+		<MessageBody data-qa-type='message-body'>
+			<Box display='flex' alignItems='center' fontSize='x12' color='hint'>
+				<p role='button' onClick={showMessageIgnored} style={{ cursor: 'pointer' }}>
+					<Icon name='chevron-left' /> {t('Message_Ignored')}
+				</p>
+			</Box>
+		</MessageBody>
+	);
+};
+
+export default memo(IgnoredContent);

apps/meteor/client/views/room/MessageList/components/MessageContentBody.tsx → apps/meteor/client/components/message/MessageContentBody.tsx

@@ -8,11 +8,11 @@ import { FlowRouter } from 'meteor/kadira:flow-router';
 import type { ReactElement, UIEvent } from 'react';
 import React, { useCallback, useMemo } from 'react';
 
-import { emoji } from '../../../../../app/emoji/client';
-import { fireGlobalEvent } from '../../../../lib/utils/fireGlobalEvent';
-import { useMessageActions } from '../../contexts/MessageContext';
-import { useMessageListHighlights } from '../contexts/MessageListContext';
-import type { MessageWithMdEnforced } from '../lib/parseMessageTextToAstMarkdown';
+import { emoji } from '../../../app/emoji/client';
+import { fireGlobalEvent } from '../../lib/utils/fireGlobalEvent';
+import { useMessageListHighlights } from '../../views/room/MessageList/contexts/MessageListContext';
+import type { MessageWithMdEnforced } from '../../views/room/MessageList/lib/parseMessageTextToAstMarkdown';
+import { useMessageActions } from '../../views/room/contexts/MessageContext';
 
 type MessageContentBodyProps = Pick<MessageWithMdEnforced, 'mentions' | 'channels' | 'md'>;
 

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

@@ -1,26 +1,34 @@
 import type { IMessage } from '@rocket.chat/core-typings';
 import {
-	MessageHeader as MessageHeaderTemplate,
+	MessageHeader as FuselageMessageHeader,
 	MessageName,
 	MessageTimestamp,
 	MessageUsername,
 	MessageStatusPrivateIndicator,
 	MessageNameContainer,
 } from '@rocket.chat/fuselage';
 import { useTranslation } from '@rocket.chat/ui-contexts';
-import type { FC } from 'react';
+import type { ReactElement } from 'react';
 import React, { memo } from 'react';
 
-import { useUserData } from '../../../../hooks/useUserData';
-import { getUserDisplayName } from '../../../../lib/getUserDisplayName';
-import type { UserPresence } from '../../../../lib/presence';
-import { useMessageActions } from '../../contexts/MessageContext';
-import { useMessageListShowUsername, useMessageListShowRealName, useMessageListShowRoles } from '../contexts/MessageListContext';
-import { useMessageRoles } from '../hooks/useMessageRoles';
-import { MessageIndicators } from './MessageIndicators';
-import RolesList from './MessageRolesList';
+import { useUserData } from '../../hooks/useUserData';
+import { getUserDisplayName } from '../../lib/getUserDisplayName';
+import type { UserPresence } from '../../lib/presence';
+import {
+	useMessageListShowUsername,
+	useMessageListShowRealName,
+	useMessageListShowRoles,
+} from '../../views/room/MessageList/contexts/MessageListContext';
+import { useMessageActions } from '../../views/room/contexts/MessageContext';
+import StatusIndicators from './StatusIndicators';
+import MessageRoles from './header/MessageRoles';
+import { useMessageRoles } from './header/hooks/useMessageRoles';
+
+type MessageHeaderProps = {
+	message: IMessage;
+};
 
-const MessageHeader: FC<{ message: IMessage }> = ({ message }) => {
+const MessageHeader = ({ message }: MessageHeaderProps): ReactElement => {
 	const t = useTranslation();
 	const {
 		actions: { openUserCard },
@@ -37,7 +45,7 @@ const MessageHeader: FC<{ message: IMessage }> = ({ message }) => {
 	const shouldShowRolesList = roles.length > 0;
 
 	return (
-		<MessageHeaderTemplate>
+		<FuselageMessageHeader>
 			<MessageNameContainer>
 				<MessageName
 					{...(!showUsername && { 'data-qa-type': 'username' })}
@@ -54,20 +62,20 @@ const MessageHeader: FC<{ message: IMessage }> = ({ message }) => {
 						<MessageUsername
 							data-username={user.username}
 							data-qa-type='username'
-							onClick={user.username !== undefined ? openUserCard(user.username) : undefined}
 							style={{ cursor: 'pointer' }}
+							onClick={user.username !== undefined ? openUserCard(user.username) : undefined}
 						>
 							@{user.username}
 						</MessageUsername>
 					</>
 				)}
 			</MessageNameContainer>
 
-			{shouldShowRolesList && <RolesList roles={roles} isBot={message.bot} />}
+			{shouldShowRolesList && <MessageRoles roles={roles} isBot={message.bot} />}
 			<MessageTimestamp title={formatters.dateAndTime(message.ts)}>{formatters.time(message.ts)}</MessageTimestamp>
 			{message.private && <MessageStatusPrivateIndicator>{t('Only_you_can_see_this_message')}</MessageStatusPrivateIndicator>}
-			<MessageIndicators message={message} />
-		</MessageHeaderTemplate>
+			<StatusIndicators message={message} />
+		</FuselageMessageHeader>
 	);
 };