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;

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

@@ -0,0 +1,72 @@
+import type { IOmnichannelBusinessUnit } 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 UnitEdit from './UnitEdit';
+import { useRemoveUnit } from './useRemoveUnit';
+
+const UnitEditWithData = ({ unitId, onClose }: { unitId: IOmnichannelBusinessUnit['_id']; onClose: () => void }) => {
+	const { t } = useTranslation();
+
+	const getUnitById = useEndpoint('GET', '/v1/livechat/units/:id', { id: unitId });
+	const getMonitorsByUnitId = useEndpoint('GET', '/v1/livechat/units/:unitId/monitors', { unitId });
+	const getDepartmentsByUnitId = useEndpoint('GET', '/v1/livechat/units/:unitId/departments', { unitId });
+	const editUnit = useEndpoint('POST', '/v1/livechat/units/:id', { id: unitId });
+	const removeUnit = useRemoveUnit(unitId);
+
+	const {
+		data: unitData,
+		isError,
+		isLoading,
+	} = useQuery({
+		queryKey: ['livechat-getUnitById', unitId],
+		queryFn: async () => getUnitById(),
+		refetchOnWindowFocus: false,
+	});
+	const {
+		data: unitMonitors,
+		isError: unitMonitorsError,
+		isLoading: unitMonitorsLoading,
+	} = useQuery({
+		queryKey: ['livechat-getMonitorsByUnitId', unitId],
+		queryFn: async () => getMonitorsByUnitId({ unitId }),
+		refetchOnWindowFocus: false,
+	});
+	const {
+		data: unitDepartments,
+		isError: unitDepartmentsError,
+		isLoading: unitDepartmentsLoading,
+	} = useQuery({
+		queryKey: ['livechat-getDepartmentsByUnitId', unitId],
+		queryFn: async () => getDepartmentsByUnitId({ unitId }),
+		refetchOnWindowFocus: false,
+	});
+
+	if (isLoading || unitMonitorsLoading || unitDepartmentsLoading) {
+		return <ContextualbarSkeletonBody />;
+	}
+
+	if (isError || unitMonitorsError || unitDepartmentsError) {
+		return (
+			<Callout margin={16} type='danger'>
+				{t('Not_Available')}
+			</Callout>
+		);
+	}
+
+	return (
+		<UnitEdit
+			unitData={unitData}
+			unitMonitors={unitMonitors?.monitors}
+			unitDepartments={unitDepartments?.departments}
+			onUpdate={editUnit}
+			onDelete={removeUnit}
+			onClose={onClose}
+		/>
+	);
+};
+
+export default UnitEditWithData;

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

@@ -0,0 +1,37 @@
+import { IconButton } from '@rocket.chat/fuselage';
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
+import { GenericTableCell, GenericTableRow } from '@rocket.chat/ui-client';
+import { useRouter } from '@rocket.chat/ui-contexts';
+import { useTranslation } from 'react-i18next';
+
+import { useRemoveUnit } from './useRemoveUnit';
+
+export type UnitsTableRowProps = { _id: string; name: string; visibility: string };
+
+const UnitsTableRow = ({ _id, name, visibility }: UnitsTableRowProps) => {
+	const { t } = useTranslation();
+	const router = useRouter();
+
+	const onRowClick = useStableCallback((id: string) => () => router.navigate(`/omnichannel/units/edit/${id}`));
+	const handleDelete = useRemoveUnit(_id);
+
+	return (
+		<GenericTableRow key={_id} tabIndex={0} onClick={onRowClick(_id)} action>
+			<GenericTableCell withTruncatedText>{name}</GenericTableCell>
+			<GenericTableCell withTruncatedText>{visibility}</GenericTableCell>
+			<GenericTableCell>
+				<IconButton
+					icon='trash'
+					small
+					title={t('Remove')}
+					onClick={(e) => {
+						e.stopPropagation();
+						handleDelete();
+					}}
+				/>
+			</GenericTableCell>
+		</GenericTableRow>
+	);
+};
+
+export default UnitsTableRow;

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

