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

apps/meteor/client/views/omnichannel/slaPolicies/RemoveSlaButton.tsx

@@ -0,0 +1,41 @@
+import { IconButton } from '@rocket.chat/fuselage';
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
+import { GenericModal, GenericTableCell } from '@rocket.chat/ui-client';
+import { useRoute, useEndpoint, useSetModal, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
+import type { MouseEvent } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const RemoveSlaButton = ({ _id, reload }: { _id: string; reload: () => void }) => {
+	const { t } = useTranslation();
+	const setModal = useSetModal();
+	const slaRoute = useRoute('omnichannel-sla-policies');
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	const removeSLA = useEndpoint('DELETE', `/v1/livechat/sla/:slaId`, { slaId: _id });
+
+	const handleDelete = useStableCallback((e: MouseEvent) => {
+		e.stopPropagation();
+		const onDeleteAgent = async (): Promise<void> => {
+			try {
+				await removeSLA();
+				dispatchToastMessage({ type: 'success', message: t('SLA_removed') });
+				reload();
+				slaRoute.push({});
+			} catch (error) {
+				dispatchToastMessage({ type: 'error', message: error });
+			} finally {
+				setModal();
+			}
+		};
+
+		setModal(<GenericModal variant='danger' onConfirm={onDeleteAgent} onCancel={(): void => setModal()} confirmText={t('Delete')} />);
+	});
+
+	return (
+		<GenericTableCell fontScale='p2' color='hint' withTruncatedText>
+			<IconButton icon='trash' small title={t('Remove')} onClick={handleDelete} />
+		</GenericTableCell>
+	);
+};
+
+export default RemoveSlaButton;

apps/meteor/client/views/omnichannel/slaPolicies/SlaEdit.tsx

@@ -0,0 +1,154 @@
+import type { IOmnichannelServiceLevelAgreements, Serialized } from '@rocket.chat/core-typings';
+import { Field, FieldLabel, FieldRow, FieldError, TextInput, Button, NumberInput, ButtonGroup } from '@rocket.chat/fuselage';
+import { ContextualbarFooter, ContextualbarScrollableContent } from '@rocket.chat/ui-client';
+import { useToastMessageDispatch, useRoute, useTranslation, useEndpoint } from '@rocket.chat/ui-contexts';
+import { useId } from 'react';
+import { useController, useForm } from 'react-hook-form';
+
+import { useFormSubmitWithDirtyCheck } from '../../../hooks/useFormSubmitWithDirtyCheck';
+
+export type SlaEditProps = {
+	isNew?: boolean;
+	slaId?: string;
+	reload: () => void;
+	data?: Serialized<IOmnichannelServiceLevelAgreements>;
+};
+
+type SlaEditFormData = {
+	name: string;
+	description?: string;
+	dueTimeInMinutes: number;
+};
+
+function SlaEdit({ data, isNew, slaId, reload, ...props }: SlaEditProps) {
+	const slasRoute = useRoute('omnichannel-sla-policies');
+	const saveSLA = useEndpoint('POST', '/v1/livechat/sla');
+	const updateSLA = useEndpoint('PUT', `/v1/livechat/sla/:slaId`, { slaId: slaId || '' });
+	const dispatchToastMessage = useToastMessageDispatch();
+	const t = useTranslation();
+
+	const {
+		control,
+		formState: { errors, isDirty },
+		handleSubmit,
+		reset,
+	} = useForm<SlaEditFormData>({
+		defaultValues: {
+			name: data?.name || '',
+			description: data?.description || '',
+			dueTimeInMinutes: data?.dueTimeInMinutes || 0,
+		},
+	});
+
+	const { field: nameField } = useController({
+		control,
+		name: 'name',
+		rules: { required: t('Required_field', { field: t('Name') }) },
+	});
+
+	const { field: dueTimeField } = useController({
+		control,
+		name: 'dueTimeInMinutes',
+		rules: {
+			validate(value) {
+				return Number(value || 0) <= 0 ? t('Required_field', { field: t('Estimated_wait_time_in_minutes') }) : true;
+			},
+		},
+	});
+
+	const { field: descField } = useController({ control, name: 'description' });
+
+	const formId = useId();
+	const nameFieldId = useId();
+	const descFieldId = useId();
+	const dueTimeFieldId = useId();
+
+	const handleSave = useFormSubmitWithDirtyCheck(
+		async ({ name, description, dueTimeInMinutes }: SlaEditFormData) => {
+			try {
+				const payload = { name, description, dueTimeInMinutes: Number(dueTimeInMinutes) };
+				if (slaId) {
+					await updateSLA(payload);
+				} else {
+					await saveSLA(payload);
+				}
+
+				dispatchToastMessage({ type: 'success', message: t('Saved') });
+				reload();
+				slasRoute.push({});
+			} catch (error) {
+				dispatchToastMessage({ type: 'error', message: error });
+			}
+		},
+		{ isDirty },
+	);
+
+	return (
+		<>
+			<ContextualbarScrollableContent is='form' onSubmit={handleSubmit(handleSave)} id={formId} {...props}>
+				<Field>
+					<FieldLabel required htmlFor={nameFieldId}>
+						{t('Name')}
+					</FieldLabel>
+					<FieldRow>
+						<TextInput
+							id={nameFieldId}
+							placeholder={t('Name')}
+							flexGrow={1}
+							{...nameField}
+							aria-describedby={`${nameFieldId}-error`}
+							aria-invalid={Boolean(errors.name?.message)}
+							error={errors.name?.message}
+						/>
+					</FieldRow>
+					{errors.name && (
+						<FieldError role='alert' id={`${nameFieldId}-error`}>
+							{errors.name.message}
+						</FieldError>
+					)}
+				</Field>
+				<Field>
+					<FieldLabel htmlFor={descFieldId}>{t('Description')}</FieldLabel>
+					<FieldRow>
+						<TextInput id={descFieldId} placeholder={t('Description')} flexGrow={1} {...descField} />
+					</FieldRow>
+				</Field>
+				<Field>
+					<FieldLabel required htmlFor={dueTimeFieldId}>
+						{t('Estimated_wait_time_in_minutes')}
+					</FieldLabel>
+					<FieldRow>
+						<NumberInput
+							id={dueTimeFieldId}
+							placeholder={t('Estimated_wait_time_in_minutes')}
+							flexGrow={1}
+							{...dueTimeField}
+							aria-describedby={`${dueTimeFieldId}-error`}
+							aria-invalid={Boolean(errors.dueTimeInMinutes?.message)}
+							error={errors.dueTimeInMinutes?.message}
+						/>
+					</FieldRow>
+					{errors.dueTimeInMinutes && (
+						<FieldError role='alert' id={`${dueTimeFieldId}-error`}>
+							{errors.dueTimeInMinutes.message}
+						</FieldError>
+					)}
+				</Field>
+			</ContextualbarScrollableContent>
+			<ContextualbarFooter>
+				<ButtonGroup stretch>
+					{!isNew && (
+						<Button flexGrow={1} type='reset' disabled={!isDirty} onClick={(): void => reset()}>
+							{t('Reset')}
+						</Button>
+					)}
+					<Button primary marginInlineEnd='none' type='submit' flexGrow={1} form={formId}>
+						{t('Save')}
+					</Button>
+				</ButtonGroup>
+			</ContextualbarFooter>
+		</>
+	);
+}
+
+export default SlaEdit;

apps/meteor/client/views/omnichannel/slaPolicies/SlaEditWithData.tsx

@@ -0,0 +1,37 @@
+import { Callout } from '@rocket.chat/fuselage';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+
+import SlaEdit from './SlaEdit';
+import { FormSkeleton } from '../../../components/Skeleton';
+
+type SlaEditProps = {
+	slaId: string;
+	reload: () => void;
+};
+
+function SlaEditWithData({ slaId, reload }: SlaEditProps) {
+	const getSLA = useEndpoint('GET', `/v1/livechat/sla/:slaId`, { slaId });
+	const { data, isPending, isError } = useQuery({
+		queryKey: ['/v1/livechat/sla', slaId],
+		queryFn: () => getSLA(),
+	});
+	const { t } = useTranslation();
+
+	if (isPending) {
+		return <FormSkeleton />;
+	}
+
+	if (isError || !data) {
+		return (
+			<Callout margin={16} type='danger'>
+				{t('Not_Available')}
+			</Callout>
+		);
+	}
+
+	return <SlaEdit slaId={slaId} data={data} reload={reload} />;
+}
+
+export default SlaEditWithData;

apps/meteor/client/views/omnichannel/slaPolicies/SlaNew.tsx

@@ -0,0 +1,7 @@
+import SlaEdit from './SlaEdit';
+
+function SlaNew({ reload }: { reload: () => void }) {
+	return <SlaEdit isNew reload={reload} />;
+}
+
+export default SlaNew;

apps/meteor/client/views/omnichannel/slaPolicies/SlaPage.tsx

@@ -0,0 +1,71 @@
+import { Button, ButtonGroup } from '@rocket.chat/fuselage';
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
+import {
+	ContextualbarTitle,
+	ContextualbarHeader,
+	ContextualbarClose,
+	ContextualbarDialog,
+	Page,
+	PageHeader,
+	PageContent,
+} from '@rocket.chat/ui-client';
+import { useRouteParameter, useRoute } from '@rocket.chat/ui-contexts';
+import { useRef, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import SlaEditWithData from './SlaEditWithData';
+import SlaNew from './SlaNew';
+import SlaTable from './SlaTable';
+
+const SlaPage = () => {
+	const { t } = useTranslation();
+	const reload = useRef(() => null);
+
+	const slaPoliciesRoute = useRoute('omnichannel-sla-policies');
+	const context = useRouteParameter('context');
+	const id = useRouteParameter('id');
+
+	const handleReload = useCallback(() => {
+		reload.current();
+	}, []);
+
+	const handleClick = useStableCallback(() =>
+		slaPoliciesRoute.push({
+			context: 'new',
+		}),
+	);
+
+	const handleCloseContextualbar = (): void => {
+		slaPoliciesRoute.push({});
+	};
+
+	return (
+		<Page flexDirection='row'>
+			<Page>
+				<PageHeader title={t('SLA_Policies')}>
+					<ButtonGroup>
+						<Button onClick={handleClick}>{t('Create_SLA_policy')}</Button>
+					</ButtonGroup>
+				</PageHeader>
+				<PageContent>
+					<SlaTable reload={reload} />
+				</PageContent>
+			</Page>
+			{context && (
+				<ContextualbarDialog onClose={handleCloseContextualbar}>
+					<ContextualbarHeader>
+						<ContextualbarTitle>
+							{context === 'edit' && t('Edit_SLA_Policy')}
+							{context === 'new' && t('New_SLA_Policy')}
+						</ContextualbarTitle>
+						<ContextualbarClose onClick={handleCloseContextualbar} />
+					</ContextualbarHeader>
+					{context === 'edit' && id && <SlaEditWithData slaId={id} reload={handleReload} />}
+					{context === 'new' && <SlaNew reload={handleReload} />}
+				</ContextualbarDialog>
+			)}
+		</Page>
+	);
+};
+
+export default SlaPage;

apps/meteor/client/views/omnichannel/slaPolicies/SlaRoute.tsx

@@ -0,0 +1,16 @@
+import { usePermission } from '@rocket.chat/ui-contexts';
+
+import SlaPage from './SlaPage';
+import NotAuthorizedPage from '../../notAuthorized/NotAuthorizedPage';
+
+const SlaRoute = () => {
+	const canViewSlas = usePermission('manage-livechat-sla');
+
+	if (!canViewSlas) {
+		return <NotAuthorizedPage />;
+	}
+
+	return <SlaPage />;
+};
+
+export default SlaRoute;

apps/meteor/client/views/omnichannel/slaPolicies/SlaTable.tsx

@@ -0,0 +1,148 @@
+import { Pagination } from '@rocket.chat/fuselage';
+import { useDebouncedValue, useStableCallback } from '@rocket.chat/fuselage-hooks';
+import {
+	GenericTable,
+	GenericTableHeaderCell,
+	GenericTableHeader,
+	GenericTableLoadingRow,
+	GenericTableBody,
+	GenericTableRow,
+	GenericTableCell,
+	usePagination,
+	useSort,
+} from '@rocket.chat/ui-client';
+import { useTranslation, useEndpoint, useRouter } from '@rocket.chat/ui-contexts';
+import { useQuery, hashKey } from '@tanstack/react-query';
+import type { MutableRefObject } from 'react';
+import { useMemo, useState, useEffect } from 'react';
+
+import RemoveSlaButton from './RemoveSlaButton';
+import FilterByText from '../../../components/FilterByText';
+import GenericNoResults from '../../../components/GenericNoResults/GenericNoResults';
+import { links } from '../../../lib/links';
+
+const SlaTable = ({ reload }: { reload: MutableRefObject<() => void> }) => {
+	const t = useTranslation();
+	const router = useRouter();
+
+	const [filter, setFilter] = useState('');
+
+	const { current, itemsPerPage, setItemsPerPage: onSetItemsPerPage, setCurrent: onSetCurrent, ...paginationProps } = usePagination();
+	const { sortBy, sortDirection, setSort } = useSort<'name' | 'description' | 'dueTimeInMinutes'>('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 getSlaData = useEndpoint('GET', '/v1/livechat/sla');
+	const { data, isSuccess, isLoading, refetch } = useQuery({
+		queryKey: ['/v1/livechat/sla', query],
+		queryFn: () => getSlaData(query),
+	});
+
+	const [defaultQuery] = useState(hashKey([query]));
+	const queryHasChanged = defaultQuery !== hashKey([query]);
+
+	useEffect(() => {
+		reload.current = refetch;
+	}, [reload, refetch]);
+
+	const handleAddNew = useStableCallback(() => router.navigate('/omnichannel/sla-policies/new'));
+	const onRowClick = useStableCallback((id: string) => () => router.navigate(`/omnichannel/sla-policies/edit/${id}`));
+
+	const headers = (
+		<>
+			<GenericTableHeaderCell key='name' direction={sortDirection} active={sortBy === 'name'} onClick={setSort} sort='name'>
+				{t('Name')}
+			</GenericTableHeaderCell>
+			<GenericTableHeaderCell
+				key='description'
+				direction={sortDirection}
+				active={sortBy === 'description'}
+				onClick={setSort}
+				sort='description'
+			>
+				{t('Description')}
+			</GenericTableHeaderCell>
+			<GenericTableHeaderCell
+				key='dueTimeInMinutes'
+				direction={sortDirection}
+				active={sortBy === 'dueTimeInMinutes'}
+				onClick={setSort}
+				sort='dueTimeInMinutes'
+			>
+				{t('Estimated_wait_time')}
+			</GenericTableHeaderCell>
+			<GenericTableHeaderCell key='remove' width='x60'>
+				{t('Remove')}
+			</GenericTableHeaderCell>
+		</>
+	);
+
+	return (
+		<>
+			{((isSuccess && data?.sla.length > 0) || queryHasChanged) && (
+				<FilterByText value={filter} onChange={(event) => setFilter(event.target.value)} />
+			)}
+			{isLoading && (
+				<GenericTable>
+					<GenericTableHeader>{headers}</GenericTableHeader>
+					<GenericTableBody>
+						<GenericTableLoadingRow cols={4} />
+					</GenericTableBody>
+				</GenericTable>
+			)}
+			{isSuccess && data?.sla.length === 0 && queryHasChanged && <GenericNoResults />}
+			{isSuccess && data?.sla.length === 0 && !queryHasChanged && (
+				<GenericNoResults
+					icon='flag'
+					title={t('No_SLA_policies_yet')}
+					description={t('No_SLA_policies_yet_description')}
+					buttonTitle={t('Create_SLA_policy')}
+					buttonAction={handleAddNew}
+					linkHref={links.go.omnichannelDocs}
+					linkText={t('Learn_more_about_SLA_policies')}
+				/>
+			)}
+			{isSuccess && data?.sla.length > 0 && (
+				<>
+					<GenericTable aria-label={t('SLA_Policies')}>
+						<GenericTableHeader>{headers}</GenericTableHeader>
+						<GenericTableBody>
+							{data?.sla.map(({ _id, name, description, dueTimeInMinutes }) => (
+								<GenericTableRow key={_id} tabIndex={0} onClick={onRowClick(_id)} action>
+									<GenericTableCell withTruncatedText>{name}</GenericTableCell>
+									<GenericTableCell withTruncatedText>{description}</GenericTableCell>
+									<GenericTableCell withTruncatedText>
+										{dueTimeInMinutes} {t('minutes')}
+									</GenericTableCell>
+									<RemoveSlaButton _id={_id} reload={refetch} />
+								</GenericTableRow>
+							))}
+						</GenericTableBody>
+					</GenericTable>
+					<Pagination
+						divider
+						current={current}
+						itemsPerPage={itemsPerPage}
+						count={data?.total || 0}
+						onSetItemsPerPage={onSetItemsPerPage}
+						onSetCurrent={onSetCurrent}
+						{...paginationProps}
+					/>
+				</>
+			)}
+		</>
+	);
+};
+
+export default SlaTable;