snapshot of https://github.com/RocketChat/Rocket.Chat.git (develop, 2026-09-16; blobs > 131072B omitted)

apps/meteor/client/views/room/webdav/WebdavFilePickerModal/FilePickerBreadcrumbs.tsx

@@ -0,0 +1,30 @@
+import { Box, Icon, IconButton, Tag } from '@rocket.chat/fuselage';
+import type { MouseEvent } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export type FilePickerBreadcrumbsProps = {
+	parentFolders: string[];
+	handleBreadcrumb: (e: MouseEvent<HTMLElement>) => void;
+	handleBack: () => void;
+};
+
+const FilePickerBreadcrumbs = ({ parentFolders, handleBreadcrumb, handleBack }: FilePickerBreadcrumbsProps) => {
+	const { t } = useTranslation();
+
+	return (
+		<Box display='flex' alignItems='center' overflowX='auto' marginInlineEnd={8}>
+			<IconButton disabled={parentFolders.length === 0} title={t('Back')} aria-label='back' icon='arrow-back' small onClick={handleBack} />
+			<IconButton title={t('Root')} aria-label='home' icon='home' small data-index={-1} onClick={handleBreadcrumb} />
+			{parentFolders?.map((parentFolder, index) => (
+				<Box display='flex' alignItems='center' key={index}>
+					<Icon name='chevron-left' />
+					<Tag aria-label={parentFolder} data-index={index} onClick={handleBreadcrumb}>
+						{parentFolder}
+					</Tag>
+				</Box>
+			))}
+		</Box>
+	);
+};
+
+export default FilePickerBreadcrumbs;

apps/meteor/client/views/room/webdav/WebdavFilePickerModal/WebdavFilePickerGrid/WebdavFilePickerGrid.tsx

@@ -0,0 +1,49 @@
+import type { IWebdavNode } from '@rocket.chat/core-typings';
+import { css } from '@rocket.chat/css-in-js';
+import { Box, Icon, Skeleton, Palette } from '@rocket.chat/fuselage';
+
+import WebdavFilePickerGridItem from './WebdavFilePickerGridItem';
+import GenericNoResults from '../../../../../components/GenericNoResults';
+import { getNodeIconType } from '../lib/getNodeIconType';
+
+export type WebdavFilePickerGridProps = {
+	webdavNodes: IWebdavNode[];
+	onNodeClick: (file: IWebdavNode) => void;
+	isLoading: boolean;
+};
+
+const WebdavFilePickerGrid = ({ webdavNodes, onNodeClick, isLoading }: WebdavFilePickerGridProps) => {
+	const hoverStyle = css`
+		&:hover {
+			background-color: ${Palette.surface['surface-neutral']};
+			cursor: pointer;
+		}
+	`;
+
+	return (
+		<Box display='flex' flexWrap='wrap'>
+			{isLoading &&
+				Array(6)
+					.fill('')
+					.map((_, index) => (
+						<WebdavFilePickerGridItem padding={4} key={index}>
+							<Skeleton variant='rect' width='full' height='full' />
+						</WebdavFilePickerGridItem>
+					))}
+			{!isLoading &&
+				webdavNodes.map((webdavNode, index) => {
+					const { icon } = getNodeIconType(webdavNode.basename, webdavNode.type, webdavNode.mime);
+
+					return (
+						<WebdavFilePickerGridItem key={index} className={hoverStyle} onClick={(): void => onNodeClick(webdavNode)}>
+							<Icon marginInlineEnd={4} size='x72' name={icon} />
+							<Box textAlign='center'>{webdavNode.basename}</Box>
+						</WebdavFilePickerGridItem>
+					);
+				})}
+			{!isLoading && webdavNodes?.length === 0 && <GenericNoResults />}
+		</Box>
+	);
+};
+
+export default WebdavFilePickerGrid;

apps/meteor/client/views/room/webdav/WebdavFilePickerModal/WebdavFilePickerGrid/WebdavFilePickerGridItem.tsx

@@ -0,0 +1,16 @@
+import { Box } from '@rocket.chat/fuselage';
+
+const WebdavFilePickerGridItem = ({ ...props }) => (
+	<Box
+		borderRadius='x4'
+		width='33.33%'
+		display='flex'
+		flexDirection='column'
+		alignItems='center'
+		justifyContent='center'
+		minHeight='130px'
+		{...props}
+	/>
+);
+
+export default WebdavFilePickerGridItem;

