diff --git a/.changeset/swift-beans-reflect.md b/.changeset/swift-beans-reflect.md new file mode 100644 index 0000000000000..f8e8a487493d8 --- /dev/null +++ b/.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 diff --git a/apps/meteor/client/startup/actionButtons/pinMessage.ts b/apps/meteor/client/startup/actionButtons/pinMessage.tsx similarity index 66% rename from apps/meteor/client/startup/actionButtons/pinMessage.ts rename to apps/meteor/client/startup/actionButtons/pinMessage.tsx index 970eb28349c0c..b383b4a3c6484 100644 --- a/apps/meteor/client/startup/actionButtons/pinMessage.ts +++ b/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) { diff --git a/apps/meteor/client/views/room/modals/PinMessageModal/PinMessageModal.tsx b/apps/meteor/client/views/room/modals/PinMessageModal/PinMessageModal.tsx new file mode 100644 index 0000000000000..a9fd5c461ac76 --- /dev/null +++ b/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; + +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 ( + + + {t('Are_you_sure_you_want_to_pin_this_message')} + + + + {t('Pinned_messages_are_visible_to_everyone')} + + + {t('Starred_messages_are_only_visible_to_you')} + + + ); +}; + +export default PinMessageModal; diff --git a/apps/meteor/client/views/room/modals/PinMessageModal/index.ts b/apps/meteor/client/views/room/modals/PinMessageModal/index.ts new file mode 100644 index 0000000000000..041ad7aa28082 --- /dev/null +++ b/apps/meteor/client/views/room/modals/PinMessageModal/index.ts @@ -0,0 +1 @@ +export { default } from './PinMessageModal'; diff --git a/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json b/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json index 013f79e23b2d1..79bdfbf74a0f3 100644 --- a/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json +++ b/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",