chore: remove meteor.startup from pin-message (RocketChat#34019)

apps/meteor/client/components/message/hooks/usePinMessageMutation.ts

@@ -0,0 +1,30 @@
+import type { IMessage } from '@rocket.chat/core-typings';
+import { useToastMessageDispatch } from '@rocket.chat/ui-contexts';
+import { useQueryClient, useMutation } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+
+import { sdk } from '../../../../app/utils/client/lib/SDKClient';
+import { roomsQueryKeys } from '../../../lib/queryKeys';
+
+export const usePinMessageMutation = () => {
+	const { t } = useTranslation();
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	const queryClient = useQueryClient();
+
+	return useMutation({
+		mutationFn: async (message: IMessage) => {
+			await sdk.call('pinMessage', message);
+		},
+		onSuccess: (_data) => {
+			dispatchToastMessage({ type: 'success', message: t('Message_has_been_pinned') });
+		},
+		onError: (error) => {
+			dispatchToastMessage({ type: 'error', message: error });
+		},
+		onSettled: (_data, _error, message) => {
+			queryClient.invalidateQueries(roomsQueryKeys.pinnedMessages(message.rid));
+			queryClient.invalidateQueries(roomsQueryKeys.messageActions(message.rid, message._id));
+		},
+	});
+};

apps/meteor/client/components/message/toolbar/MessageToolbar.tsx

@@ -12,6 +12,7 @@ import MessageActionMenu from './MessageActionMenu';
 import MessageToolbarStarsActionMenu from './MessageToolbarStarsActionMenu';
 import { useNewDiscussionMessageAction } from './useNewDiscussionMessageAction';
 import { usePermalinkStar } from './usePermalinkStar';
+import { usePinMessageAction } from './usePinMessageAction';
 import { useStarMessageAction } from './useStarMessageAction';
 import { useUnstarMessageAction } from './useUnstarMessageAction';
 import { useWebDAVMessageAction } from './useWebDAVMessageAction';
@@ -91,6 +92,7 @@ const MessageToolbar = ({
 	// TODO: move this to another place
 	useWebDAVMessageAction();
 	useNewDiscussionMessageAction();
+	usePinMessageAction(message, { room, subscription });
 	useStarMessageAction(message, { room, user });
 	useUnstarMessageAction(message, { room, user });
 	usePermalinkStar(message, { subscription, user });

apps/meteor/client/components/message/toolbar/usePinMessageAction.tsx

@@ -0,0 +1,47 @@
+import type { IMessage, IRoom, ISubscription } from '@rocket.chat/core-typings';
+import { isOmnichannelRoom } from '@rocket.chat/core-typings';
+import { useSetting, useSetModal, usePermission } from '@rocket.chat/ui-contexts';
+import React, { useEffect } from 'react';
+
+import { MessageAction } from '../../../../app/ui-utils/client/lib/MessageAction';
+import PinMessageModal from '../../../views/room/modals/PinMessageModal';
+import { usePinMessageMutation } from '../hooks/usePinMessageMutation';
+
+export const usePinMessageAction = (
+	message: IMessage,
+	{ room, subscription }: { room: IRoom; subscription: ISubscription | undefined },
+) => {
+	const setModal = useSetModal();
+
+	const allowPinning = useSetting('Message_AllowPinning');
+	const hasPermission = usePermission('pin-message', room._id);
+	const { mutateAsync: pinMessage } = usePinMessageMutation();
+
+	useEffect(() => {
+		if (!allowPinning || isOmnichannelRoom(room) || !hasPermission || message.pinned || !subscription) {
+			return;
+		}
+
+		const onConfirm = async () => {
+			pinMessage(message);
+			setModal(null);
+		};
+
+		MessageAction.addButton({
+			id: 'pin-message',
+			icon: 'pin',
+			label: 'Pin',
+			type: 'interaction',
+			context: ['pinned', 'message', 'message-mobile', 'threads', 'direct', 'videoconf', 'videoconf-threads'],
+			async action() {
+				setModal(<PinMessageModal message={message} onConfirm={onConfirm} onCancel={() => setModal(null)} />);
+			},
+			order: 2,
+			group: 'menu',
+		});
+
+		return () => {
+			MessageAction.removeButton('pin-message');
+		};
+	}, [allowPinning, hasPermission, message, pinMessage, room, setModal, subscription]);
+};

apps/meteor/client/lib/queryKeys.ts

@@ -4,6 +4,7 @@ export const roomsQueryKeys = {
 	all: ['rooms'] as const,
 	room: (rid: IRoom['_id']) => ['rooms', rid] as const,
 	starredMessages: (rid: IRoom['_id']) => [...roomsQueryKeys.room(rid), 'starred-messages'] as const,
+	pinnedMessages: (rid: IRoom['_id']) => [...roomsQueryKeys.room(rid), 'pinned-messages'] as const,
 	messages: (rid: IRoom['_id']) => [...roomsQueryKeys.room(rid), 'messages'] as const,
 	message: (rid: IRoom['_id'], mid: IMessage['_id']) => [...roomsQueryKeys.messages(rid), mid] as const,
 	messageActions: (rid: IRoom['_id'], mid: IMessage['_id']) => [...roomsQueryKeys.message(rid, mid), 'actions'] as const,

apps/meteor/client/startup/actionButtons/index.ts

@@ -3,5 +3,4 @@ import './jumpToPinMessage';
 import './jumpToSearchMessage';
 import './jumpToStarMessage';
 import './permalinkPinned';
-import './pinMessage';
 import './unpinMessage';