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

apps/meteor/client/views/admin/users/UsersTable/UsersTable.spec.tsx

@@ -0,0 +1,21 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { composeStories } from '@storybook/react';
+import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+import * as stories from './UsersTable.stories';
+
+const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]);
+
+test.each(testCases)(`renders %s without crashing`, async (_storyname, Story) => {
+	const { baseElement } = render(<Story />, { wrapper: mockAppRoot().build() });
+	expect(baseElement).toMatchSnapshot();
+});
+
+test.each(testCases)('%s should have no a11y violations', async (_storyname, Story) => {
+	const { container } = render(<Story />, { wrapper: mockAppRoot().build() });
+
+	// TODO: Needed to skip `button-name` because fuselage‘s `Pagination` buttons are missing names
+	const results = await axe(container, { rules: { 'button-name': { enabled: false } } });
+	expect(results).toHaveNoViolations();
+});

apps/meteor/client/views/admin/users/UsersTable/UsersTable.stories.tsx

@@ -0,0 +1,93 @@
+import { UserStatus } from '@rocket.chat/core-typings';
+import type { Meta } from '@storybook/react';
+
+import UsersTable from './UsersTable';
+import { createMockedPagination } from '../../../../../tests/mocks/data';
+
+export default {
+	component: UsersTable,
+} satisfies Meta<typeof UsersTable>;
+
+const mockedUsers = [
+	{
+		_id: '1',
+		username: 'example.user',
+		name: 'Example User',
+		emails: [{ address: 'example@rocket.chat', verified: true }],
+		status: UserStatus.ONLINE,
+		roles: ['user'],
+		active: true,
+		type: '',
+	},
+	{
+		_id: '2',
+		username: 'john.doe',
+		name: 'John Doe',
+		emails: [{ address: 'john@rocket.chat', verified: true }],
+		status: UserStatus.OFFLINE,
+		roles: ['admin', 'user'],
+		active: true,
+		type: '',
+	},
+	{
+		_id: '3',
+		username: 'sarah.smith',
+		name: 'Sarah Smith',
+		emails: [{ address: 'sarah@rocket.chat', verified: true }],
+		status: UserStatus.AWAY,
+		roles: ['user'],
+		active: true,
+		type: '',
+	},
+	{
+		_id: '4',
+		username: 'mike.wilson',
+		name: 'Mike Wilson',
+		emails: [{ address: 'mike@rocket.chat', verified: false }],
+		status: UserStatus.BUSY,
+		roles: ['user'],
+		active: true,
+		type: '',
+	},
+	{
+		_id: '5',
+		username: 'emma.davis',
+		name: 'Emma Davis',
+		emails: [{ address: 'emma@rocket.chat', verified: true }],
+		status: UserStatus.ONLINE,
+		roles: ['moderator', 'user'],
+		active: true,
+		type: '',
+	},
+];
+
+const paginationData = createMockedPagination(mockedUsers.length, 5);
+
+export const Default = {
+	args: {
+		users: mockedUsers,
+		total: 5,
+		isLoading: false,
+		isSuccess: true,
+		tab: 'all',
+		paginationData,
+	},
+};
+
+export const Loading = {
+	args: {
+		isLoading: true,
+		paginationData,
+	},
+};
+
+export const NoResults = {
+	args: {
+		users: [],
+		total: 0,
+		isLoading: false,
+		isError: false,
+		isSuccess: true,
+		paginationData,
+	},
+};

apps/meteor/client/views/admin/users/UsersTable/UsersTable.tsx

