[NEW] Message Template React Component (#23971)

Co-authored-by: Filipe Marins <filipe.marins@rocket.chat> Co-authored-by: gabriellsh <gabriel.henriques@rocket.chat> Co-authored-by: Tasso Evangelista <tasso.evangelista@rocket.chat> Co-authored-by: juliajforesti <juliajforesti@gmail.com>
RocketChat · Apr 7, 2022 · 71d0ed8 · 71d0ed8
1 parent 8f9b2d1
commit 71d0ed8
Show file tree

Hide file tree

Showing 220 changed files with 5,309 additions and 1,260 deletions.
diff --git a/app/action-links/client/lib/actionLinks.js b/app/action-links/client/lib/actionLinks.js
diff --git a/app/action-links/client/lib/actionLinks.ts b/app/action-links/client/lib/actionLinks.ts
@@ -0,0 +1,74 @@
+import { Meteor } from 'meteor/meteor';
+
+import { handleError } from '../../../../client/lib/utils/handleError';
+import { IMessage } from '../../../../definition/IMessage';
+
+// Action Links namespace creation.
+export const actionLinks = {
+	actions: new Map<string, Function>(),
+	register(name: string, fn: Function): void {
+		actionLinks.actions.set(name, fn);
+	},
+	// getMessage(name, messageId) {
+	// 	const userId = Meteor.userId();
+	// 	if (!userId) {
+	// 		throw new Meteor.Error('error-invalid-user', 'Invalid user', {
+	// 			function: 'actionLinks.getMessage',
+	// 		});
+	// 	}
+
+	// 	const message = Messages.findOne({ _id: messageId });
+	// 	if (!message) {
+	// 		throw new Meteor.Error('error-invalid-message', 'Invalid message', {
+	// 			function: 'actionLinks.getMessage',
+	// 		});
+	// 	}
+
+	// 	const subscription = Subscriptions.findOne({
+	// 		'rid': message.rid,
+	// 		'u._id': userId,
+	// 	});
+	// 	if (!subscription) {
+	// 		throw new Meteor.Error('error-not-allowed', 'Not allowed', {
+	// 			function: 'actionLinks.getMessage',
+	// 		});
+	// 	}
+
+	// 	if (!message.actionLinks || !message.actionLinks[name]) {
+	// 		throw new Meteor.Error('error-invalid-actionlink', 'Invalid action link', {
+	// 			function: 'actionLinks.getMessage',
+	// 		});
+	// 	}
+
+	// 	return message;
+	// },
+	run(method: string, message: IMessage, instance: undefined): void {
+		const actionLink = message.actionLinks && message.actionLinks.find((action) => action.method_id === method);
+
+		if (!actionLink) {
+			throw new Meteor.Error('error-invalid-actionlink', 'Invalid action link');
+		}
+
+		if (!actionLinks.actions.has(actionLink.method_id)) {
+			throw new Meteor.Error('error-invalid-actionlink', 'Invalid action link');
+		}
+
+		const fn = actionLinks.actions.get(actionLink.method_id);
+
+		let ranClient = false;
+
+		if (fn) {
+			// run just on client side
+			fn(message, actionLink.params, instance);
+
+			ranClient = true;
+		}
+
+		// and run on server side
+		Meteor.call('actionLinkHandler', name, message._id, (err: Error) => {
+			if (err && !ranClient) {
+				handleError(err);
+			}
+		});
+	},
+};
diff --git a/app/autotranslate/client/lib/actionButton.js → app/autotranslate/client/lib/actionButton.ts b/app/autotranslate/client/lib/actionButton.js → app/autotranslate/client/lib/actionButton.ts
@@ -2,11 +2,12 @@ import { Meteor } from 'meteor/meteor';
 import { Tracker } from 'meteor/tracker';
 
 import { AutoTranslate } from './autotranslate';
-import { settings } from '../../../settings';
-import { hasAtLeastOnePermission } from '../../../authorization';
-import { MessageAction } from '../../../ui-utils';
+import { settings } from '../../../settings/client';
+import { hasAtLeastOnePermission } from '../../../authorization/client';
+import { MessageAction } from '../../../ui-utils/client/lib/MessageAction';
 import { messageArgs } from '../../../ui-utils/client/lib/messageArgs';
-import { Messages } from '../../../models';
+import { Messages } from '../../../models/client';
+import { isTranslatedMessage } from '../../../../definition/IMessage';
 
 Meteor.startup(() => {
 	AutoTranslate.init();
@@ -18,20 +19,20 @@ Meteor.startup(() => {
 				icon: 'language',
 				label: 'Translate',
 				context: ['message', 'message-mobile', 'threads'],
-				action() {
-					const { msg: message } = messageArgs(this);
+				action(_, props) {
+					const { message = messageArgs(this).msg } = props;
 					const language = AutoTranslate.getLanguage(message.rid);
-					if (!message.translations || !message.translations[language]) {
+					if (!isTranslatedMessage(message) || !message.translations[language]) {
 						// } && !_.find(message.attachments, attachment => { return attachment.translations && attachment.translations[language]; })) {
-						AutoTranslate.messageIdsToWait[message._id] = true;
+						(AutoTranslate.messageIdsToWait as any)[message._id] = true;
 						Messages.update({ _id: message._id }, { $set: { autoTranslateFetching: true } });
 						Meteor.call('autoTranslate.translateMessage', message, language);
 					}
-					const action = message.autoTranslateShowInverse ? '$unset' : '$set';
+					const action = 'autoTranslateShowInverse' in message ? '$unset' : '$set';
 					Messages.update({ _id: message._id }, { [action]: { autoTranslateShowInverse: true } });
 				},
-				condition({ msg, u }) {
-					return msg && msg.u && msg.u._id !== u._id && msg.translations && !msg.translations.original;
+				condition({ message, user }) {
+					return Boolean(message?.u && message.u._id !== user._id && isTranslatedMessage(message) && !message.translations.original);
 				},
 				order: 90,
 			});
@@ -40,20 +41,20 @@ Meteor.startup(() => {
 				icon: 'language',
 				label: 'View_original',
 				context: ['message', 'message-mobile', 'threads'],
-				action() {
-					const { msg: message } = messageArgs(this);
+				action(_, props) {
+					const { message = messageArgs(this).msg } = props;
 					const language = AutoTranslate.getLanguage(message.rid);
-					if (!message.translations || !message.translations[language]) {
+					if (!isTranslatedMessage(message) || !message.translations[language]) {
 						// } && !_.find(message.attachments, attachment => { return attachment.translations && attachment.translations[language]; })) {
-						AutoTranslate.messageIdsToWait[message._id] = true;
+						(AutoTranslate.messageIdsToWait as any)[message._id] = true;
 						Messages.update({ _id: message._id }, { $set: { autoTranslateFetching: true } });
 						Meteor.call('autoTranslate.translateMessage', message, language);
 					}
-					const action = message.autoTranslateShowInverse ? '$unset' : '$set';
+					const action = 'autoTranslateShowInverse' in message ? '$unset' : '$set';
 					Messages.update({ _id: message._id }, { [action]: { autoTranslateShowInverse: true } });
 				},
-				condition({ msg, u }) {
-					return msg && msg.u && msg.u._id !== u._id && msg.translations && msg.translations.original;
+				condition({ message, user }) {
+					return Boolean(message?.u && message.u._id !== user._id && isTranslatedMessage(message) && message.translations.original);
 				},
 				order: 90,
 			});

diff --git a/...n/client/createDiscussionMessageAction.js → ...n/client/createDiscussionMessageAction.ts b/...n/client/createDiscussionMessageAction.js → ...n/client/createDiscussionMessageAction.ts
@@ -20,8 +20,8 @@ Meteor.startup(function () {
 			icon: 'discussion',
 			label: 'Discussion_start',
 			context: ['message', 'message-mobile'],
-			async action() {
-				const { msg: message, room } = messageArgs(this);
+			async action(_, props) {
+				const { message = messageArgs(this).msg, room } = props;
 
 				imperativeModal.open({
 					component: CreateDiscussion,
@@ -34,16 +34,16 @@ Meteor.startup(function () {
 				});
 			},
 			condition({
-				msg: {
+				message: {
 					u: { _id: uid },
 					drid,
 					dcount,
 				},
 				room,
 				subscription,
-				u,
+				user,
 			}) {
-				if (drid || !isNaN(dcount)) {
+				if (drid || !Number.isNaN(dcount)) {
 					return false;
 				}
 				if (!subscription) {
@@ -54,7 +54,7 @@ Meteor.startup(function () {
 					return false;
 				}
 
-				return uid !== u._id ? hasPermission('start-discussion-other-user') : hasPermission('start-discussion');
+				return uid !== user._id ? hasPermission('start-discussion-other-user') : hasPermission('start-discussion');
 			},
 			order: 1,
 			group: 'menu',

diff --git a/app/highlight-words/client/client.ts b/app/highlight-words/client/client.ts
@@ -0,0 +1,24 @@
+import { IMessage } from '../../../definition/IMessage';
+import { highlightWords, getRegexHighlight, getRegexHighlightUrl } from './helper';
+
+// TODO: delete this file after message rewrites
+export const createHighlightWordsMessageRenderer = ({
+	wordsToHighlight,
+}: {
+	wordsToHighlight: string[];
+}): (<T extends IMessage & { html: string }>(message: T) => T) => {
+	const highlights = wordsToHighlight.map((highlight) => ({
+		highlight,
+		regex: getRegexHighlight(highlight),
+		urlRegex: getRegexHighlightUrl(highlight),
+	}));
+
+	return <T extends IMessage & { html: string }>(message: T): T => {
+		if (!message.html?.trim()) {
+			return message;
+		}
+
+		message.html = highlightWords(message.html, highlights);
+		return message;
+	};
+};
diff --git a/app/highlight-words/client/helper.js b/app/highlight-words/client/helper.js
@@ -6,13 +6,13 @@ export const removeHighlightedUrls = (msg, highlight, urlMatches) => {
 	const highlightRegex = new RegExp(highlight, 'gmi');
 
 	return urlMatches.reduce((msg, match) => {
-		const withTemplate = match.replace(highlightRegex, `<span class="highlight-text">${highlight}</span>`);
+		const withTemplate = match.replace(highlightRegex, `<mark class="highlight-text">${highlight}</mark>`);
 		const regexWithTemplate = new RegExp(withTemplate, 'i');
 		return msg.replace(regexWithTemplate, match);
 	}, msg);
 };
 
-const highlightTemplate = '$1<span class="highlight-text">$2</span>$3';
+const highlightTemplate = '$1<mark class="highlight-text">$2</mark>$3';
 
 export const getRegexHighlight = (highlight) =>
 	new RegExp(

diff --git a/app/highlight-words/client/index.ts b/app/highlight-words/client/index.ts
@@ -0,0 +1 @@
+export { createHighlightWordsMessageRenderer } from './client';
diff --git a/app/lib/lib/MessageTypes.js → app/lib/lib/MessageTypes.ts b/app/lib/lib/MessageTypes.js → app/lib/lib/MessageTypes.ts
@@ -1,7 +1,8 @@
+/* eslint-disable @typescript-eslint/camelcase */
 import { Meteor } from 'meteor/meteor';
 
-import { MessageTypes } from '../../ui-utils';
-import { callbacks } from '../../../lib/callbacks';
+import { MessageTypes } from '../../ui-utils/lib/MessageTypes';
+// import { callbacks } from '../../../lib/callbacks';
 
 Meteor.startup(function () {
 	MessageTypes.registerType({
@@ -177,12 +178,12 @@ Meteor.startup(function () {
 			};
 		},
 	});
-	MessageTypes.registerType({
-		id: 'rtc',
-		render(message) {
-			return callbacks.run('renderRtcMessage', message);
-		},
-	});
+	// MessageTypes.registerType({
+	// 	id: 'rtc',
+	// 	render(message) {
+	// 		return callbacks.run('renderRtcMessage', message);
+	// 	},
+	// });
 	MessageTypes.registerType({
 		id: 'user-muted',
 		system: true,
@@ -212,7 +213,7 @@ Meteor.startup(function () {
 		data(message) {
 			return {
 				username: message.msg,
-				role: message.role,
+				role: message.role || '',
 				user_by: message.u.username,
 			};
 		},
@@ -224,7 +225,7 @@ Meteor.startup(function () {
 		data(message) {
 			return {
 				username: message.msg,
-				role: message.role,
+				role: message.role || '',
 				user_by: message.u.username,
 			};
 		},

diff --git a/app/lib/server/functions/attachMessage.ts b/app/lib/server/functions/attachMessage.ts
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/camelcase */
 import { getUserAvatarURL } from '../../../utils/lib/getUserAvatarURL';
 import { roomCoordinator } from '../../../../server/lib/rooms/roomCoordinator';
 import { IMessage } from '../../../../definition/IMessage';
@@ -9,8 +10,8 @@ export const attachMessage = function (
 	room: IRoom,
 ): {
 	text: string;
-	authorName?: string;
-	authorIcon: string;
+	author_name?: string;
+	author_icon: string;
 	message_link: string;
 	attachments?: MessageAttachment[];
 	ts: Date;
@@ -24,9 +25,8 @@ export const attachMessage = function (
 	} = message;
 	return {
 		text: msg,
-		authorName: username,
-		authorIcon: getUserAvatarURL(username),
-		// eslint-disable-next-line @typescript-eslint/camelcase
+		author_name: username,
+		author_icon: getUserAvatarURL(username),
 		message_link: `${roomCoordinator.getRouteLink(room.t, room)}?msg=${_id}`,
 		attachments,
 		ts,

diff --git a/app/lib/server/functions/sendMessage.js b/app/lib/server/functions/sendMessage.js
@@ -10,6 +10,7 @@ import { FileUpload } from '../../../file-upload/server';
 import { hasPermission } from '../../../authorization/server';
 import { SystemLogger } from '../../../../server/lib/logger/system';
 import { parseUrlsInMessage } from './parseUrlsInMessage';
+import { isE2EEMessage } from '../../../../lib/isE2EEMessage';
 
 const { DISABLE_MESSAGE_PARSER = 'false' } = process.env;
 
@@ -246,7 +247,7 @@ export const sendMessage = function (user, message, room, upsert = false) {
 
 	message = callbacks.run('beforeSaveMessage', message, room);
 	try {
-		if (message.msg && DISABLE_MESSAGE_PARSER !== 'true') {
+		if (message.msg && DISABLE_MESSAGE_PARSER !== 'true' && !isE2EEMessage(message)) {
 			message.md = parser(message.msg);
 		}
 	} catch (e) {

diff --git a/app/lib/server/functions/updateMessage.ts b/app/lib/server/functions/updateMessage.ts
@@ -7,6 +7,7 @@ import { callbacks } from '../../../../lib/callbacks';
 import { SystemLogger } from '../../../../server/lib/logger/system';
 import { Apps } from '../../../apps/server';
 import { parseUrlsInMessage } from './parseUrlsInMessage';
+import { isE2EEMessage } from '../../../../lib/isE2EEMessage';
 import { IMessage, IMessageEdited } from '../../../../definition/IMessage';
 import { IUser } from '../../../../definition/IUser';
 
@@ -51,7 +52,7 @@ export const updateMessage = function (message: IMessage, user: IUser, originalM
 	message = callbacks.run('beforeSaveMessage', message);
 
 	try {
-		if (message.msg && DISABLE_MESSAGE_PARSER !== 'true') {
+		if (message.msg && DISABLE_MESSAGE_PARSER !== 'true' && !isE2EEMessage(message)) {
 			message.md = parser(message.msg);
 		}
 	} catch (e: unknown) {