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

apps/meteor/client/views/omnichannel/customFields/CustomFieldsForm.stories.tsx

@@ -0,0 +1,19 @@
+import { Box } from '@rocket.chat/fuselage';
+import type { StoryObj, Meta } from '@storybook/react';
+
+import EditCustomFields from './EditCustomFields';
+
+export default {
+	component: EditCustomFields,
+	decorators: [
+		(fn) => (
+			<Box maxWidth='x600' alignSelf='center' width='full' margin={24}>
+				{fn()}
+			</Box>
+		),
+	],
+} satisfies Meta<typeof EditCustomFields>;
+
+export const Default: StoryObj<typeof EditCustomFields> = {
+	name: 'CustomFieldsForm',
+};

apps/meteor/client/views/omnichannel/customFields/CustomFieldsPage.tsx

@@ -0,0 +1,40 @@
+import { Button } from '@rocket.chat/fuselage';
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
+import { ContextualbarDialog, Page, PageHeader, PageContent } from '@rocket.chat/ui-client';
+import { useRouteParameter, useRouter } from '@rocket.chat/ui-contexts';
+import { useTranslation } from 'react-i18next';
+
+import CustomFieldsTable from './CustomFieldsTable';
+import EditCustomFields from './EditCustomFields';
+import EditCustomFieldsWithData from './EditCustomFieldsWithData';
+
+const CustomFieldsPage = () => {
+	const { t } = useTranslation();
+	const router = useRouter();
+
+	const context = useRouteParameter('context');
+	const id = useRouteParameter('id');
+
+	const handleCloseContextualbar = useStableCallback(() => router.navigate('/omnichannel/customfields'));
+
+	return (
+		<Page flexDirection='row'>
+			<Page>
+				<PageHeader title={t('Custom_Fields')}>
+					<Button onClick={() => router.navigate('/omnichannel/customfields/new')}>{t('Create_custom_field')}</Button>
+				</PageHeader>
+				<PageContent>
+					<CustomFieldsTable />
+				</PageContent>
+			</Page>
+			{context && (
+				<ContextualbarDialog onClose={handleCloseContextualbar}>
+					{context === 'edit' && id && <EditCustomFieldsWithData customFieldId={id} onClose={handleCloseContextualbar} />}
+					{context === 'new' && <EditCustomFields onClose={handleCloseContextualbar} />}
+				</ContextualbarDialog>
+			)}
+		</Page>
+	);
+};
+
+export default CustomFieldsPage;

apps/meteor/client/views/omnichannel/customFields/CustomFieldsRoute.tsx

@@ -0,0 +1,16 @@
+import { usePermission } from '@rocket.chat/ui-contexts';
+
+import CustomFieldsPage from './CustomFieldsPage';
+import NotAuthorizedPage from '../../notAuthorized/NotAuthorizedPage';
+
+const CustomFieldsRoute = () => {
+	const canViewCustomFields = usePermission('view-livechat-customfields');
+
+	if (!canViewCustomFields) {
+		return <NotAuthorizedPage />;
+	}
+
+	return <CustomFieldsPage />;
+};
+
+export default CustomFieldsRoute;

apps/meteor/client/views/omnichannel/customFields/CustomFieldsTable.tsx