@@ -0,0 +1,217 @@
+import type { IRole, IUser, Serialized } from '@rocket.chat/core-typings';
+import { Pagination } from '@rocket.chat/fuselage';
+import { useStableCallback, useBreakpoints } from '@rocket.chat/fuselage-hooks';
+import type { DefaultUserInfo } from '@rocket.chat/rest-typings';
+import {
+	GenericTable,
+	GenericTableHeader,
+	GenericTableHeaderCell,
+	GenericTableBody,
+	GenericTableLoadingTable,
+} from '@rocket.chat/ui-client';
+import type { usePagination, useSort } from '@rocket.chat/ui-client';
+import type { TranslationKey } from '@rocket.chat/ui-contexts';
+import { useRouter } from '@rocket.chat/ui-contexts';
+import type { Dispatch, SetStateAction, MouseEvent, KeyboardEvent } from 'react';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import UsersTableFilters from './UsersTableFilters';
+import UsersTableRow from './UsersTableRow';
+import GenericNoResults from '../../../../components/GenericNoResults';
+import type { AdminUsersTab, UsersFilters, UsersTableSortingOption } from '../AdminUsersPage';
+import { useShowVoipExtension } from '../useShowVoipExtension';
+
+export type UsersTableProps = {
+	tab: AdminUsersTab;
+	roleData: { roles: Serialized<IRole>[] } | undefined;
+	users: Serialized<DefaultUserInfo>[];
+	total: number;
+	isLoading: boolean;
+	isError: boolean;
+	isSuccess: boolean;
+	onReload: () => void;
+	setUserFilters: Dispatch<SetStateAction<UsersFilters>>;
+	paginationData: ReturnType<typeof usePagination>;
+	sortData: ReturnType<typeof useSort<UsersTableSortingOption>>;
+	isSeatsCapExceeded: boolean;
+};
+
+const UsersTable = ({
+	users,
+	total,
+	isLoading,
+	isError,
+	isSuccess,
+	setUserFilters,
+	roleData,
+	tab,
+	onReload,
+	paginationData,
+	sortData,
+	isSeatsCapExceeded,
+}: UsersTableProps) => {
+	const { t } = useTranslation();
+	const router = useRouter();
+	const breakpoints = useBreakpoints();
+
+	const isMobile = !breakpoints.includes('xl');
+	const isLaptop = !breakpoints.includes('xxl');
+
+	const showVoipExtension = useShowVoipExtension();
+	const { current, itemsPerPage, setCurrent, setItemsPerPage, ...paginationProps } = paginationData;
+
+	const isKeyboardEvent = (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>): event is KeyboardEvent<HTMLElement> => {
+		return (event as KeyboardEvent<HTMLElement>).key !== undefined;
+	};
+
+	const handleClickOrKeyDown = useStableCallback((id: IUser['_id'], e: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>): void => {
+		e.stopPropagation();
+
+		const keyboardSubmitKeys = ['Enter', ' '];
+
+		if (isKeyboardEvent(e) && !keyboardSubmitKeys.includes(e.key)) {
+			return;
+		}
+
+		router.navigate({
+			name: 'admin-users',
+			params: {
+				context: 'info',
+				id,
+			},
+		});
+	});
+
+	const headers = useMemo(
+		() => [
+			<GenericTableHeaderCell
+				key='name'
+				direction={sortData?.sortDirection}
+				active={sortData?.sortBy === 'name'}
+				onClick={sortData?.setSort}
+				sort='name'
+			>
+				{t('Name')}
+			</GenericTableHeaderCell>,
+			<GenericTableHeaderCell
+				key='username'
+				direction={sortData?.sortDirection}
+				active={sortData?.sortBy === 'username'}
+				onClick={sortData?.setSort}
+				sort='username'
+			>
+				{t('Username')}
+			</GenericTableHeaderCell>,
+			!isLaptop && (
+				<GenericTableHeaderCell
+					key='email'
+					direction={sortData?.sortDirection}
+					active={sortData?.sortBy === 'emails.address'}
+					onClick={sortData?.setSort}
+					sort='emails.address'
+				>
+					{t('Email')}
+				</GenericTableHeaderCell>
+			),
+			!isLaptop && <GenericTableHeaderCell key='roles'>{t('Roles')}</GenericTableHeaderCell>,
+			tab === 'all' && !isMobile && (
+				<GenericTableHeaderCell
+					key='status'
+					direction={sortData?.sortDirection}
+					active={sortData?.sortBy === 'status'}
+					onClick={sortData?.setSort}
+					sort='status'
+				>
+					{t('Registration_status')}
+				</GenericTableHeaderCell>
+			),
+			tab === 'pending' && !isMobile && (
+				<GenericTableHeaderCell
+					key='action'
+					direction={sortData?.sortDirection}
+					active={sortData?.sortBy === 'active'}
+					onClick={sortData?.setSort}
+					sort='active'
+				>
+					{t('Pending_action')}
+				</GenericTableHeaderCell>
+			),
+			tab === 'all' && showVoipExtension && (
+				<GenericTableHeaderCell
+					width='x180'
+					key='freeSwitchExtension'
+					direction={sortData?.sortDirection}
+					active={sortData?.sortBy === 'freeSwitchExtension'}
+					onClick={sortData?.setSort}
+					sort='freeSwitchExtension'
+				>
+					{t('Voice_call_extension')}
+				</GenericTableHeaderCell>
+			),
+			<GenericTableHeaderCell key='actions' width={tab === 'pending' ? 'x204' : 'x50'}>
+				{t('Actions')}
+			</GenericTableHeaderCell>,
+		],
+		[sortData, t, isLaptop, tab, isMobile, showVoipExtension],
+	);
+
+	return (
+		<>
+			<UsersTableFilters roleData={roleData} setUsersFilters={setUserFilters} />
+			{isLoading && (
+				<GenericTable>
+					<GenericTableHeader>{headers}</GenericTableHeader>
+					<GenericTableBody>
+						<GenericTableLoadingTable headerCells={5} />
+					</GenericTableBody>
+				</GenericTable>
+			)}
+			{isError && (
+				<GenericNoResults icon='warning' title={t('Something_went_wrong')} buttonTitle={t('Reload_page')} buttonAction={onReload} />
+			)}
+
+			{isSuccess && users.length === 0 && (
+				<GenericNoResults
+					icon='user'
+					title={t('Users_Table_Generic_No_users', { status: tab !== 'all' ? t(tab as TranslationKey) : '' })}
+					description={t(`Users_Table_no_${tab}_users_description`)}
+				/>
+			)}
+
+			{isSuccess && users.length > 0 && (
+				<>
+					<GenericTable>
+						<GenericTableHeader>{headers}</GenericTableHeader>
+						<GenericTableBody>
+							{users.map((user) => (
+								<UsersTableRow
+									key={user._id}
+									tab={tab}
+									user={user}
+									isMobile={isMobile}
+									isLaptop={isLaptop}
+									isSeatsCapExceeded={isSeatsCapExceeded}
+									showVoipExtension={showVoipExtension}
+									onReload={onReload}
+									onClick={handleClickOrKeyDown}
+								/>
+							))}
+						</GenericTableBody>
+					</GenericTable>
+					<Pagination
+						divider
+						current={current}
+						itemsPerPage={itemsPerPage}
+						count={total}
+						onSetItemsPerPage={setItemsPerPage}
+						onSetCurrent={setCurrent}
+						{...paginationProps}
+					/>
+				</>
+			)}
+		</>
+	);
+};
+
+export default UsersTable;

