Regression: Jump to message not working

apps/meteor/app/ui-utils/client/lib/openRoom.tsx

@@ -7,12 +7,12 @@ import type { RoomType } from '@rocket.chat/core-typings';
 
 import { appLayout } from '../../../../client/lib/appLayout';
 import { waitUntilFind } from '../../../../client/lib/utils/waitUntilFind';
-import { Messages, ChatSubscription, Rooms, Subscriptions } from '../../../models/client';
+import { ChatSubscription, Rooms, Subscriptions } from '../../../models/client';
 import { settings } from '../../../settings/client';
 import { callbacks } from '../../../../lib/callbacks';
 import { callWithErrorHandling } from '../../../../client/lib/utils/callWithErrorHandling';
 import { call } from '../../../../client/lib/utils/call';
-import { RoomManager, RoomHistoryManager } from '..';
+import { RoomManager } from '..';
 import { fireGlobalEvent } from '../../../../client/lib/utils/fireGlobalEvent';
 import { roomCoordinator } from '../../../../client/lib/rooms/roomCoordinator';
 import MainLayout from '../../../../client/views/root/MainLayout';
@@ -44,9 +44,7 @@ export async function openRoom(type: RoomType, name: string, render = true) {
 
 				c.stop();
 
-				const messageId = FlowRouter.getQueryParam('msg');
-
-				if (room._id === Session.get('openedRoom') && !messageId) {
+				if (room._id === Session.get('openedRoom')) {
 					return;
 				}
 
@@ -76,22 +74,6 @@ export async function openRoom(type: RoomType, name: string, render = true) {
 					await callWithErrorHandling('openRoom', room._id);
 				}
 
-				if (messageId) {
-					const msg = { _id: messageId, rid: room._id };
-
-					const message = Messages.findOne({ _id: msg._id }) || (await callWithErrorHandling('getMessages', [msg._id]))[0];
-
-					if (message && (message.tmid || message.tcount)) {
-						FlowRouter.withReplaceState(() => {
-							FlowRouter.setParams({ tab: 'thread', context: message.tmid || message._id });
-						});
-						return;
-					}
-
-					RoomHistoryManager.getSurroundingMessages(msg);
-					FlowRouter.setQueryParams({ msg: null });
-				}
-
 				return callbacks.run('enter-room', sub);
 			} catch (error) {
 				c.stop();

apps/meteor/client/lib/utils/jumpToMessage.ts → apps/meteor/client/lib/utils/legacyJumpToMessage.ts

@@ -6,18 +6,20 @@ import { ChatRoom } from '../../../app/models/client';
 import { RoomHistoryManager } from '../../../app/ui-utils/client';
 import { goToRoomById } from './goToRoomById';
 
-export const jumpToMessage = async (message: IMessage) => {
+export const legacyJumpToMessage = async (message: IMessage) => {
+	FlowRouter.setQueryParams({ msg: null });
+
 	if (matchMedia('(max-width: 500px)').matches) {
 		(Template.instance() as any)?.tabBar?.close();
 	}
 
-	if (isThreadMessage(message)) {
+	if (isThreadMessage(message) || message.tcount) {
 		const { route, queryParams } = FlowRouter.current();
 		FlowRouter.go(
 			route?.name ?? '/',
 			{
 				tab: 'thread',
-				context: message.tmid,
+				context: message.tmid || message._id,
 				rid: message.rid,
 				name: ChatRoom.findOne({ _id: message.rid })?.name ?? '',
 			},

apps/meteor/client/lib/utils/setMessageJumpQueryStringParameter.ts

@@ -0,0 +1,6 @@
+import type { IMessage } from '@rocket.chat/core-typings';
+import { FlowRouter } from 'meteor/kadira:flow-router';
+
+export const setMessageJumpQueryStringParameter = async (msg: IMessage['_id']) => {
+	FlowRouter.setQueryParams({ msg });
+};

apps/meteor/client/startup/actionButtons/jumpToMessage.ts

@@ -1,8 +1,8 @@
 import { Meteor } from 'meteor/meteor';
 
 import { MessageAction } from '../../../app/ui-utils/client';
-import { jumpToMessage } from '../../lib/utils/jumpToMessage';
 import { messageArgs } from '../../lib/utils/messageArgs';
+import { setMessageJumpQueryStringParameter } from '../../lib/utils/setMessageJumpQueryStringParameter';
 
 Meteor.startup(() => {
 	MessageAction.addButton({
@@ -12,7 +12,7 @@ Meteor.startup(() => {
 		context: ['mentions', 'threads'],
 		action(_, props) {
 			const { message = messageArgs(this).msg } = props;
-			jumpToMessage(message);
+			setMessageJumpQueryStringParameter(message._id);
 		},
 		order: 100,
 		group: ['message', 'menu'],

apps/meteor/client/startup/actionButtons/jumpToPinMessage.ts

@@ -1,8 +1,8 @@
 import { Meteor } from 'meteor/meteor';
 
 import { MessageAction } from '../../../app/ui-utils/client';
-import { jumpToMessage } from '../../lib/utils/jumpToMessage';
 import { messageArgs } from '../../lib/utils/messageArgs';
+import { setMessageJumpQueryStringParameter } from '../../lib/utils/setMessageJumpQueryStringParameter';
 
 Meteor.startup(() => {
 	MessageAction.addButton({
@@ -12,7 +12,7 @@ Meteor.startup(() => {
 		context: ['pinned', 'message-mobile', 'direct'],
 		action(_, props) {
 			const { message = messageArgs(this).msg } = props;
-			jumpToMessage(message);
+			setMessageJumpQueryStringParameter(message._id);
 		},
 		condition({ subscription }) {
 			return !!subscription;

apps/meteor/client/startup/actionButtons/jumpToSearchMessage.ts

@@ -1,8 +1,8 @@
 import { Meteor } from 'meteor/meteor';
 
 import { MessageAction } from '../../../app/ui-utils/client';
-import { jumpToMessage } from '../../lib/utils/jumpToMessage';
 import { messageArgs } from '../../lib/utils/messageArgs';
+import { setMessageJumpQueryStringParameter } from '../../lib/utils/setMessageJumpQueryStringParameter';
 
 Meteor.startup(() => {
 	MessageAction.addButton({
@@ -12,7 +12,7 @@ Meteor.startup(() => {
 		context: ['search'],
 		async action(_, props) {
 			const { message = messageArgs(this).msg } = props;
-			await jumpToMessage(message);
+			setMessageJumpQueryStringParameter(message._id);
 		},
 		order: 100,
 		group: 'menu',

apps/meteor/client/startup/actionButtons/jumpToStarMessage.ts

@@ -2,8 +2,8 @@ import { Meteor } from 'meteor/meteor';
 
 import { settings } from '../../../app/settings/client';
 import { MessageAction } from '../../../app/ui-utils/client';
-import { jumpToMessage } from '../../lib/utils/jumpToMessage';
 import { messageArgs } from '../../lib/utils/messageArgs';
+import { setMessageJumpQueryStringParameter } from '../../lib/utils/setMessageJumpQueryStringParameter';
 
 Meteor.startup(() => {
 	MessageAction.addButton({
@@ -13,7 +13,7 @@ Meteor.startup(() => {
 		context: ['starred', 'threads', 'message-mobile'],
 		action(_, props) {
 			const { message = messageArgs(this).msg } = props;
-			jumpToMessage(message);
+			setMessageJumpQueryStringParameter(message._id);
 		},
 		condition({ message, subscription, user }) {
 			if (subscription == null || !settings.get('Message_AllowStarring')) {

apps/meteor/client/views/room/components/body/RoomBody.tsx

@@ -44,6 +44,7 @@ import UnreadMessagesIndicator from './UnreadMessagesIndicator';
 import UploadProgressIndicator from './UploadProgressIndicator';
 import ComposerContainer from './composer/ComposerContainer';
 import { useFileUploadDropTarget } from './useFileUploadDropTarget';
+import { useJumpToMessage } from './useJumpToMessage';
 import { useRetentionPolicy } from './useRetentionPolicy';
 import { useUnreadMessages } from './useUnreadMessages';
 
@@ -63,10 +64,11 @@ const RoomBody = (): ReactElement => {
 	const hideFlexTab = useUserPreference<boolean>('hideFlexTab');
 	const hideUsernames = useUserPreference<boolean>('hideUsernames');
 	const displayAvatars = useUserPreference<boolean>('displayAvatars');
+	const msgParameter = useQueryStringParameter('msg');
 
 	const wrapperRef = useRef<HTMLDivElement | null>(null);
 	const messagesBoxRef = useRef<HTMLDivElement | null>(null);
-	const atBottomRef = useRef(!useQueryStringParameter('msg'));
+	const atBottomRef = useRef(!msgParameter);
 	const lastScrollTopRef = useRef(0);
 
 	const chat = useChat();
@@ -203,6 +205,8 @@ const RoomBody = (): ReactElement => {
 
 	const retentionPolicy = useRetentionPolicy(room);
 
+	useJumpToMessage(msgParameter);
+
 	useEffect(() => {
 		callbacks.add(
 			'streamNewMessage',

apps/meteor/client/views/room/components/body/useJumpToMessage.ts

@@ -0,0 +1,31 @@
+import type { IMessage } from '@rocket.chat/core-typings';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQueryClient } from '@tanstack/react-query';
+import { useEffect } from 'react';
+
+import { legacyJumpToMessage } from '../../../../lib/utils/legacyJumpToMessage';
+
+export const useJumpToMessage = (msgId?: IMessage['_id']) => {
+	const queryClient = useQueryClient();
+	const getMessage = useEndpoint('GET', '/v1/chat.getMessage');
+
+	useEffect(() => {
+		if (!msgId) {
+			return;
+		}
+		queryClient
+			.fetchQuery({
+				queryKey: ['chat.getMessage', msgId],
+				queryFn: () => {
+					return getMessage({ msgId });
+				},
+			})
+			.then(({ message }) => {
+				// Serialized IMessage dates are strings. For this function, only ts is needed
+				legacyJumpToMessage({ ...message, ts: new Date(message.ts) } as any as IMessage);
+			})
+			.catch((error) => {
+				console.warn(error);
+			});
+	}, [msgId, queryClient, getMessage]);
+};