Merge branch 'develop' into e2e-disable-messageActions

.changeset/happy-cameras-mix.md

@@ -0,0 +1,5 @@
+---
+'@rocket.chat/meteor': patch
+---
+
+Fixed an issue where private encrypted room creation was being forced even when E2EE feature was disabled.

.changeset/hungry-waves-lick.md

@@ -0,0 +1,5 @@
+---
+"@rocket.chat/meteor": patch
+---
+
+Fixed file name being incorrectly sent from the client when uploading assets

.changeset/odd-goats-fix.md

@@ -0,0 +1,5 @@
+---
+'@rocket.chat/meteor': patch
+---
+
+Fixes an issue where settings code mirror is not being displayed correctly in full screen mode

.changeset/popular-bulldogs-accept.md

@@ -0,0 +1,6 @@
+---
+'@rocket.chat/i18n': patch
+'@rocket.chat/meteor': patch
+---
+
+Disable slash commands in encrypted rooms and show a disabled warning.

.changeset/proud-coats-repair.md

@@ -0,0 +1,5 @@
+---
+"@rocket.chat/meteor": patch
+---
+
+Fix the sorting by last chat in Contact Center table

apps/meteor/client/components/CustomScrollbars/CustomScrollbars.tsx

@@ -1,8 +1,8 @@
 import { Palette } from '@rocket.chat/fuselage';
 import type { ScrollValues } from 'rc-scrollbars';
 import { Scrollbars } from 'rc-scrollbars';
