Merge branch 'develop' into fix-ADMIN_vars

apps/meteor/app/api/server/v1/im.ts

@@ -123,18 +123,33 @@ API.v1.addRoute(
 			if (!roomId) {
 				throw new Meteor.Error('error-room-param-not-provided', 'Body param "roomId" is required');
 			}
-			const canAccess = await canAccessRoomIdAsync(roomId, this.userId);
-			if (!canAccess) {
-				return API.v1.unauthorized();
+
+			let subscription;
+
+			const roomExists = !!(await Rooms.findOneById(roomId));
+			if (!roomExists) {
+				// even if the room doesn't exist, we should allow the user to close the subscription anyways
+				subscription = await Subscriptions.findOneByRoomIdAndUserId(roomId, this.userId);
+			} else {
+				const canAccess = await canAccessRoomIdAsync(roomId, this.userId);
+				if (!canAccess) {
+					return API.v1.unauthorized();
+				}
+
+				const { subscription: subs } = await findDirectMessageRoom({ roomId }, this.userId);
+
+				subscription = subs;
 			}
 
-			const { room, subscription } = await findDirectMessageRoom({ roomId }, this.userId);
+			if (!subscription) {
+				return API.v1.failure(`The user is not subscribed to the room`);
+			}
 
-			if (!subscription?.open) {
+			if (!subscription.open) {
 				return API.v1.failure(`The direct message room, is already closed to the sender`);
 			}
 
-			await hideRoomMethod(this.userId, room._id);
+			await hideRoomMethod(this.userId, roomId);
 
 			return API.v1.success();
 		},

apps/meteor/app/discussion/client/createDiscussionMessageAction.ts

@@ -19,7 +19,7 @@ Meteor.startup(() => {
 			id: 'start-discussion',
 			icon: 'discussion',
 			label: 'Discussion_start',
-			context: ['message', 'message-mobile'],
+			context: ['message', 'message-mobile', 'videoconf'],
 			async action(_, props) {
 				const { message = messageArgs(this).msg, room } = props;
 

apps/meteor/app/emoji-emojione/client/emojione-sprites.css

@@ -15,8 +15,8 @@
 	display: inline-block;
 	overflow: hidden;
 
-	width: 22px;
-	height: 22px;
+	width: 1.375rem;
+	height: 1.375rem;
 	margin: 0 0.15em;
 
 	vertical-align: middle;

apps/meteor/app/emoji-emojione/lib/generateEmojiIndex.mjs

@@ -161,8 +161,8 @@ function generateEmojiPicker(data) {
 	display: inline-block;
 	overflow: hidden;
 
-	width: 22px;
-	height: 22px;
+	width: 1.375rem;
+	height: 1.375rem;
 	margin: 0 0.15em;
 
 	vertical-align: middle;

apps/meteor/app/reactions/client/init.ts

@@ -10,7 +10,7 @@ Meteor.startup(() => {
 		id: 'reaction-message',
 		icon: 'add-reaction',
 		label: 'Add_Reaction',
-		context: ['message', 'message-mobile', 'threads', 'federated'],
+		context: ['message', 'message-mobile', 'threads', 'federated', 'videoconf', 'videoconf-threads'],
 		action(event, props) {
 			const { message = messageArgs(this).msg, chat } = props;
 			event.stopPropagation();

apps/meteor/app/theme/client/imports/components/emoji.css

@@ -4,8 +4,8 @@
 	display: inline-block;
 	overflow: hidden;
 
-	width: 22px;
-	height: 22px;
+	width: 1.375rem;
+	height: 1.375rem;
 	margin: 0 0.15em;
 
 	vertical-align: middle;

apps/meteor/app/theme/client/imports/general/variables.css

@@ -205,9 +205,9 @@
 	/*
 	* Sidebar
 	*/
-	--sidebar-width: 280px;
-	--sidebar-md-width: 320px;
-	--sidebar-lg-width: 336px;
+	--sidebar-width: 17.5rem;
+	--sidebar-md-width: 20rem;
+	--sidebar-lg-width: 21rem;
 	--sidebar-small-width: 90%;
 	--sidebar-background-hover: var(--rc-color-primary-dark);
 	--sidebar-background-light: var(--rc-color-primary-lightest);

apps/meteor/app/threads/client/messageAction/follow.ts

@@ -18,7 +18,7 @@ Meteor.startup(() => {
 			id: 'follow-message',
 			icon: 'bell',
 			label: 'Follow_message',
-			context: ['message', 'message-mobile', 'threads', 'federated'],
+			context: ['message', 'message-mobile', 'threads', 'federated', 'videoconf', 'videoconf-threads'],
 			async action(_, { message }) {
 				if (!message) {
 					return;

apps/meteor/app/threads/client/messageAction/replyInThread.ts

@@ -16,7 +16,7 @@ Meteor.startup(() => {
 			id: 'reply-in-thread',
 			icon: 'thread',
 			label: 'Reply_in_thread',
-			context: ['message', 'message-mobile'],
+			context: ['message', 'message-mobile', 'videoconf'],
 			action(e, props) {
 				const { message = messageArgs(this).msg } = props;
 				e.stopPropagation();

apps/meteor/app/threads/client/messageAction/unfollow.ts

@@ -17,7 +17,7 @@ Meteor.startup(() => {
 			id: 'unfollow-message',
 			icon: 'bell-off',
 			label: 'Unfollow_message',
-			context: ['message', 'message-mobile', 'threads', 'federated'],
+			context: ['message', 'message-mobile', 'threads', 'federated', 'videoconf', 'videoconf-threads'],
 			async action(_, { message }) {
 				if (!message) {
 					return;

apps/meteor/app/ui-message/client/popup/ComposerBoxPopup.tsx

@@ -77,13 +77,13 @@ const ComposerBoxPopup = <
 
 	return (
 		<Box className='message-popup-position' position='relative'>
-			<Tile ref={composerBoxPopupRef} className='message-popup' padding={0} role='menu' mbe='x8' overflow='hidden' aria-labelledby={id}>
+			<Tile ref={composerBoxPopupRef} className='message-popup' padding={0} role='menu' mbe={8} overflow='hidden' aria-labelledby={id}>
 				{title && (
-					<Box bg='tint' pi='x16' pb='x8' id={id}>
+					<Box bg='tint' pi={16} pb={8} id={id}>
 						{title}
 					</Box>
 				)}
-				<Box pb='x8' maxHeight='x320'>
+				<Box pb={8} maxHeight='x320'>
 					{!isLoading && itemsFlat.length === 0 && <Option>{t('No_results_found')}</Option>}
 					{isLoading && <OptionSkeleton />}
 					{itemsFlat.map((item, index) => {

apps/meteor/app/ui-message/client/popup/components/composerBoxPopupPreview/ComposerBoxPopupPreview.tsx

@@ -92,12 +92,12 @@ const ComposerBoxPopupPreview = forwardRef<
 
 	return (
 		<Box className='message-popup-position' position='relative'>
-			<Tile className='message-popup' display='flex' padding='x8' role='menu' mbe='x8' aria-labelledby={id}>
+			<Tile className='message-popup' display='flex' padding={8} role='menu' mbe={8} aria-labelledby={id}>
 				<Box role='listbox' display='flex' overflow='auto' fontSize={0} width={0} flexGrow={1} aria-busy={isLoading}>
 					{isLoading &&
 						Array(5)
 							.fill(5)
-							.map((_, index) => <Skeleton variant='rect' h='100px' w='120px' m='x2' key={index} />)}
+							.map((_, index) => <Skeleton variant='rect' h='100px' w='120px' m={2} key={index} />)}
 
 					{!isLoading &&
 						itemsFlat.map((item) => (
@@ -111,7 +111,7 @@ const ComposerBoxPopupPreview = forwardRef<
 								borderColor={item === focused ? 'highlight' : 'transparent'}
 								tabIndex={item === focused ? 0 : -1}
 								aria-selected={item === focused}
-								m='x2'
+								m={2}
 								borderWidth='default'
 								borderRadius='x4'
 							>

apps/meteor/app/ui-utils/client/lib/MessageAction.ts

@@ -20,7 +20,8 @@ export type MessageActionContext =
 	| 'mentions'
 	| 'federated'
 	| 'videoconf'
-	| 'search';
+	| 'search'
+	| 'videoconf-threads';
 
 type MessageActionConditionProps = {
 	message: IMessage;

apps/meteor/app/ui-utils/client/lib/messageActionDefault.ts

@@ -29,7 +29,7 @@ Meteor.startup(async () => {
 		id: 'reply-directly',
 		icon: 'reply-directly',
 		label: 'Reply_in_direct_message',
-		context: ['message', 'message-mobile', 'threads', 'federated'],
+		context: ['message', 'message-mobile', 'threads', 'federated', 'videoconf', 'videoconf-threads'],
 		role: 'link',
 		action(_, props) {
 			const { message = messageArgs(this).msg } = props;

apps/meteor/app/ui/client/lib/ChatMessages.ts

@@ -1,4 +1,5 @@
 import type { IMessage, IRoom, IUser } from '@rocket.chat/core-typings';
+import { isVideoConfMessage } from '@rocket.chat/core-typings';
 import type { UIEvent } from 'react';
 
 import type { ChatAPI, ComposerAPI, DataAPI, UploadsAPI } from '../../../../client/lib/chats/ChatAPI';
@@ -60,7 +61,12 @@ export class ChatMessages implements ChatAPI {
 			}
 
 			if (!this.currentEditing) {
-				const lastMessage = await this.data.findLastOwnMessage();
+				let lastMessage = await this.data.findLastOwnMessage();
+
+				// Videoconf messages should not be edited
+				if (lastMessage && isVideoConfMessage(lastMessage)) {
+					lastMessage = await this.data.findPreviousOwnMessage(lastMessage);
+				}
 
 				if (lastMessage) {
 					await this.data.saveDraft(undefined, this.composer.text);
@@ -71,7 +77,12 @@ export class ChatMessages implements ChatAPI {
 			}
 
 			const currentMessage = await this.data.findMessageByID(this.currentEditing.mid);
-			const previousMessage = currentMessage ? await this.data.findPreviousOwnMessage(currentMessage) : undefined;
+			let previousMessage = currentMessage ? await this.data.findPreviousOwnMessage(currentMessage) : undefined;
+
+			// Videoconf messages should not be edited
+			if (previousMessage && isVideoConfMessage(previousMessage)) {
+				previousMessage = await this.data.findPreviousOwnMessage(previousMessage);
+			}
 
 			if (previousMessage) {
 				await this.messageEditing.editMessage(previousMessage);
@@ -86,7 +97,12 @@ export class ChatMessages implements ChatAPI {
 			}
 
 			const currentMessage = await this.data.findMessageByID(this.currentEditing.mid);
-			const nextMessage = currentMessage ? await this.data.findNextOwnMessage(currentMessage) : undefined;
+			let nextMessage = currentMessage ? await this.data.findNextOwnMessage(currentMessage) : undefined;
+
+			// Videoconf messages should not be edited
+			if (nextMessage && isVideoConfMessage(nextMessage)) {
+				nextMessage = await this.data.findNextOwnMessage(nextMessage);
+			}
 
 			if (nextMessage) {
 				await this.messageEditing.editMessage(nextMessage, { cursorAtStart: true });

apps/meteor/client/components/BurgerMenu/BurgerBadge.stories.tsx

@@ -13,7 +13,7 @@ export default {
 	},
 	decorators: [
 		(fn): ReactElement => (
-			<Box size={24} backgroundColor='neutral' position='relative'>
+			<Box size='x24' backgroundColor='neutral' position='relative'>
 				{fn()}
 			</Box>
 		),

apps/meteor/client/components/BurgerMenu/BurgerMenuButton.tsx

@@ -23,7 +23,7 @@ const BurgerMenuButton = ({ open, badge, onClick }: BurgerMenuButtonProps): Reac
 			aria-label={open ? t('Close_menu') : t('Open_menu')}
 			type='button'
 			position='relative'
-			marginInlineEnd='x8'
+			marginInlineEnd={8}
 			className={css`
 				cursor: pointer;
 			`}

apps/meteor/client/components/BurgerMenu/Wrapper.tsx

@@ -9,8 +9,8 @@ const Wrapper = ({ children }: { children: ReactNode }): ReactElement => (
 		flexDirection='column'
 		alignItems='center'
 		justifyContent='space-between'
-		paddingBlock='x4'
-		paddingInline='x2'
+		paddingBlock={4}
+		paddingInline={2}
 		verticalAlign='middle'
 		children={children}
 		height='x24'

apps/meteor/client/components/ConfirmOwnerChangeModal.tsx

@@ -63,12 +63,12 @@ const ConfirmOwnerChangeModal: FC<ConfirmOwnerChangeModalProps> = ({
 			{contentTitle}
 
 			{changeOwnerRooms && (
-				<Box marginBlock='x16'>
+				<Box marginBlock={16}>
 					<RawText>{changeOwnerRooms}</RawText>
 				</Box>
 			)}
 			{removedRooms && (
-				<Box marginBlock='x16'>
+				<Box marginBlock={16}>
 					<RawText>{removedRooms}</RawText>
 				</Box>
 			)}

apps/meteor/client/components/Contextualbar/ContextualbarScrollableContent.tsx

@@ -7,8 +7,8 @@ import Page from '../Page';
 const ContextualbarScrollableContent = forwardRef<HTMLElement, ComponentProps<typeof Page.ScrollableContent>>(
 	function ContextualbarScrollableContent({ children, ...props }, ref) {
 		return (
-			<Page.ScrollableContent p='x24' {...props} ref={ref}>
-				<Margins blockEnd='x16'>{children}</Margins>
+			<Page.ScrollableContent p={24} {...props} ref={ref}>
+				<Margins blockEnd={16}>{children}</Margins>
 			</Page.ScrollableContent>
 		);
 	},

apps/meteor/client/components/FilterByText.tsx

@@ -40,8 +40,8 @@ const FilterByText = ({ placeholder, onChange: setFilter, inputRef, children, au
 	}, []);
 
 	return (
-		<Box mb='x16' mi='neg-x4' is='form' onSubmit={handleFormSubmit} display='flex' flexWrap='wrap' alignItems='center'>
-			<Box mi='x4' display='flex' flexGrow={1}>
+		<Box mb={16} mi='neg-x4' is='form' onSubmit={handleFormSubmit} display='flex' flexWrap='wrap' alignItems='center'>
+			<Box mi={4} display='flex' flexGrow={1}>
 				<TextInput
 					placeholder={placeholder ?? t('Search')}
 					ref={inputRef}
@@ -54,7 +54,7 @@ const FilterByText = ({ placeholder, onChange: setFilter, inputRef, children, au
 				/>
 			</Box>
 			{isFilterByTextPropsWithButton(props) ? (
-				<Button onClick={props.onButtonClick} mis='x8' primary>
+				<Button onClick={props.onButtonClick} mis={8} primary>
 					{props.textButton}
 				</Button>
 			) : (

apps/meteor/client/components/GenericModal/withDoNotAskAgain.tsx

@@ -49,7 +49,7 @@ function withDoNotAskAgain<T extends RequiredModalProps>(
 				{...props}
 				dontAskAgain={
 					<Box display='flex' flexDirection='row'>
-						<CheckBox checked={state} onChange={onChange} mie='x4' name='dont_ask_again' />
+						<CheckBox checked={state} onChange={onChange} mie={4} name='dont_ask_again' />
 						<label htmlFor='dont_ask_again'>{t('Dont_ask_me_again')}</label>
 					</Box>
 				}

apps/meteor/client/components/GenericResourceUsage/GenericResourceUsage.tsx

@@ -21,7 +21,7 @@ const GenericResourceUsage = ({
 	variant?: 'warning' | 'danger' | 'success';
 }) => {
 	return (
-		<Box w='x180' h='x40' mi='x8' fontScale='c1' display='flex' flexDirection='column' justifyContent='space-around' {...props}>
+		<Box w='x180' h='x40' mi={8} fontScale='c1' display='flex' flexDirection='column' justifyContent='space-around' {...props}>
 			<Box display='flex' justifyContent='space-between'>
 				<Box color='default'>{title}</Box>
 				{subTitle && <Box color='hint'>{subTitle}</Box>}

apps/meteor/client/components/GenericResourceUsage/GenericResourceUsageSkeleton.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 const GenericResourceUsageSkeleton = ({ title, ...props }: { title?: string }) => {
 	return (
-		<Box w='x180' h='x40' mi='x8' fontScale='c1' display='flex' flexDirection='column' justifyContent='space-around' {...props}>
+		<Box w='x180' h='x40' mi={8} fontScale='c1' display='flex' flexDirection='column' justifyContent='space-around' {...props}>
 			{title ? <Box color='default'>{title}</Box> : <Skeleton w='full' />}
 			<Skeleton w='full' />
 		</Box>

apps/meteor/client/components/GenericTable/GenericTable.stories.tsx

@@ -40,7 +40,7 @@ const results = Array.from({ length: 10 }, (_, i) => ({
 
 const filter = (
 	<>
-		<Box mb='x16' is='form' display='flex' flexDirection='column'>
+		<Box mb={16} is='form' display='flex' flexDirection='column'>
 			<TextInput flexShrink={0} placeholder='Search...' addon={<Icon name='magnifier' size='x20' />} />
 		</Box>
 	</>

apps/meteor/client/components/GenericTable/GenericTable.tsx

@@ -11,7 +11,7 @@ type GenericTableProps = {
 
 export const GenericTable = forwardRef<HTMLElement, GenericTableProps>(function GenericTable({ fixed = true, children, ...props }, ref) {
 	return (
-		<Box mi='neg-x24' pi='x24' flexShrink={1} flexGrow={1} ref={ref} overflow='hidden'>
+		<Box mi='neg-x24' pi={24} flexShrink={1} flexGrow={1} ref={ref} overflow='hidden'>
 			<ScrollableContentWrapper overflowX>
 				{/* TODO: Fix fuselage */}
 				<Table fixed={fixed} sticky {...(props as any)}>

apps/meteor/client/components/GenericTable/GenericTableLoadingRow.tsx

@@ -7,7 +7,7 @@ export const GenericTableLoadingRow = ({ cols }: { cols: number }): ReactElement
 		<TableCell>
 			<Box display='flex'>
 				<Skeleton variant='rect' height={40} width={40} />
-				<Box mi='x8' flexGrow={1}>
+				<Box mi={8} flexGrow={1}>
 					<Skeleton width='100%' />
 					<Skeleton width='100%' />
 				</Box>

apps/meteor/client/components/GenericUpsellModal/GenericUpsellModal.tsx

@@ -55,7 +55,7 @@ const GenericUpsellModal = ({
 					</Box>
 				)}
 				{description && (
-					<Box style={{ whiteSpace: 'break-spaces' }} fontScale='p2' mbs='x16'>
+					<Box style={{ whiteSpace: 'break-spaces' }} fontScale='p2' mbs={16}>
 						{description}
 					</Box>
 				)}

apps/meteor/client/components/InfoPanel/InfoPanelAction.tsx

@@ -13,7 +13,7 @@ const InfoPanelAction = ({ label, icon, ...props }: InfoPanelActionProps): React
 		title={typeof label === 'string' ? label : undefined}
 		aria-label={typeof label === 'string' ? label : undefined}
 		{...props}
-		mi='x4'
+		mi={4}
 		icon={icon}
 	>
 		{label}

apps/meteor/client/components/InfoPanel/InfoPanelField.tsx

@@ -2,6 +2,6 @@ import { Box } from '@rocket.chat/fuselage';
 import type { FC } from 'react';
 import React from 'react';
 
-const InfoPanelField: FC = ({ children }) => <Box mb='x16'>{children}</Box>;
+const InfoPanelField: FC = ({ children }) => <Box mb={16}>{children}</Box>;
 
 export default InfoPanelField;