Chore: fix e2e Omnichannel tests

apps/meteor/client/components/GenericTable/V2/GenericTable.tsx

@@ -1,19 +1,20 @@
 import { Box, Table } from '@rocket.chat/fuselage';
-import type { ReactNode } from 'react';
+import type { ReactNode, TableHTMLAttributes } from 'react';
 import React, { forwardRef } from 'react';
 
 import ScrollableContentWrapper from '../../ScrollableContentWrapper';
 
 type GenericTableProps = {
 	fixed?: boolean;
 	children: ReactNode;
-};
+} & TableHTMLAttributes<HTMLTableElement>;
 
-export const GenericTable = forwardRef<HTMLElement, GenericTableProps>(function GenericTable({ fixed = true, children }, ref) {
+export const GenericTable = forwardRef<HTMLElement, GenericTableProps>(function GenericTable({ fixed = true, children, ...props }, ref) {
 	return (
 		<Box mi='neg-x24' pi='x24' flexShrink={1} flexGrow={1} ref={ref} overflow='hidden'>
 			<ScrollableContentWrapper overflowX>
-				<Table fixed={fixed} sticky>
+				{/* TODO: Fix fuselage */}
+				<Table fixed={fixed} sticky {...(props as any)}>
 					{children}
 				</Table>
 			</ScrollableContentWrapper>

apps/meteor/client/views/omnichannel/departments/DepartmentsPageWithData.tsx

@@ -3,7 +3,7 @@ import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 import { useEndpoint } from '@rocket.chat/ui-contexts';
 import { useQuery } from '@tanstack/react-query';
 import type { ReactElement } from 'react';
-import React, { useMemo, useState } from 'react';
+import React, { useState } from 'react';
 
 import FilterByText from '../../../components/FilterByText';
 import { usePagination } from '../../../components/GenericTable/hooks/usePagination';
@@ -13,34 +13,41 @@ import DepartmentsTable from './DepartmentsTable';
 
 const DepartmentsPageWithData = (): ReactElement => {
 	const [text, setText] = useState('');
-
+	const [debouncedText = ''] = useDebouncedValue(text, 500);
 	const pagination = usePagination();
 	const sort = useSort<'name' | 'email' | 'active'>('name');
 
-	const query = useDebouncedValue(
-		useMemo(() => {
-			return {
-				onlyMyDepartments: 'true' as const,
-				text,
+	const getDepartments = useEndpoint('GET', '/v1/livechat/department');
+
+	const result = useQuery(
+		['omnichannel', 'departments', debouncedText, pagination, sort],
+		() =>
+			getDepartments({
+				onlyMyDepartments: 'true',
+				text: debouncedText,
 				sort: JSON.stringify({ [sort.sortBy]: sort.sortDirection === 'asc' ? 1 : -1 }),
 				...(pagination.current && { offset: pagination.current }),
 				...(pagination.itemsPerPage && { count: pagination.itemsPerPage }),
-				fields: JSON.stringify({ name: 1, username: 1, emails: 1, avatarETag: 1 }),
-			};
-		}, [pagination, sort.sortBy, sort.sortDirection, text]),
-		500,
+			}),
+		{
+			keepPreviousData: true,
+		},
 	);
 
-	const getDepartments = useEndpoint('GET', '/v1/livechat/department');
-
-	const { data, isLoading } = useQuery(['omnichannel', 'departments', query], () => getDepartments(query));
-
 	const removeButton = (dep: Omit<ILivechatDepartment, '_updatedAt'>) => <DepartmentItemMenu dep={dep} />;
 
 	return (
 		<>
 			<FilterByText onChange={({ text }): void => setText(text)} />
-			<DepartmentsTable data={data} sort={sort} pagination={pagination} removeButton={removeButton} loading={isLoading}></DepartmentsTable>
+			<DepartmentsTable
+				aria-busy={text !== debouncedText}
+				aria-live='assertive'
+				data={result.data}
+				sort={sort}
+				pagination={pagination}
+				removeButton={removeButton}
+				loading={result.isLoading && result.isInitialLoading}
+			></DepartmentsTable>
 		</>
 	);
 };

apps/meteor/client/views/omnichannel/departments/DepartmentsTable.tsx

@@ -1,7 +1,7 @@
 import type { ILivechatDepartment } from '@rocket.chat/core-typings';
 import { Pagination } from '@rocket.chat/fuselage';
 import { useTranslation } from '@rocket.chat/ui-contexts';
-import type { ReactElement } from 'react';
+import type { ReactElement, TableHTMLAttributes } from 'react';
 import React, { useMemo } from 'react';
 
 import {
@@ -20,9 +20,9 @@ type DepartmentsTableProps = {
 	pagination: any;
 	sort: any;
 	loading: boolean;
-};
+} & TableHTMLAttributes<HTMLTableElement>;
 
-function DepartmentsTable({ data, removeButton, pagination, sort, loading }: DepartmentsTableProps) {
+function DepartmentsTable({ data, removeButton, pagination, sort, loading, ...props }: DepartmentsTableProps) {
 	const t = useTranslation();
 
 	const { departments } = data || {};
@@ -46,14 +46,14 @@ function DepartmentsTable({ data, removeButton, pagination, sort, loading }: Dep
 			<GenericTableHeaderCell key='showOnRegistration' direction={sortDirection} active={sortBy === 'showOnRegistration'} onClick={setSort}>
 				{t('Show_on_registration_page')}
 			</GenericTableHeaderCell>,
-			<GenericTableHeaderCell w={40} />,
+			<GenericTableHeaderCell key='spacer' w={40} />,
 		],
 		[setSort, sortBy, sortDirection, t],
 	);
 
 	return (
 		<>
-			<GenericTable>
+			<GenericTable {...props}>
 				<GenericTableHeader>{headers}</GenericTableHeader>
 				<GenericTableBody>
 					{departments && !loading ? (

packages/rest-typings/src/v1/omnichannel.ts

@@ -525,10 +525,6 @@ const LivechatDepartmentSchema = {
 			type: 'string',
 			nullable: true,
 		},
-		fields: {
-			type: 'string',
-			nullable: true,
-		},
 	},
 	additionalProperties: false,
 };