-import type { MutableRefObject, CSSProperties, ReactNode, ReactElement } from 'react';
-import React, { memo, forwardRef, useCallback } from 'react';
+import type { MutableRefObject, CSSProperties, ReactNode } from 'react';
+import React, { memo, forwardRef, useCallback, useMemo } from 'react';
 
 export type CustomScrollbarsProps = {
 	overflowX?: boolean;
@@ -14,10 +14,18 @@ export type CustomScrollbarsProps = {
 	autoHide?: boolean;
 };
 
+const styleDefault: CSSProperties = {
+	flexGrow: 1,
+	willChange: 'transform',
+	overflowY: 'hidden',
+};
+
 const CustomScrollbars = forwardRef<HTMLElement, CustomScrollbarsProps>(function CustomScrollbars(
-	{ children, onScroll, overflowX, renderView, ...props },
+	{ children, style, onScroll, overflowX, renderView, ...props },
 	ref,
 ) {
+	const scrollbarsStyle = useMemo(() => ({ ...style, ...styleDefault }), [style]);
+
 	const refSetter = useCallback(
 		(scrollbarRef) => {
 			if (ref && scrollbarRef) {
@@ -38,12 +46,11 @@ const CustomScrollbars = forwardRef<HTMLElement, CustomScrollbarsProps>(function
 			autoHide
 			autoHideTimeout={2000}
 			autoHideDuration={500}
+			style={scrollbarsStyle}
 			onScrollFrame={onScroll}
 			renderView={renderView}
-			renderTrackHorizontal={
-				overflowX ? undefined : (props): ReactElement => <div {...props} className='track-horizontal' style={{ display: 'none' }} />
-			}
-			renderThumbVertical={({ style, ...props }): JSX.Element => (
+			renderTrackHorizontal={overflowX ? undefined : (props) => <div {...props} className='track-horizontal' style={{ display: 'none' }} />}
+			renderThumbVertical={({ style, ...props }) => (
 				<div {...props} style={{ ...style, backgroundColor: Palette.stroke['stroke-dark'].toString(), borderRadius: '4px' }} />
 			)}
 			children={children}

apps/meteor/client/components/CustomScrollbars/VirtuosoScrollbars.tsx

@@ -1,4 +1,4 @@
-import type { ComponentProps, ReactElement, Ref } from 'react';
+import type { ComponentProps, Ref } from 'react';
 import React, { forwardRef } from 'react';
 
 import CustomScrollbars from './CustomScrollbars';
@@ -8,13 +8,9 @@ type VirtuosoScrollbarsProps = ComponentProps<typeof CustomScrollbars>;
 const VirtuosoScrollbars = forwardRef(function VirtuosoScrollbars(
 	{ style, children, ...props }: VirtuosoScrollbarsProps,
 	ref: Ref<HTMLDivElement>,
-): ReactElement {
+) {
 	return (
-		<CustomScrollbars
-			style={{ ...style, flexGrow: 1, overflowY: 'hidden', width: '100%', willChange: 'transform' }}
-			ref={ref}
-			renderView={(viewProps): ReactElement => <div {...viewProps} {...props} />}
-		>
+		<CustomScrollbars style={style} ref={ref} renderView={(viewProps) => <div {...viewProps} {...props} />}>
 			{children}
 		</CustomScrollbars>
 	);

apps/meteor/client/lib/chats/ChatAPI.ts

@@ -140,7 +140,15 @@ export type ChatAPI = {
 
 	readonly flows: {
 		readonly uploadFiles: (files: readonly File[], resetFileInput?: () => void) => Promise<void>;
-		readonly sendMessage: ({ text, tshow }: { text: string; tshow?: boolean; previewUrls?: string[] }) => Promise<boolean>;
+		readonly sendMessage: ({
+			text,
+			tshow,
+		}: {
+			text: string;
+			tshow?: boolean;
+			previewUrls?: string[];
+			isSlashCommandAllowed?: boolean;
+		}) => Promise<boolean>;
 		readonly processSlashCommand: (message: IMessage, userId: string | null) => Promise<boolean>;
 		readonly processTooLongMessage: (message: IMessage) => Promise<boolean>;
 		readonly processMessageEditing: (

apps/meteor/client/lib/chats/flows/sendMessage.ts

@@ -10,7 +10,7 @@ import { processSetReaction } from './processSetReaction';
 import { processSlashCommand } from './processSlashCommand';
 import { processTooLongMessage } from './processTooLongMessage';
 
-const process = async (chat: ChatAPI, message: IMessage, previewUrls?: string[]): Promise<void> => {
+const process = async (chat: ChatAPI, message: IMessage, previewUrls?: string[], isSlashCommandAllowed?: boolean): Promise<void> => {
 	KonchatNotification.removeRoomNotification(message.rid);
 
 	if (await processSetReaction(chat, message)) {
@@ -25,7 +25,7 @@ const process = async (chat: ChatAPI, message: IMessage, previewUrls?: string[])
 		return;
 	}
 
-	if (await processSlashCommand(chat, message)) {
+	if (isSlashCommandAllowed && (await processSlashCommand(chat, message))) {
 		return;
 	}
 
@@ -34,7 +34,12 @@ const process = async (chat: ChatAPI, message: IMessage, previewUrls?: string[])
 
 export const sendMessage = async (
 	chat: ChatAPI,
-	{ text, tshow, previewUrls }: { text: string; tshow?: boolean; previewUrls?: string[] },
+	{
+		text,
+		tshow,
+		previewUrls,
+		isSlashCommandAllowed,
+	}: { text: string; tshow?: boolean; previewUrls?: string[]; isSlashCommandAllowed?: boolean },
 ): Promise<boolean> => {
 	if (!(await chat.data.isSubscribedToRoom())) {
 		try {
@@ -63,7 +68,7 @@ export const sendMessage = async (
 		});
 
 		try {
-			await process(chat, message, previewUrls);
+			await process(chat, message, previewUrls, isSlashCommandAllowed);
 			chat.composer?.dismissAllQuotedMessages();
 		} catch (error) {
 			dispatchToastMessage({ type: 'error', message: error });

apps/meteor/client/sidebar/header/CreateChannel/CreateChannelModal.tsx

@@ -66,7 +66,7 @@ const CreateChannelModal = ({ teamId = '', onClose, reload }: CreateChannelModal
 	const namesValidation = useSetting('UTF8_Channel_Names_Validation');
 	const allowSpecialNames = useSetting('UI_Allow_room_names_with_special_chars');
 	const federationEnabled = useSetting<boolean>('Federation_Matrix_enabled') || false;
-	const e2eEnabledForPrivateByDefault = useSetting('E2E_Enabled_Default_PrivateRooms');
+	const e2eEnabledForPrivateByDefault = useSetting('E2E_Enabled_Default_PrivateRooms') && e2eEnabled;
 
 	const canCreateChannel = usePermission('create-c');
 	const canCreatePrivateChannel = usePermission('create-p');

apps/meteor/client/views/admin/settings/inputs/AssetSettingInput.tsx

@@ -35,7 +35,7 @@ function AssetSettingInput({ _id, label, value, asset, required, disabled, fileC
 			dispatchToastMessage({ type: 'info', message: t('Uploading_file') });
 
 			const fileData = new FormData();
-			fileData.append('asset', blob, asset);
+			fileData.append('asset', blob, blob.name);
 			fileData.append('assetName', asset);
 
 			try {

apps/meteor/client/views/admin/settings/inputs/CodeMirror/CodeMirrorBox.tsx

@@ -39,7 +39,9 @@ const CodeMirrorBox = ({ label, children }: { label: ReactNode; children: ReactE
 					{label}
 				</Box>
 			)}
-			{children}
+			<Box display='flex' flexDirection='column' height='100%' role='code' aria-label={typeof label === 'string' ? label : undefined}>
+				{children}
+			</Box>
 			<Box mbs={8}>
 				<ButtonGroup>
 					<Button primary onClick={(): void => toggleFullScreen()}>

apps/meteor/client/views/omnichannel/directory/contacts/ContactTable.tsx

@@ -26,7 +26,7 @@ import { useCurrentContacts } from './hooks/useCurrentContacts';
 
 function ContactTable(): ReactElement {
 	const { current, itemsPerPage, setItemsPerPage, setCurrent, ...paginationProps } = usePagination();
-	const { sortBy, sortDirection, setSort } = useSort<'username' | 'phone' | 'name' | 'visitorEmails.address' | 'lastchat'>('username');
+	const { sortBy, sortDirection, setSort } = useSort<'username' | 'phone' | 'name' | 'visitorEmails.address' | 'lastChat.ts'>('username');
 	const isCallReady = useIsCallReady();
 
 	const [term, setTerm] = useDebouncedState('', 500);
@@ -90,7 +90,13 @@ function ContactTable(): ReactElement {
 			>
 				{t('Email')}
 			</GenericTableHeaderCell>
-			<GenericTableHeaderCell key='lastchat' direction={sortDirection} active={sortBy === 'lastchat'} onClick={setSort} sort='lastchat'>
+			<GenericTableHeaderCell
+				key='lastchat'
+				direction={sortDirection}
+				active={sortBy === 'lastChat.ts'}
+				onClick={setSort}
+				sort='lastChat.ts'
+			>
 				{t('Last_Chat')}
 			</GenericTableHeaderCell>
 			<GenericTableHeaderCell key='call' width={44} />

apps/meteor/client/views/room/composer/ComposerBoxPopup.tsx

@@ -9,6 +9,7 @@ export type ComposerBoxPopupProps<
 	T extends {
 		_id: string;
 		sort?: number;
+		disabled?: boolean;
 	},
 > = {
 	title?: string;
@@ -22,6 +23,7 @@ function ComposerBoxPopup<
 	T extends {
 		_id: string;
 		sort?: number;
+		disabled?: boolean;
 	},
 >({
 	title,
@@ -37,7 +39,9 @@ function ComposerBoxPopup<
 
 	const variant = popupSizes && popupSizes.inlineSize < 480 ? 'small' : 'large';
 
-	const getOptionTitle = <T extends { _id: string; sort?: number; outside?: boolean; suggestion?: boolean }>(item: T) => {
+	const getOptionTitle = <T extends { _id: string; sort?: number; outside?: boolean; suggestion?: boolean; disabled?: boolean }>(
+		item: T,
+	) => {
 		if (variant !== 'small') {
 			return undefined;
 		}
@@ -49,6 +53,10 @@ function ComposerBoxPopup<
 		if (item.suggestion) {
 			return t('Suggestion_from_recent_messages');
 		}
+
+		if (item.disabled) {
+			return t('Unavailable_in_encrypted_channels');
+		}
 	};
 
 	const itemsFlat = useMemo(
@@ -96,6 +104,7 @@ function ComposerBoxPopup<
 								id={`popup-item-${item._id}`}
 								tabIndex={item === focused ? 0 : -1}
 								aria-selected={item === focused}
+								disabled={item.disabled}
 							>
 								{renderItem({ item: { ...item, variant } })}
 							</Option>

apps/meteor/client/views/room/composer/ComposerBoxPopupSlashCommand.tsx

@@ -1,20 +1,24 @@
 import { OptionColumn, OptionContent, OptionDescription, OptionInput } from '@rocket.chat/fuselage';
+import { useTranslation } from '@rocket.chat/ui-contexts';
 import React from 'react';
 
 export type ComposerBoxPopupSlashCommandProps = {
 	_id: string;
 	description?: string;
 	params?: string;
+	disabled?: boolean;
 };
 
-function ComposerBoxPopupSlashCommand({ _id, description, params }: ComposerBoxPopupSlashCommandProps) {
+function ComposerBoxPopupSlashCommand({ _id, description, params, disabled }: ComposerBoxPopupSlashCommandProps) {
+	const t = useTranslation();
+
 	return (
 		<>
 			<OptionContent>
 				{_id} <OptionDescription>{params}</OptionDescription>
 			</OptionContent>
 			<OptionColumn>
-				<OptionInput>{description}</OptionInput>
+				<OptionInput>{disabled ? t('Unavailable_in_encrypted_channels') : description}</OptionInput>
 			</OptionColumn>
 		</>
 	);

apps/meteor/client/views/room/composer/ComposerMessage.tsx

@@ -41,13 +41,24 @@ const ComposerMessage = ({ tmid, readOnly, onSend, ...props }: ComposerMessagePr
 				}
 			},
 
-			onSend: async ({ value: text, tshow, previewUrls }: { value: string; tshow?: boolean; previewUrls?: string[] }): Promise<void> => {
+			onSend: async ({
+				value: text,
+				tshow,
+				previewUrls,
+				isSlashCommandAllowed,
+			}: {
+				value: string;
+				tshow?: boolean;
+				previewUrls?: string[];
+				isSlashCommandAllowed?: boolean;
+			}): Promise<void> => {
 				try {
 					await chat?.action.stop('typing');
 					const newMessageSent = await chat?.flows.sendMessage({
 						text,
 						tshow,
 						previewUrls,
+						isSlashCommandAllowed,
 					});
 					if (newMessageSent) onSend?.();
 				} catch (error) {

apps/meteor/client/views/room/composer/messageBox/MessageBox.tsx

@@ -12,7 +12,7 @@ import {
 	MessageComposerHint,
 	MessageComposerButton,
 } from '@rocket.chat/ui-composer';
-import { useTranslation, useUserPreference, useLayout } from '@rocket.chat/ui-contexts';
+import { useTranslation, useUserPreference, useLayout, useSetting } from '@rocket.chat/ui-contexts';
 import { useMutation } from '@tanstack/react-query';
 import type {
 	ReactElement,
@@ -92,7 +92,7 @@ const getEmptyArray = () => a;
 type MessageBoxProps = {
 	tmid?: IMessage['_id'];
 	readOnly: boolean;
-	onSend?: (params: { value: string; tshow?: boolean; previewUrls?: string[] }) => Promise<void>;
+	onSend?: (params: { value: string; tshow?: boolean; previewUrls?: string[]; isSlashCommandAllowed?: boolean }) => Promise<void>;
 	onJoin?: () => Promise<void>;
 	onResize?: () => void;
 	onTyping?: () => void;
@@ -123,6 +123,9 @@ const MessageBox = ({
 	const chat = useChat();
 	const room = useRoom();
 	const t = useTranslation();
+	const e2eEnabled = useSetting<boolean>('E2E_Enable');
+	const unencryptedMessagesAllowed = useSetting<boolean>('E2E_Allow_Unencrypted_Messages');
+	const isSlashCommandAllowed = !e2eEnabled || !room.encrypted || unencryptedMessagesAllowed;
 	const composerPlaceholder = useMessageBoxPlaceholder(t('Message'), room);
 
 	const [typing, setTyping] = useReducer(reducer, false);
@@ -176,6 +179,7 @@ const MessageBox = ({
 			value: text,
 			tshow,
 			previewUrls,
+			isSlashCommandAllowed,
 		});
 	});
 

apps/meteor/client/views/room/contexts/ComposerPopupContext.ts

@@ -21,6 +21,7 @@ export type ComposerPopupOption<T extends { _id: string; sort?: number } = { _id
 	getValue: (item: T) => string;
 
 	renderItem?: ({ item }: { item: T }) => ReactElement;
+	disabled?: boolean;
 };
 
 export type ComposerPopupContextValue = ComposerPopupOption[];

apps/meteor/client/views/room/providers/ComposerPopupProvider.tsx

@@ -25,14 +25,17 @@ import type { ComposerPopupContextValue } from '../contexts/ComposerPopupContext
 import { ComposerPopupContext, createMessageBoxPopupConfig } from '../contexts/ComposerPopupContext';
 
 const ComposerPopupProvider = ({ children, room }: { children: ReactNode; room: IRoom }) => {
-	const { _id: rid } = room;
+	const { _id: rid, encrypted: isRoomEncrypted } = room;
 	const userSpotlight = useMethod('spotlight');
 	const suggestionsCount = useSetting<number>('Number_of_users_autocomplete_suggestions');
 	const cannedResponseEnabled = useSetting<boolean>('Canned_Responses_Enable');
 	const [recentEmojis] = useLocalStorage('emoji.recent', []);
 	const isOmnichannel = isOmnichannelRoom(room);
 	const useEmoji = useUserPreference('useEmojis');
 	const t = useTranslation();
+	const e2eEnabled = useSetting<boolean>('E2E_Enable');
+	const unencryptedMessagesAllowed = useSetting<boolean>('E2E_Allow_Unencrypted_Messages');
+	const encrypted = isRoomEncrypted && e2eEnabled && !unencryptedMessagesAllowed;
 
 	const call = useMethod('getSlashCommandPreviews');
 	const value: ComposerPopupContextValue = useMemo(() => {
@@ -278,6 +281,7 @@ const ComposerPopupProvider = ({ children, room }: { children: ReactNode; room:
 				trigger: '/',
 				suffix: ' ',
 				triggerAnywhere: false,
+				disabled: encrypted,
 				renderItem: ({ item }) => <ComposerBoxPopupSlashCommand {...item} />,
 				getItemsFromLocal: async (filter: string) => {
 					return Object.keys(slashCommands.commands)
@@ -288,6 +292,7 @@ const ComposerPopupProvider = ({ children, room }: { children: ReactNode; room:
 								params: item.params && t.has(item.params) ? t(item.params) : item.params ?? '',
 								description: item.description && t.has(item.description) ? t(item.description) : item.description,
 								permission: item.permission,
+								...(encrypted && { disabled: encrypted }),
 							};
 						})
 						.filter((command) => {
@@ -360,7 +365,7 @@ const ComposerPopupProvider = ({ children, room }: { children: ReactNode; room:
 				},
 			}),
 		].filter(Boolean);
-	}, [t, cannedResponseEnabled, isOmnichannel, recentEmojis, suggestionsCount, userSpotlight, rid, call, useEmoji]);
+	}, [t, cannedResponseEnabled, isOmnichannel, recentEmojis, suggestionsCount, userSpotlight, rid, call, useEmoji, encrypted]);
 
 	return <ComposerPopupContext.Provider value={value} children={children} />;
 };