@@ -0,0 +1,43 @@
+import { Button, ButtonGroup } from '@rocket.chat/fuselage';
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
+import { ContextualbarDialog, Page, PageHeader, PageContent } from '@rocket.chat/ui-client';
+import { useTranslation, useRouteParameter, useRouter } from '@rocket.chat/ui-contexts';
+
+import UnitEdit from './UnitEdit';
+import UnitEditWithData from './UnitEditWithData';
+import UnitsTable from './UnitsTable';
+
+const UnitsPage = () => {
+	const t = useTranslation();
+	const router = useRouter();
+
+	const context = useRouteParameter('context');
+	const id = useRouteParameter('id');
+
+	const handleCloseContextualbar = useStableCallback(() => router.navigate('/omnichannel/units'));
+
+	return (
+		<Page flexDirection='row'>
+			<Page>
+				<PageHeader title={t('Units')}>
+					<ButtonGroup>
+						<Button onClick={() => router.navigate('/omnichannel/units/new')} title={t('New_Unit')}>
+							{t('Create_unit')}
+						</Button>
+					</ButtonGroup>
+				</PageHeader>
+				<PageContent>
+					<UnitsTable />
+				</PageContent>
+			</Page>
+			{context && (
+				<ContextualbarDialog onClose={handleCloseContextualbar}>
+					{context === 'edit' && id && <UnitEditWithData unitId={id} onClose={handleCloseContextualbar} />}
+					{context === 'new' && <UnitEdit onClose={handleCloseContextualbar} />}
+				</ContextualbarDialog>
+			)}
+		</Page>
+	);
+};
+
+export default UnitsPage;

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

@@ -0,0 +1,18 @@
+import { usePermission } from '@rocket.chat/ui-contexts';
+
+import UnitsPage from './UnitsPage';
+import { useHasLicenseModule } from '../../../hooks/useHasLicenseModule';
+import NotAuthorizedPage from '../../notAuthorized/NotAuthorizedPage';
+
+const UnitsRoute = () => {
+	const canViewUnits = usePermission('manage-livechat-units');
+	const { data: isEnterprise = false } = useHasLicenseModule('livechat-enterprise');
+
+	if (!(isEnterprise && canViewUnits)) {
+		return <NotAuthorizedPage />;
+	}
+
+	return <UnitsPage />;
+};
+
+export default UnitsRoute;

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

