[IMPROVE] Rewrite clear all unread modal #22764

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

app/ui-master/client/body.js

@@ -7,11 +7,12 @@ import { Template } from 'meteor/templating';
 
 import { t } from '../../utils/client';
 import { chatMessages } from '../../ui';
-import { Layout, modal, popover, fireGlobalEvent, RoomManager } from '../../ui-utils';
+import { Layout, popover, fireGlobalEvent, RoomManager } from '../../ui-utils';
 import { settings } from '../../settings';
 import { ChatSubscription } from '../../models';
-
 import './body.html';
+import { imperativeModal } from '../../../client/lib/imperativeModal';
+import GenericModal from '../../../client/components/GenericModal';
 
 Template.body.onRendered(function() {
 	new Clipboard('.clipboard');
@@ -21,14 +22,8 @@ Template.body.onRendered(function() {
 		if (e.keyCode === 27 && (e.shiftKey === true || e.ctrlKey === true) && (unread != null) && unread !== '') {
 			e.preventDefault();
 			e.stopPropagation();
-			modal.open({
-				title: t('Clear_all_unreads_question'),
-				type: 'warning',
-				confirmButtonText: t('Yes_clear_all'),
-				showCancelButton: true,
-				cancelButtonText: t('Cancel'),
-				confirmButtonColor: '#DD6B55',
-			}, function() {
+
+			const handleClearUnreadAllMessages = () => {
 				const subscriptions = ChatSubscription.find({
 					open: true,
 				}, {
@@ -47,6 +42,21 @@ Template.body.onRendered(function() {
 						Meteor.call('readMessages', subscription.rid);
 					}
 				});
+
+				imperativeModal.close();
+			};
+
+			imperativeModal.open({
+				component: GenericModal,
+				props: {
+					children: t('Are_you_sure_you_want_to_clear_all_unread_messages'),
+					variant: 'warning',
+					title: t('Clear_all_unreads_question'),
+					confirmText: t('Yes_clear_all'),
+					onClose: imperativeModal.close,
+					onCancel: imperativeModal.close,
+					onConfirm: handleClearUnreadAllMessages,
+				},
 			});
 		}
 	});

app/ui-utils/client/lib/readMessages.js

@@ -66,6 +66,8 @@ export const readMessage = new class extends Emitter {
 	}
 
 	readNow(rid = Session.get('openedRoom')) {
+		const unread = Session.get('unread');
+
 		if (rid == null) {
 			this.log('readMessage -> readNow canceled, no rid informed');
 			return;
@@ -77,6 +79,10 @@ export const readMessage = new class extends Emitter {
 			return;
 		}
 
+		if ((unread != null) && unread !== '') {
+			return;
+		}
+
 		return Meteor.call('readMessages', rid, () => {
 			RoomHistoryManager.getRoom(rid).unreadNotLoaded.set(0);
 			return this.emit(rid);

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

@@ -530,6 +530,7 @@
   "are_also_typing": "are also typing",
   "are_typing": "are typing",
   "Are_you_sure": "Are you sure?",
+  "Are_you_sure_you_want_to_clear_all_unread_messages": "Are you sure you want to clear all unread messages?",
   "Are_you_sure_you_want_to_close_this_chat": "Are you sure you want to close this chat?",
   "Are_you_sure_you_want_to_delete_this_record": "Are you sure you want to delete this record?",
   "Are_you_sure_you_want_to_delete_your_account": "Are you sure you want to delete your account?",