apps/meteor/client/views/room/webdav/WebdavFilePickerModal/WebdavFilePickerGrid/index.ts

@@ -0,0 +1 @@
+export { default } from './WebdavFilePickerGrid';

apps/meteor/client/views/room/webdav/WebdavFilePickerModal/WebdavFilePickerModal.tsx

@@ -0,0 +1,211 @@
+import type { IWebdavNode, IWebdavAccountIntegration } from '@rocket.chat/core-typings';
+import type { SelectOption } from '@rocket.chat/fuselage';
+import { Modal, Box, IconButton, Select, ModalHeader, ModalTitle, ModalClose, ModalContent, ModalFooter } from '@rocket.chat/fuselage';
+import { useStableCallback, useDebouncedValue } from '@rocket.chat/fuselage-hooks';
+import { useSort } from '@rocket.chat/ui-client';
+import { useMethod, useToastMessageDispatch, useTranslation } from '@rocket.chat/ui-contexts';
+import type { MouseEvent } from 'react';
+import { useState, useEffect, useCallback } from 'react';
+
+import FilePickerBreadcrumbs from './FilePickerBreadcrumbs';
+import WebdavFilePickerGrid from './WebdavFilePickerGrid';
+import WebdavFilePickerTable from './WebdavFilePickerTable';
+import { sortWebdavNodes } from './lib/sortWebdavNodes';
+import FilterByText from '../../../../components/FilterByText';
+
+export type WebdavSortOptions = 'name' | 'size' | 'dataModified';
+
+export type WebdavFilePickerModalProps = {
+	onUpload: (file: File) => Promise<void>;
+	onClose: () => void;
+	account: IWebdavAccountIntegration;
+};
+
+const WebdavFilePickerModal = ({ onUpload, onClose, account }: WebdavFilePickerModalProps) => {
+	const t = useTranslation();
+	const getWebdavFilePreview = useMethod('getWebdavFilePreview');
+	const getWebdavFileList = useMethod('getWebdavFileList');
+	const getFileFromWebdav = useMethod('getFileFromWebdav');
+	const dispatchToastMessage = useToastMessageDispatch();
+	const [typeView, setTypeView] = useState<'list' | 'grid'>('list');
+	const { sortBy, sortDirection, setSort } = useSort<WebdavSortOptions>('name');
+	const [currentFolder, setCurrentFolder] = useState('/');
+	const [parentFolders, setParentFolders] = useState<string[]>([]);
+	const [webdavNodes, setWebdavNodes] = useState<IWebdavNode[]>([]);
+	const [filterText, setFilterText] = useState('');
+	const debouncedFilter = useDebouncedValue('', 500);
+	const [isLoading, setIsLoading] = useState(false);
+
+	const showFilePreviews = useStableCallback(async (accountId: string, nodes: (IWebdavNode & { preview?: string })[] | undefined) => {
+		if (!Array.isArray(nodes) || !nodes.length) {
+			return;
+		}
+		const promises = nodes
+			.map((node, index) => {
+				if (node.type !== 'file') {
+					return;
+				}
+				return getWebdavFilePreview(accountId, node.filename)
+					.then((res) => {
+						if (!res?.data) {
+							return;
+						}
+
+						const blob = new Blob([res?.data], { type: 'image/png' });
+						const imgURL = URL.createObjectURL(blob);
+						nodes[index].preview = imgURL;
+					})
+					.catch((e) => e);
+			})
+			.filter(Boolean);
+
+		return Promise.all(promises)
+			.then(() => nodes)
+			.catch((e) => e);
+	});
+
+	const handleFilterNodes = useCallback(
+		(webdavNodes: IWebdavNode[]): void => {
+			const regex = new RegExp(`\\b${debouncedFilter}`, 'i');
+			const filteredNodes = webdavNodes.filter(({ basename }) => basename.match(regex));
+			return setWebdavNodes(filteredNodes);
+		},
+		[debouncedFilter],
+	);
+
+	const handleGetWebdavFileList = useCallback(async (): Promise<void> => {
+		setIsLoading(true);
+		let result;
+		try {
+			result = await getWebdavFileList(account._id, currentFolder);
+			handleFilterNodes(result.data);
+		} catch (error) {
+			dispatchToastMessage({ type: 'error', message: error });
+			onClose();
+		} finally {
+			setIsLoading(false);
+			const nodesWithPreviews = await showFilePreviews(account._id, result?.data);
+			if (Array.isArray(nodesWithPreviews) && nodesWithPreviews.length) {
+				handleFilterNodes(nodesWithPreviews);
+			}
+		}
+	}, [account._id, currentFolder, dispatchToastMessage, getWebdavFileList, onClose, showFilePreviews, handleFilterNodes]);
+
+	const handleBreadcrumb = (e: MouseEvent<HTMLElement>): void => {
+		const { index } = e.currentTarget.dataset;
+		const parentFolders = currentFolder.split('/').filter((s) => s);
+
+		// determine parent directory to go to
+		let targetFolder = '/';
+		for (let i = 0; i <= Number(index); i++) {
+			targetFolder += parentFolders[i];
+			targetFolder += '/';
+		}
+		setCurrentFolder(targetFolder);
+	};
+
+	const handleBack = (): void => {
+		let newCurrentFolder = currentFolder;
+		// determine parent directory to go back
+		let parentFolder = '/';
+		if (newCurrentFolder && newCurrentFolder !== '/') {
+			if (newCurrentFolder[newCurrentFolder.length - 1] === '/') {
+				newCurrentFolder = newCurrentFolder.slice(0, -1);
+			}
+			parentFolder = newCurrentFolder.substr(0, newCurrentFolder.lastIndexOf('/') + 1);
+		}
+		setCurrentFolder(parentFolder);
+	};
+
+	const handleNodeClick = (webdavNode: IWebdavNode): void | Promise<void> => {
+		if (webdavNode.type === 'directory') {
+			return setCurrentFolder(webdavNode.filename);
+		}
+
+		return handleUpload(webdavNode);
+	};
+
+	const handleUpload = async (webdavNode: IWebdavNode): Promise<void> => {
+		setIsLoading(true);
+
+		const uploadFile = async (file: File): Promise<void> => {
+			try {
+				await onUpload?.(file);
+			} catch (error) {
+				return dispatchToastMessage({ type: 'error', message: error });
+			} finally {
+				setIsLoading(false);
+				onClose();
+			}
+		};
+
+		try {
+			const { data } = await getFileFromWebdav(account._id, webdavNode);
+			const blob = new Blob([data]);
+			const file = new File([blob], webdavNode.basename, { type: webdavNode.mime });
+
+			await uploadFile(file);
+		} catch (error) {
+			return dispatchToastMessage({ type: 'error', message: error });
+		}
+	};
+
+	useEffect(() => {
+		handleGetWebdavFileList();
+	}, [handleGetWebdavFileList]);
+
+	useEffect(() => {
+		setParentFolders(currentFolder?.split('/').filter((s) => s) || []);
+	}, [currentFolder]);
+
+	const options: SelectOption[] = [
+		['name', 'Name'],
+		['size', 'Size'],
+		['dataModified', 'Data Modified'],
+	];
+
+	const handleSort = (sortBy: WebdavSortOptions, sortDirection?: 'asc' | 'desc'): void => {
+		setSort(sortBy);
+		const sortedNodes = sortWebdavNodes(webdavNodes, sortBy, sortDirection);
+		return setWebdavNodes(sortedNodes);
+	};
+
+	return (
+		<Modal>
+			<ModalHeader>
+				<ModalTitle>{t('Upload_From', { name: account.name })}</ModalTitle>
+				<ModalClose title={t('Close')} onClick={onClose} />
+			</ModalHeader>
+			<ModalContent>
+				<Box display='flex' justifyContent='space-between'>
+					<FilePickerBreadcrumbs parentFolders={parentFolders} handleBreadcrumb={handleBreadcrumb} handleBack={handleBack} />
+					<Box>
+						{typeView === 'list' && <IconButton icon='squares' small title={t('Grid_view')} onClick={(): void => setTypeView('grid')} />}
+						{typeView === 'grid' && <IconButton icon='th-list' small title={t('List_view')} onClick={(): void => setTypeView('list')} />}
+					</Box>
+				</Box>
+				<Box display='flex' flexDirection='column'>
+					<FilterByText value={filterText} onChange={(event) => setFilterText(event.target.value)}>
+						{typeView === 'grid' && (
+							<Select value={sortBy} onChange={(value): void => handleSort(value as WebdavSortOptions)} options={options} />
+						)}
+					</FilterByText>
+				</Box>
+				{typeView === 'list' && (
+					<WebdavFilePickerTable
+						webdavNodes={webdavNodes}
+						sortBy={sortBy}
+						sortDirection={sortDirection}
+						onSort={handleSort}
+						onNodeClick={handleNodeClick}
+						isLoading={isLoading}
+					/>
+				)}
+				{typeView === 'grid' && <WebdavFilePickerGrid webdavNodes={webdavNodes} onNodeClick={handleNodeClick} isLoading={isLoading} />}
+			</ModalContent>
+			<ModalFooter />
+		</Modal>
+	);
+};
+
+export default WebdavFilePickerModal;