@@ -0,0 +1,146 @@
+import { IconButton, Pagination } from '@rocket.chat/fuselage';
+import { useDebouncedValue, useStableCallback } from '@rocket.chat/fuselage-hooks';
+import {
+	GenericTable,
+	GenericTableHeader,
+	GenericTableHeaderCell,
+	GenericTableRow,
+	GenericTableCell,
+	GenericTableBody,
+	GenericTableLoadingTable,
+	usePagination,
+	useSort,
+} from '@rocket.chat/ui-client';
+import { useTranslation, useRouter } from '@rocket.chat/ui-contexts';
+import { hashKey } from '@tanstack/react-query';
+import { useMemo, useState } from 'react';
+
+import { useRemoveCustomField } from './useRemoveCustomField';
+import FilterByText from '../../../components/FilterByText';
+import GenericNoResults from '../../../components/GenericNoResults';
+import { links } from '../../../lib/links';
+import { useCustomFieldsQuery } from '../hooks/useCustomFieldsQuery';
+
+const CustomFieldsTable = () => {
+	const t = useTranslation();
+	const router = useRouter();
+	const [text, setText] = useState('');
+
+	const { current, itemsPerPage, setItemsPerPage: onSetItemsPerPage, setCurrent: onSetCurrent, ...paginationProps } = usePagination();
+	const { sortBy, sortDirection, setSort } = useSort<'_id' | 'label' | 'scope' | 'visibility'>('_id');
+
+	const handleAddNew = useStableCallback(() => router.navigate('/omnichannel/customfields/new'));
+	const onRowClick = useStableCallback((id: string) => () => router.navigate(`/omnichannel/customfields/edit/${id}`));
+
+	const handleDelete = useRemoveCustomField();
+
+	const query = useDebouncedValue(
+		useMemo(
+			() => ({
+				text,
+				sort: `{ "${sortBy}": ${sortDirection === 'asc' ? 1 : -1} }`,
+				...(itemsPerPage && { count: itemsPerPage }),
+				...(current && { offset: current }),
+			}),
+			[text, itemsPerPage, current, sortBy, sortDirection],
+		),
+		500,
+	);
+
+	const { data, isSuccess, isLoading } = useCustomFieldsQuery();
+
+	const [defaultQuery] = useState(hashKey([query]));
+	const queryHasChanged = defaultQuery !== hashKey([query]);
+
+	const headers = (
+		<>
+			<GenericTableHeaderCell key='field' direction={sortDirection} active={sortBy === '_id'} onClick={setSort} sort='_id'>
+				{t('Field')}
+			</GenericTableHeaderCell>
+			<GenericTableHeaderCell key='label' direction={sortDirection} active={sortBy === 'label'} onClick={setSort} sort='label'>
+				{t('Label')}
+			</GenericTableHeaderCell>
+			<GenericTableHeaderCell key='scope' direction={sortDirection} active={sortBy === 'scope'} onClick={setSort} sort='scope'>
+				{t('Scope')}
+			</GenericTableHeaderCell>
+			<GenericTableHeaderCell
+				key='visibility'
+				direction={sortDirection}
+				active={sortBy === 'visibility'}
+				onClick={setSort}
+				sort='visibility'
+			>
+				{t('Visibility')}
+			</GenericTableHeaderCell>
+			<GenericTableHeaderCell key='remove' width='x60' />
+		</>
+	);
+
+	return (
+		<>
+			{((isSuccess && data?.customFields.length > 0) || queryHasChanged) && (
+				<FilterByText value={text} onChange={(event) => setText(event.target.value)} />
+			)}
+			{isLoading && (
+				<GenericTable>
+					<GenericTableHeader>{headers}</GenericTableHeader>
+					<GenericTableBody>
+						<GenericTableLoadingTable headerCells={5} />
+					</GenericTableBody>
+				</GenericTable>
+			)}
+			{isSuccess && data.customFields.length === 0 && queryHasChanged && <GenericNoResults />}
+			{isSuccess && data.customFields.length === 0 && !queryHasChanged && (
+				<GenericNoResults
+					icon='file-sheets'
+					title={t('No_custom_fields_yet')}
+					description={t('No_custom_fields_yet_description')}
+					buttonAction={handleAddNew}
+					buttonTitle={t('Create_custom_field')}
+					linkHref={links.go.omnichannelDocs}
+					linkText={t('Learn_more_about_custom_fields')}
+				/>
+			)}
+
+			{isSuccess && data.customFields.length > 0 && (
+				<>
+					<GenericTable aria-label={t('Custom_Fields')} aria-busy={isLoading} aria-live='polite'>
+						<GenericTableHeader>{headers}</GenericTableHeader>
+						<GenericTableBody>
+							{data.customFields.map(({ label, _id, scope, visibility }) => (
+								<GenericTableRow key={_id} tabIndex={0} onClick={onRowClick(_id)} action>
+									<GenericTableCell withTruncatedText>{_id}</GenericTableCell>
+									<GenericTableCell withTruncatedText>{label}</GenericTableCell>
+									<GenericTableCell withTruncatedText>{scope === 'visitor' ? t('Visitor') : t('Room')}</GenericTableCell>
+									<GenericTableCell withTruncatedText>{visibility === 'visible' ? t('Visible') : t('Hidden')}</GenericTableCell>
+									<GenericTableCell withTruncatedText>
+										<IconButton
+											icon='trash'
+											small
+											title={t('Remove')}
+											onClick={(e) => {
+												e.stopPropagation();
+												handleDelete(_id);
+											}}
+										/>
+									</GenericTableCell>
+								</GenericTableRow>
+							))}
+						</GenericTableBody>
+					</GenericTable>
+					<Pagination
+						divider
+						current={current}
+						itemsPerPage={itemsPerPage}
+						count={data.total || 0}
+						onSetItemsPerPage={onSetItemsPerPage}
+						onSetCurrent={onSetCurrent}
+						{...paginationProps}
+					/>
+				</>
+			)}
+		</>
+	);
+};
+
+export default CustomFieldsTable;

