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

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

@@ -0,0 +1,368 @@
+import type { IRoom, RoomAdminFieldsType } from '@rocket.chat/core-typings';
+import { isRoomFederated } from '@rocket.chat/core-typings';
+import {
+	Box,
+	Button,
+	ButtonGroup,
+	TextInput,
+	Field,
+	FieldLabel,
+	FieldRow,
+	FieldHint,
+	ToggleSwitch,
+	TextAreaInput,
+	FieldError,
+} from '@rocket.chat/fuselage';
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
+import { ContextualbarScrollableContent, ContextualbarFooter } from '@rocket.chat/ui-client';
+import { useEndpoint, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
+import { useId } from 'react';
+import { useForm, Controller } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+import { useEditAdminRoomPermissions } from './useEditAdminRoomPermissions';
+import RoomAvatarEditor from '../../../components/avatar/RoomAvatarEditor';
+import { getDirtyFields } from '../../../lib/getDirtyFields';
+import { roomCoordinator } from '../../../lib/rooms/roomCoordinator';
+import { useArchiveRoom } from '../../hooks/roomActions/useArchiveRoom';
+import { useDeleteRoom } from '../../hooks/roomActions/useDeleteRoom';
+
+export type EditRoomProps = {
+	room: IRoom;
+	onChange: () => void;
+	onDelete: () => void;
+	onClose: () => void;
+};
+
+type EditRoomFormData = {
+	roomName: IRoom['name'];
+	roomTopic: string;
+	roomType: IRoom['t'];
+	readOnly: boolean;
+	isDefault: boolean;
+	favorite: boolean;
+	featured: boolean;
+	reactWhenReadOnly: boolean;
+	roomDescription: string;
+	roomAnnouncement: string;
+	roomAvatar: IRoom['avatarETag'];
+	archived: boolean;
+};
+
+const getInitialValues = (room: Pick<IRoom, RoomAdminFieldsType>): EditRoomFormData => ({
+	roomName: room.t === 'd' ? room.usernames?.join(' x ') : roomCoordinator.getRoomName(room.t, room),
+	roomType: room.t,
+	readOnly: !!room.ro,
+	archived: !!room.archived,
+	isDefault: !!room.default,
+	favorite: !!room.favorite,
+	featured: !!room.featured,
+	reactWhenReadOnly: !!room.reactWhenReadOnly,
+	roomTopic: room.topic ?? '',
+	roomDescription: room.description ?? '',
+	roomAnnouncement: room.announcement ?? '',
+	roomAvatar: undefined,
+});
+
+const EditRoom = ({ room, onChange, onDelete, onClose }: EditRoomProps) => {
+	const { t } = useTranslation();
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	const {
+		control,
+		watch,
+		reset,
+		handleSubmit,
+		formState: { isDirty, errors, dirtyFields },
+	} = useForm<EditRoomFormData>({ values: getInitialValues(room) });
+
+	const {
+		canViewName,
+		canViewTopic,
+		canViewAnnouncement,
+		canViewArchived,
+		canViewDescription,
+		canViewType,
+		canViewReadOnly,
+		canViewReactWhenReadOnly,
+	} = useEditAdminRoomPermissions(room);
+
+	const { roomType, readOnly, archived, isDefault } = watch();
+
+	const changeArchiving = archived !== !!room.archived;
+
+	const { handleDelete, canDeleteRoom, isDeleting } = useDeleteRoom(room, { reload: onDelete });
+
+	const saveAction = useEndpoint('POST', '/v1/rooms.saveRoomSettings');
+
+	const handleArchive = useArchiveRoom(room);
+
+	const handleUpdateRoomData = useStableCallback(async ({ isDefault, favorite, ...formData }: EditRoomFormData) => {
+		const data = getDirtyFields(formData, dirtyFields);
+		delete data.archived;
+
+		try {
+			await saveAction({
+				...data,
+				rid: room._id,
+				default: isDefault,
+				favorite: { defaultValue: isDefault, favorite },
+			});
+
+			dispatchToastMessage({ type: 'success', message: t('Room_updated_successfully') });
+			onChange();
+			onClose();
+		} catch (error) {
+			dispatchToastMessage({ type: 'error', message: error });
+		}
+	});
+
+	const handleSave = useStableCallback((data: EditRoomFormData) =>
+		Promise.all([isDirty && handleUpdateRoomData(data), changeArchiving && handleArchive()].filter(Boolean)),
+	);
+
+	const formId = useId();
+	const roomNameField = useId();
+	const ownerField = useId();
+	const roomDescription = useId();
+	const roomAnnouncement = useId();
+	const roomTopicField = useId();
+	const roomTypeField = useId();
+	const readOnlyField = useId();
+	const reactWhenReadOnly = useId();
+	const archivedField = useId();
+	const isDefaultField = useId();
+	const favoriteField = useId();
+	const featuredField = useId();
+
+	const roomIsFederated = isRoomFederated(room);
+
+	return (
+		<>
+			<ContextualbarScrollableContent id={formId} is='form' onSubmit={handleSubmit(handleSave)}>
+				{room.t !== 'd' && (
+					<Box paddingBlockEnd={24} display='flex' justifyContent='center'>
+						<Controller
+							name='roomAvatar'
+							control={control}
+							render={({ field: { value, onChange } }) => (
+								<RoomAvatarEditor disabled={roomIsFederated} roomAvatar={value} room={room} onChangeAvatar={onChange} />
+							)}
+						/>
+					</Box>
+				)}
+				<Field>
+					<FieldLabel htmlFor={roomNameField} required>
+						{t('Name')}
+					</FieldLabel>
+					<FieldRow>
+						<Controller
+							name='roomName'
+							rules={{ required: t('Required_field', { field: t('Name') }) }}
+							control={control}
+							render={({ field }) => (
+								<TextInput
+									id={roomNameField}
+									{...field}
+									disabled={isDeleting || !canViewName}
+									aria-required={true}
+									aria-invalid={Boolean(errors?.roomName)}
+									aria-describedby={`${roomNameField}-error`}
+								/>
+							)}
+						/>
+					</FieldRow>
+					{errors?.roomName && (
+						<FieldError aria-live='assertive' id={`${roomNameField}-error`}>
+							{errors.roomName.message}
+						</FieldError>
+					)}
+				</Field>
+				{room.t !== 'd' && (
+					<>
+						{room.u && (
+							<Field>
+								<FieldLabel htmlFor={ownerField}>{t('Owner')}</FieldLabel>
+								<FieldRow>
+									<TextInput id={ownerField} name='roomOwner' readOnly value={room.u?.username} />
+								</FieldRow>
+							</Field>
+						)}
+						{canViewDescription && (
+							<Field>
+								<FieldLabel htmlFor={roomDescription}>{t('Description')}</FieldLabel>
+								<FieldRow>
+									<Controller
+										name='roomDescription'
+										control={control}
+										render={({ field }) => (
+											<TextAreaInput id={roomDescription} {...field} rows={4} disabled={isDeleting || roomIsFederated} />
+										)}
+									/>
+								</FieldRow>
+							</Field>
+						)}
+						{canViewAnnouncement && (
+							<Field>
+								<FieldLabel htmlFor={roomAnnouncement}>{t('Announcement')}</FieldLabel>
+								<FieldRow>
+									<Controller
+										name='roomAnnouncement'
+										control={control}
+										render={({ field }) => (
+											<TextAreaInput id={roomAnnouncement} {...field} rows={4} disabled={isDeleting || roomIsFederated} />
+										)}
+									/>
+								</FieldRow>
+							</Field>
+						)}
+						{canViewTopic && (
+							<Field>
+								<FieldLabel htmlFor={roomTopicField}>{t('Topic')}</FieldLabel>
+								<FieldRow>
+									<Controller
+										name='roomTopic'
+										control={control}
+										render={({ field }) => <TextAreaInput id={roomTopicField} {...field} rows={4} disabled={isDeleting} />}
+									/>
+								</FieldRow>
+							</Field>
+						)}
+						{canViewType && (
+							<Field>
+								<FieldRow>
+									<FieldLabel htmlFor={roomTypeField}>{t('Private')}</FieldLabel>
+									<Controller
+										name='roomType'
+										control={control}
+										render={({ field: { value, onChange, ...field } }) => (
+											<ToggleSwitch
+												{...field}
+												id={roomTypeField}
+												disabled={isDeleting || roomIsFederated}
+												checked={roomType === 'p'}
+												onChange={() => onChange(value === 'p' ? 'c' : 'p')}
+												aria-describedby={`${roomTypeField}-hint`}
+											/>
+										)}
+									/>
+								</FieldRow>
+								<FieldHint id={`${roomTypeField}-hint`}>{t('Just_invited_people_can_access_this_channel')}</FieldHint>
+							</Field>
+						)}
+						{canViewReadOnly && (
+							<Field>
+								<FieldRow>
+									<FieldLabel htmlFor={readOnlyField}>{t('Read_only')}</FieldLabel>
+									<Controller
+										name='readOnly'
+										control={control}
+										render={({ field: { value, ...field } }) => (
+											<ToggleSwitch
+												id={readOnlyField}
+												{...field}
+												disabled={isDeleting || roomIsFederated}
+												checked={value}
+												aria-describedby={`${readOnlyField}-hint`}
+											/>
+										)}
+									/>
+								</FieldRow>
+								<FieldHint id={`${readOnlyField}-hint`}>{t('Only_authorized_users_can_write_new_messages')}</FieldHint>
+							</Field>
+						)}
+						{canViewReactWhenReadOnly && readOnly && (
+							<Field>
+								<FieldRow>
+									<FieldLabel htmlFor={reactWhenReadOnly}>{t('React_when_read_only')}</FieldLabel>
+									<Controller
+										name='reactWhenReadOnly'
+										control={control}
+										render={({ field: { value, ...field } }) => (
+											<ToggleSwitch
+												id={reactWhenReadOnly}
+												{...field}
+												checked={value || roomIsFederated}
+												aria-describedby={`${reactWhenReadOnly}-hint`}
+											/>
+										)}
+									/>
+								</FieldRow>
+								<FieldHint id={`${reactWhenReadOnly}-hint`}>{t('React_when_read_only_changed_successfully')}</FieldHint>
+							</Field>
+						)}
+						{canViewArchived && (
+							<Field>
+								<FieldRow>
+									<FieldLabel htmlFor={archivedField}>{t('Room_archivation_state_true')}</FieldLabel>
+									<Controller
+										name='archived'
+										control={control}
+										render={({ field: { value, ...field } }) => (
+											<ToggleSwitch id={archivedField} {...field} disabled={isDeleting || roomIsFederated} checked={value} />
+										)}
+									/>
+								</FieldRow>
+							</Field>
+						)}
+					</>
+				)}
+				<Field>
+					<FieldRow>
+						<FieldLabel htmlFor={isDefaultField}>{t('Default')}</FieldLabel>
+						<Controller
+							name='isDefault'
+							control={control}
+							render={({ field: { value, ...field } }) => (
+								<ToggleSwitch id={isDefaultField} {...field} disabled={isDeleting || roomIsFederated} checked={value} />
+							)}
+						/>
+					</FieldRow>
+				</Field>
+				<Field>
+					<FieldRow>
+						<FieldLabel htmlFor={favoriteField}>{t('Favorite')}</FieldLabel>
+						<Controller
+							name='favorite'
+							control={control}
+							render={({ field: { value, ...field } }) => (
+								<ToggleSwitch id={favoriteField} {...field} disabled={isDeleting || !isDefault} checked={value} />
+							)}
+						/>
+					</FieldRow>
+				</Field>
+				<Field>
+					<FieldRow>
+						<FieldLabel htmlFor={featuredField}>{t('Featured')}</FieldLabel>
+						<Controller
+							name='featured'
+							control={control}
+							render={({ field: { value, ...field } }) => (
+								<ToggleSwitch id={featuredField} {...field} disabled={isDeleting || roomIsFederated} checked={value} />
+							)}
+						/>
+					</FieldRow>
+				</Field>
+			</ContextualbarScrollableContent>
+			<ContextualbarFooter>
+				<ButtonGroup stretch>
+					<Button type='reset' disabled={!isDirty || isDeleting} onClick={() => reset()}>
+						{t('Reset')}
+					</Button>
+					<Button form={formId} type='submit' disabled={!isDirty || isDeleting}>
+						{t('Save')}
+					</Button>
+				</ButtonGroup>
+				<Box marginBlockStart={8}>
+					<ButtonGroup stretch>
+						<Button icon='trash' danger loading={isDeleting} disabled={!canDeleteRoom || roomIsFederated} onClick={handleDelete}>
+							{t('Delete')}
+						</Button>
+					</ButtonGroup>
+				</Box>
+			</ContextualbarFooter>
+		</>
+	);
+};
+
+export default EditRoom;

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

@@ -0,0 +1,51 @@
+import type { IRoom } from '@rocket.chat/core-typings';
+import { ContextualbarHeader, ContextualbarTitle, ContextualbarClose, ContextualbarSkeletonBody } from '@rocket.chat/ui-client';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+
+import EditRoom from './EditRoom';
+
+export type EditRoomWithDataProps = { rid?: IRoom['_id']; onReload: () => void; onClose: () => void };
+
+const EditRoomWithData = ({ rid, onReload, onClose }: EditRoomWithDataProps) => {
+	const { t } = useTranslation();
+
+	const getAdminRooms = useEndpoint('GET', '/v1/rooms.adminRooms.getRoom');
+
+	const { data, isPending, refetch } = useQuery({
+		queryKey: ['rooms', rid, 'admin'],
+		queryFn: async () => {
+			const rooms = await getAdminRooms({ rid });
+			return rooms;
+		},
+		meta: {
+			apiErrorToastMessage: true,
+		},
+	});
+
+	if (isPending) {
+		return <ContextualbarSkeletonBody />;
+	}
+
+	const handleChange = (): void => {
+		refetch();
+		onReload();
+	};
+
+	const handleDelete = (): void => {
+		onReload();
+	};
+
+	return data ? (
+		<>
+			<ContextualbarHeader>
+				<ContextualbarTitle>{t('Room_Info')}</ContextualbarTitle>
+				<ContextualbarClose onClick={onClose} />
+			</ContextualbarHeader>
+			<EditRoom room={data as IRoom} onChange={handleChange} onDelete={handleDelete} onClose={onClose} />
+		</>
+	) : null;
+};
+
+export default EditRoomWithData;

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

@@ -0,0 +1,96 @@
+import { isDiscussion } from '@rocket.chat/core-typings';
+import type { IRoom, RoomAdminFieldsType, Serialized } from '@rocket.chat/core-typings';
+import { Box, Icon } from '@rocket.chat/fuselage';
+import { useMediaQuery } from '@rocket.chat/fuselage-hooks';
+import { RoomAvatar } from '@rocket.chat/ui-avatar';
+import { GenericTableCell, GenericTableRow } from '@rocket.chat/ui-client';
+import { useRouter } from '@rocket.chat/ui-contexts';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useFormatDate } from '../../../hooks/useFormatDate';
+import { roomCoordinator } from '../../../lib/rooms/roomCoordinator';
+
+const roomTypeI18nMap = {
+	l: 'Omnichannel',
+	c: 'Channel',
+	d: 'Direct_Message',
+	p: 'Private_Channel',
+} as const;
+
+const getRoomDisplayName = (room: Pick<Serialized<IRoom>, RoomAdminFieldsType>): string | undefined =>
+	room.t === 'd' ? room.usernames?.join(' x ') : roomCoordinator.getRoomName(room.t, room as IRoom);
+
+export type RoomRowProps = { room: Pick<Serialized<IRoom>, RoomAdminFieldsType> };
+
+const RoomRow = ({ room }: RoomRowProps) => {
+	const { t } = useTranslation();
+	const mediaQuery = useMediaQuery('(min-width: 1024px)');
+	const router = useRouter();
+	const formatDate = useFormatDate();
+
+	const { _id, t: type, usersCount, msgs, default: isDefault, featured, ts, ...args } = room;
+	const icon = roomCoordinator.getRoomDirectives(room.t).getIcon?.(room as IRoom);
+	const roomName = getRoomDisplayName(room);
+
+	const getRoomType = (
+		room: Pick<Serialized<IRoom>, RoomAdminFieldsType>,
+	): (typeof roomTypeI18nMap)[keyof typeof roomTypeI18nMap] | 'Teams_Public_Team' | 'Teams_Private_Team' | 'Discussion' => {
+		if (room.teamMain) {
+			return room.t === 'c' ? 'Teams_Public_Team' : 'Teams_Private_Team';
+		}
+		if (isDiscussion(room as IRoom)) {
+			return 'Discussion';
+		}
+		return roomTypeI18nMap[(room as IRoom).t as keyof typeof roomTypeI18nMap];
+	};
+
+	const onClick = useCallback(
+		(rid: string) => (): void =>
+			router.navigate({
+				name: 'admin-rooms',
+				params: {
+					context: 'edit',
+					id: rid,
+				},
+			}),
+		[router],
+	);
+
+	return (
+		<GenericTableRow action key={_id} onKeyDown={onClick(_id)} onClick={onClick(_id)} tabIndex={0} role='link' qa-room-id={_id}>
+			<GenericTableCell withTruncatedText>
+				<Box display='flex' alignContent='center'>
+					<RoomAvatar size={mediaQuery ? 'x28' : 'x40'} room={{ type, name: roomName, _id, ...args }} />
+					<Box
+						display='flex'
+						flexGrow={1}
+						flexShrink={1}
+						flexBasis='0%'
+						flexDirection='row'
+						alignSelf='center'
+						alignItems='center'
+						withTruncatedText
+					>
+						{icon && <Icon marginInline={4} name={icon} fontScale='p2m' color='hint' />}
+						<Box fontScale='p2m' withTruncatedText color='default' qa-room-name={roomName}>
+							{roomName}
+						</Box>
+					</Box>
+				</Box>
+			</GenericTableCell>
+			<GenericTableCell>
+				<Box color='hint' fontScale='p2m' withTruncatedText>
+					{t(getRoomType(room))}
+				</Box>
+			</GenericTableCell>
+			<GenericTableCell withTruncatedText>{usersCount}</GenericTableCell>
+			{mediaQuery && <GenericTableCell withTruncatedText>{msgs}</GenericTableCell>}
+			{mediaQuery && <GenericTableCell withTruncatedText>{isDefault ? t('True') : t('False')}</GenericTableCell>}
+			{mediaQuery && <GenericTableCell withTruncatedText>{featured ? t('True') : t('False')}</GenericTableCell>}
+			{mediaQuery && <GenericTableCell withTruncatedText>{ts ? formatDate(ts) : ''}</GenericTableCell>}
+		</GenericTableRow>
+	);
+};
+
+export default RoomRow;

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

