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

apps/meteor/client/views/omnichannel/units/UnitEdit.tsx

@@ -0,0 +1,286 @@
+import type {
+	ILivechatDepartment,
+	ILivechatUnitMonitor,
+	Serialized,
+	IOmnichannelBusinessUnit,
+	OmnichannelBusinessUnitPayload,
+} from '@rocket.chat/core-typings';
+import type { SelectOption } from '@rocket.chat/fuselage';
+import { FieldError, Field, TextInput, Button, Select, ButtonGroup, FieldGroup, Box, FieldLabel, FieldRow } from '@rocket.chat/fuselage';
+import {
+	ContextualbarScrollableContent,
+	ContextualbarFooter,
+	ContextualbarTitle,
+	ContextualbarHeader,
+	ContextualbarClose,
+} 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 { useForm, Controller } from 'react-hook-form';
+
+import { useFormSubmitWithDirtyCheck } from '../../../hooks/useFormSubmitWithDirtyCheck';
+import AutoCompleteDepartmentMultiple from '../components/AutoCompleteDepartmentMultiple';
+import AutoCompleteMonitors from '../components/AutoCompleteMonitors';
+
+type UnitEditFormData = {
+	name: string;
+	visibility: string;
+	departments: {
+		value: string;
+		label: string;
+	}[];
+	monitors: {
+		value: string;
+		label: string;
+	}[];
+};
+
+export type UnitEditProps = {
+	unitData?: Serialized<IOmnichannelBusinessUnit>;
+	unitMonitors?: Serialized<ILivechatUnitMonitor>[];
+	unitDepartments?: Serialized<ILivechatDepartment>[];
+	onUpdate?: (params: OmnichannelBusinessUnitPayload) => void;
+	onDelete?: () => void;
+	onClose: () => void;
+};
+
+const UnitEdit = ({ unitData, unitMonitors, unitDepartments, onUpdate, onDelete, onClose }: UnitEditProps) => {
+	const t = useTranslation();
+	const saveUnit = useEndpoint('POST', '/v1/livechat/units');
+	const dispatchToastMessage = useToastMessageDispatch();
+	const queryClient = useQueryClient();
+
+	const visibilityOpts: SelectOption[] = [
+		['public', t('Public')],
+		['private', t('Private')],
+	];
+
+	const { _id } = unitData || {};
+
+	const currUnitDepartments = useMemo(
+		() =>
+			unitDepartments?.map(({ _id, name }) => ({
+				value: _id,
+				label: name,
+			})) || [],
+		[unitDepartments],
+	);
+
+	const currUnitMonitors = useMemo(
+		() =>
+			unitMonitors?.map(({ monitorId, username }) => ({
+				value: monitorId,
+				label: username,
+			})) || [],
+		[unitMonitors],
+	);
+
+	const {
+		control,
+		formState: { errors, isDirty },
+		handleSubmit,
+		watch,
+	} = useForm<UnitEditFormData>({
+		values: {
+			name: unitData?.name || '',
+			visibility: unitData?.visibility || '',
+			departments: currUnitDepartments,
+			monitors: currUnitMonitors,
+		},
+	});
+
+	const { departments, monitors } = watch();
+
+	const handleSave = useFormSubmitWithDirtyCheck(
+		async ({ name, visibility }: UnitEditFormData) => {
+			const departmentsData = departments.map((department) => ({ departmentId: department.value }));
+
+			const monitorsData = monitors.map((monitor) => ({
+				monitorId: monitor.value,
+				username: monitor.label,
+			}));
+
+			const payload = {
+				unitData: { name, visibility },
+				unitMonitors: monitorsData,
+				unitDepartments: departmentsData,
+			};
+
+			try {
+				if (_id && onUpdate) {
+					await onUpdate(payload);
+				} else {
+					await saveUnit(payload);
+				}
+
+				dispatchToastMessage({ type: 'success', message: t('Saved') });
+				queryClient.invalidateQueries({
+					queryKey: ['livechat-units'],
+				});
+				onClose();
+			} catch (error) {
+				dispatchToastMessage({ type: 'error', message: error });
+			}
+		},
+		{ isDirty },
+	);
+
+	const formId = useId();
+	const nameField = useId();
+	const visibilityField = useId();
+	const departmentsField = useId();
+	const monitorsField = useId();
+
+	return (
+		<>
+			<ContextualbarHeader>
+				<ContextualbarTitle>{_id ? t('Edit_Unit') : t('New_Unit')}</ContextualbarTitle>
+				<ContextualbarClose onClick={onClose}></ContextualbarClose>
+			</ContextualbarHeader>
+			<ContextualbarScrollableContent>
+				<Box id={formId} is='form' autoComplete='off' onSubmit={handleSubmit(handleSave)}>
+					<FieldGroup>
+						<Field>
+							<FieldLabel htmlFor={nameField} required>
+								{t('Name')}
+							</FieldLabel>
+							<FieldRow>
+								<Controller
+									name='name'
+									control={control}
+									rules={{ required: t('Required_field', { field: t('Name') }) }}
+									render={({ field }) => (
+										<TextInput
+											id={nameField}
+											{...field}
+											error={errors?.name?.message}
+											aria-describedby={`${nameField}-error`}
+											aria-required={true}
+											aria-invalid={Boolean(errors?.name)}
+										/>
+									)}
+								/>
+							</FieldRow>
+							{errors?.name && (
+								<FieldError role='alert' id={`${nameField}-error`}>
+									{errors?.name.message}
+								</FieldError>
+							)}
+						</Field>
+						<Field>
+							<FieldLabel htmlFor={visibilityField} required>
+								{t('Visibility')}
+							</FieldLabel>
+							<FieldRow>
+								<Controller
+									name='visibility'
+									control={control}
+									rules={{ required: t('Required_field', { field: t('Visibility') }) }}
+									render={({ field }) => (
+										<Select
+											id={visibilityField}
+											{...field}
+											options={visibilityOpts}
+											error={errors?.visibility?.message}
+											placeholder={t('Select_an_option')}
+											aria-describedby={`${visibilityField}-error`}
+											aria-required={true}
+											aria-invalid={Boolean(errors?.visibility)}
+										/>
+									)}
+								/>
+							</FieldRow>
+							{errors?.visibility && (
+								<FieldError role='alert' id={`${visibilityField}-error`}>
+									{errors?.visibility.message}
+								</FieldError>
+							)}
+						</Field>
+						<Field>
+							<FieldLabel id={departmentsField} required>
+								{t('Departments')}
+							</FieldLabel>
+							<FieldRow>
+								<Controller
+									name='departments'
+									control={control}
+									rules={{ required: t('Required_field', { field: t('Departments') }) }}
+									render={({ field: { name, value, onChange, onBlur } }) => (
+										<AutoCompleteDepartmentMultiple
+											withCheckbox
+											name={name}
+											value={value}
+											unitId={unitData?._id}
+											error={Boolean(errors?.departments)}
+											aria-describedby={`${departmentsField}-error`}
+											aria-required={true}
+											aria-labelledby={departmentsField}
+											aria-invalid={Boolean(errors?.departments)}
+											onChange={onChange}
+											onBlur={onBlur}
+										/>
+									)}
+								/>
+							</FieldRow>
+							{errors?.departments && (
+								<FieldError role='alert' id={`${departmentsField}-error`}>
+									{errors?.departments.message}
+								</FieldError>
+							)}
+						</Field>
+						<Field>
+							<FieldLabel id={monitorsField} required>
+								{t('Monitors')}
+							</FieldLabel>
+							<FieldRow>
+								<Controller
+									name='monitors'
+									control={control}
+									rules={{ required: t('Required_field', { field: t('Monitors') }) }}
+									render={({ field: { name, value, onChange, onBlur } }) => (
+										<AutoCompleteMonitors
+											name={name}
+											value={value}
+											error={Boolean(errors?.monitors)}
+											aria-describedby={`${monitorsField}-error`}
+											aria-required={true}
+											aria-invalid={Boolean(errors?.monitors)}
+											aria-labelledby={monitorsField}
+											onChange={onChange}
+											onBlur={onBlur}
+										/>
+									)}
+								/>
+							</FieldRow>
+							{errors?.monitors && (
+								<FieldError role='alert' id={`${monitorsField}-error`}>
+									{errors?.monitors.message}
+								</FieldError>
+							)}
+						</Field>
+					</FieldGroup>
+				</Box>
+			</ContextualbarScrollableContent>
+			<ContextualbarFooter>
+				<ButtonGroup stretch>
+					<Button onClick={onClose}>{t('Cancel')}</Button>
+					<Button form={formId} type='submit' primary>
+						{t('Save')}
+					</Button>
+				</ButtonGroup>
+				{_id && (
+					<Box marginBlockStart={8}>
+						<ButtonGroup stretch>
+							<Button icon='trash' danger onClick={() => onDelete?.()}>
+								{t('Delete')}
+							</Button>
+						</ButtonGroup>
+					</Box>
+				)}
+			</ContextualbarFooter>
+		</>
+	);
+};
+
+export default UnitEdit;