apps/meteor/client/views/omnichannel/customFields/EditCustomFields.tsx

@@ -0,0 +1,247 @@
+import type { ILivechatCustomField, Serialized } from '@rocket.chat/core-typings';
+import type { SelectOption } from '@rocket.chat/fuselage';
+import {
+	FieldError,
+	Button,
+	ButtonGroup,
+	Field,
+	FieldGroup,
+	FieldLabel,
+	FieldRow,
+	Select,
+	TextInput,
+	ToggleSwitch,
+	Box,
+} from '@rocket.chat/fuselage';
+import {
+	ContextualbarTitle,
+	ContextualbarHeader,
+	ContextualbarClose,
+	ContextualbarFooter,
+	ContextualbarScrollableContent,
+} from '@rocket.chat/ui-client';
+import { useToastMessageDispatch, useTranslation, useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQueryClient } from '@tanstack/react-query';
+import { useId, useMemo } from 'react';
+import { FormProvider, useForm, Controller } from 'react-hook-form';
+
+import { CustomFieldsAdditionalForm } from '../additionalForms';
+import { useRemoveCustomField } from './useRemoveCustomField';
+import { useFormSubmitWithDirtyCheck } from '../../../hooks/useFormSubmitWithDirtyCheck';
+import { omnichannelQueryKeys } from '../../../lib/queryKeys';
+
+export type EditCustomFieldsFormData = {
+	field: string;
+	label: string;
+	scope: 'visitor' | 'room';
+	visibility: boolean;
+	searchable: boolean;
+	regexp: string;
+	type: string;
+	required: boolean;
+	defaultValue: string;
+	options: string;
+	public: boolean;
+};
+
+const getInitialValues = (customFieldData: Serialized<ILivechatCustomField> | undefined) => ({
+	field: customFieldData?._id || '',
+	label: customFieldData?.label || '',
+	scope: customFieldData?.scope || 'visitor',
+	visibility: customFieldData?.visibility === 'visible',
+	searchable: !!customFieldData?.searchable,
+	regexp: customFieldData?.regexp || '',
+	// additional props
+	type: customFieldData?.type || 'input',
+	required: !!customFieldData?.required,
+	defaultValue: customFieldData?.defaultValue || '',
+	options: customFieldData?.options || '',
+	public: !!customFieldData?.public,
+});
+
+const EditCustomFields = ({ customFieldData, onClose }: { customFieldData?: Serialized<ILivechatCustomField>; onClose: () => void }) => {
+	const t = useTranslation();
+	const queryClient = useQueryClient();
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	const handleDelete = useRemoveCustomField();
+
+	const methods = useForm<EditCustomFieldsFormData>({
+		values: getInitialValues(customFieldData),
+	});
+	const {
+		control,
+		handleSubmit,
+		formState: { isDirty, errors },
+	} = methods;
+
+	const saveCustomField = useEndpoint('POST', '/v1/livechat/custom-fields.save');
+
+	const handleSave = useFormSubmitWithDirtyCheck(
+		async ({ visibility, ...data }: EditCustomFieldsFormData) => {
+			try {
+				await saveCustomField({
+					customFieldId: customFieldData?._id as unknown as string,
+					customFieldData: {
+						visibility: visibility ? 'visible' : 'hidden',
+						...data,
+					},
+				});
+
+				dispatchToastMessage({ type: 'success', message: t('Saved') });
+				queryClient.invalidateQueries({
+					queryKey: omnichannelQueryKeys.livechat.customFields(),
+				});
+				onClose();
+			} catch (error) {
+				dispatchToastMessage({ type: 'error', message: error });
+			}
+		},
+		{ isDirty },
+	);
+
+	const scopeOptions: SelectOption[] = useMemo(
+		() => [
+			['visitor', t('Visitor')],
+			['room', t('Room')],
+		],
+		[t],
+	);
+
+	const formId = useId();
+	const fieldField = useId();
+	const labelField = useId();
+	const scopeField = useId();
+	const visibilityField = useId();
+	const searchableField = useId();
+	const regexpField = useId();
+
+	return (
+		<>
+			<ContextualbarHeader>
+				<ContextualbarTitle>{customFieldData?._id ? t('Edit_Custom_Field') : t('New_Custom_Field')}</ContextualbarTitle>
+				<ContextualbarClose onClick={onClose} />
+			</ContextualbarHeader>
+			<ContextualbarScrollableContent>
+				<FormProvider {...methods}>
+					<form id={formId} onSubmit={handleSubmit(handleSave)}>
+						<FieldGroup>
+							<Field>
+								<FieldLabel htmlFor={fieldField} required>
+									{t('Field')}
+								</FieldLabel>
+								<FieldRow>
+									<Controller
+										name='field'
+										control={control}
+										rules={{
+											required: t('Required_field', { field: t('Field') }),
+											validate: (value) => (!/^[0-9a-zA-Z-_]+$/.test(value) ? t('error-invalid-custom-field-name') : undefined),
+										}}
+										render={({ field }) => (
+											<TextInput
+												id={fieldField}
+												{...field}
+												readOnly={Boolean(customFieldData?._id)}
+												aria-required={true}
+												aria-invalid={Boolean(errors.field)}
+												aria-describedby={`${fieldField}-error`}
+											/>
+										)}
+									/>
+								</FieldRow>
+								{errors?.field && (
+									<FieldError aria-live='assertive' id={`${fieldField}-error`}>
+										{errors.field.message}
+									</FieldError>
+								)}
+							</Field>
+							<Field>
+								<FieldLabel htmlFor={labelField} required>
+									{t('Label')}
+								</FieldLabel>
+								<FieldRow>
+									<Controller
+										name='label'
+										control={control}
+										rules={{ required: t('Required_field', { field: t('Label') }) }}
+										render={({ field }) => (
+											<TextInput
+												id={labelField}
+												{...field}
+												aria-required={true}
+												aria-invalid={Boolean(errors.label)}
+												aria-describedby={`${labelField}-error`}
+											/>
+										)}
+									/>
+								</FieldRow>
+								{errors?.label && (
+									<FieldError aria-live='assertive' id={`${labelField}-error`}>
+										{errors.label.message}
+									</FieldError>
+								)}
+							</Field>
+							<Field>
+								<FieldLabel htmlFor={scopeField}>{t('Scope')}</FieldLabel>
+								<FieldRow>
+									<Controller
+										name='scope'
+										control={control}
+										render={({ field }) => <Select id={scopeField} {...field} options={scopeOptions} />}
+									/>
+								</FieldRow>
+							</Field>
+							<Field>
+								<FieldRow>
+									<FieldLabel htmlFor={visibilityField}>{t('Visible')}</FieldLabel>
+									<Controller
+										name='visibility'
+										control={control}
+										render={({ field: { value, ...field } }) => <ToggleSwitch id={visibilityField} {...field} checked={value} />}
+									/>
+								</FieldRow>
+							</Field>
+							<Field>
+								<FieldRow>
+									<FieldLabel htmlFor={searchableField}>{t('Searchable')}</FieldLabel>
+									<Controller
+										name='searchable'
+										control={control}
+										render={({ field: { value, ...field } }) => <ToggleSwitch id={searchableField} {...field} checked={value} />}
+									/>
+								</FieldRow>
+							</Field>
+							<Field>
+								<FieldLabel htmlFor={regexpField}>{t('Validation')}</FieldLabel>
+								<FieldRow>
+									<Controller name='regexp' control={control} render={({ field }) => <TextInput id={regexpField} {...field} />} />
+								</FieldRow>
+							</Field>
+							{CustomFieldsAdditionalForm && <CustomFieldsAdditionalForm />}
+						</FieldGroup>
+					</form>
+				</FormProvider>
+			</ContextualbarScrollableContent>
+			<ContextualbarFooter>
+				<ButtonGroup stretch>
+					<Button onClick={onClose}>{t('Cancel')}</Button>
+					<Button form={formId} primary type='submit'>
+						{t('Save')}
+					</Button>
+				</ButtonGroup>
+				{customFieldData?._id && (
+					<Box marginBlockStart={8}>
+						<ButtonGroup stretch>
+							<Button icon='trash' danger onClick={() => handleDelete(customFieldData._id)}>
+								{t('Delete')}
+							</Button>
+						</ButtonGroup>
+					</Box>
+				)}
+			</ContextualbarFooter>
+		</>
+	);
+};
+
+export default EditCustomFields;