apps/meteor/client/views/room/webdav/WebdavFilePickerModal/WebdavFilePickerTable.tsx

@@ -0,0 +1,92 @@
+import type { IWebdavNode } from '@rocket.chat/core-typings';
+import { Box, Icon } from '@rocket.chat/fuselage';
+import {
+	GenericTable,
+	GenericTableBody,
+	GenericTableCell,
+	GenericTableHeader,
+	GenericTableHeaderCell,
+	GenericTableLoadingRow,
+	GenericTableRow,
+} from '@rocket.chat/ui-client';
+import { useTranslation } from 'react-i18next';
+
+import type { WebdavSortOptions } from './WebdavFilePickerModal';
+import { getNodeFileSize } from './lib/getNodeFileSize';
+import { getNodeIconType } from './lib/getNodeIconType';
+import GenericNoResults from '../../../../components/GenericNoResults';
+import { timeAgo } from '../../../../lib/utils/timeAgo';
+
+export type WebdavFilePickerTableProps = {
+	webdavNodes: IWebdavNode[];
+	sortBy: string;
+	sortDirection: 'asc' | 'desc';
+	onSort: (sortBy: WebdavSortOptions, sortDirection?: 'asc' | 'desc') => void;
+	onNodeClick: (webdavNode: IWebdavNode) => void;
+	isLoading: boolean;
+};
+
+const WebdavFilePickerTable = ({ webdavNodes, sortBy, sortDirection, onSort, onNodeClick, isLoading }: WebdavFilePickerTableProps) => {
+	const { t } = useTranslation();
+
+	return (
+		<Box display='flex' flexDirection='column' overflowY='hidden' height='x256'>
+			{(isLoading || webdavNodes?.length > 0) && (
+				<GenericTable>
+					<GenericTableHeader>
+						<GenericTableHeaderCell
+							width='300px'
+							key='name'
+							direction={sortDirection}
+							active={sortBy === 'name'}
+							onClick={onSort}
+							sort='name'
+						>
+							{t('Name')}
+						</GenericTableHeaderCell>
+						<GenericTableHeaderCell key='size' direction={sortDirection} active={sortBy === 'size'} onClick={onSort} sort='size'>
+							{t('Size')}
+						</GenericTableHeaderCell>
+						<GenericTableHeaderCell
+							key='dataModified'
+							direction={sortDirection}
+							active={sortBy === 'dataModified'}
+							onClick={onSort}
+							sort='dataModified'
+						>
+							{t('Data_modified')}
+						</GenericTableHeaderCell>
+					</GenericTableHeader>
+					<GenericTableBody>
+						{isLoading &&
+							Array(5)
+								.fill('')
+								.map((_, index) => <GenericTableLoadingRow key={index} cols={3} />)}
+						{!isLoading &&
+							webdavNodes?.map((webdavNode, index) => {
+								const { icon } = getNodeIconType(webdavNode.basename, webdavNode.type, webdavNode.mime);
+
+								return (
+									<GenericTableRow key={index} onClick={(): void => onNodeClick(webdavNode)} tabIndex={index} role='link' action>
+										<GenericTableCell fontScale='p2' color='default' width='x200' display='flex' alignItems='center'>
+											<Icon marginInlineEnd={4} size='x20' name={icon} />
+											<Box withTruncatedText>{webdavNode.basename}</Box>
+										</GenericTableCell>
+										<GenericTableCell fontScale='p2' color='default'>
+											<Box withTruncatedText>{getNodeFileSize(webdavNode.type, webdavNode?.size)}</Box>
+										</GenericTableCell>
+										<GenericTableCell fontScale='p2' color='default'>
+											<Box withTruncatedText>{timeAgo(new Date())}</Box>
+										</GenericTableCell>
+									</GenericTableRow>
+								);
+							})}
+					</GenericTableBody>
+				</GenericTable>
+			)}
+			{!isLoading && webdavNodes?.length === 0 && <GenericNoResults />}
+		</Box>
+	);
+};
+
+export default WebdavFilePickerTable;

