Chore: Adding default message parser template (#26064)

Co-authored-by: gabriellsh <40830821+gabriellsh@users.noreply.github.com>
Co-authored-by: Diego Sampaio <8591547+sampaiodiego@users.noreply.github.com>

apps/meteor/app/lib/server/startup/settings.ts

@@ -548,11 +548,11 @@ settingsRegistry.addGroup('Accounts', function () {
 			i18nLabel: 'Notifications_Sound_Volume',
 		});
 
-		this.add('Accounts_Default_User_Preferences_enableNewMessageTemplate', false, {
+		this.add('Accounts_Default_User_Preferences_useLegacyMessageTemplate', false, {
 			type: 'boolean',
 			public: true,
-			i18nLabel: 'Enable_New_Message_Template',
-			alert: 'Enable_New_Message_Template_alert',
+			i18nLabel: 'Use_Legacy_Message_Template',
+			alert: 'Use_Legacy_Message_Template_alert',
 		});
 	});
 

apps/meteor/app/markdown/server/settings.ts

@@ -19,6 +19,7 @@ settingsRegistry.add('Markdown_Parser', 'original', {
 	group: 'Message',
 	section: 'Markdown',
 	public: true,
+	alert: 'Use_Legacy_Message_Template_alert',
 });
 
 const enableQueryOriginal = { _id: 'Markdown_Parser', value: 'original' };

apps/meteor/app/ui-utils/client/lib/messageContext.js

@@ -17,7 +17,7 @@ import { roomCoordinator } from '../../../../client/lib/rooms/roomCoordinator';
 const fields = {
 	'name': 1,
 	'username': 1,
-	'settings.preferences.enableNewMessageTemplate': 1,
+	'settings.preferences.useLegacyMessageTemplate': 1,
 	'settings.preferences.autoImageLoad': 1,
 	'settings.preferences.saveMobileBandwidth': 1,
 	'settings.preferences.collapseMediaByDefault': 1,
@@ -115,7 +115,7 @@ export function messageContext({ rid } = Template.instance()) {
 		settings: {
 			translateLanguage: AutoTranslate.getLanguage(rid),
 			autoImageLoad: getUserPreference(user, 'autoImageLoad'),
-			enableNewMessageTemplate: getUserPreference(user, 'enableNewMessageTemplate'),
+			useLegacyMessageTemplate: getUserPreference(user, 'useLegacyMessageTemplate'),
 			saveMobileBandwidth: Meteor.Device.isPhone() && getUserPreference(user, 'saveMobileBandwidth'),
 			collapseMediaByDefault: getUserPreference(user, 'collapseMediaByDefault'),
 			showreply: true,

apps/meteor/app/ui/client/views/app/room.html

@@ -110,14 +110,14 @@
 										</li>
 									{{/if}}
 								{{/if}}
-								{{# if $eq (preference 'enableNewMessageTemplate') true}}
+								{{# unless $eq (preference 'useLegacyMessageTemplate') true}}
 										{{> MessageList rid=rid }}
-								{{/if}}
-								{{# unless $eq (preference 'enableNewMessageTemplate') true}}
+								{{/unless}}
+								{{# if $eq (preference 'useLegacyMessageTemplate') true}}
 									{{# with messageContext}}
 										{{#each msg in messagesHistory}}{{> message showRoles=true index=@index shouldCollapseReplies=false msg=msg room=room  actions=actions subscription=subscription settings=settings u=u}}{{/each}}
 									{{/with}}
-								{{/unless}}
+								{{/if}}
 
 								{{#if hasMoreNext}}
 									<li class="load-more">

apps/meteor/client/components/message/Attachments/Attachment/AttachmentDescription.tsx

@@ -2,7 +2,7 @@ import { Box } from '@rocket.chat/fuselage';
 import React, { ComponentProps, ReactElement } from 'react';
 
 const AttachmentDescription = ({ ...props }: ComponentProps<typeof Box>): ReactElement => (
-	<Box rcx-attachment__description mbe='x4' {...props} />
+	<Box rcx-attachment__description data-qa-type='attachment-description' mbe='x4' {...props} />
 );
 
 export default AttachmentDescription;

apps/meteor/client/components/message/Attachments/Attachment/AttachmentTitleLink.tsx

@@ -3,7 +3,15 @@ import React, { FC } from 'react';
 import Title from './AttachmentTitle';
 
 const AttachmentTitleLink: FC<{ link: string; title?: string | undefined }> = ({ link, title }) => (
-	<Title is='a' href={`${link}?download`} color={undefined} target='_blank' download={title} rel='noopener noreferrer'>
+	<Title
+		is='a'
+		href={`${link}?download`}
+		color={undefined}
+		target='_blank'
+		download={title}
+		rel='noopener noreferrer'
+		data-qa-type='attachment-title-link'
+	>
 		{title}
 	</Title>
 );

apps/meteor/client/views/account/preferences/PreferencesGlobalSection.js

@@ -8,7 +8,7 @@ const PreferencesGlobalSection = ({ onChange, commitRef, ...props }) => {
 	const t = useTranslation();
 
 	const userDontAskAgainList = useUserPreference('dontAskAgainList');
-	const userEnableNewMessageTemplate = useUserPreference('enableNewMessageTemplate');
+	const userLegacyMessageTemplate = useUserPreference('useLegacyMessageTemplate');
 
 	const options = useMemo(() => (userDontAskAgainList || []).map(({ action, label }) => [action, label]), [userDontAskAgainList]);
 
@@ -17,14 +17,14 @@ const PreferencesGlobalSection = ({ onChange, commitRef, ...props }) => {
 	const { values, handlers, commit } = useForm(
 		{
 			dontAskAgainList: selectedOptions,
-			enableNewMessageTemplate: userEnableNewMessageTemplate,
+			useLegacyMessageTemplate: userLegacyMessageTemplate,
 		},
 		onChange,
 	);
 
-	const { dontAskAgainList, enableNewMessageTemplate } = values;
+	const { dontAskAgainList, useLegacyMessageTemplate } = values;
 
-	const { handleDontAskAgainList, handleEnableNewMessageTemplate } = handlers;
+	const { handleDontAskAgainList, handleUseLegacyMessageTemplate } = handlers;
 
 	commitRef.current.global = commit;
 
@@ -43,12 +43,12 @@ const PreferencesGlobalSection = ({ onChange, commitRef, ...props }) => {
 					</Field.Row>
 				</Field>
 				<Field display='flex' alignItems='center' flexDirection='row' justifyContent='spaceBetween' flexGrow={1}>
-					<Field.Label>{t('Enable_New_Message_Template')}</Field.Label>
+					<Field.Label>{t('Use_Legacy_Message_Template')}</Field.Label>
 					<Field.Row>
-						<ToggleSwitch checked={enableNewMessageTemplate} onChange={handleEnableNewMessageTemplate} />
+						<ToggleSwitch checked={useLegacyMessageTemplate} onChange={handleUseLegacyMessageTemplate} />
 					</Field.Row>
 				</Field>
-				<Callout type='warning'>{t('Enable_New_Message_Template_alert')}</Callout>
+				<Callout type='warning'>{t('Use_Legacy_Message_Template_alert')}</Callout>
 			</FieldGroup>
 		</Accordion.Item>
 	);

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

@@ -37,6 +37,7 @@ const MessageHeader: FC<{ message: IMessage }> = ({ message }) => {
 	return (
 		<MessageHeaderTemplate>
 			<MessageName
+				{...(!showUsername && { 'data-qa-type': 'username' })}
 				title={!showUsername && !usernameAndRealNameAreSame ? `@${user.username}` : undefined}
 				data-username={user.username}
 				onClick={user.username !== undefined ? openUserCard(user.username) : undefined}
@@ -47,6 +48,7 @@ const MessageHeader: FC<{ message: IMessage }> = ({ message }) => {
 			{showUsername && (
 				<MessageUsername
 					data-username={user.username}
+					data-qa-type='username'
 					onClick={user.username !== undefined ? openUserCard(user.username) : undefined}
 					style={{ cursor: 'pointer' }}
 				>

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

@@ -44,7 +44,12 @@ export const MessageSystem: FC<{ message: IMessage }> = ({ message }) => {
 	useCountSelected();
 
 	return (
-		<MessageSystemTemplate onClick={isSelecting ? toggleSelected : undefined} isSelected={isSelected} data-qa-selected={isSelected}>
+		<MessageSystemTemplate
+			onClick={isSelecting ? toggleSelected : undefined}
+			isSelected={isSelected}
+			data-qa-selected={isSelected}
+			data-qa='system-message'
+		>
 			<MessageSystemLeftContainer>
 				{!isSelecting && <UserAvatar username={message.u.username} size='x18' />}
 				{isSelecting && <CheckBox checked={isSelected} onChange={toggleSelected} />}
@@ -65,6 +70,7 @@ export const MessageSystem: FC<{ message: IMessage }> = ({ message }) => {
 					)}
 					{messageType && (
 						<MessageSystemBody
+							data-qa-type='system-message-body'
 							dangerouslySetInnerHTML={{
 								__html: messageType.render
 									? messageType.render(message)

apps/meteor/package.json

@@ -29,7 +29,7 @@
 		"obj:dev": "TEST_MODE=true yarn dev",
 		"stylelint": "stylelint \"app/**/*.css\" \"client/**/*.css\" \"app/**/*.less\" \"client/**/*.less\" \"ee/**/*.less\"",
 		"stylelint:fix": "stylelint --fix \"app/**/*.css\" \"client/**/*.css\" \"app/**/*.less\" \"client/**/*.less\" \"ee/**/*.less\"",
-		"typecheck": "cross-env NODE_OPTIONS=\"--max-old-space-size=8184\" tsc --noEmit --skipLibCheck",
+		"typecheck": "cross-env NODE_OPTIONS=\"--max-old-space-size=6144\" tsc --noEmit --skipLibCheck",
 		"deploy": "npm run build && pm2 startOrRestart pm2.json",
 		"coverage": "nyc -r html mocha --config ./.mocharc.js",
 		"test:playwright": "playwright test",

apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json

@@ -1665,8 +1665,9 @@
   "EmojiCustomFilesystem": "Custom Emoji Filesystem",
   "EmojiCustomFilesystem_Description": "Specify how emojis are stored.",
   "Empty_title": "Empty title",
-  "Enable_New_Message_Template": "Enable New Message Template",
-  "Enable_New_Message_Template_alert": "This is a beta feature. It may not work as expected. Please report any issues you encounter.",
+  "Use_Legacy_Message_Template": "Use legacy message template",
+  "Use_Legacy_Message_Template_alert": "This is a deprecated feature. It may not work as expected and will not get new updates",
+  "See_on_Engagement_Dashboard": "See on Engagement Dashboard",
   "Enable": "Enable",
   "Enable_Auto_Away": "Enable Auto Away",
   "Enable_CSP": "Enable Content-Security-Policy",
@@ -3979,7 +3980,6 @@
   "Powered_by_RocketChat": "Powered by Rocket.Chat",
   "See_full_profile": "See full profile",
   "See_history": "See history",
-  "See_on_Engagement_Dashboard": "See on Engagement Dashboard",
   "Select_a_department": "Select a department",
   "Select_a_room": "Select a room",
   "Select_a_user": "Select a user",

apps/meteor/server/startup/migrations/index.ts

@@ -99,4 +99,5 @@ import './v272';
 import './v273';
 import './v274';
 import './v275';
+import './v276';
 import './xrun';

apps/meteor/server/startup/migrations/v276.ts

@@ -0,0 +1,18 @@
+import { Settings } from '@rocket.chat/models';
+
+import { addMigration } from '../../lib/migrations';
+import { Users } from '../../../app/models/server';
+
+addMigration({
+	version: 276,
+	up() {
+		Users.update(
+			{ 'settings.preferences.enableNewMessageTemplate': { $exists: 1 } },
+			{
+				$unset: { 'settings.preferences.enableNewMessageTemplate': 1 },
+			},
+			{ multi: true },
+		);
+		return Settings.removeById('Accounts_Default_User_Preferences_enableNewMessageTemplate');
+	},
+});

apps/meteor/tests/e2e/06-messaging.spec.ts

@@ -57,8 +57,8 @@ test.describe('[Messaging]', () => {
 				await anotherContext.mainContent.page.close();
 			});
 			test('expect received message is visible for two context', async () => {
-				const anotherUserMessage = mainContent.page.locator('li.message[data-own="false"]').last();
-				const mainUserMessage = anotherContext.mainContent.page.locator('li.message[data-own="false"]').last();
+				const anotherUserMessage = mainContent.page.locator('[data-qa-type="message"][data-own="false"]').last();
+				const mainUserMessage = anotherContext.mainContent.page.locator('[data-qa-type="message"][data-own="false"]').last();
 
 				await expect(anotherUserMessage).toBeVisible();
 				await expect(mainUserMessage).toBeVisible();
@@ -76,8 +76,8 @@ test.describe('[Messaging]', () => {
 				await anotherContext.mainContent.page.close();
 			});
 			test('expect received message is visible for two context', async () => {
-				const anotherUserMessage = mainContent.page.locator('li.message[data-own="false"]').last();
-				const mainUserMessage = anotherContext.mainContent.page.locator('li.message[data-own="false"]').last();
+				const anotherUserMessage = mainContent.page.locator('[data-qa-type="message"][data-own="false"]').last();
+				const mainUserMessage = anotherContext.mainContent.page.locator('[data-qa-type="message"][data-own="false"]').last();
 
 				await expect(anotherUserMessage).toBeVisible();
 				await expect(mainUserMessage).toBeVisible();
@@ -96,8 +96,8 @@ test.describe('[Messaging]', () => {
 				await anotherContext.mainContent.page.close();
 			});
 			test('expect received message is visible for two context', async () => {
-				const anotherUserMessage = mainContent.page.locator('li.message[data-own="false"]').last();
-				const mainUserMessage = anotherContext.mainContent.page.locator('li.message[data-own="false"]').last();
+				const anotherUserMessage = mainContent.page.locator('[data-qa-type="message"][data-own="false"]').last();
+				const mainUserMessage = anotherContext.mainContent.page.locator('[data-qa-type="message"][data-own="false"]').last();
 
 				await expect(anotherUserMessage).toBeVisible();
 				await expect(mainUserMessage).toBeVisible();
@@ -116,8 +116,8 @@ test.describe('[Messaging]', () => {
 				await anotherContext.mainContent.page.close();
 			});
 			test('expect received message is visible for two context', async () => {
-				const anotherUserMessage = mainContent.page.locator('li.message[data-own="false"]').last();
-				const mainUserMessage = anotherContext.mainContent.page.locator('li.message[data-own="false"]').last();
+				const anotherUserMessage = mainContent.page.locator('[data-qa-type="message"][data-own="false"]').last();
+				const mainUserMessage = anotherContext.mainContent.page.locator('[data-qa-type="message"][data-own="false"]').last();
 
 				await expect(anotherUserMessage).toBeVisible();
 				await expect(mainUserMessage).toBeVisible();

apps/meteor/tests/e2e/07-emoji.spec.ts

@@ -147,8 +147,8 @@ test.describe('[Emoji]', () => {
 				await mainContent.waitForLastMessageEqualsHtml('0 1 2 3 4 5 6 7 8 9');
 			});
 			test('should render special characters', async () => {
-				await mainContent.sendMessage('# * ® © ™');
-				await mainContent.waitForLastMessageEqualsHtml('# * ® © ™');
+				await mainContent.sendMessage('® © ™ # *');
+				await mainContent.waitForLastMessageEqualsHtml('® © ™ # *');
 			});
 		});
 	});

apps/meteor/tests/e2e/13-permissions.spec.ts

@@ -84,7 +84,7 @@ test.describe('[Permissions]', () => {
 		test('expect not be abble to "mention all"', async () => {
 			await mainContent.sendMessage('@all any_message');
 
-			await expect(mainContent.lastMessage).toContainText('not allowed');
+			await expect(mainContent.lastMessageForMessageTest).toContainText('not allowed');
 		});
 
 		test('expect not be able to "delete own message"', async () => {

apps/meteor/tests/e2e/pageobjects/MainContent.ts

@@ -58,31 +58,31 @@ export class MainContent extends BasePage {
 	}
 
 	get lastUserMessage(): Locator {
-		return this.page.locator('[data-qa-id=UserMessage]').last();
+		return this.page.locator('[data-qa-type="message"][data-sequential="false"]').last().locator('[data-qa-type="username"]');
 	}
 
 	get btnLastUserMessage(): Locator {
-		return this.page.locator('[data-qa-id=UserMessage]:not(.sequential) > button').last();
+		return this.page.locator('[data-qa-type="message"][data-sequential="false"]').last().locator('[data-qa-type="username"]');
 	}
 
 	get lastMessageFileName(): Locator {
-		return this.page.locator('[data-qa-type="message"]:last-child div:nth-child(3) div:nth-child(2) div a:nth-child(1)');
+		return this.page.locator('[data-qa-type="message"]:last-child [data-qa-type="attachment-title-link"]');
 	}
 
 	get lastMessage(): Locator {
 		return this.page.locator('.messages-box [data-qa-type="message"]').last();
 	}
 
 	get lastMessageRoleAdded(): Locator {
-		return this.page.locator('.message:last-child.subscription-role-added .body');
+		return this.page.locator('[data-qa="system-message"] [data-qa-type="system-message-body"]');
 	}
 
 	get lastMessageUserTag(): Locator {
 		return this.page.locator('.message:last-child .role-tag');
 	}
 
 	get lastMessageForMessageTest(): Locator {
-		return this.page.locator('[data-qa-type="message"]:last-child div.message-body-wrapper div:nth-child(2)');
+		return this.page.locator('[data-qa-type="message"]:last-child [data-qa-type="message-body"]');
 	}
 
 	get messageOptionsBtns(): Locator {
@@ -208,11 +208,11 @@ export class MainContent extends BasePage {
 	}
 
 	async waitForLastMessageEqualsHtml(text: string): Promise<void> {
-		await expect(this.page.locator('(//*[contains(@class, "message") and contains(@class, "body")])[last()]')).toContainText(text);
+		await expect(this.lastMessageForMessageTest).toContainText(text);
 	}
 
 	async waitForLastMessageEqualsText(text: string): Promise<void> {
-		await expect(this.page.locator('(//*[contains(@class, "message") and contains(@class, "body")])[last()]')).toContainText(text);
+		await expect(this.lastMessage).toContainText(text);
 	}
 
 	async sendMessage(text: string): Promise<void> {
@@ -270,7 +270,7 @@ export class MainContent extends BasePage {
 	}
 
 	get getFileDescription(): Locator {
-		return this.page.locator('[data-qa-type="message"]:last-child div:nth-child(3) div:nth-child(2) div p');
+		return this.page.locator('[data-qa-type="message"]:last-child [data-qa-type="attachment-description"]');
 	}
 
 	async selectAction(action: string): Promise<void> {
@@ -316,9 +316,9 @@ export class MainContent extends BasePage {
 	}
 
 	async openMessageActionMenu(): Promise<void> {
-		await this.page.locator('.messages-box [data-qa-type="message"]:last-child').hover();
-		await this.page.locator('[data-qa-type="message"]:last-child div.message-actions__menu').waitFor();
-		await this.page.locator('[data-qa-type="message"]:last-child div.message-actions__menu').click();
+		await this.page.locator('[data-qa-type="message"]:last-child').hover();
+		await this.page.locator('[data-qa-type="message"]:last-child [data-qa-type="message-action-menu"][data-qa-id="menu"]').waitFor();
+		await this.page.locator('[data-qa-type="message"]:last-child [data-qa-type="message-action-menu"][data-qa-id="menu"]').click();
 	}
 
 	async openMoreActionMenu(): Promise<void> {

apps/meteor/tests/end-to-end/api/00-miscellaneous.js

@@ -153,7 +153,7 @@ describe('miscellaneous', function () {
 					'desktopNotifications',
 					'pushNotifications',
 					'enableAutoAway',
-					'enableNewMessageTemplate',
+					'useLegacyMessageTemplate',
 					// 'highlights',
 					'desktopNotificationRequireInteraction',
 					'messageViewMode',