apps/meteor/client/views/admin/users/UsersTable/UsersTableFilters.tsx

@@ -0,0 +1,102 @@
+import type { IRole, Serialized } from '@rocket.chat/core-typings';
+import { Box, Icon, Margins, TextInput } from '@rocket.chat/fuselage';
+import { useBreakpoints } from '@rocket.chat/fuselage-hooks';
+import type { OptionProp } from '@rocket.chat/ui-client';
+import { MultiSelectCustom } from '@rocket.chat/ui-client';
+import type { ChangeEvent, Dispatch, SetStateAction } from 'react';
+import { useCallback, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import type { UsersFilters } from '../AdminUsersPage';
+
+export type UsersTableFiltersProps = {
+	setUsersFilters: Dispatch<SetStateAction<UsersFilters>>;
+	roleData: { roles: Serialized<IRole>[] } | undefined;
+};
+
+const UsersTableFilters = ({ roleData, setUsersFilters }: UsersTableFiltersProps) => {
+	const { t } = useTranslation();
+
+	const [selectedRoles, setSelectedRoles] = useState<OptionProp[]>([]);
+	const [text, setText] = useState('');
+
+	const handleSearchTextChange = useCallback(
+		(event: ChangeEvent<HTMLInputElement>) => {
+			setText(event.currentTarget.value);
+			setUsersFilters({ text: event.currentTarget.value, roles: selectedRoles });
+		},
+		[selectedRoles, setUsersFilters],
+	);
+
+	const handleRolesChange = useCallback(
+		(roles: OptionProp[]) => {
+			setUsersFilters({ text, roles });
+			setSelectedRoles(roles);
+		},
+		[setUsersFilters, text],
+	);
+
+	const userRolesFilterStructure = useMemo(
+		() => [
+			{
+				id: 'filter_by_role',
+				text: 'Filter_by_role',
+			},
+			{
+				id: 'all',
+				text: 'All_roles',
+				checked: false,
+			},
+			...(roleData
+				? roleData.roles.map((role) => ({
+						id: role._id,
+						text: role.description || role.name || role._id,
+						checked: false,
+					}))
+				: []),
+		],
+		[roleData],
+	);
+
+	const breakpoints = useBreakpoints();
+	const isLargeScreenOrBigger = breakpoints.includes('lg');
+	const fixFiltersSize = isLargeScreenOrBigger ? { maxWidth: 'x224', minWidth: 'x224' } : null;
+
+	return (
+		<Box
+			marginBlock={16}
+			is='form'
+			onSubmit={(event) => {
+				event.preventDefault();
+			}}
+			display='flex'
+			flexWrap='wrap'
+			alignItems='center'
+		>
+			<Margins inlineEnd={isLargeScreenOrBigger ? 16 : 0}>
+				<TextInput
+					placeholder={t('Search_Users')}
+					endAddon={<Icon name='magnifier' size='x20' />}
+					onChange={handleSearchTextChange}
+					value={text}
+					flexGrow={2}
+					minWidth='x220'
+					aria-label={t('Search_Users')}
+				/>
+			</Margins>
+			<Box marginBlock={4} width={isLargeScreenOrBigger ? 'unset' : '100%'}>
+				<MultiSelectCustom
+					dropdownOptions={userRolesFilterStructure}
+					defaultTitle='All_roles'
+					selectedOptionsTitle='Roles'
+					setSelectedOptions={handleRolesChange}
+					selectedOptions={selectedRoles}
+					searchBarText='Search_roles'
+					{...fixFiltersSize}
+				/>
+			</Box>
+		</Box>
+	);
+};
+
+export default UsersTableFilters;

apps/meteor/client/views/admin/users/UsersTable/UsersTableRow.tsx

@@ -0,0 +1,202 @@
+import { UserStatus as Status } from '@rocket.chat/core-typings';
+import type { IUser, Serialized } from '@rocket.chat/core-typings';
+import { Box, Button } from '@rocket.chat/fuselage';
+import type { DefaultUserInfo } from '@rocket.chat/rest-typings';
+import { UserAvatar } from '@rocket.chat/ui-avatar';
+import { GenericMenu, GenericTableRow, GenericTableCell } from '@rocket.chat/ui-client';
+import type { KeyboardEvent, MouseEvent } from 'react';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { UserStatus } from '../../../../components/UserStatus';
+import { Roles } from '../../../../stores';
+import type { AdminUsersTab } from '../AdminUsersPage';
+import { useChangeAdminStatusAction } from '../hooks/useChangeAdminStatusAction';
+import { useChangeUserStatusAction } from '../hooks/useChangeUserStatusAction';
+import { useDeleteUserAction } from '../hooks/useDeleteUserAction';
+import { useResetE2EEKeyAction } from '../hooks/useResetE2EEKeyAction';
+import { useResetTOTPAction } from '../hooks/useResetTOTPAction';
+import { useSendWelcomeEmailMutation } from '../hooks/useSendWelcomeEmailMutation';
+
+export type UsersTableRowProps = {
+	user: Serialized<DefaultUserInfo>;
+	tab: AdminUsersTab;
+	isMobile: boolean;
+	isLaptop: boolean;
+	onReload: () => void;
+	onClick: (id: IUser['_id'], e: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;
+	isSeatsCapExceeded: boolean;
+	showVoipExtension: boolean;
+};
+
+const UsersTableRow = ({ user, tab, isMobile, isLaptop, isSeatsCapExceeded, showVoipExtension, onClick, onReload }: UsersTableRowProps) => {
+	const { t } = useTranslation();
+
+	const {
+		_id,
+		emails,
+		username = '',
+		name = '',
+		roles,
+		status,
+		active,
+		avatarETag,
+		lastLogin,
+		type,
+		freeSwitchExtension,
+		federated,
+	} = user;
+
+	const registrationStatusText = useMemo(() => {
+		const usersExcludedFromPending = ['bot', 'app'];
+
+		if (!active && lastLogin) {
+			return t('Deactivated');
+		}
+
+		if (federated) {
+			return t('Federated');
+		}
+
+		if (!lastLogin && !usersExcludedFromPending.includes(type)) {
+			return t('Pending');
+		}
+
+		if (active && lastLogin) {
+			return t('Active');
+		}
+	}, [active, lastLogin, t, type, federated]);
+
+	const roleNames = Roles.use((state) => {
+		return roles
+			?.map((roleId) => state.get(roleId)?.name)
+			.filter((roleName): roleName is string => !!roleName)
+			.join(', ');
+	});
+
+	const userId = user._id;
+	const isAdmin = user.roles?.includes('admin');
+	const isActive = user.active;
+	const isFederatedUser = !!user.federated;
+
+	const changeAdminStatusAction = useChangeAdminStatusAction(username, isAdmin, onReload);
+	const changeUserStatusAction = useChangeUserStatusAction(userId, isActive, onReload);
+	const deleteUserAction = useDeleteUserAction(userId, onReload, onReload);
+	const resetTOTPAction = useResetTOTPAction(userId);
+	const resetE2EKeyAction = useResetE2EEKeyAction(userId);
+	const resendWelcomeEmail = useSendWelcomeEmailMutation();
+
+	const isNotPendingDeactivatedNorFederated = tab !== 'pending' && tab !== 'deactivated' && !isFederatedUser;
+	const actions = useMemo(
+		() => ({
+			...(isNotPendingDeactivatedNorFederated &&
+				changeAdminStatusAction && {
+					changeAdminStatusAction,
+				}),
+			...(isNotPendingDeactivatedNorFederated &&
+				resetE2EKeyAction && {
+					resetE2EKeyAction,
+				}),
+			...(isNotPendingDeactivatedNorFederated && resetTOTPAction && { resetTOTPAction }),
+			...(changeUserStatusAction &&
+				!isFederatedUser && {
+					changeUserStatusAction,
+				}),
+			...(deleteUserAction && {
+				deleteUserAction,
+			}),
+		}),
+		[
+			changeAdminStatusAction,
+			changeUserStatusAction,
+			deleteUserAction,
+			isFederatedUser,
+			isNotPendingDeactivatedNorFederated,
+			resetE2EKeyAction,
+			resetTOTPAction,
+		],
+	);
+
+	const menuOptions = Object.entries(actions).map(([_key, item]) => {
+		return {
+			...item,
+			id: item.content || item.title || '',
+			content: item.content || item.title,
+		};
+	});
+
+	const handleResendWelcomeEmail = () => resendWelcomeEmail.mutateAsync({ email: emails?.[0].address });
+
+	return (
+		<GenericTableRow onKeyDown={(e) => onClick(_id, e)} onClick={(e) => onClick(_id, e)} tabIndex={0} role='link' action qa-user-id={_id}>
+			<GenericTableCell withTruncatedText>
+				<Box display='flex' alignItems='center'>
+					{username && <UserAvatar size={isMobile || isLaptop ? 'x28' : 'x40'} username={username} etag={avatarETag} />}
+					<Box display='flex' flexGrow={1} flexShrink={1} flexBasis='0%' alignSelf='center' alignItems='center' withTruncatedText>
+						<Box marginInline={8}>
+							<UserStatus status={status || Status.OFFLINE} />
+						</Box>
+						<Box fontScale='p2' withTruncatedText>
+							{name || username}
+						</Box>
+					</Box>
+				</Box>
+			</GenericTableCell>
+
+			<GenericTableCell>
+				<Box fontScale='p2m' color='hint' withTruncatedText>
+					{username}
+				</Box>
+			</GenericTableCell>
+
+			{!isLaptop && <GenericTableCell withTruncatedText>{emails?.length && emails[0].address}</GenericTableCell>}
+
+			{!isLaptop && <GenericTableCell withTruncatedText>{roleNames}</GenericTableCell>}
+
+			{tab === 'all' && !isMobile && (
+				<GenericTableCell fontScale='p2' color='hint' withTruncatedText>
+					{registrationStatusText}
+				</GenericTableCell>
+			)}
+
+			{tab === 'pending' && !isMobile && (
+				<GenericTableCell fontScale='p2' color='hint' withTruncatedText>
+					<Box display='flex' flexDirection='row' alignContent='flex-end'>
+						{active ? t('User_first_log_in') : t('Activation')}
+					</Box>
+				</GenericTableCell>
+			)}
+
+			{tab === 'all' && showVoipExtension && (
+				<GenericTableCell fontScale='p2' color='hint' withTruncatedText>
+					{freeSwitchExtension || t('Not_assigned')}
+				</GenericTableCell>
+			)}
+
+			<GenericTableCell
+				onClick={(e): void => {
+					e.stopPropagation();
+				}}
+			>
+				<Box display='flex' justifyContent='flex-end'>
+					{tab === 'pending' && (
+						<>
+							{active ? (
+								<Button small secondary onClick={handleResendWelcomeEmail}>
+									{t('Resend_welcome_email')}
+								</Button>
+							) : (
+								<Button small primary onClick={changeUserStatusAction?.onClick} disabled={isSeatsCapExceeded}>
+									{t('Activate')}
+								</Button>
+							)}
+						</>
+					)}
+					<GenericMenu detached title={t('More_actions')} sections={[{ title: '', items: menuOptions }]} placement='bottom-end' />
+				</Box>
+			</GenericTableCell>
+		</GenericTableRow>
+	);
+};
+
+export default UsersTableRow;

apps/meteor/client/views/admin/users/UsersTable/index.ts

@@ -0,0 +1 @@
+export { default } from './UsersTable';