apps/meteor/client/views/room/webdav/WebdavFilePickerModal/index.ts

@@ -0,0 +1 @@
+export { default } from './WebdavFilePickerModal';

apps/meteor/client/views/room/webdav/WebdavFilePickerModal/lib/getNodeFileSize.ts

@@ -0,0 +1,13 @@
+export const getNodeFileSize = (type: string, size: number): string => {
+	if (type === 'directory') {
+		return '';
+	}
+	const bytes = size;
+	if (bytes === 0) {
+		return '0 B';
+	}
+	const k = 1024;
+	const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+	const i = Math.floor(Math.log(bytes) / Math.log(k));
+	return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
+};

apps/meteor/client/views/room/webdav/WebdavFilePickerModal/lib/getNodeIconType.spec.ts

@@ -0,0 +1,13 @@
+import { faker } from '@faker-js/faker';
+
+import { getNodeIconType } from './getNodeIconType';
+
+it('should return clip icon if file does not have mime type', () => {
+	const result = getNodeIconType(faker.system.fileName(), faker.system.fileType(), undefined);
+	expect(result.icon).toBe('clip');
+});
+
+it('should return folder icon if file type is directory', () => {
+	const result = getNodeIconType(faker.system.fileName(), 'directory', undefined);
+	expect(result.icon).toBe('folder');
+});

