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

apps/meteor/client/views/admin/customEmoji/AddCustomEmoji.tsx

@@ -0,0 +1,128 @@
+import { Box, Button, ButtonGroup, Margins, TextInput, Field, FieldLabel, FieldRow, FieldError, IconButton } from '@rocket.chat/fuselage';
+import { ContextualbarScrollableContent, ContextualbarFooter } from '@rocket.chat/ui-client';
+import { useToastMessageDispatch } from '@rocket.chat/ui-contexts';
+import { useQueryClient } from '@tanstack/react-query';
+import type { ChangeEvent } from 'react';
+import { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useEndpointUploadMutation } from '../../../hooks/useEndpointUploadMutation';
+import { useSingleFileInput } from '../../../hooks/useSingleFileInput';
+
+export type AddCustomEmojiProps = {
+	close: () => void;
+	onChange: () => void;
+};
+
+const AddCustomEmoji = ({ close, onChange, ...props }: AddCustomEmojiProps) => {
+	const { t } = useTranslation();
+	const [name, setName] = useState('');
+	const [aliases, setAliases] = useState('');
+	const [emojiFile, setEmojiFile] = useState<Blob>();
+	const [newEmojiPreview, setNewEmojiPreview] = useState('');
+	const [errors, setErrors] = useState({ name: false, emoji: false, aliases: false });
+
+	const setEmojiPreview = useCallback(
+		async (file: Blob) => {
+			setEmojiFile(file);
+			setNewEmojiPreview(URL.createObjectURL(file));
+			setErrors((prevState) => ({ ...prevState, emoji: false }));
+		},
+		[setEmojiFile],
+	);
+
+	const dispatchToastMessage = useToastMessageDispatch();
+	const queryClient = useQueryClient();
+
+	const { mutateAsync: saveAction } = useEndpointUploadMutation('/v1/emoji-custom.create', {
+		onSuccess: () => {
+			dispatchToastMessage({ type: 'success', message: t('Custom_Emoji_Added_Successfully') });
+			queryClient.invalidateQueries({ queryKey: ['emoji-custom.list'] });
+			onChange();
+			close();
+		},
+	});
+
+	const handleSave = useCallback(async () => {
+		if (!name) {
+			return setErrors((prevState) => ({ ...prevState, name: true }));
+		}
+
+		if (name === aliases) {
+			return setErrors((prevState) => ({ ...prevState, aliases: true }));
+		}
+
+		if (!emojiFile) {
+			return setErrors((prevState) => ({ ...prevState, emoji: true }));
+		}
+
+		const formData = new FormData();
+		formData.append('emoji', emojiFile);
+		formData.append('name', name);
+		formData.append('aliases', aliases);
+		await saveAction(formData);
+	}, [emojiFile, name, aliases, saveAction]);
+
+	const [clickUpload] = useSingleFileInput(setEmojiPreview, 'emoji');
+
+	const handleChangeName = (e: ChangeEvent<HTMLInputElement>): void => {
+		if (e.currentTarget.value !== '') {
+			setErrors((prevState) => ({ ...prevState, name: false }));
+		}
+
+		return setName(e.currentTarget.value);
+	};
+
+	const handleChangeAliases = (e: ChangeEvent<HTMLInputElement>): void => {
+		if (e.currentTarget.value !== name) {
+			setErrors((prevState) => ({ ...prevState, aliases: false }));
+		}
+
+		return setAliases(e.currentTarget.value);
+	};
+
+	return (
+		<>
+			<ContextualbarScrollableContent {...props}>
+				<Field>
+					<FieldLabel>{t('Name')}</FieldLabel>
+					<FieldRow>
+						<TextInput value={name} onChange={handleChangeName} placeholder={t('Name')} />
+					</FieldRow>
+					{errors.name && <FieldError>{t('Required_field', { field: t('Name') })}</FieldError>}
+				</Field>
+				<Field>
+					<FieldLabel>{t('Aliases')}</FieldLabel>
+					<FieldRow>
+						<TextInput value={aliases} onChange={handleChangeAliases} placeholder={t('Aliases')} />
+					</FieldRow>
+					{errors.aliases && <FieldError>{t('Custom_Emoji_Error_Same_Name_And_Alias')}</FieldError>}
+				</Field>
+				<Field>
+					<FieldLabel alignSelf='stretch' display='flex' justifyContent='space-between' alignItems='center'>
+						{t('Custom_Emoji')}
+						<IconButton secondary small icon='upload' onClick={clickUpload} />
+					</FieldLabel>
+					{errors.emoji && <FieldError>{t('Required_field', { field: t('Custom_Emoji') })}</FieldError>}
+					{newEmojiPreview && (
+						<Box display='flex' flexDirection='row' marginInline='neg-x4' justifyContent='center'>
+							<Margins inline={4}>
+								<Box is='img' objectFit='contain' width='x120' height='x120' src={newEmojiPreview} />
+							</Margins>
+						</Box>
+					)}
+				</Field>
+			</ContextualbarScrollableContent>
+			<ContextualbarFooter>
+				<ButtonGroup stretch>
+					<Button onClick={close}>{t('Cancel')}</Button>
+					<Button primary onClick={handleSave}>
+						{t('Save')}
+					</Button>
+				</ButtonGroup>
+			</ContextualbarFooter>
+		</>
+	);
+};
+
+export default AddCustomEmoji;

