Merge branch 'develop' into show-load-more-custom-emoji

apps/meteor/app/2fa/client/overrideMeteorCall.ts

@@ -1,10 +1,10 @@
 import { Meteor } from 'meteor/meteor';
 
 import { t } from '../../utils/client';
-import { process2faReturn } from '../../../client/lib/2fa/process2faReturn';
+import { process2faReturn, process2faAsyncReturn } from '../../../client/lib/2fa/process2faReturn';
 import { isTotpInvalidError } from '../../../client/lib/2fa/utils';
 
-const { call } = Meteor;
+const { call, callAsync } = Meteor;
 
 type Callback = {
 	(error: unknown): void;
@@ -34,8 +34,34 @@ const callWithoutTotp = (methodName: string, args: unknown[], callback: Callback
 		});
 	});
 
+const callAsyncWithTotp =
+	(methodName: string, args: unknown[]) =>
+	async (twoFactorCode: string, twoFactorMethod: string): Promise<unknown> => {
+		try {
+			const result = await callAsync(methodName, ...args, { twoFactorCode, twoFactorMethod });
+
+			return result;
+		} catch (error: unknown) {
+			if (isTotpInvalidError(error)) {
+				throw new Error(twoFactorMethod === 'password' ? t('Invalid_password') : t('Invalid_two_factor_code'));
+			}
+
+			throw error;
+		}
+	};
+
 Meteor.call = function (methodName: string, ...args: unknown[]): unknown {
 	const callback = args.length > 0 && typeof args[args.length - 1] === 'function' ? (args.pop() as Callback) : (): void => undefined;
 
 	return callWithoutTotp(methodName, args, callback)();
 };
+
+Meteor.callAsync = async function _callAsyncWithTotp(methodName: string, ...args: unknown[]): Promise<unknown> {
+	const promise = callAsync(methodName, ...args);
+
+	return process2faAsyncReturn({
+		promise,
+		onCode: callAsyncWithTotp(methodName, args),
+		emailOrUsername: undefined,
+	});
+};

apps/meteor/app/file-upload/server/lib/FileUpload.js

