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

apps/meteor/client/views/admin/rooms/RoomsTable.tsx

@@ -0,0 +1,179 @@
+import { Pagination, States, StatesIcon, StatesTitle, StatesActions, StatesAction } from '@rocket.chat/fuselage';
+import { useMediaQuery, useDebouncedValue } from '@rocket.chat/fuselage-hooks';
+import type { OptionProp } from '@rocket.chat/ui-client';
+import {
+	GenericTable,
+	GenericTableBody,
+	GenericTableHeader,
+	GenericTableHeaderCell,
+	GenericTableLoadingTable,
+	usePagination,
+	useSort,
+} from '@rocket.chat/ui-client';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+import type { MutableRefObject } from 'react';
+import { useRef, useState, useEffect, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import RoomRow from './RoomRow';
+import RoomsTableFilters from './RoomsTableFilters';
+import GenericNoResults from '../../../components/GenericNoResults';
+
+type RoomFilters = {
+	searchText: string;
+	types: OptionProp[];
+};
+
+const DEFAULT_TYPES = ['d', 'p', 'c', 'l', 'discussions', 'teams'];
+
+const RoomsTable = ({ reload }: { reload: MutableRefObject<() => void> }) => {
+	const { t } = useTranslation();
+	const mediaQuery = useMediaQuery('(min-width: 1024px)');
+
+	const [roomFilters, setRoomFilters] = useState<RoomFilters>({ searchText: '', types: [] });
+
+	const prevRoomFilterText = useRef<string>(roomFilters.searchText);
+
+	const { sortBy, sortDirection, setSort } = useSort<'name' | 't' | 'usersCount' | 'msgs' | 'default' | 'featured' | 'ts'>('name');
+	const { current, itemsPerPage, setItemsPerPage, setCurrent, ...paginationProps } = usePagination();
+	const searchText = useDebouncedValue(roomFilters.searchText, 500);
+
+	const query = useDebouncedValue(
+		useMemo(() => {
+			if (searchText !== prevRoomFilterText.current) {
+				setCurrent(0);
+			}
+			return {
+				filter: searchText || '',
+				sort: `{ "${sortBy}": ${sortDirection === 'asc' ? 1 : -1} }`,
+				count: itemsPerPage,
+				offset: searchText === prevRoomFilterText.current ? current : 0,
+				types: (roomFilters.types.length ? [...roomFilters.types.map((roomType) => roomType.id)] : DEFAULT_TYPES) as unknown as (
+					'c' | 'd' | 'p' | 'l' | 'discussions' | 'teams'
+				)[],
+			};
+		}, [searchText, sortBy, sortDirection, itemsPerPage, current, roomFilters.types, setCurrent]),
+		500,
+	);
+
+	const getAdminRooms = useEndpoint('GET', '/v1/rooms.adminRooms');
+
+	const { data, refetch, isSuccess, isLoading, isError } = useQuery({
+		queryKey: ['rooms', query, 'admin'],
+		queryFn: async () => getAdminRooms(query),
+	});
+
+	useEffect(() => {
+		reload.current = refetch;
+	}, [reload, refetch]);
+
+	useEffect(() => {
+		prevRoomFilterText.current = searchText;
+	}, [searchText]);
+
+	const headers = (
+		<>
+			<GenericTableHeaderCell key='name' direction={sortDirection} active={sortBy === 'name'} onClick={setSort} sort='name' width='x200'>
+				{t('Name')}
+			</GenericTableHeaderCell>
+			<GenericTableHeaderCell key='type' direction={sortDirection} active={sortBy === 't'} onClick={setSort} sort='t' width='x100'>
+				{t('Type')}
+			</GenericTableHeaderCell>
+			<GenericTableHeaderCell
+				key='users'
+				direction={sortDirection}
+				active={sortBy === 'usersCount'}
+				onClick={setSort}
+				sort='usersCount'
+				width='x80'
+			>
+				{t('Users')}
+			</GenericTableHeaderCell>
+			{mediaQuery && (
+				<>
+					<GenericTableHeaderCell
+						key='messages'
+						direction={sortDirection}
+						active={sortBy === 'msgs'}
+						onClick={setSort}
+						sort='msgs'
+						width='x80'
+					>
+						{t('Msgs')}
+					</GenericTableHeaderCell>
+					<GenericTableHeaderCell
+						key='default'
+						direction={sortDirection}
+						active={sortBy === 'default'}
+						onClick={setSort}
+						sort='default'
+						width='x80'
+					>
+						{t('Default')}
+					</GenericTableHeaderCell>
+					<GenericTableHeaderCell
+						key='featured'
+						direction={sortDirection}
+						active={sortBy === 'featured'}
+						onClick={setSort}
+						sort='featured'
+						width='x80'
+					>
+						{t('Featured')}
+					</GenericTableHeaderCell>
+					<GenericTableHeaderCell key='ts' direction={sortDirection} active={sortBy === 'ts'} onClick={setSort} sort='ts' width='x120'>
+						{t('Created_at')}
+					</GenericTableHeaderCell>
+				</>
+			)}
+		</>
+	);
+
+	return (
+		<>
+			<RoomsTableFilters setFilters={setRoomFilters} />
+			{isLoading && (
+				<GenericTable>
+					<GenericTableHeader>{headers}</GenericTableHeader>
+					<GenericTableBody>
+						<GenericTableLoadingTable headerCells={mediaQuery ? 7 : 4} />
+					</GenericTableBody>
+				</GenericTable>
+			)}
+			{isSuccess && data.rooms.length === 0 && <GenericNoResults />}
+			{isSuccess && data.rooms.length > 0 && (
+				<>
+					<GenericTable>
+						<GenericTableHeader>{headers}</GenericTableHeader>
+						<GenericTableBody>
+							{data.rooms?.map((room) => (
+								<RoomRow key={room._id} room={room} />
+							))}
+						</GenericTableBody>
+					</GenericTable>
+					<Pagination
+						divider
+						current={current}
+						itemsPerPage={itemsPerPage}
+						count={data?.total || 0}
+						onSetItemsPerPage={setItemsPerPage}
+						onSetCurrent={setCurrent}
+						{...paginationProps}
+					/>
+				</>
+			)}
+			{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 RoomsTable;