apps/meteor/client/views/admin/customEmoji/CustomEmoji.spec.tsx

@@ -0,0 +1,75 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { render, screen, waitFor } from '@testing-library/react';
+
+import '@testing-library/jest-dom';
+
+import CustomEmoji from './CustomEmoji';
+
+const appRoot = mockAppRoot().withEndpoint('GET', '/v1/emoji-custom.all', () => ({
+	count: 1,
+	offset: 0,
+	total: 1,
+	success: true,
+	emojis: [
+		{
+			_id: '1',
+			name: 'smile',
+			aliases: ['happy', 'joy'],
+			extension: 'webp',
+			_updatedAt: new Date().toISOString(),
+			etag: 'abcdef',
+		},
+	],
+}));
+
+describe('CustomEmoji Component', () => {
+	const mockRef = { current: jest.fn() };
+	const mockOnClick = jest.fn();
+
+	it('renders emoji list', async () => {
+		render(<CustomEmoji onClick={mockOnClick} reload={mockRef} />, {
+			wrapper: appRoot.build(),
+		});
+
+		await waitFor(() => {
+			expect(screen.getByText('smile')).toBeInTheDocument();
+		});
+	});
+
+	it("renders emoji's aliases as comma-separated values when aliases is an array", async () => {
+		render(<CustomEmoji onClick={mockOnClick} reload={mockRef} />, {
+			wrapper: appRoot.build(),
+		});
+
+		await waitFor(() => {
+			expect(screen.getByText('happy, joy')).toBeInTheDocument();
+		});
+	});
+
+	it("renders emoji's aliases values when aliases is a string", async () => {
+		render(<CustomEmoji onClick={mockOnClick} reload={mockRef} />, {
+			wrapper: mockAppRoot()
+				.withEndpoint('GET', '/v1/emoji-custom.all', () => ({
+					count: 1,
+					offset: 0,
+					total: 1,
+					success: true,
+					emojis: [
+						{
+							_id: '1',
+							name: 'smile',
+							aliases: 'happy' as any,
+							extension: 'webp',
+							_updatedAt: new Date().toISOString(),
+							etag: 'abcdef',
+						},
+					],
+				}))
+				.build(),
+		});
+
+		await waitFor(() => {
+			expect(screen.getByText('happy')).toBeInTheDocument();
+		});
+	});
+});

apps/meteor/client/views/admin/customEmoji/CustomEmoji.tsx

