feat: added modal confirmation before pinning message (#31348)

Co-authored-by: Douglas Fabris <27704687+dougfabris@users.noreply.github.com>
Co-authored-by: Hugo Costa <20212776+hugocostadev@users.noreply.github.com>

.changeset/swift-beans-reflect.md

@@ -0,0 +1,5 @@
+---
+"@rocket.chat/meteor": minor
+---
+
+Added a modal to confirm the intention to pin a message, preventing users from doing it by mistake

apps/meteor/client/startup/actionButtons/pinMessage.ts → apps/meteor/client/startup/actionButtons/pinMessage.tsx

@@ -4,10 +4,12 @@ import { hasAtLeastOnePermission } from '../../../app/authorization/client';
 import { settings } from '../../../app/settings/client';
 import { MessageAction } from '../../../app/ui-utils/client';
 import { sdk } from '../../../app/utils/client/lib/SDKClient';
+import { imperativeModal } from '../../lib/imperativeModal';
 import { queryClient } from '../../lib/queryClient';
 import { roomCoordinator } from '../../lib/rooms/roomCoordinator';
 import { dispatchToastMessage } from '../../lib/toast';
 import { messageArgs } from '../../lib/utils/messageArgs';
+import PinMessageModal from '../../views/room/modals/PinMessageModal';
 
 Meteor.startup(() => {
 	MessageAction.addButton({
@@ -18,13 +20,25 @@ Meteor.startup(() => {
 		context: ['pinned', 'message', 'message-mobile', 'threads', 'direct', 'videoconf', 'videoconf-threads'],
 		async action(_, props) {
 			const { message = messageArgs(this).msg } = props;
-			message.pinned = true;
-			try {
-				await sdk.call('pinMessage', message);
-				queryClient.invalidateQueries(['rooms', message.rid, 'pinned-messages']);
-			} catch (error) {
-				dispatchToastMessage({ type: 'error', message: error });
-			}
+			const onConfirm = async () => {
+				message.pinned = true;
+				try {
+					await sdk.call('pinMessage', message);
+					queryClient.invalidateQueries(['rooms', message.rid, 'pinned-messages']);
+				} catch (error) {
+					dispatchToastMessage({ type: 'error', message: error });
+				}
+				imperativeModal.close();
+			};
+
+			imperativeModal.open({
+				component: PinMessageModal,
+				props: {
+					message,
+					onConfirm,
+					onCancel: () => imperativeModal.close(),
+				},
+			});
 		},
 		condition({ message, subscription, room }) {
 			if (!settings.get('Message_AllowPinning') || message.pinned || !subscription) {

apps/meteor/client/views/room/modals/PinMessageModal/PinMessageModal.tsx

@@ -0,0 +1,45 @@
+import type { MessageQuoteAttachment, IMessage } from '@rocket.chat/core-typings';
+import { Box } from '@rocket.chat/fuselage';
+import { useTranslation, useUserAvatarPath } from '@rocket.chat/ui-contexts';
+import type { ComponentProps, ReactElement } from 'react';
+import React from 'react';
+
+import GenericModal from '../../../../components/GenericModal';
+import { QuoteAttachment } from '../../../../components/message/content/attachments/QuoteAttachment';
+import { useUserDisplayName } from '../../../../hooks/useUserDisplayName';
+
+type PinMessageModalProps = { message: IMessage } & ComponentProps<typeof GenericModal>;
+
+const PinMessageModal = ({ message, ...props }: PinMessageModalProps): ReactElement => {
+	const t = useTranslation();
+	const getUserAvatarPath = useUserAvatarPath();
+	const displayName = useUserDisplayName(message.u);
+	const avatarUrl = getUserAvatarPath(message.u.username);
+
+	const attachment = {
+		author_name: String(displayName),
+		author_link: '',
+		author_icon: avatarUrl,
+		message_link: '',
+		text: message.msg,
+		attachments: message.attachments as MessageQuoteAttachment[],
+		md: message.md,
+	};
+
+	return (
+		<GenericModal icon='pin' title={t('Pin_Message')} variant='warning' confirmText={t('Yes_pin_message')} {...props}>
+			<Box mbe={16} is='p'>
+				{t('Are_you_sure_you_want_to_pin_this_message')}
+			</Box>
+			<QuoteAttachment attachment={attachment} />
+			<Box is='p' fontScale='c1' mbs={16}>
+				{t('Pinned_messages_are_visible_to_everyone')}
+			</Box>
+			<Box is='p' fontScale='c1'>
+				{t('Starred_messages_are_only_visible_to_you')}
+			</Box>
+		</GenericModal>
+	);
+};
+
+export default PinMessageModal;

apps/meteor/client/views/room/modals/PinMessageModal/index.ts

@@ -0,0 +1 @@
+export { default } from './PinMessageModal';

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

@@ -672,6 +672,7 @@
   "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?",
   "Are_you_sure_you_want_to_disable_Facebook_integration": "Are you sure you want to disable Facebook integration?",
+  "Are_you_sure_you_want_to_pin_this_message": "Are you sure you want to pin this message?",
   "Are_you_sure_you_want_to_reset_the_name_of_all_priorities": "Are you sure you want to reset the name of all priorities?",
   "Assets": "Assets",
   "Assets_Description": "Modify your workspace's logo, icon, favicon and more.",
@@ -4043,6 +4044,7 @@
   "pin-message_description": "Permission to pin a message in a channel",
   "Pinned_a_message": "Pinned a message:",
   "Pinned_Messages": "Pinned Messages",
+  "Pinned_messages_are_visible_to_everyone": "Pinned messages are visible to everyone",
   "Pinned_messages_unavailable_for_federation": "Pinned Messages are not available for federated rooms.",
   "pinning-not-allowed": "Pinning is not allowed",
   "PiwikAdditionalTrackers": "Additional Piwik Sites",
@@ -4883,6 +4885,7 @@
   "Star": "Star",
   "Star_Message": "Star Message",
   "Starred_Messages": "Starred Messages",
+  "Starred_messages_are_only_visible_to_you": "Starred messages are only visible to you",
   "Start": "Start",
   "Start_a_call": "Start a call",
   "Start_a_call_with": "Start a call with",
@@ -5820,6 +5823,7 @@
   "Yes_leave_it": "Yes, leave it!",
   "Yes_mute_user": "Yes, mute user!",
   "Yes_prune_them": "Yes, prune them!",
+  "Yes_pin_message": "Yes, pin message",
   "Yes_remove_user": "Yes, remove user!",
   "Yes_unarchive_it": "Yes, unarchive it!",
   "yesterday": "yesterday",