@@ -0,0 +1,122 @@
+import { Pagination } from '@rocket.chat/fuselage';
+import { useDebouncedValue, useStableCallback } from '@rocket.chat/fuselage-hooks';
+import {
+	GenericTable,
+	GenericTableHeader,
+	GenericTableHeaderCell,
+	GenericTableBody,
+	GenericTableLoadingRow,
+	usePagination,
+	useSort,
+} from '@rocket.chat/ui-client';
+import { useEndpoint, useRouter } from '@rocket.chat/ui-contexts';
+import { useQuery, hashKey } from '@tanstack/react-query';
+import { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import UnitTableRow from './UnitTableRow';
+import FilterByText from '../../../components/FilterByText';
+import GenericNoResults from '../../../components/GenericNoResults/GenericNoResults';
+import { links } from '../../../lib/links';
+
+const UnitsTable = () => {
+	const { t } = useTranslation();
+	const [filter, setFilter] = useState('');
+	const router = useRouter();
+
+	const { current, itemsPerPage, setItemsPerPage: onSetItemsPerPage, setCurrent: onSetCurrent, ...paginationProps } = usePagination();
+	const { sortBy, sortDirection, setSort } = useSort<'name' | 'visibility'>('name');
+
+	const query = useDebouncedValue(
+		useMemo(
+			() => ({
+				text: filter,
+				sort: JSON.stringify({ [sortBy]: sortDirection === 'asc' ? 1 : -1 }),
+				...(itemsPerPage && { count: itemsPerPage }),
+				...(current && { offset: current }),
+			}),
+			[filter, itemsPerPage, current, sortBy, sortDirection],
+		),
+		500,
+	);
+
+	const getUnits = useEndpoint('GET', '/v1/livechat/units');
+	const { isSuccess, isLoading, data } = useQuery({
+		queryKey: ['livechat-units', query],
+		queryFn: async () => getUnits(query),
+	});
+
+	const [defaultQuery] = useState(hashKey([query]));
+	const queryHasChanged = defaultQuery !== hashKey([query]);
+
+	const handleAddNew = useStableCallback(() => router.navigate('/omnichannel/units/new'));
+
+	const headers = (
+		<>
+			<GenericTableHeaderCell key='name' direction={sortDirection} active={sortBy === 'name'} onClick={setSort} sort='name'>
+				{t('Name')}
+			</GenericTableHeaderCell>
+			<GenericTableHeaderCell
+				key='visibility'
+				direction={sortDirection}
+				active={sortBy === 'visibility'}
+				onClick={setSort}
+				sort='visibility'
+			>
+				{t('Visibility')}
+			</GenericTableHeaderCell>
+			<GenericTableHeaderCell key='remove' width='x60' />
+		</>
+	);
+
+	return (
+		<>
+			{((isSuccess && data?.units.length > 0) || queryHasChanged) && (
+				<FilterByText value={filter} onChange={(event) => setFilter(event.target.value)} />
+			)}
+			{isLoading && (
+				<GenericTable aria-busy>
+					<GenericTableHeader>{headers}</GenericTableHeader>
+					<GenericTableBody>
+						<GenericTableLoadingRow cols={3} />
+					</GenericTableBody>
+				</GenericTable>
+			)}
+			{isSuccess && data.units.length === 0 && queryHasChanged && <GenericNoResults />}
+			{isSuccess && data.units.length === 0 && !queryHasChanged && (
+				<GenericNoResults
+					icon='business'
+					title={t('No_units_yet')}
+					description={t('No_units_yet_description')}
+					linkHref={links.go.omnichannelDocs}
+					buttonAction={handleAddNew}
+					buttonTitle={t('Create_unit')}
+					linkText={t('Learn_more_about_units')}
+				/>
+			)}
+			{isSuccess && data?.units.length > 0 && (
+				<>
+					<GenericTable aria-label={t('Units')} aria-busy={isLoading}>
+						<GenericTableHeader>{headers}</GenericTableHeader>
+						<GenericTableBody>
+							{data.units.map(({ _id, name, visibility }) => (
+								<UnitTableRow key={_id} _id={_id} name={name} visibility={visibility} />
+							))}
+						</GenericTableBody>
+					</GenericTable>
+					<Pagination
+						divider
+						current={current}
+						itemsPerPage={itemsPerPage}
+						count={data?.total || 0}
+						onSetItemsPerPage={onSetItemsPerPage}
+						onSetCurrent={onSetCurrent}
+						{...paginationProps}
+					/>
+				</>
+			)}
+		</>
+	);
+};
+
+export default UnitsTable;

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

@@ -0,0 +1,35 @@
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
+import { GenericModal } from '@rocket.chat/ui-client';
+import { useSetModal, useToastMessageDispatch, useTranslation, useRouter, useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQueryClient } from '@tanstack/react-query';
+
+export const useRemoveUnit = (id: string) => {
+	const t = useTranslation();
+	const setModal = useSetModal();
+	const router = useRouter();
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	const queryClient = useQueryClient();
+	const removeUnit = useEndpoint('DELETE', '/v1/livechat/units/:id', { id });
+
+	const handleDelete = useStableCallback(() => {
+		const onDeleteAgent = async () => {
+			try {
+				await removeUnit();
+				dispatchToastMessage({ type: 'success', message: t('Unit_removed') });
+				router.navigate('/omnichannel/units');
+				queryClient.invalidateQueries({
+					queryKey: ['livechat-units'],
+				});
+			} catch (error) {
+				dispatchToastMessage({ type: 'error', message: error });
+			} finally {
+				setModal();
+			}
+		};
+
+		setModal(<GenericModal variant='danger' onConfirm={onDeleteAgent} onCancel={() => setModal()} confirmText={t('Delete')} />);
+	});
+
+	return handleDelete;
+};