@@ -0,0 +1,131 @@
+import { Box, Pagination, States, StatesActions, StatesAction, StatesIcon, StatesTitle } from '@rocket.chat/fuselage';
+import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
+import {
+	GenericTable,
+	GenericTableBody,
+	GenericTableCell,
+	GenericTableHeader,
+	GenericTableHeaderCell,
+	GenericTableLoadingTable,
+	GenericTableRow,
+	usePagination,
+	useSort,
+} from '@rocket.chat/ui-client';
+import { useTranslation, useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+import type { MutableRefObject } from 'react';
+import { useEffect, useMemo, useState } from 'react';
+
+import FilterByText from '../../../components/FilterByText';
+import GenericNoResults from '../../../components/GenericNoResults';
+
+export type CustomEmojiProps = {
+	reload: MutableRefObject<() => void>;
+	onClick: (emoji: string) => () => void;
+};
+
+const CustomEmoji = ({ onClick, reload }: CustomEmojiProps) => {
+	const t = useTranslation();
+
+	const [text, setText] = useState('');
+	const { sortBy, sortDirection, setSort } = useSort<'name'>('name');
+	const { current, itemsPerPage, setItemsPerPage: onSetItemsPerPage, setCurrent: onSetCurrent, ...paginationProps } = usePagination();
+
+	const query = useDebouncedValue(
+		useMemo(
+			() => ({
+				name: text,
+				sort: `{ "${sortBy}": ${sortDirection === 'asc' ? 1 : -1} }`,
+				count: itemsPerPage,
+				offset: current,
+			}),
+			[text, itemsPerPage, current, sortBy, sortDirection],
+		),
+		500,
+	);
+
+	const headers = useMemo(
+		() => [
+			<GenericTableHeaderCell key='name' direction={sortDirection} active={sortBy === 'name'} onClick={setSort} sort='name' width='x200'>
+				{t('Name')}
+			</GenericTableHeaderCell>,
+			<GenericTableHeaderCell key='aliases' width='x200'>
+				{t('Aliases')}
+			</GenericTableHeaderCell>,
+		],
+		[setSort, sortDirection, sortBy, t],
+	);
+
+	const getEmojiList = useEndpoint('GET', '/v1/emoji-custom.all');
+	const { data, refetch, isSuccess, isLoading, isError } = useQuery({
+		queryKey: ['getEmojiList', query],
+		queryFn: () => getEmojiList(query),
+	});
+
+	useEffect(() => {
+		reload.current = refetch;
+	}, [reload, refetch]);
+
+	return (
+		<>
+			<FilterByText value={text} onChange={(event) => setText(event.target.value)} />
+			{isLoading && (
+				<GenericTable>
+					<GenericTableHeader>{headers}</GenericTableHeader>
+					<GenericTableBody>
+						<GenericTableLoadingTable headerCells={2} />
+					</GenericTableBody>
+				</GenericTable>
+			)}
+			{isSuccess && data && data.emojis.length > 0 && (
+				<>
+					<GenericTable aria-label={t('Emoji')}>
+						<GenericTableHeader>{headers}</GenericTableHeader>
+						<GenericTableBody>
+							{isSuccess &&
+								data?.emojis.map((emojis) => (
+									<GenericTableRow
+										key={emojis._id}
+										onKeyDown={onClick(emojis._id)}
+										onClick={onClick(emojis._id)}
+										tabIndex={0}
+										role='link'
+										action
+										qa-emoji-id={emojis._id}
+									>
+										<GenericTableCell color='default'>
+											<Box withTruncatedText>{emojis.name}</Box>
+										</GenericTableCell>
+										<GenericTableCell color='default'>
+											<Box withTruncatedText>{Array.isArray(emojis.aliases) ? emojis.aliases.join(', ') : emojis.aliases}</Box>
+										</GenericTableCell>
+									</GenericTableRow>
+								))}
+						</GenericTableBody>
+					</GenericTable>
+					<Pagination
+						divider
+						current={current}
+						itemsPerPage={itemsPerPage}
+						count={data?.total || 0}
+						onSetItemsPerPage={onSetItemsPerPage}
+						onSetCurrent={onSetCurrent}
+						{...paginationProps}
+					/>
+				</>
+			)}
+			{isSuccess && data && data.emojis.length === 0 && <GenericNoResults />}
+			{isError && (
+				<States>
+					<StatesIcon name='warning' variation='danger' />
+					<StatesTitle>{t('Something_went_wrong')}</StatesTitle>
+					<StatesActions>
+						<StatesAction onClick={() => refetch()}>{t('Reload_page')}</StatesAction>
+					</StatesActions>
+				</States>
+			)}
+		</>
+	);
+};
+
+export default CustomEmoji;

apps/meteor/client/views/admin/customEmoji/CustomEmojiRoute.tsx

@@ -0,0 +1,81 @@
+import { Button } from '@rocket.chat/fuselage';
+import {
+	ContextualbarHeader,
+	ContextualbarClose,
+	ContextualbarDialog,
+	ContextualbarTitle,
+	Page,
+	PageHeader,
+	PageContent,
+} from '@rocket.chat/ui-client';
+import { useRoute, useRouteParameter, usePermission } from '@rocket.chat/ui-contexts';
+import { useCallback, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import AddCustomEmoji from './AddCustomEmoji';
+import CustomEmoji from './CustomEmoji';
+import EditCustomEmojiWithData from './EditCustomEmojiWithData';
+import NotAuthorizedPage from '../../notAuthorized/NotAuthorizedPage';
+
+const CustomEmojiRoute = () => {
+	const { t } = useTranslation();
+	const route = useRoute('emoji-custom');
+	const context = useRouteParameter('context');
+	const id = useRouteParameter('id');
+	const canManageEmoji = usePermission('manage-emoji');
+
+	const handleItemClick = (_id: string) => (): void => {
+		route.push({
+			context: 'edit',
+			id: _id,
+		});
+	};
+
+	const handleAddEmoji = useCallback(() => {
+		route.push({ context: 'new' });
+	}, [route]);
+
+	const handleClose = (): void => {
+		route.push({});
+	};
+
+	const reload = useRef(() => null);
+
+	const handleChange = useCallback(() => {
+		reload.current();
+	}, [reload]);
+
+	if (!canManageEmoji) {
+		return <NotAuthorizedPage />;
+	}
+
+	return (
+		<Page flexDirection='row'>
+			<Page name='admin-emoji-custom'>
+				<PageHeader title={t('Emoji')}>
+					<Button primary onClick={handleAddEmoji} aria-label={t('New')}>
+						{t('New')}
+					</Button>
+				</PageHeader>
+				<PageContent>
+					<CustomEmoji reload={reload} onClick={handleItemClick} />
+				</PageContent>
+			</Page>
+			{context && (
+				<ContextualbarDialog onClose={handleClose}>
+					<ContextualbarHeader>
+						<ContextualbarTitle>
+							{context === 'edit' && t('Custom_Emoji_Info')}
+							{context === 'new' && t('Custom_Emoji_Add')}
+						</ContextualbarTitle>
+						<ContextualbarClose onClick={handleClose} />
+					</ContextualbarHeader>
+					{context === 'edit' && id && <EditCustomEmojiWithData _id={id} close={handleClose} onChange={handleChange} />}
+					{context === 'new' && <AddCustomEmoji close={handleClose} onChange={handleChange} />}
+				</ContextualbarDialog>
+			)}
+		</Page>
+	);
+};
+
+export default CustomEmojiRoute;

apps/meteor/client/views/admin/customEmoji/EditCustomEmoji.tsx

@@ -0,0 +1,204 @@
+import {
+	Box,
+	Button,
+	ButtonGroup,
+	Margins,
+	TextInput,
+	Field,
+	FieldGroup,
+	FieldLabel,
+	FieldRow,
+	FieldError,
+	IconButton,
+} from '@rocket.chat/fuselage';
+import { GenericModal, ContextualbarScrollableContent, ContextualbarFooter } from '@rocket.chat/ui-client';
+import { useSetModal, useAbsoluteUrl, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
+import { useQueryClient } from '@tanstack/react-query';
+import type { ChangeEvent } from 'react';
+import { useCallback, useState, useMemo, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useEndpointMutation } from '../../../hooks/useEndpointMutation';
+import { useEndpointUploadMutation } from '../../../hooks/useEndpointUploadMutation';
+import { useSingleFileInput } from '../../../hooks/useSingleFileInput';
+
+export type EditCustomEmojiProps = {
+	close: () => void;
+	onChange: () => void;
+	data: {
+		_id: string;
+		name: string;
+		aliases: string[];
+		extension: string;
+		etag?: string;
+	};
+};
+
+const EditCustomEmoji = ({ close, onChange, data, ...props }: EditCustomEmojiProps) => {
+	const { t } = useTranslation();
+	const setModal = useSetModal();
+	const absoluteUrl = useAbsoluteUrl();
+	const queryClient = useQueryClient();
+	const [errors, setErrors] = useState({ name: false, aliases: false });
+
+	const { _id, name: previousName, aliases: previousAliases } = data || {};
+
+	const [name, setName] = useState(() => data?.name ?? '');
+	const [aliases, setAliases] = useState(() => data?.aliases?.join(', ') ?? '');
+	const [emojiFile, setEmojiFile] = useState<Blob>();
+	const newEmojiPreview = useMemo(() => {
+		if (emojiFile) {
+			return URL.createObjectURL(emojiFile);
+		}
+
+		if (data) {
+			return absoluteUrl(`/emoji-custom/${encodeURIComponent(data.name)}.${data.extension}${data.etag ? `?etag=${data.etag}` : ''}`);
+		}
+
+		return null;
+	}, [absoluteUrl, data, emojiFile]);
+
+	useEffect(() => {
+		setName(previousName || '');
+		setAliases(previousAliases?.join(', ') || '');
+	}, [previousName, previousAliases, _id]);
+
+	const hasUnsavedChanges = useMemo(
+		() => previousName !== name || aliases !== previousAliases.join(', ') || !!emojiFile,
+		[previousName, name, aliases, previousAliases, emojiFile],
+	);
+
+	const { mutateAsync: saveAction } = useEndpointUploadMutation('/v1/emoji-custom.update', {
+		onSuccess: () => {
+			dispatchToastMessage({ type: 'success', message: t('Custom_Emoji_Updated_Successfully') });
+			queryClient.invalidateQueries({ queryKey: ['emoji-custom.list'] });
+			onChange();
+			close();
+		},
+	});
+
+	const handleSave = useCallback(async () => {
+		if (!name) {
+			return setErrors((prevState) => ({ ...prevState, name: true }));
+		}
+
+		if (name === aliases) {
+			return setErrors((prevState) => ({ ...prevState, aliases: true }));
+		}
+
+		if (!emojiFile && !newEmojiPreview) {
+			return;
+		}
+
+		const formData = new FormData();
+		emojiFile && formData.append('emoji', emojiFile);
+		formData.append('_id', _id);
+		formData.append('name', name);
+		formData.append('aliases', aliases);
+		await saveAction(formData);
+	}, [emojiFile, _id, name, aliases, saveAction, newEmojiPreview]);
+
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	const { mutateAsync: deleteAction } = useEndpointMutation('POST', '/v1/emoji-custom.delete', {
+		onSuccess: () => {
+			dispatchToastMessage({ type: 'success', message: t('Custom_Emoji_Has_Been_Deleted') });
+			queryClient.invalidateQueries({ queryKey: ['emoji-custom.list'] });
+		},
+		onSettled: () => {
+			onChange();
+			setModal(null);
+			close();
+		},
+	});
+
+	const handleDeleteButtonClick = useCallback(() => {
+		const handleDelete = async () => {
+			await deleteAction({ emojiId: _id });
+		};
+
+		const handleCancel = () => {
+			setModal(null);
+		};
+
+		setModal(
+			<GenericModal variant='danger' onConfirm={handleDelete} onCancel={handleCancel} onClose={handleCancel} confirmText={t('Delete')}>
+				{t('Custom_Emoji_Delete_Warning')}
+			</GenericModal>,
+		);
+	}, [setModal, deleteAction, _id, t]);
+
+	const handleChangeAliases = useCallback(
+		(e: ChangeEvent<HTMLInputElement>) => {
+			if (e.currentTarget.value !== name) {
+				setErrors((prevState) => ({ ...prevState, aliases: false }));
+			}
+
+			return setAliases(e.currentTarget.value);
+		},
+		[setAliases, name],
+	);
+
+	const [clickUpload] = useSingleFileInput(setEmojiFile, 'emoji');
+
+	const handleChangeName = (e: ChangeEvent<HTMLInputElement>): void => {
+		if (e.currentTarget.value !== '') {
+			setErrors((prevState) => ({ ...prevState, name: false }));
+		}
+
+		return setName(e.currentTarget.value);
+	};
+
+	return (
+		<>
+			<ContextualbarScrollableContent {...props}>
+				<FieldGroup>
+					<Field>
+						<FieldLabel>{t('Name')}</FieldLabel>
+						<FieldRow>
+							<TextInput value={name} onChange={handleChangeName} placeholder={t('Name')} />
+						</FieldRow>
+						{errors.name && <FieldError>{t('Required_field', { field: t('Name') })}</FieldError>}
+					</Field>
+					<Field>
+						<FieldLabel>{t('Aliases')}</FieldLabel>
+						<FieldRow>
+							<TextInput value={aliases} onChange={handleChangeAliases} placeholder={t('Aliases')} />
+						</FieldRow>
+						{errors.aliases && <FieldError>{t('Custom_Emoji_Error_Same_Name_And_Alias')}</FieldError>}
+					</Field>
+					<Field>
+						<FieldLabel alignSelf='stretch' display='flex' justifyContent='space-between' alignItems='center'>
+							{t('Custom_Emoji')}
+							<IconButton icon='upload' secondary onClick={clickUpload} />
+						</FieldLabel>
+						{newEmojiPreview && (
+							<Box display='flex' flexDirection='row' marginBlockStart='none' justifyContent='center'>
+								<Margins inline={4}>
+									<Box is='img' objectFit='contain' width='x120' height='x120' src={newEmojiPreview} />
+								</Margins>
+							</Box>
+						)}
+					</Field>
+				</FieldGroup>
+			</ContextualbarScrollableContent>
+			<ContextualbarFooter>
+				<ButtonGroup stretch>
+					<Button onClick={close}>{t('Cancel')}</Button>
+					<Button primary onClick={handleSave} disabled={!hasUnsavedChanges}>
+						{t('Save')}
+					</Button>
+				</ButtonGroup>
+				<Box marginBlockStart={8}>
+					<ButtonGroup stretch>
+						<Button icon='trash' danger onClick={handleDeleteButtonClick}>
+							{t('Delete')}
+						</Button>
+					</ButtonGroup>
+				</Box>
+			</ContextualbarFooter>
+		</>
+	);
+};
+
+export default EditCustomEmoji;

apps/meteor/client/views/admin/customEmoji/EditCustomEmojiWithData.tsx

@@ -0,0 +1,47 @@
+import { Callout } from '@rocket.chat/fuselage';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import EditCustomEmoji from './EditCustomEmoji';
+import { FormSkeleton } from '../../../components/Skeleton';
+
+export type EditCustomEmojiWithDataProps = {
+	_id: string;
+	close: () => void;
+	onChange: () => void;
+};
+
+const EditCustomEmojiWithData = ({ _id, onChange, close, ...props }: EditCustomEmojiWithDataProps) => {
+	const { t } = useTranslation();
+	const query = useMemo(() => ({ _id }), [_id]);
+
+	const getEmojis = useEndpoint('GET', '/v1/emoji-custom.list');
+
+	const { data, isPending, error, refetch } = useQuery({
+		queryKey: ['custom-emojis', query],
+
+		queryFn: async () => {
+			const emoji = await getEmojis(query);
+			return emoji;
+		},
+	});
+
+	if (isPending) {
+		return <FormSkeleton paddingInline={20} />;
+	}
+
+	if (error || !data || !data.emojis || data.emojis.update.length < 1) {
+		return <Callout title={t('Custom_Emoji_Error_Invalid_Emoji')} type='danger' />;
+	}
+
+	const handleChange = (): void => {
+		onChange?.();
+		refetch?.();
+	};
+
+	return <EditCustomEmoji data={data.emojis.update[0]} close={close} onChange={handleChange} {...props} />;
+};
+
+export default EditCustomEmojiWithData;