@@ -0,0 +1,36 @@
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
+import { ContextualbarDialog, Page, PageHeader, PageContent } from '@rocket.chat/ui-client';
+import { useRouteParameter, useRouter } from '@rocket.chat/ui-contexts';
+import { useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import EditRoomWithData from './EditRoomWithData';
+import RoomsTable from './RoomsTable';
+
+const RoomsPage = () => {
+	const { t } = useTranslation();
+	const router = useRouter();
+	const id = useRouteParameter('id');
+	const context = useRouteParameter('context');
+
+	const reloadRef = useRef(() => null);
+	const handleCloseContextualbar = useStableCallback(() => router.navigate('/admin/rooms'));
+
+	return (
+		<Page flexDirection='row'>
+			<Page>
+				<PageHeader title={t('Rooms')} />
+				<PageContent>
+					<RoomsTable reload={reloadRef} />
+				</PageContent>
+			</Page>
+			{context && (
+				<ContextualbarDialog onClose={handleCloseContextualbar}>
+					<EditRoomWithData rid={id} onReload={reloadRef.current} onClose={handleCloseContextualbar} />
+				</ContextualbarDialog>
+			)}
+		</Page>
+	);
+};
+
+export default RoomsPage;

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

@@ -0,0 +1,16 @@
+import { usePermission } from '@rocket.chat/ui-contexts';
+
+import RoomsPage from './RoomsPage';
+import NotAuthorizedPage from '../../notAuthorized/NotAuthorizedPage';
+
+const RoomsRoute = () => {
+	const canViewRoomAdministration = usePermission('view-room-administration');
+
+	if (!canViewRoomAdministration) {
+		return <NotAuthorizedPage />;
+	}
+
+	return <RoomsPage />;
+};
+
+export default RoomsRoute;

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;

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

@@ -0,0 +1,111 @@
+import { Box, Icon, TextInput } from '@rocket.chat/fuselage';
+import type { OptionProp } from '@rocket.chat/ui-client';
+import { MultiSelectCustom } from '@rocket.chat/ui-client';
+import { useCallback, useMemo, useState } from 'react';
+import type { ChangeEvent, Dispatch, FormEvent, SetStateAction } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const initialRoomTypeFilterStructure = [
+	{
+		id: 'filter_by_room',
+		text: 'Filter_by_room',
+		isGroupTitle: true,
+	},
+	{
+		id: 'd',
+		text: 'Direct_Message',
+		checked: false,
+	},
+	{
+		id: 'discussions',
+		text: 'Discussions',
+		checked: false,
+	},
+	{
+		id: 'l',
+		text: 'Omnichannel',
+		checked: false,
+	},
+	{
+		id: 'p',
+		text: 'Private_Channels',
+		checked: false,
+	},
+	{
+		id: 'c',
+		text: 'Public_Channels',
+		checked: false,
+	},
+	{
+		id: 'teams',
+		text: 'Teams',
+		checked: false,
+	},
+] as OptionProp[];
+
+export type RoomsTableFiltersProps = { setFilters: Dispatch<SetStateAction<any>> };
+
+const RoomsTableFilters = ({ setFilters }: RoomsTableFiltersProps) => {
+	const { t } = useTranslation();
+	const [text, setText] = useState('');
+
+	const [roomTypeSelectedOptions, setRoomTypeSelectedOptions] = useState<OptionProp[]>([]);
+
+	const roomTypeFilterStructure = useMemo(() => {
+		return initialRoomTypeFilterStructure.map((option) => ({
+			...option,
+			checked: roomTypeSelectedOptions.some((selectedOption) => selectedOption.id === option.id),
+		}));
+	}, [roomTypeSelectedOptions]);
+
+	const handleSearchTextChange = useCallback(
+		(event: ChangeEvent<HTMLInputElement>) => {
+			const text = event.currentTarget.value;
+			setFilters({ searchText: text, types: roomTypeSelectedOptions });
+			setText(text);
+		},
+		[roomTypeSelectedOptions, setFilters],
+	);
+
+	const handleRoomTypeChange = useCallback(
+		(options: OptionProp[]) => {
+			setFilters({ searchText: text, types: options });
+			setRoomTypeSelectedOptions(options);
+		},
+		[text, setFilters],
+	);
+
+	return (
+		<Box
+			is='form'
+			onSubmit={useCallback((e: FormEvent) => e.preventDefault(), [])}
+			marginBlock='x8'
+			display='flex'
+			flexWrap='wrap'
+			alignItems='center'
+			justifyContent='center'
+		>
+			<Box minWidth='x224' display='flex' margin='x4' flexGrow={2}>
+				<TextInput
+					name='search-rooms'
+					alignItems='center'
+					placeholder={t('Search_rooms')}
+					endAddon={<Icon name='magnifier' size='x20' />}
+					onChange={handleSearchTextChange}
+					value={text}
+				/>
+			</Box>
+			<Box minWidth='x224' margin='x4'>
+				<MultiSelectCustom
+					dropdownOptions={roomTypeFilterStructure}
+					defaultTitle='All_rooms'
+					selectedOptionsTitle='Rooms'
+					setSelectedOptions={handleRoomTypeChange}
+					selectedOptions={roomTypeSelectedOptions}
+				/>
+			</Box>
+		</Box>
+	);
+};
+
+export default RoomsTableFilters;

apps/meteor/client/views/admin/rooms/useEditAdminRoomPermissions.ts

@@ -0,0 +1,44 @@
+import type { IRoom, RoomAdminFieldsType } from '@rocket.chat/core-typings';
+import { useMemo } from 'react';
+
+import { RoomSettingsEnum } from '../../../../definition/IRoomTypeConfig';
+import { roomCoordinator } from '../../../lib/rooms/roomCoordinator';
+import { useIsABACManagedRoom } from '../ABAC/hooks/useIsABACManagedRoom';
+
+export const useEditAdminRoomPermissions = (room: Pick<IRoom, RoomAdminFieldsType>) => {
+	const isAbacManaged = useIsABACManagedRoom(room);
+
+	const [
+		canViewName,
+		canViewTopicBase,
+		canViewAnnouncementBase,
+		canViewArchived,
+		canViewDescriptionBase,
+		canViewType,
+		canViewReadOnly,
+		canViewReactWhenReadOnly,
+	] = useMemo(() => {
+		const isAllowed = roomCoordinator.getRoomDirectives(room.t).allowRoomSettingChange;
+		return [
+			isAllowed?.(room, RoomSettingsEnum.NAME),
+			isAllowed?.(room, RoomSettingsEnum.TOPIC),
+			isAllowed?.(room, RoomSettingsEnum.ANNOUNCEMENT),
+			isAllowed?.(room, RoomSettingsEnum.ARCHIVE_OR_UNARCHIVE),
+			isAllowed?.(room, RoomSettingsEnum.DESCRIPTION),
+			isAllowed?.(room, RoomSettingsEnum.TYPE),
+			isAllowed?.(room, RoomSettingsEnum.READ_ONLY),
+			isAllowed?.(room, RoomSettingsEnum.REACT_WHEN_READ_ONLY),
+		];
+	}, [room]);
+
+	return {
+		canViewName,
+		canViewTopic: canViewTopicBase && !isAbacManaged,
+		canViewAnnouncement: canViewAnnouncementBase && !isAbacManaged,
+		canViewArchived,
+		canViewDescription: canViewDescriptionBase && !isAbacManaged,
+		canViewType,
+		canViewReadOnly,
+		canViewReactWhenReadOnly,
+	};
+};