fix: E2EE thread main message reactivity (#32381)

.changeset/three-squids-brake.md

@@ -0,0 +1,5 @@
+---
+'@rocket.chat/meteor': patch
+---
+
+Fixed Encrypted thread main message reactivity issues. Earlier the encrypted thread main message was having some reactivity issues and flaky behavior.

apps/meteor/client/views/room/contextualBar/Threads/hooks/useThreadMainMessageQuery.ts

@@ -7,6 +7,7 @@ import { useCallback, useEffect, useRef } from 'react';
 import { withDebouncing } from '../../../../../../lib/utils/highOrderFunctions';
 import type { FieldExpression, Query } from '../../../../../lib/minimongo';
 import { createFilterFromQuery } from '../../../../../lib/minimongo';
+import { onClientMessageReceived } from '../../../../../lib/onClientMessageReceived';
 import { useRoom } from '../../../contexts/RoomContext';
 import { useGetMessageByID } from './useGetMessageByID';
 
@@ -107,8 +108,9 @@ export const useThreadMainMessageQuery = (
 		unsubscribeRef.current =
 			unsubscribeRef.current ||
 			subscribeToMessage(mainMessage, {
-				onMutate: (message) => {
-					queryClient.setQueryData(queryKey, () => message);
+				onMutate: async (message) => {
+					const msg = await onClientMessageReceived(message);
+					queryClient.setQueryData(queryKey, () => msg);
 					debouncedInvalidate();
 				},
 				onDelete: () => {

apps/meteor/tests/e2e/e2e-encryption.spec.ts

@@ -179,6 +179,40 @@ test.describe.serial('e2e-encryption', () => {
 		await expect(poHomeChannel.content.lastUserMessage.locator('.rcx-icon--name-key')).toBeVisible();
 	});
 
+	test('expect create a private encrypted channel and send a encrypted thread message', async ({ page }) => {
+		const channelName = faker.string.uuid();
+
+		await poHomeChannel.sidenav.createEncryptedChannel(channelName);
+
+		await expect(page).toHaveURL(`/group/${channelName}`);
+
+		await poHomeChannel.dismissToast();
+
+		await expect(poHomeChannel.content.encryptedRoomHeaderIcon).toBeVisible();
+
+		await poHomeChannel.content.sendMessage('This is the thread main message.');
+
+		await expect(poHomeChannel.content.lastUserMessageBody).toHaveText('This is the thread main message.');
+		await expect(poHomeChannel.content.lastUserMessage.locator('.rcx-icon--name-key')).toBeVisible();
+
+		await page.locator('[data-qa-type="message"]').last().hover();
+		await page.locator('role=button[name="Reply in thread"]').click();
+
+		await expect(page).toHaveURL(/.*thread/);
+
+		await expect(poHomeChannel.content.mainThreadMessageText).toContainText('This is the thread main message.');
+		await expect(poHomeChannel.content.mainThreadMessageText.locator('.rcx-icon--name-key')).toBeVisible();
+
+		await poHomeChannel.content.toggleAlsoSendThreadToChannel(true);
+		await page.getByRole('dialog').locator('[name="msg"]').last().fill('This is an encrypted thread message also sent in channel');
+		await page.keyboard.press('Enter');
+		await expect(poHomeChannel.content.lastThreadMessageText).toContainText('This is an encrypted thread message also sent in channel');
+		await expect(poHomeChannel.content.lastThreadMessageText.locator('.rcx-icon--name-key')).toBeVisible();
+		await expect(poHomeChannel.content.lastUserMessage).toContainText('This is an encrypted thread message also sent in channel');
+		await expect(poHomeChannel.content.mainThreadMessageText).toContainText('This is the thread main message.');
+		await expect(poHomeChannel.content.mainThreadMessageText.locator('.rcx-icon--name-key')).toBeVisible();
+	});
+
 	test('expect create a private channel, encrypt it and send an encrypted message', async ({ page }) => {
 		const channelName = faker.string.uuid();
 

apps/meteor/tests/e2e/page-objects/fragments/home-content.ts

@@ -143,6 +143,10 @@ export class HomeContent {
 		return this.page.locator('div.thread-list ul.thread [data-qa-type="message"]').last().locator('.rcx-attachment__details');
 	}
 
+	get mainThreadMessageText(): Locator {
+		return this.page.locator('div.thread-list ul.thread [data-qa-type="message"]').first();
+	}
+
 	get lastThreadMessageText(): Locator {
 		return this.page.locator('div.thread-list ul.thread [data-qa-type="message"]').last();
 	}