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

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;