fix: Users without preview permission subscribing to public channel s…

…tream (#34922)

Co-authored-by: gabriellsh <[email protected]>

.changeset/metal-pets-promise.md

@@ -0,0 +1,6 @@
+---
+"@rocket.chat/meteor": minor
+"@rocket.chat/i18n": minor
+---
+
+Fixes an issue where users without the "Preview public channel" permission would receive new messages sent to the channel

apps/meteor/client/hooks/useJoinRoom.ts

@@ -0,0 +1,27 @@
+import type { IRoom } from '@rocket.chat/core-typings';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { sdk } from '../../app/utils/client/lib/SDKClient';
+
+type UseJoinRoomMutationFunctionProps = {
+	rid: IRoom['_id'];
+	reference: string;
+	type: IRoom['t'];
+};
+
+export const useJoinRoom = () => {
+	const queryClient = useQueryClient();
+
+	return useMutation({
+		mutationFn: async ({ rid, reference, type }: UseJoinRoomMutationFunctionProps) => {
+			await sdk.call('joinRoom', rid);
+
+			return { reference, type };
+		},
+		onSuccess: (data) => {
+			queryClient.invalidateQueries({
+				queryKey: ['rooms', data],
+			});
+		},
+	});
+};

apps/meteor/client/lib/errors/NotSubscribedToRoomError.ts

@@ -0,0 +1,15 @@
+import type { IRoom } from '@rocket.chat/core-typings';
+
+import { RocketChatError } from './RocketChatError';
+
+type NotSubscribedToRoomErrorDetails = { rid: IRoom['_id'] };
+
+export class NotSubscribedToRoomError extends RocketChatError<'not-subscribed-room', NotSubscribedToRoomErrorDetails> {
+	public declare readonly reason: string;
+
+	public declare readonly details: NotSubscribedToRoomErrorDetails;
+
+	constructor(message = 'Not subscribed to this room', details: NotSubscribedToRoomErrorDetails) {
+		super('not-subscribed-room', message, details);
+	}
+}

apps/meteor/client/views/room/NotSubscribedRoom.tsx

@@ -0,0 +1,65 @@
+import type { IRoom } from '@rocket.chat/core-typings';
+import { Box, States, StatesAction, StatesActions, StatesIcon, StatesSubtitle, StatesTitle } from '@rocket.chat/fuselage';
+import { Header, HeaderToolbar } from '@rocket.chat/ui-client';
+import { useLayout } from '@rocket.chat/ui-contexts';
+import type { ReactElement } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+
+import RoomLayout from './layout/RoomLayout';
+import SidebarToggler from '../../components/SidebarToggler';
+import { useJoinRoom } from '../../hooks/useJoinRoom';
+
+type NotSubscribedRoomProps = {
+	rid: IRoom['_id'];
+	reference: string;
+	type: IRoom['t'];
+};
+
+const NotSubscribedRoom = ({ rid, reference, type }: NotSubscribedRoomProps): ReactElement => {
+	const { t } = useTranslation();
+
+	const handleJoinClick = useJoinRoom();
+	// TODO: Handle onJoinClick error
+
+	const { isMobile } = useLayout();
+
+	return (
+		<RoomLayout
+			header={
+				isMobile && (
+					<Header justifyContent='start'>
+						<HeaderToolbar>
+							<SidebarToggler />
+						</HeaderToolbar>
+					</Header>
+				)
+			}
+			body={
+				<Box display='flex' justifyContent='center' height='full'>
+					<States>
+						<StatesIcon name='add-user' />
+						<StatesTitle>{t('Channel_not_joined')}</StatesTitle>
+						<StatesSubtitle>
+							<Box display='block'>
+								<Trans
+									i18nKey='Join_channel_to_view_history'
+									values={{ channel: reference }}
+									components={{ b: <Box is='span' fontWeight={600} /> }}
+								/>
+							</Box>
+						</StatesSubtitle>
+						<Box mbs={16}>
+							<StatesActions>
+								<StatesAction disabled={handleJoinClick.isPending} onClick={() => handleJoinClick.mutate({ rid, reference, type })}>
+									{t('Join_channel')}
+								</StatesAction>
+							</StatesActions>
+						</Box>
+					</States>
+				</Box>
+			}
+		/>
+	);
+};
+
+export default NotSubscribedRoom;

apps/meteor/client/views/room/RoomOpener.tsx

@@ -5,13 +5,15 @@ import type { ReactElement } from 'react';
 import { lazy, Suspense } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import NotSubscribedRoom from './NotSubscribedRoom';
 import RoomSkeleton from './RoomSkeleton';
 import RoomSidepanel from './Sidepanel/RoomSidepanel';
 import { useOpenRoom } from './hooks/useOpenRoom';
 import { FeaturePreviewSidePanelNavigation } from '../../components/FeaturePreviewSidePanelNavigation';
 import { Header } from '../../components/Header';
 import { getErrorMessage } from '../../lib/errorHandling';
 import { NotAuthorizedError } from '../../lib/errors/NotAuthorizedError';
+import { NotSubscribedToRoomError } from '../../lib/errors/NotSubscribedToRoomError';
 import { OldUrlRoomError } from '../../lib/errors/OldUrlRoomError';
 import { RoomNotFoundError } from '../../lib/errors/RoomNotFoundError';
 
@@ -60,6 +62,10 @@ const RoomOpener = ({ type, reference }: RoomOpenerProps): ReactElement => {
 							return <RoomNotFound />;
 						}
 
+						if (error instanceof NotSubscribedToRoomError) {
+							return <NotSubscribedRoom rid={error.details.rid} reference={reference} type={type} />;
+						}
+
 						if (error instanceof NotAuthorizedError) {
 							return <NotAuthorizedPage />;
 						}

apps/meteor/client/views/room/RoomOpenerEmbedded.tsx

@@ -7,6 +7,7 @@ import type { ReactElement } from 'react';
 import { lazy, Suspense, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import NotSubscribedRoom from './NotSubscribedRoom';
 import RoomSkeleton from './RoomSkeleton';
 import RoomSidepanel from './Sidepanel/RoomSidepanel';
 import { useOpenRoom } from './hooks/useOpenRoom';
@@ -16,6 +17,7 @@ import { FeaturePreviewSidePanelNavigation } from '../../components/FeaturePrevi
 import { Header } from '../../components/Header';
 import { getErrorMessage } from '../../lib/errorHandling';
 import { NotAuthorizedError } from '../../lib/errors/NotAuthorizedError';
+import { NotSubscribedToRoomError } from '../../lib/errors/NotSubscribedToRoomError';
 import { OldUrlRoomError } from '../../lib/errors/OldUrlRoomError';
 import { RoomNotFoundError } from '../../lib/errors/RoomNotFoundError';
 
@@ -106,6 +108,10 @@ const RoomOpenerEmbedded = ({ type, reference }: RoomOpenerProps): ReactElement
 							return <RoomNotFound />;
 						}
 
+						if (error instanceof NotSubscribedToRoomError) {
+							return <NotSubscribedRoom rid={error.details.rid} reference={reference} type={type} />;
+						}
+
 						if (error instanceof NotAuthorizedError) {
 							return <NotAuthorizedPage />;
 						}

apps/meteor/client/views/room/body/RoomBody.tsx

@@ -269,11 +269,6 @@ const RoomBody = (): ReactElement => {
 									onClick={handleJumpToRecentButtonClick}
 									text={t('Jump_to_recent_messages')}
 								/>
-								{!canPreview ? (
-									<div className='content room-not-found error-color'>
-										<div>{t('You_must_join_to_view_messages_in_this_channel')}</div>
-									</div>
-								) : null}
 								<div
 									className={[
 										'wrapper',

apps/meteor/client/views/room/contextualBar/Info/hooks/actions/useRoomLeave.tsx

@@ -23,7 +23,10 @@ export const useRoomLeave = (room: IRoom, joined = true) => {
 			try {
 				await leaveRoom(room._id);
 				router.navigate('/home');
-				LegacyRoomManager.close(room._id);
+
+				if (room.name) {
+					LegacyRoomManager.close(`${room.t}${room.name}`);
+				}
 			} catch (error) {
 				dispatchToastMessage({ type: 'error', message: error });
 			}

apps/meteor/client/views/room/hooks/useOpenRoom.ts

@@ -1,5 +1,5 @@
 import type { IRoom, RoomType } from '@rocket.chat/core-typings';
-import { useMethod, useRoute, useSetting, useUser } from '@rocket.chat/ui-contexts';
+import { useMethod, usePermission, useRoute, useSetting, useUser } from '@rocket.chat/ui-contexts';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { useEffect, useRef } from 'react';
 
@@ -8,11 +8,13 @@ import { Rooms } from '../../../../app/models/client';
 import { roomFields } from '../../../../lib/publishFields';
 import { omit } from '../../../../lib/utils/omit';
 import { NotAuthorizedError } from '../../../lib/errors/NotAuthorizedError';
+import { NotSubscribedToRoomError } from '../../../lib/errors/NotSubscribedToRoomError';
 import { OldUrlRoomError } from '../../../lib/errors/OldUrlRoomError';
 import { RoomNotFoundError } from '../../../lib/errors/RoomNotFoundError';
 
 export function useOpenRoom({ type, reference }: { type: RoomType; reference: string }) {
 	const user = useUser();
+	const hasPreviewPermission = usePermission('preview-c-room');
 	const allowAnonymousRead = useSetting('Accounts_AllowAnonymousRead', true);
 	const getRoomByTypeAndName = useMethod('getRoomByTypeAndName');
 	const createDirectMessage = useMethod('createDirectMessage');
@@ -88,17 +90,25 @@ export function useOpenRoom({ type, reference }: { type: RoomType; reference: st
 			unsubscribeFromRoomOpenedEvent.current();
 			unsubscribeFromRoomOpenedEvent.current = RoomManager.once('opened', () => fireGlobalEvent('room-opened', omit(room, 'usernames')));
 
+			const sub = Subscriptions.findOne({ rid: room._id });
+
+			// if user doesn't exist at this point, anonymous read is enabled, otherwise an error would have been thrown
+			if (user && !sub && !hasPreviewPermission) {
+				throw new NotSubscribedToRoomError(undefined, { rid: room._id });
+			}
+
 			LegacyRoomManager.open({ typeName: type + reference, rid: room._id });
 
 			if (room._id === RoomManager.opened) {
 				return { rid: room._id };
 			}
 
 			// update user's room subscription
-			const sub = Subscriptions.findOne({ rid: room._id });
+
 			if (!!user?._id && sub && !sub.open) {
 				await openRoom.mutateAsync({ roomId: room._id, userId: user._id });
 			}
+
 			return { rid: room._id };
 		},
 		retry: 0,

packages/i18n/src/locales/en.i18n.json

@@ -2972,6 +2972,7 @@
   "Join_audio_call": "Join audio call",
   "Join_call": "Join call",
   "Join_Chat": "Join Chat",
+  "Join_channel": "Join channel",
   "Join_conference": "Join conference",
   "Join_default_channels": "Join default channels",
   "Join_discussion": "Join discussion",
@@ -6235,6 +6236,9 @@
   "you_are_in_preview_mode_of_incoming_livechat": "You are in preview mode of this chat",
   "You_are_logged_in_as": "You are logged in as",
   "You_are_not_authorized_to_view_this_page": "You are not authorized to view this page.",
+  "Channel_not_joined": "Channel not joined",
+  "Join_channel_to_view_history": "Join <b>{{channel}}</b> to view history.",
+  "You_need_to_join_this_channel": "You need to join this channel to view its history",
   "You_can_change_a_different_avatar_too": "You can override the avatar used to post from this integration.",
   "You_can_close_this_window_now": "You can close this window now.",
   "You_can_do_from_account_preferences": "You can do this later from your account preferences",