apps/meteor/client/views/omnichannel/customFields/EditCustomFieldsWithData.tsx

@@ -0,0 +1,31 @@
+import type { ILivechatCustomField } from '@rocket.chat/core-typings';
+import { Callout } from '@rocket.chat/fuselage';
+import { ContextualbarSkeletonBody } from '@rocket.chat/ui-client';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+
+import EditCustomFields from './EditCustomFields';
+
+const EditCustomFieldsWithData = ({ customFieldId, onClose }: { customFieldId: ILivechatCustomField['_id']; onClose: () => void }) => {
+	const { t } = useTranslation();
+
+	const getCustomFieldById = useEndpoint('GET', '/v1/livechat/custom-fields/:_id', { _id: customFieldId });
+	const { data, isPending, isError } = useQuery({
+		queryKey: ['livechat-getCustomFieldsById', customFieldId],
+		queryFn: async () => getCustomFieldById(),
+		refetchOnWindowFocus: false,
+	});
+
+	if (isPending) {
+		return <ContextualbarSkeletonBody />;
+	}
+
+	if (isError) {
+		return <Callout type='danger'>{t('Error')}</Callout>;
+	}
+
+	return <EditCustomFields customFieldData={data?.customField} onClose={onClose} />;
+};
+
+export default EditCustomFieldsWithData;

