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

apps/meteor/client/views/admin/integrations/IntegrationsTable.tsx

@@ -0,0 +1,150 @@
+import { Pagination, States, StatesActions, StatesAction, StatesIcon, StatesTitle } from '@rocket.chat/fuselage';
+import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
+import { escapeRegExp } from '@rocket.chat/tools';
+import {
+	GenericTable,
+	GenericTableBody,
+	GenericTableHeader,
+	GenericTableHeaderCell,
+	GenericTableLoadingTable,
+	usePagination,
+	useSort,
+} from '@rocket.chat/ui-client';
+import { useEndpoint, useRoute, useTranslation, useLayout } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+import { useMemo, useCallback, useState } from 'react';
+
+import IntegrationRow from './IntegrationRow';
+import FilterByText from '../../../components/FilterByText';
+import GenericNoResults from '../../../components/GenericNoResults';
+
+export type IntegrationsTableProps = { type?: string };
+
+const IntegrationsTable = ({ type }: IntegrationsTableProps) => {
+	const t = useTranslation();
+	const { isMobile } = useLayout();
+
+	const [text, setText] = useState('');
+	const router = useRoute('admin-integrations');
+	const { sortBy, sortDirection, setSort } = useSort<'name' | 'channel' | '_createdBy' | '_createdAt' | 'username'>('name');
+	const { current, itemsPerPage, setItemsPerPage: onSetItemsPerPage, setCurrent: onSetCurrent, ...paginationProps } = usePagination();
+
+	const query = useDebouncedValue(
+		useMemo(
+			() => ({
+				name: escapeRegExp(text),
+				type,
+				sort: `{ "${sortBy}": ${sortDirection === 'asc' ? 1 : -1} }`,
+				count: itemsPerPage,
+				offset: current,
+			}),
+			[text, itemsPerPage, current, sortBy, sortDirection, type],
+		),
+		500,
+	);
+
+	const getIntegrations = useEndpoint('GET', '/v1/integrations.list');
+	const { data, isLoading, isSuccess, isError, refetch } = useQuery({
+		queryKey: ['integrations', query],
+		queryFn: async () => getIntegrations(query),
+	});
+
+	const onClick = useCallback(
+		(_id: string, type: string) => () =>
+			router.push({
+				context: 'edit',
+				type: type === 'webhook-incoming' ? 'incoming' : 'outgoing',
+				id: _id,
+			}),
+		[router],
+	);
+
+	const headers = (
+		<>
+			<GenericTableHeaderCell
+				key='name'
+				direction={sortDirection}
+				active={sortBy === 'name'}
+				onClick={setSort}
+				sort='name'
+				{...(!isMobile && { width: 'x280' })}
+			>
+				{t('Name')}
+			</GenericTableHeaderCell>
+			<GenericTableHeaderCell key='channel' direction={sortDirection} active={sortBy === 'channel'} onClick={setSort} sort='channel'>
+				{t('Post_to')}
+			</GenericTableHeaderCell>
+			<GenericTableHeaderCell
+				key='_createdBy'
+				direction={sortDirection}
+				active={sortBy === '_createdBy'}
+				onClick={setSort}
+				sort='_createdBy'
+			>
+				{t('Created_by')}
+			</GenericTableHeaderCell>
+			{!isMobile && (
+				<GenericTableHeaderCell
+					key='_createdAt'
+					direction={sortDirection}
+					active={sortBy === '_createdAt'}
+					onClick={setSort}
+					sort='_createdAt'
+				>
+					{t('Created_at')}
+				</GenericTableHeaderCell>
+			)}
+			<GenericTableHeaderCell key='username' direction={sortDirection} active={sortBy === 'username'} onClick={setSort} sort='username'>
+				{t('Post_as')}
+			</GenericTableHeaderCell>
+		</>
+	);
+
+	return (
+		<>
+			<FilterByText placeholder={t('Search_Integrations')} value={text} onChange={(event) => setText(event.target.value)} />
+			{isLoading && (
+				<GenericTable>
+					<GenericTableHeader>{headers}</GenericTableHeader>
+					<GenericTableBody>
+						<GenericTableLoadingTable headerCells={!isMobile ? 5 : 4} />
+					</GenericTableBody>
+				</GenericTable>
+			)}
+			{isSuccess && data && data.integrations.length > 0 && (
+				<>
+					<GenericTable aria-label={t('Integrations_table')}>
+						<GenericTableHeader>{headers}</GenericTableHeader>
+						<GenericTableBody>
+							{isSuccess &&
+								data?.integrations.map((integration) => (
+									<IntegrationRow key={integration._id} integration={integration} isMobile={isMobile} onClick={onClick} />
+								))}
+						</GenericTableBody>
+					</GenericTable>
+					<Pagination
+						divider
+						current={current}
+						itemsPerPage={itemsPerPage}
+						count={data?.total || 0}
+						onSetItemsPerPage={onSetItemsPerPage}
+						onSetCurrent={onSetCurrent}
+						{...paginationProps}
+					/>
+				</>
+			)}
+			{isSuccess && data && data.integrations.length === 0 && <GenericNoResults />}
+			{isError && (
+				<States>
+					<StatesIcon name='warning' variation='danger' />
+					<StatesTitle>{t('Something_went_wrong')}</StatesTitle>
+					<StatesActions>
+						<StatesAction onClick={() => refetch()}>{t('Reload_page')}</StatesAction>
+					</StatesActions>
+				</States>
+			)}
+		</>
+	);
+};
+
+export default IntegrationsTable;