apps/meteor/client/views/room/webdav/WebdavFilePickerModal/lib/getNodeIconType.ts

@@ -0,0 +1,41 @@
+import type { Keys as IconName } from '@rocket.chat/icons';
+
+// TODO: This function should be simplified, it only needs to return the icon name
+export const getNodeIconType = (
+	basename: string,
+	fileType: string,
+	mime?: string,
+): { icon: IconName; type: string; extension?: string } => {
+	let icon: IconName = 'clip';
+	let type = '';
+
+	let extension = basename?.split('.').pop();
+	if (extension === basename) {
+		extension = '';
+	}
+
+	if (fileType === 'directory') {
+		icon = 'folder';
+		type = 'directory';
+	} else if (mime?.match(/application\/pdf/)) {
+		icon = 'file-pdf';
+		type = 'pdf';
+	} else if (mime && ['application/vnd.oasis.opendocument.text', 'application/vnd.oasis.opendocument.presentation'].includes(mime)) {
+		icon = 'file-document';
+		type = 'document';
+	} else if (
+		mime &&
+		[
+			'application/vnd.ms-excel',
+			'application/vnd.oasis.opendocument.spreadsheet',
+			'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+		].includes(mime)
+	) {
+		icon = 'file-sheets';
+		type = 'sheets';
+	} else if (mime && ['application/vnd.ms-powerpoint', 'application/vnd.oasis.opendocument.presentation'].includes(mime)) {
+		icon = 'file-sheets';
+		type = 'ppt';
+	}
+	return { icon, type, extension };
+};

apps/meteor/client/views/room/webdav/WebdavFilePickerModal/lib/sortWebdavNodes.ts

@@ -0,0 +1,26 @@
+import type { IWebdavNode } from '@rocket.chat/core-typings';
+
+export const sortWebdavNodes = (data: IWebdavNode[], sortBy: string, sortDirection?: string): IWebdavNode[] => {
+	if (sortDirection === 'desc') {
+		if (sortBy === 'name') {
+			data.sort((a, b) => b.basename.localeCompare(a.basename));
+		}
+		if (sortBy === 'size') {
+			data.sort((a, b) => b.size - a.size);
+		}
+		if (sortBy === 'date') {
+			data.sort((a, b) => new Date(b.lastmod).getTime() - new Date(a.lastmod).getTime());
+		}
+	} else {
+		if (sortBy === 'name') {
+			data.sort((a, b) => a.basename.localeCompare(b.basename));
+		}
+		if (sortBy === 'size') {
+			data.sort((a, b) => a.size - b.size);
+		}
+		if (sortBy === 'date') {
+			data.sort((a, b) => new Date(a.lastmod).getTime() - new Date(b.lastmod).getTime());
+		}
+	}
+	return data;
+};