apps/meteor/client/views/omnichannel/customFields/useRemoveCustomField.tsx

@@ -0,0 +1,35 @@
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
+import { GenericModal } from '@rocket.chat/ui-client';
+import { useSetModal, useToastMessageDispatch, useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQueryClient } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+
+import { omnichannelQueryKeys } from '../../../lib/queryKeys';
+
+export const useRemoveCustomField = () => {
+	const { t } = useTranslation();
+	const setModal = useSetModal();
+	const dispatchToastMessage = useToastMessageDispatch();
+	const removeCustomField = useEndpoint('POST', '/v1/livechat/custom-fields.delete');
+	const queryClient = useQueryClient();
+
+	const handleDelete = useStableCallback((id: string) => {
+		const onDeleteAgent = async () => {
+			try {
+				await removeCustomField({ customFieldId: id });
+				dispatchToastMessage({ type: 'success', message: t('Custom_Field_Removed') });
+				queryClient.invalidateQueries({
+					queryKey: omnichannelQueryKeys.livechat.customFields(),
+				});
+			} catch (error) {
+				dispatchToastMessage({ type: 'error', message: error });
+			} finally {
+				setModal();
+			}
+		};
+
+		setModal(<GenericModal variant='danger' onConfirm={onDeleteAgent} onCancel={() => setModal()} confirmText={t('Delete')} />);
+	});
+
+	return handleDelete;
+};