[FIX] Make canned responses popup dependent on Canned_responses_enabled setting (#23804)

Co-authored-by: Diego Sampaio <chinello@gmail.com>

app/ui-message/client/popup/customMessagePopups.js

@@ -1,12 +1,29 @@
 import { ReactiveVar } from 'meteor/reactive-var';
+import { Tracker } from 'meteor/tracker';
 
 export const customMessagePopups = new ReactiveVar([]);
 
-export const addMessagePopup = (configGetter) => {
+const nonReactiveGetFunc = () => Tracker.nonreactive(() => customMessagePopups.get());
+
+export const addMessagePopup = (configGetter, name) => {
 	customMessagePopups.set([
-		...customMessagePopups.get(),
+		...nonReactiveGetFunc(),
 		{
 			configGetter,
+			name,
 		},
 	]);
 };
+
+export const removeMessagePopup = (popupName) => {
+	const customMessagePopupsList = nonReactiveGetFunc();
+	const element = customMessagePopupsList.findIndex(({ name }) => name === popupName);
+	if (element < 0) {
+		return;
+	}
+	const listWithRemovedElement = [
+		...customMessagePopupsList.slice(0, element),
+		...customMessagePopupsList.slice(element + 1, customMessagePopupsList.length),
+	];
+	customMessagePopups.set([...listWithRemovedElement]);
+};

ee/app/canned-responses/client/views/popup/addMessagePopupCannedResponse.js

@@ -1,43 +1,54 @@
 import _ from 'underscore';
+import { Tracker } from 'meteor/tracker';
 
 import { CannedResponse } from '../../collections/CannedResponse';
-import { addMessagePopup } from '../../../../../../app/ui-message/client/popup/customMessagePopups';
+import { addMessagePopup, removeMessagePopup } from '../../../../../../app/ui-message/client/popup/customMessagePopups';
 import { t } from '../../../../../../app/utils';
+import { settings } from '../../../../../../app/settings/client';
 
-addMessagePopup((template) => ({
-	title: t('Canned_Responses'),
-	collection: CannedResponse,
-	trigger: '!',
-	prefix: '',
-	suffix: ' ',
-	triggerAnywhere: true,
-	template: 'messagePopupCannedResponse',
-	rid: template.data.rid,
-	getInput: template.data.getInput,
-	textFilterDelay: 500,
-	getFilter: (collection, filter) => {
-		const exp = new RegExp(filter, 'i');
-		const records = collection
-			.find(
-				{
-					shortcut: exp,
-				},
-				{
-					reactive: 1,
-					limit: 12,
-					sort: {
-						shortcut: -1,
+Tracker.autorun(() => {
+	const templateFunc = (template) => ({
+		title: t('Canned_Responses'),
+		collection: CannedResponse,
+		trigger: '!',
+		prefix: '',
+		suffix: ' ',
+		triggerAnywhere: true,
+		template: 'messagePopupCannedResponse',
+		rid: template.data.rid,
+		getInput: template.data.getInput,
+		textFilterDelay: 500,
+		getFilter: (collection, filter) => {
+			const exp = new RegExp(filter, 'i');
+			const records = collection
+				.find(
+					{
+						shortcut: exp,
 					},
-				},
-			)
-			.fetch();
+					{
+						reactive: 1,
+						limit: 12,
+						sort: {
+							shortcut: -1,
+						},
+					},
+				)
+				.fetch();
+
+			return records;
+		},
+		getValue: (_id, collection, records) => {
+			const record = _.findWhere(records, {
+				_id,
+			});
+			return record && record.text;
+		},
+	});
 
-		return records;
-	},
-	getValue: (_id, collection, records) => {
-		const record = _.findWhere(records, {
-			_id,
-		});
-		return record && record.text;
-	},
-}));
+	const settingValue = settings.get('Canned_Responses_Enable');
+	if (settingValue) {
+		addMessagePopup(templateFunc, 'cannedResponses');
+	} else {
+		removeMessagePopup('cannedResponses');
+	}
+});