@@ -337,7 +337,7 @@ export const FileUpload = {
 	},
 
 	uploadsOnValidate(file) {
-		if (!/^image\/((x-windows-)?bmp|p?jpeg|png|gif)$/.test(file.type)) {
+		if (!/^image\/((x-windows-)?bmp|p?jpeg|png|gif|webp)$/.test(file.type)) {
 			return;
 		}
 

apps/meteor/app/file-upload/server/methods/sendFileMessage.ts

@@ -8,6 +8,7 @@ import { FileUpload } from '../lib/FileUpload';
 import { canAccessRoom } from '../../../authorization/server/functions/canAccessRoom';
 import { SystemLogger } from '../../../../server/lib/logger/system';
 import { omit } from '../../../../lib/utils/omit';
+import { getFileExtension } from '../../../../lib/utils/getFileExtension';
 
 function validateFileRequiredFields(file: Partial<IUpload>): asserts file is AtLeast<IUpload, '_id' | 'name' | 'type' | 'size'> {
 	const requiredFields = ['_id', 'name', 'type', 'size'];
@@ -106,9 +107,11 @@ export const parseFileIntoMessageAttachments = async (
 		const attachment = {
 			title: file.name,
 			type: 'file',
+			format: getFileExtension(file.name),
 			description: file.description,
 			title_link: fileUrl,
 			title_link_download: true,
+			size: file.size as number,
 		};
 		attachments.push(attachment);
 	}

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

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

apps/meteor/client/components/Page/Page.tsx

@@ -1,20 +1,13 @@
 import { Box } from '@rocket.chat/fuselage';
-import Colors from '@rocket.chat/fuselage-tokens/colors';
 import type { ReactElement, ComponentProps } from 'react';
 import React, { useState } from 'react';
 
 import PageContext from './PageContext';
 
 type PageProps = Omit<ComponentProps<typeof Box>, 'backgroundColor'> & {
-	background?: 'light' | 'tint';
+	background?: 'light' | 'tint' | 'neutral';
 };
 
-const surfaceMap = {
-	light: Colors.white,
-	tint: Colors.n100,
-	neutral: Colors.n400,
-}; // TODO: Remove this export after the migration is complete
-
 const Page = ({ background = 'light', ...props }: PageProps): ReactElement => {
 	const [border, setBorder] = useState(false);
 	return (
@@ -28,8 +21,8 @@ const Page = ({ background = 'light', ...props }: PageProps): ReactElement => {
 				height='full'
 				overflow='hidden'
 				aria-labelledby='PageHeader-title'
+				bg={background}
 				{...props}
-				backgroundColor={`var(--rcx-color-surface-${background}, ${surfaceMap[background]})`}
 			/>
 		</PageContext.Provider>
 	);

apps/meteor/client/components/RoomIcon/OmnichannelRoomIcon/OmnichannelAppSourceRoomIcon.tsx

@@ -7,10 +7,10 @@ import { AsyncStatePhase } from '../../../lib/asyncState/AsyncStatePhase';
 import { useOmnichannelRoomIcon } from './context/OmnichannelRoomIconContext';
 
 export const colors = {
-	busy: 'danger-500',
-	away: 'warning-600',
-	online: 'success-500',
-	offline: 'neutral-600',
+	busy: 'on-danger',
+	away: 'on-warning',
+	online: 'on-success',
+	offline: 'annotation',
 };
 
 const convertBoxSizeToNumber = (boxSize: ComponentProps<typeof Icon>['size']): number => {

apps/meteor/client/components/RoomIcon/OmnichannelRoomIcon/OmnichannelCoreSourceRoomIcon.tsx

@@ -4,10 +4,10 @@ import type { ComponentProps, ReactElement } from 'react';
 import React from 'react';
 
 const colors = {
-	busy: 'danger-500',
-	away: 'warning-600',
-	online: 'success-500',
-	offline: 'neutral-600',
+	busy: 'on-danger',
+	away: 'on-warning',
+	online: 'on-success',
+	offline: 'annotation',
 };
 
 const iconMap = {

apps/meteor/client/components/VerticalBar/VerticalBar.tsx

@@ -9,7 +9,7 @@ const VerticalBar: FC<ComponentProps<typeof Box>> = ({ children, ...props }) =>
 	return (
 		<Box
 			rcx-vertical-bar
-			bg='light'
+			bg='room'
 			display='flex'
 			flexDirection='column'
 			flexShrink={0}

apps/meteor/client/components/VerticalBar/VerticalBarActions.tsx

@@ -2,6 +2,6 @@ import { ButtonGroup } from '@rocket.chat/fuselage';
 import type { ReactElement, ComponentProps } from 'react';
 import React, { memo } from 'react';
 
-const VerticalBarActions = (props: ComponentProps<typeof ButtonGroup>): ReactElement => <ButtonGroup medium {...props} />;
+const VerticalBarActions = (props: ComponentProps<typeof ButtonGroup>): ReactElement => <ButtonGroup {...props} />;
 
 export default memo(VerticalBarActions);

apps/meteor/client/components/avatar/AppAvatar.tsx

@@ -1,22 +1,14 @@
 import { Box } from '@rocket.chat/fuselage';
-import type { ReactElement } from 'react';
+import type { ComponentProps, ReactElement } from 'react';
 import React from 'react';
 
 import BaseAvatar from './BaseAvatar';
 
-// TODO: frontend chapter day - Remove inline Styling
-
 type AppAvatarProps = {
-	/* @deprecated */
-	size: 'x36' | 'x28' | 'x16' | 'x40' | 'x124';
-	/* @deprecated */
-	mie?: 'x80' | 'x20' | 'x16' | 'x8';
-	/* @deprecated */
-	alignSelf?: 'center';
-
 	iconFileContent: string;
 	iconFileData: string;
-};
+	size: ComponentProps<typeof BaseAvatar>['size'];
+} & ComponentProps<typeof Box>;
 
 export default function AppAvatar({ iconFileContent, size, iconFileData, ...props }: AppAvatarProps): ReactElement {
 	return (

apps/meteor/client/components/dataView/Growth.tsx

@@ -15,7 +15,7 @@ const Growth = ({ children, ...props }: GrowthProps): ReactElement | null => {
 	}
 
 	return (
-		<Box is='span' color={children < 0 ? 'danger' : 'success'} {...props}>
+		<Box is='span' color={children < 0 ? 'on-danger' : 'on-success'} {...props}>
 			{children < 0 ? <NegativeGrowthSymbol /> : <PositiveGrowthSymbol />}
 			{String(Math.abs(children))}
 		</Box>

apps/meteor/client/components/message/MessageCollapsible.tsx

@@ -0,0 +1,28 @@
+import { Box } from '@rocket.chat/fuselage';
+import type { ReactElement, ReactNode } from 'react';
+import React from 'react';
+
+import AttachmentDownload from './content/attachments/structure/AttachmentDownload';
+import AttachmentSize from './content/attachments/structure/AttachmentSize';
+import { useCollapse } from './hooks/useCollapse';
+
+type MessageCollapsibleProps = { children?: ReactNode; title?: string; hasDownload?: boolean; link?: string; size?: number };
+
+const MessageCollapsible = ({ children, title, hasDownload, link, size }: MessageCollapsibleProps): ReactElement => {
+	const [collapsed, collapse] = useCollapse(false);
+
+	return (
+		<>
+			<Box display='flex' flexDirection='row' color='hint' fontScale='c1' alignItems='center'>
+				<Box withTruncatedText title={title}>
+					{title}
+				</Box>
+				{size && <AttachmentSize size={size} />} {collapse}
+				{hasDownload && link && <AttachmentDownload title={title} href={link} />}
+			</Box>
+			{!collapsed && children}
+		</>
+	);
+};
+
+export default MessageCollapsible;

apps/meteor/client/components/message/MessageContentBody.tsx

@@ -99,11 +99,9 @@ const MessageContentBody = ({ mentions, channels, md }: MessageContentBodyProps)
 	const messageBodyAdditionalStyles = css`
 		> blockquote {
 			padding-inline: 8px;
+			border: 1px solid ${Palette.stroke['stroke-extra-light']};
 			border-radius: 2px;
-			border-width: 1px;
-			border-style: solid;
 			background-color: ${Palette.surface['surface-tint']};
-			border-color: ${Palette.stroke['stroke-extra-light']};
 			border-inline-start-color: ${Palette.stroke['stroke-medium']};
 
 			&:hover,
@@ -126,6 +124,16 @@ const MessageContentBody = ({ mentions, channels, md }: MessageContentBodyProps)
 			margin-inline-start: 0;
 			padding-inline-start: 0;
 		}
+		a {
+			color: ${Palette.statusColor['status-font-on-info']};
+			&:hover {
+				text-decoration: underline;
+			}
+			&:focus {
+				border: 2px solid ${Palette.stroke['stroke-extra-light-highlight']};
+				border-radius: 2px;
+			}
+		}
 	`;
 
 	const convertAsciiToEmoji = useUserPreference<boolean>('convertAsciiEmoji', true);

apps/meteor/client/components/message/content/attachments/FileAttachment.tsx

@@ -4,7 +4,6 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { AudioAttachment } from './file/AudioAttachment';
-import type { GenericFileAttachmentProps } from './file/GenericFileAttachment';
 import { GenericFileAttachment } from './file/GenericFileAttachment';
 import { ImageAttachment } from './file/ImageAttachment';
 import { VideoAttachment } from './file/VideoAttachment';
@@ -19,9 +18,8 @@ export const FileAttachment: FC<FileAttachmentProps> = (attachment) => {
 	if (isFileVideoAttachment(attachment)) {
 		return <VideoAttachment {...attachment} />;
 	}
-	// if (isFilePDFAttachment(attachment)) { return <PDFAttachment {...attachment} />; }
 
-	return <GenericFileAttachment {...(attachment as GenericFileAttachmentProps)} />;
+	return <GenericFileAttachment {...attachment} />;
 };
 
 export { GenericFileAttachment, ImageAttachment, VideoAttachment };

apps/meteor/client/components/message/content/attachments/default/ActionAttachtment.tsx

@@ -6,7 +6,7 @@ import React from 'react';
 import ActionAttachmentButton from './ActionAttachmentButton';
 
 export const ActionAttachment: FC<MessageAttachmentAction> = ({ actions }) => (
-	<ButtonGroup mb='x4' {...({ small: true } as any)}>
+	<ButtonGroup mb='x4' small>
 		{actions
 			.filter(
 				({ type, msg_in_chat_window: msgInChatWindow, url, image_url: image, text }) =>

apps/meteor/client/components/message/content/attachments/file/AudioAttachment.tsx

@@ -4,47 +4,28 @@ import type { FC } from 'react';
 import React from 'react';
 
 import MarkdownText from '../../../../MarkdownText';
+import MessageCollapsible from '../../../MessageCollapsible';
 import MessageContentBody from '../../../MessageContentBody';
-import { useCollapse } from '../../../hooks/useCollapse';
-import Attachment from '../structure/Attachment';
-import AttachmentContent from '../structure/AttachmentContent';
-import AttachmentDescription from '../structure/AttachmentDescription';
-import AttachmentDownload from '../structure/AttachmentDownload';
-import AttachmentRow from '../structure/AttachmentRow';
-import AttachmentSize from '../structure/AttachmentSize';
-import AttachmentTitle from '../structure/AttachmentTitle';
 
 export const AudioAttachment: FC<AudioAttachmentProps> = ({
 	title,
 	audio_url: url,
 	audio_type: type,
-	collapsed: collapsedDefault = false,
 	audio_size: size,
 	description,
+	descriptionMd,
 	title_link: link,
 	title_link_download: hasDownload,
-	md,
 }) => {
-	const [collapsed, collapse] = useCollapse(collapsedDefault);
 	const getURL = useMediaUrl();
 	return (
-		<Attachment>
-			<AttachmentDescription>
-				{md ? <MessageContentBody md={md} /> : <MarkdownText parseEmoji variant='inline' content={description} />}
-			</AttachmentDescription>
-			<AttachmentRow>
-				<AttachmentTitle>{title}</AttachmentTitle>
-				{size && <AttachmentSize size={size} />}
-				{collapse}
-				{hasDownload && link && <AttachmentDownload title={title} href={getURL(link)} />}
-			</AttachmentRow>
-			{!collapsed && (
-				<AttachmentContent border='none'>
-					<audio controls preload='metadata'>
-						<source src={getURL(url)} type={type} />
-					</audio>
-				</AttachmentContent>
-			)}
-		</Attachment>
+		<>
+			{descriptionMd ? <MessageContentBody md={descriptionMd} /> : <MarkdownText parseEmoji content={description} />}
+			<MessageCollapsible title={title} hasDownload={hasDownload} link={getURL(link || url)} size={size}>
+				<audio controls preload='metadata'>
+					<source src={getURL(url)} type={type} />
+				</audio>
+			</MessageCollapsible>
+		</>
 	);
 };