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

apps/meteor/client/views/omnichannel/agents/AgentsTable/AgentsTable.tsx

@@ -0,0 +1,123 @@
+import { Pagination } from '@rocket.chat/fuselage';
+import { useDebouncedValue, useMediaQuery, useStableCallback } from '@rocket.chat/fuselage-hooks';
+import {
+	GenericTable,
+	GenericTableBody,
+	GenericTableHeader,
+	GenericTableHeaderCell,
+	GenericTableLoadingTable,
+	usePagination,
+	useSort,
+} from '@rocket.chat/ui-client';
+import { hashKey } from '@tanstack/react-query';
+import { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import AddAgent from './AddAgent';
+import AgentsTableRow from './AgentsTableRow';
+import FilterByText from '../../../../components/FilterByText';
+import GenericError from '../../../../components/GenericError';
+import GenericNoResults from '../../../../components/GenericNoResults/GenericNoResults';
+import { links } from '../../../../lib/links';
+import { useAgentsQuery } from '../hooks/useAgentsQuery';
+import { useQuery } from '../hooks/useQuery';
+
+const AgentsTable = () => {
+	const { t } = useTranslation();
+
+	const { sortBy, sortDirection, setSort } = useSort<'name' | 'username' | 'emails.address' | 'statusLivechat'>('name');
+	const [text, setText] = useState('');
+	const debouncedSort = useDebouncedValue(
+		useMemo(() => [sortBy, sortDirection], [sortBy, sortDirection]),
+		500,
+	) as ['name' | 'username' | 'emails.address' | 'statusLivechat', 'asc' | 'desc'];
+
+	const { current, itemsPerPage, setItemsPerPage, setCurrent, ...paginationProps } = usePagination();
+
+	const query = useQuery({ text, current, itemsPerPage }, debouncedSort);
+	const { data, isSuccess, isLoading, isError, refetch } = useAgentsQuery(query);
+
+	const [defaultQuery] = useState(hashKey([query]));
+	const queryHasChanged = defaultQuery !== hashKey([query]);
+
+	const onHeaderClick = useStableCallback((id: 'name' | 'username' | 'emails.address' | 'statusLivechat') => {
+		if (sortBy === id) {
+			setSort(id, sortDirection === 'asc' ? 'desc' : 'asc');
+			return;
+		}
+		setSort(id, 'asc');
+	});
+
+	const mediaQuery = useMediaQuery('(min-width: 1024px)');
+
+	const headers = (
+		<>
+			<GenericTableHeaderCell direction={sortDirection} sort='name' active={sortBy === 'name'} onClick={onHeaderClick}>
+				{t('Name')}
+			</GenericTableHeaderCell>
+			{mediaQuery && (
+				<GenericTableHeaderCell direction={sortDirection} sort='username' active={sortBy === 'username'} onClick={onHeaderClick}>
+					{t('Username')}
+				</GenericTableHeaderCell>
+			)}
+			<GenericTableHeaderCell direction={sortDirection} sort='emails.address' active={sortBy === 'emails.address'} onClick={onHeaderClick}>
+				{t('Email')}
+			</GenericTableHeaderCell>
+			<GenericTableHeaderCell direction={sortDirection} sort='statusLivechat' active={sortBy === 'statusLivechat'} onClick={onHeaderClick}>
+				{t('Livechat_status')}
+			</GenericTableHeaderCell>
+			<GenericTableHeaderCell width='x60'>{t('Remove')}</GenericTableHeaderCell>
+		</>
+	);
+
+	return (
+		<>
+			<AddAgent />
+			{((isSuccess && data?.users.length > 0) || queryHasChanged) && (
+				<FilterByText value={text} onChange={(event) => setText(event.target.value)} />
+			)}
+			{isLoading && (
+				<GenericTable>
+					<GenericTableHeader>{headers}</GenericTableHeader>
+					<GenericTableBody>
+						<GenericTableLoadingTable headerCells={mediaQuery ? 4 : 3} />
+					</GenericTableBody>
+				</GenericTable>
+			)}
+			{isSuccess && data?.users.length === 0 && queryHasChanged && <GenericNoResults />}
+			{isSuccess && data.users.length === 0 && !queryHasChanged && (
+				<GenericNoResults
+					icon='headset'
+					title={t('No_agents_yet')}
+					description={t('No_agents_yet_description')}
+					linkHref={links.go.omnichannelDocs}
+					linkText={t('Learn_more_about_agents')}
+				/>
+			)}
+			{isSuccess && data?.users.length > 0 && (
+				<>
+					<GenericTable aria-label={t('Agents')} aria-busy={isLoading}>
+						<GenericTableHeader>{headers}</GenericTableHeader>
+						<GenericTableBody>
+							{data?.users.map((user) => (
+								<AgentsTableRow key={user._id} user={user} mediaQuery={mediaQuery} />
+							))}
+						</GenericTableBody>
+					</GenericTable>
+					<Pagination
+						divider
+						current={current}
+						itemsPerPage={itemsPerPage}
+						count={data?.total || 0}
+						onSetItemsPerPage={setItemsPerPage}
+						onSetCurrent={setCurrent}
+						{...paginationProps}
+					/>
+				</>
+			)}
+			{isError && <GenericError buttonAction={refetch} />}
+		</>
+	);
+};
+
+export default AgentsTable;