Regression: Missing contexts on contextual bar (#27734)

apps/meteor/client/components/message/content/BroadcastMetrics.tsx

@@ -1,25 +1,31 @@
+import type { IMessage } from '@rocket.chat/core-typings';
 import { MessageBlock, MessageMetrics, MessageMetricsReply } from '@rocket.chat/fuselage';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import React from 'react';
 
+import { useMessageActions } from '../../../views/room/contexts/MessageContext';
 import { useBlockRendered } from '../hooks/useBlockRendered';
 
 type BroadcastMetricsProps = {
 	username: string;
 	mid: string;
-	replyBroadcast: () => void;
+	message: IMessage;
 };
 
-const BroadcastMetrics = ({ username, mid, replyBroadcast }: BroadcastMetricsProps): ReactElement => {
+const BroadcastMetrics = ({ username, mid, message }: BroadcastMetricsProps): ReactElement => {
 	const t = useTranslation();
 	const { className, ref } = useBlockRendered<HTMLDivElement>();
 
+	const {
+		actions: { replyBroadcast },
+	} = useMessageActions();
+
 	return (
 		<MessageBlock>
 			<MessageMetrics>
 				<div className={className} ref={ref} />
-				<MessageMetricsReply data-username={username} data-mid={mid} onClick={replyBroadcast}>
+				<MessageMetricsReply data-username={username} data-mid={mid} onClick={(): void => replyBroadcast(message)}>
 					{t('Reply')}
 				</MessageMetricsReply>
 			</MessageMetrics>

apps/meteor/client/components/message/content/DiscussionMetrics.tsx

@@ -1,29 +1,33 @@
 import { MessageBlock, MessageMetrics, MessageMetricsItem, MessageMetricsReply } from '@rocket.chat/fuselage';
 import { useTranslation } from '@rocket.chat/ui-contexts';
-import type { ReactElement, UIEvent } from 'react';
+import type { ReactElement } from 'react';
 import React from 'react';
 
 import { useTimeAgo } from '../../../hooks/useTimeAgo';
+import { useMessageActions } from '../../../views/room/contexts/MessageContext';
 import { useBlockRendered } from '../hooks/useBlockRendered';
 
 type DiscussionMetricsProps = {
 	drid: string;
 	rid: string;
-	openDiscussion: (event: UIEvent) => void;
 	count: number;
 	lm?: Date;
 };
 
-const DiscussionMetrics = ({ lm, count, rid, drid, openDiscussion }: DiscussionMetricsProps): ReactElement => {
+const DiscussionMetrics = ({ lm, count, rid, drid }: DiscussionMetricsProps): ReactElement => {
 	const t = useTranslation();
 	const format = useTimeAgo();
 	const { className, ref } = useBlockRendered<HTMLDivElement>();
 
+	const {
+		actions: { openRoom },
+	} = useMessageActions();
+
 	return (
 		<MessageBlock>
 			<div className={className} ref={ref} />
 			<MessageMetrics>
-				<MessageMetricsReply data-rid={rid} data-drid={drid} onClick={openDiscussion}>
+				<MessageMetricsReply data-rid={rid} data-drid={drid} onClick={openRoom(drid)}>
 					{count ? t('message_counter', { counter: count, count }) : t('Reply')}
 				</MessageMetricsReply>
 				<MessageMetricsItem title={lm?.toLocaleString()}>

apps/meteor/client/components/message/content/ThreadMetrics.tsx

@@ -1,9 +1,10 @@
 import { MessageMetricsItem, MessageBlock, MessageMetrics, MessageMetricsReply, MessageMetricsFollowing } from '@rocket.chat/fuselage';
 import { useToastMessageDispatch, useTranslation } from '@rocket.chat/ui-contexts';
-import type { ReactElement, UIEvent } from 'react';
+import type { ReactElement } from 'react';
 import React, { useCallback } from 'react';
 
 import { useTimeAgo } from '../../../hooks/useTimeAgo';
+import { useMessageActions } from '../../../views/room/contexts/MessageContext';
 import { useToggleFollowingThreadMutation } from '../../../views/room/contextualBar/Threads/hooks/useToggleFollowingThreadMutation';
 import { followStyle, anchor } from '../helpers/followSyle';
 import { useBlockRendered } from '../hooks/useBlockRendered';
@@ -21,26 +22,18 @@ type ThreadMetricsProps = {
 	counter: number;
 	participants: number;
 	following: boolean;
-	openThread: (e: UIEvent) => void;
 };
 
-const ThreadMetrics = ({
-	unread,
-	mention,
-	all,
-	rid,
-	mid,
-	counter,
-	participants,
-	following,
-	lm,
-	openThread,
-}: ThreadMetricsProps): ReactElement => {
+const ThreadMetrics = ({ unread, mention, all, rid, mid, counter, participants, following, lm }: ThreadMetricsProps): ReactElement => {
 	const { className, ref } = useBlockRendered<HTMLDivElement>();
 	const t = useTranslation();
 
 	const format = useTimeAgo();
 
+	const {
+		actions: { openThread },
+	} = useMessageActions();
+
 	const dispatchToastMessage = useToastMessageDispatch();
 	const toggleFollowingThreadMutation = useToggleFollowingThreadMutation({
 		onError: (error) => {
@@ -56,7 +49,7 @@ const ThreadMetrics = ({
 		<MessageBlock className={followStyle}>
 			<div className={className} ref={ref} />
 			<MessageMetrics>
-				<MessageMetricsReply data-rid={rid} data-mid={mid} onClick={openThread}>
+				<MessageMetricsReply data-rid={rid} data-mid={mid} onClick={openThread(mid)}>
 					{t('Reply')}
 				</MessageMetricsReply>
 				<MessageMetricsItem title={t('Replies')}>

apps/meteor/client/components/message/variants/room/RoomMessageContent.tsx

@@ -31,10 +31,7 @@ type RoomMessageContentProps = {
 
 const RoomMessageContent = ({ message, unread, all, mention }: RoomMessageContentProps): ReactElement => {
 	const uid = useUserId();
-	const {
-		broadcast,
-		actions: { openRoom, openThread, replyBroadcast },
-	} = useMessageActions();
+	const { broadcast } = useMessageActions();
 
 	const t = useTranslation();
 
@@ -85,7 +82,6 @@ const RoomMessageContent = ({ message, unread, all, mention }: RoomMessageConten
 
 			{isThreadMainMessage(message) && (
 				<ThreadMetrics
-					openThread={openThread(message._id)}
 					counter={message.tcount}
 					following={Boolean(mineUid && message?.replies?.indexOf(mineUid) > -1)}
 					mid={message._id}
@@ -98,20 +94,12 @@ const RoomMessageContent = ({ message, unread, all, mention }: RoomMessageConten
 				/>
 			)}
 
-			{isDiscussionMessage(message) && (
-				<DiscussionMetrics
-					count={message.dcount}
-					drid={message.drid}
-					lm={message.dlm}
-					rid={message.rid}
-					openDiscussion={openRoom(message.drid)}
-				/>
-			)}
+			{isDiscussionMessage(message) && <DiscussionMetrics count={message.dcount} drid={message.drid} lm={message.dlm} rid={message.rid} />}
 
 			{message.location && <Location location={message.location} />}
 
 			{broadcast && !!user.username && message.u._id !== uid && (
-				<BroadcastMetrics replyBroadcast={(): void => replyBroadcast(message)} mid={message._id} username={user.username} />
+				<BroadcastMetrics mid={message._id} username={user.username} message={message} />
 			)}
 
 			{shouldShowReadReceipt && <ReadReceiptIndicator unread={message.unread} />}

apps/meteor/client/components/message/variants/thread/ThreadMessageContent.tsx

@@ -26,10 +26,7 @@ type ThreadMessageContentProps = {
 
 const ThreadMessageContent = ({ message }: ThreadMessageContentProps): ReactElement => {
 	const uid = useUserId();
-	const {
-		broadcast,
-		actions: { replyBroadcast },
-	} = useMessageActions();
+	const { broadcast } = useMessageActions();
 
 	const t = useTranslation();
 
@@ -79,7 +76,7 @@ const ThreadMessageContent = ({ message }: ThreadMessageContentProps): ReactElem
 			{message.location && <Location location={message.location} />}
 
 			{broadcast && !!user.username && message.u._id !== uid && (
-				<BroadcastMetrics replyBroadcast={(): void => replyBroadcast(message)} mid={message._id} username={user.username} />
+				<BroadcastMetrics mid={message._id} username={user.username} message={message} />
 			)}
 
 			{shouldShowReadReceipt && <ReadReceiptIndicator unread={message.unread} />}

apps/meteor/client/views/room/components/BlazeTemplate.tsx

@@ -1,37 +1,59 @@
 import { Box } from '@rocket.chat/fuselage';
 import { Blaze } from 'meteor/blaze';
+import { ReactiveVar } from 'meteor/reactive-var';
 import { Template } from 'meteor/templating';
 import type { ComponentProps, FC } from 'react';
 import React, { memo, useLayoutEffect, useRef } from 'react';
 
+import { useBlazePortals } from '../../../lib/portals/blazePortals';
+import { useRoom } from '../contexts/RoomContext';
+import { useRoomMessageContext } from './body/useRoomMessageContext';
+
 const BlazeTemplate: FC<
 	Omit<ComponentProps<typeof Box>, 'children'> & {
 		name: string;
 	} & Record<string, unknown>
 > = ({ name, flexShrink, overflow, onClick, w, ...props }) => {
-	// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-	const ref = useRef(null!);
+	const [portals, portalsSubscription] = useBlazePortals();
+	const roomMessageContext = useRoomMessageContext(useRoom());
+
+	const reactiveDataContextRef = useRef(new ReactiveVar(props));
+
+	useLayoutEffect(() => {
+		reactiveDataContextRef.current.set({ ...roomMessageContext, ...props });
+	});
+
+	const ref = useRef<HTMLDivElement>();
+
 	useLayoutEffect(() => {
-		if (!ref.current || !Template[name]) {
+		if (!ref.current) {
 			return;
 		}
 
-		const view = Blaze.renderWithData(Template[name], props, ref.current);
+		const view = Blaze.renderWithData(
+			Template[name],
+			() => ({ ...reactiveDataContextRef.current.get(), portalsSubscription: () => portalsSubscription }),
+			ref.current,
+		);
+
 		return (): void => {
-			view && Blaze.remove(view);
+			Blaze.remove(view);
 		};
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [name, JSON.stringify(props)]);
+	}, [name, portalsSubscription]);
+
 	return (
-		<Box
-			rcx-blaze-template
-			display='flex'
-			onClick={onClick}
-			flexDirection='column'
-			flexGrow={1}
-			ref={ref}
-			{...{ w, flexShrink, overflow }}
-		/>
+		<>
+			<Box
+				rcx-blaze-template
+				display='flex'
+				flexDirection='column'
+				flexGrow={1}
+				ref={ref}
+				onClick={onClick}
+				{...{ w, flexShrink, overflow }}
+			/>
+			{portals}
+		</>
 	);
 };
 

apps/meteor/client/views/room/components/VerticalBarOldActions.tsx

@@ -8,6 +8,7 @@ import React from 'react';
 import VerticalBar from '../../../components/VerticalBar';
 import type { ToolboxContextValue } from '../contexts/ToolboxContext';
 import { useTabBarClose } from '../contexts/ToolboxContext';
+import MessageProvider from '../providers/MessageProvider';
 import BlazeTemplate from './BlazeTemplate';
 
 type VerticalBarOldActionsProps = {
@@ -31,7 +32,9 @@ const VerticalBarOldActions = ({ name, rid, icon, tabBar, title, ...props }: Ver
 				{close && <VerticalBar.Close onClick={close} />}
 			</VerticalBar.Header>
 			<VerticalBar.Content>
-				<BlazeTemplate flexShrink={1} overflow='hidden' name={name} tabBar={tabBar} rid={rid} {...props} />
+				<MessageProvider>
+					<BlazeTemplate flexShrink={1} overflow='hidden' name={name} tabBar={tabBar} rid={rid} {...props} />
+				</MessageProvider>
 			</VerticalBar.Content>
 		</>
 	);