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

apps/meteor/client/views/omnichannel/priorities/PrioritiesPage.tsx

@@ -0,0 +1,102 @@
+import { Button, ButtonGroup } from '@rocket.chat/fuselage';
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
+import { Page, PageHeader, PageContent } from '@rocket.chat/ui-client';
+import { useEndpoint, useRoute, useSetModal, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
+import { useQueryClient } from '@tanstack/react-query';
+import { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { PrioritiesResetModal } from './PrioritiesResetModal';
+import { PrioritiesTable } from './PrioritiesTable';
+import type { PriorityFormData } from './PriorityEditForm';
+import PriorityList from './PriorityList';
+import { useOmnichannelPriorities } from '../hooks/useOmnichannelPriorities';
+
+export type PrioritiesPageProps = {
+	priorityId: string;
+	context: 'edit' | undefined;
+};
+
+export const PrioritiesPage = ({ priorityId, context }: PrioritiesPageProps) => {
+	const { t } = useTranslation();
+	const queryClient = useQueryClient();
+	const prioritiesRoute = useRoute('omnichannel-priorities');
+
+	const dispatchToastMessage = useToastMessageDispatch();
+	const setModal = useSetModal();
+
+	const [isResetting, setResetting] = useState(false);
+
+	const savePriority = useEndpoint('PUT', `/v1/livechat/priorities/:priorityId`, { priorityId });
+	const resetPriorities = useEndpoint('POST', '/v1/livechat/priorities.reset');
+
+	const { data: priorities, isLoading } = useOmnichannelPriorities();
+
+	const isPrioritiesDirty = useMemo(() => !!priorities.length && priorities.some((p) => p.dirty), [priorities]);
+
+	const handleReset = (): void => {
+		const onReset = async (): Promise<void> => {
+			try {
+				setResetting(true);
+				setModal(null);
+
+				await resetPriorities();
+				await queryClient.invalidateQueries({
+					queryKey: ['/v1/livechat/priorities'],
+					exact: true,
+				});
+
+				prioritiesRoute.push({});
+				dispatchToastMessage({ type: 'success', message: t('Priorities_restored') });
+			} catch (error) {
+				dispatchToastMessage({ type: 'error', message: error });
+			} finally {
+				setResetting(false);
+			}
+		};
+
+		setModal(<PrioritiesResetModal onReset={onReset} onCancel={(): void => setModal(null)} />);
+	};
+
+	const onRowClick = useStableCallback((id: string): void => {
+		prioritiesRoute.push({ context: 'edit', id });
+	});
+
+	const onContextualbarClose = (): void => {
+		prioritiesRoute.push({});
+	};
+
+	const onSavePriority = async ({ reset, ...payload }: PriorityFormData): Promise<void> => {
+		await savePriority(reset ? { reset } : payload);
+		await queryClient.invalidateQueries({
+			queryKey: ['/v1/livechat/priorities'],
+		});
+
+		dispatchToastMessage({ type: 'success', message: t('Priority_saved') });
+		await queryClient.invalidateQueries({
+			queryKey: ['/v1/livechat/priorities'],
+			exact: true,
+		});
+		prioritiesRoute.push({});
+	};
+
+	return (
+		<Page flexDirection='row'>
+			<Page>
+				<PageHeader title={t('Priorities')}>
+					<ButtonGroup>
+						<Button onClick={handleReset} title={t('Reset')} disabled={!isPrioritiesDirty} loading={isResetting}>
+							{t('Reset')}
+						</Button>
+					</ButtonGroup>
+				</PageHeader>
+				<PageContent>
+					<PrioritiesTable priorities={priorities} isLoading={isLoading} onRowClick={onRowClick} />
+				</PageContent>
+			</Page>
+			{context === 'edit' && (
+				<PriorityList priorityId={priorityId} context={context} onSave={onSavePriority} onClose={onContextualbarClose} />
+			)}
+		</Page>
+	);
+};

apps/meteor/client/views/omnichannel/priorities/PrioritiesResetModal.tsx

@@ -0,0 +1,24 @@
+import { GenericModal } from '@rocket.chat/ui-client';
+import { useTranslation } from 'react-i18next';
+
+export type PrioritiesResetModalProps = {
+	onReset: () => Promise<void>;
+	onCancel: () => void;
+};
+
+export const PrioritiesResetModal = ({ onCancel, onReset }: PrioritiesResetModalProps) => {
+	const { t } = useTranslation();
+
+	return (
+		<GenericModal
+			variant='danger'
+			title={t('Reset_priorities')}
+			onConfirm={onReset}
+			onCancel={onCancel}
+			onClose={onCancel}
+			confirmText={t('Reset')}
+		>
+			{t('Are_you_sure_you_want_to_reset_the_name_of_all_priorities')}
+		</GenericModal>
+	);
+};

apps/meteor/client/views/omnichannel/priorities/PrioritiesRoute.tsx

@@ -0,0 +1,18 @@
+import { usePermission, useRouteParameter } from '@rocket.chat/ui-contexts';
+
+import { PrioritiesPage } from './PrioritiesPage';
+import NotAuthorizedPage from '../../notAuthorized/NotAuthorizedPage';
+
+const PrioritiesRoute = () => {
+	const canViewPriorities = usePermission('manage-livechat-priorities');
+	const context = useRouteParameter('context') as 'edit' | undefined;
+	const id = useRouteParameter('id') || '';
+
+	if (!canViewPriorities) {
+		return <NotAuthorizedPage />;
+	}
+
+	return <PrioritiesPage priorityId={id} context={context} />;
+};
+
+export default PrioritiesRoute;

apps/meteor/client/views/omnichannel/priorities/PrioritiesTable.tsx

@@ -0,0 +1,63 @@
+import type { ILivechatPriority, Serialized } from '@rocket.chat/core-typings';
+import {
+	GenericTable,
+	GenericTableHeaderCell,
+	GenericTableHeader,
+	GenericTableBody,
+	GenericTableLoadingTable,
+} from '@rocket.chat/ui-client';
+import { useTranslation } from 'react-i18next';
+
+import PrioritiesTableRow from './PrioritiesTableRow';
+import GenericNoResults from '../../../components/GenericNoResults';
+
+export type PrioritiesTableProps = {
+	priorities?: Serialized<ILivechatPriority>[];
+	onRowClick: (id: string) => void;
+	isLoading: boolean;
+};
+
+export const PrioritiesTable = ({ priorities, onRowClick, isLoading }: PrioritiesTableProps) => {
+	const { t } = useTranslation();
+
+	const headers = (
+		<>
+			<GenericTableHeaderCell key='icon' width='100px'>
+				{t('Icon')}
+			</GenericTableHeaderCell>
+			<GenericTableHeaderCell key='name'>{t('Name')}</GenericTableHeaderCell>
+		</>
+	);
+
+	return (
+		<>
+			{isLoading && (
+				<GenericTable>
+					<GenericTableHeader>{headers}</GenericTableHeader>
+					<GenericTableBody>
+						<GenericTableLoadingTable headerCells={2} />
+					</GenericTableBody>
+				</GenericTable>
+			)}
+			{priorities?.length === 0 && <GenericNoResults />}
+			{priorities && priorities?.length > 0 && (
+				<GenericTable aria-label={t('Priorities')}>
+					<GenericTableHeader>{headers}</GenericTableHeader>
+					<GenericTableBody>
+						{priorities?.map(({ _id, name, i18n, sortItem, dirty }) => (
+							<PrioritiesTableRow
+								key={_id}
+								id={_id}
+								name={name}
+								i18n={i18n}
+								sortItem={sortItem}
+								dirty={dirty}
+								onClick={() => onRowClick(_id)}
+							/>
+						))}
+					</GenericTableBody>
+				</GenericTable>
+			)}
+		</>
+	);
+};

apps/meteor/client/views/omnichannel/priorities/PrioritiesTableRow.spec.tsx

@@ -0,0 +1,42 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { render, screen } from '@testing-library/react';
+
+import PrioritiesTableRow from './PrioritiesTableRow';
+
+const mockedPriority = {
+	id: '1',
+	i18n: 'Highest',
+	sortItem: 1,
+	dirty: false,
+	onClick: jest.fn(),
+};
+
+const defaultContainer = document.body.appendChild(document.createElement('table')).appendChild(document.createElement('tbody'));
+
+test('should match the translation if its the default language', async () => {
+	render(<PrioritiesTableRow {...mockedPriority} />, {
+		container: defaultContainer,
+		wrapper: mockAppRoot()
+			.withDefaultLanguage('en')
+			.withTranslations('en', 'core', {
+				Highest: mockedPriority.i18n,
+			})
+			.build(),
+	});
+
+	expect(screen.queryByRole('table')).toHaveTextContent(mockedPriority.i18n);
+});
+
+test('should not match the defaultText if its not the default language', async () => {
+	render(<PrioritiesTableRow {...mockedPriority} />, {
+		container: defaultContainer,
+		wrapper: mockAppRoot()
+			.withDefaultLanguage('pt-BR')
+			.withTranslations('pt-BR', 'core', {
+				Highest: 'Muito Alta',
+			})
+			.build(),
+	});
+
+	expect(screen.queryByRole('table')).not.toHaveTextContent(mockedPriority.i18n);
+});

apps/meteor/client/views/omnichannel/priorities/PrioritiesTableRow.tsx

@@ -0,0 +1,28 @@
+import type { LivechatPriorityWeight } from '@rocket.chat/core-typings';
+import { GenericTableCell, GenericTableRow } from '@rocket.chat/ui-client';
+import { useTranslation } from 'react-i18next';
+
+import { PriorityIcon } from './PriorityIcon';
+
+export type PrioritiesTableRowProps = {
+	id: string;
+	name?: string;
+	i18n: string;
+	sortItem: LivechatPriorityWeight;
+	dirty: boolean;
+	onClick: () => void;
+};
+
+const PrioritiesTableRow = ({ id, name, i18n, sortItem, dirty, onClick }: PrioritiesTableRowProps) => {
+	const { t } = useTranslation();
+	return (
+		<GenericTableRow tabIndex={0} onClick={onClick} action qa-row-id={id}>
+			<GenericTableCell withTruncatedText>
+				<PriorityIcon level={sortItem} />
+			</GenericTableCell>
+			<GenericTableCell withTruncatedText>{dirty ? name : t(i18n)}</GenericTableCell>
+		</GenericTableRow>
+	);
+};
+
+export default PrioritiesTableRow;

apps/meteor/client/views/omnichannel/priorities/PriorityEditForm.tsx

@@ -0,0 +1,117 @@
+import type { ILivechatPriority, Serialized } from '@rocket.chat/core-typings';
+import { Field, FieldError, FieldLabel, FieldRow, TextInput, Button, ButtonGroup } from '@rocket.chat/fuselage';
+import { ContextualbarFooter, ContextualbarScrollableContent } from '@rocket.chat/ui-client';
+import type { TranslationKey } from '@rocket.chat/ui-contexts';
+import { useId } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+import { useFormSubmitWithDirtyCheck } from '../../../hooks/useFormSubmitWithDirtyCheck';
+
+export type PriorityFormData = { name: string; reset: boolean };
+
+export type PriorityEditFormProps = {
+	data: Serialized<ILivechatPriority>;
+	onSave: (values: PriorityFormData) => Promise<void>;
+};
+
+type PrioritySaveException = { success: false; error: TranslationKey | undefined };
+
+const PriorityEditForm = ({ data, onSave }: PriorityEditFormProps) => {
+	const { t } = useTranslation();
+
+	const { name, i18n, dirty } = data;
+	const defaultName = t(i18n);
+
+	const {
+		control,
+		formState: { errors, isDirty, isSubmitting },
+		setError,
+		setValue,
+		handleSubmit,
+		watch,
+	} = useForm<PriorityFormData>({
+		defaultValues: data ? { name: dirty ? name : defaultName } : {},
+	});
+
+	const currentName = watch('name');
+
+	const formId = useId();
+	const nameFieldId = useId();
+
+	const handleSave = useFormSubmitWithDirtyCheck(
+		async ({ name }: { name: string }) => {
+			try {
+				await onSave({ name, reset: name === defaultName });
+			} catch (e) {
+				const { error } = e as PrioritySaveException;
+
+				if (error) {
+					setError('name', { message: t(error) });
+				}
+			}
+		},
+		{ isDirty },
+	);
+
+	const onReset = (): void => {
+		setValue('name', defaultName, {
+			shouldDirty: true,
+			shouldValidate: true,
+		});
+	};
+
+	return (
+		<>
+			<ContextualbarScrollableContent is='form' onSubmit={handleSubmit(handleSave)} id={formId}>
+				<Field>
+					<FieldRow>
+						<FieldLabel htmlFor={nameFieldId} required>
+							{t('Name')}
+						</FieldLabel>
+					</FieldRow>
+					<FieldRow>
+						<Controller
+							name='name'
+							control={control}
+							rules={{
+								required: t('Required_field', { field: t('Name') }),
+								validate: (value: string) => value?.trim() !== '' || t('Required_field', { field: t('Name') }),
+							}}
+							render={({ field: { value, onChange } }) => (
+								<TextInput
+									id={nameFieldId}
+									value={value}
+									placeholder={t('Name')}
+									disabled={isSubmitting}
+									onChange={(e) => onChange((e.target as HTMLInputElement).value)}
+									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>
+			</ContextualbarScrollableContent>
+			<ContextualbarFooter>
+				<ButtonGroup stretch>
+					<Button onClick={onReset} disabled={currentName === defaultName}>
+						{t('Reset')}
+					</Button>
+
+					<Button primary type='submit' loading={isSubmitting} form={formId}>
+						{t('Save')}
+					</Button>
+				</ButtonGroup>
+			</ContextualbarFooter>
+		</>
+	);
+};
+
+export default PriorityEditForm;

apps/meteor/client/views/omnichannel/priorities/PriorityEditFormWithData.tsx

@@ -0,0 +1,32 @@
+import { Callout } from '@rocket.chat/fuselage';
+import { useTranslation } from 'react-i18next';
+
+import type { PriorityEditFormProps } from './PriorityEditForm';
+import PriorityEditForm from './PriorityEditForm';
+import { FormSkeleton } from '../../../components/Skeleton';
+import { usePriorityInfo } from '../directory/hooks/usePriorityInfo';
+
+export type PriorityEditFormWithDataProps = Omit<PriorityEditFormProps, 'data'> & {
+	priorityId: string;
+};
+
+function PriorityEditFormWithData({ priorityId, ...props }: PriorityEditFormWithDataProps) {
+	const { t } = useTranslation();
+	const { data, isLoading, isError } = usePriorityInfo(priorityId);
+
+	if (isLoading) {
+		return <FormSkeleton />;
+	}
+
+	if (isError || !data) {
+		return (
+			<Callout margin={16} type='danger'>
+				{t('Not_Available')}
+			</Callout>
+		);
+	}
+
+	return <PriorityEditForm {...props} data={data} />;
+}
+
+export default PriorityEditFormWithData;

apps/meteor/client/views/omnichannel/priorities/PriorityIcon.tsx

@@ -0,0 +1,20 @@
+import type { LivechatPriorityWeight } from '@rocket.chat/core-typings';
+import { Icon } from '@rocket.chat/fuselage';
+import type { ComponentProps } from 'react';
+
+import { useOmnichannelPrioritiesConfig } from '../hooks/useOmnichannelPrioritiesConfig';
+
+export type PriorityIconProps = Omit<ComponentProps<typeof Icon>, 'name' | 'color'> & {
+	level: LivechatPriorityWeight;
+	showUnprioritized?: boolean;
+};
+
+export const PriorityIcon = ({ level, size = 20, showUnprioritized = false, ...props }: PriorityIconProps) => {
+	const prioritiesConfig = useOmnichannelPrioritiesConfig(level, showUnprioritized);
+
+	if (!prioritiesConfig) {
+		return null;
+	}
+
+	return <Icon {...props} name={prioritiesConfig.iconName} color={prioritiesConfig.color} size={size} title={prioritiesConfig.name} />;
+};

apps/meteor/client/views/omnichannel/priorities/PriorityList.tsx

@@ -0,0 +1,36 @@
+import {
+	ContextualbarTitle,
+	ContextualbarHeader,
+	ContextualbarClose,
+	ContextualbarScrollableContent,
+	ContextualbarDialog,
+} from '@rocket.chat/ui-client';
+import { useTranslation } from 'react-i18next';
+
+import type { PriorityFormData } from './PriorityEditForm';
+import PriorityEditFormWithData from './PriorityEditFormWithData';
+
+export type PriorityListProps = {
+	context: 'edit';
+	priorityId: string;
+	onSave: (data: PriorityFormData) => Promise<void>;
+	onClose: () => void;
+};
+
+const PriorityList = ({ priorityId, onClose, onSave }: PriorityListProps) => {
+	const { t } = useTranslation();
+
+	return (
+		<ContextualbarDialog onClose={onClose}>
+			<ContextualbarHeader>
+				<ContextualbarTitle>{t('Edit_Priority')}</ContextualbarTitle>
+				<ContextualbarClose onClick={onClose} />
+			</ContextualbarHeader>
+			<ContextualbarScrollableContent height='100%'>
+				<PriorityEditFormWithData priorityId={priorityId} onSave={onSave} />
+			</ContextualbarScrollableContent>
+		</ContextualbarDialog>
+	);
+};
+
+export default PriorityList;