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

apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRoleTable/UsersInRoleTable.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 './UsersInRoleTable.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/permissions/UsersInRole/UsersInRoleTable/UsersInRoleTable.stories.tsx

@@ -0,0 +1,86 @@
+import { Margins } from '@rocket.chat/fuselage';
+import { PageContent } from '@rocket.chat/ui-client';
+import type { Meta } from '@storybook/react';
+
+import UsersInRoleTable from './UsersInRoleTable';
+import { createMockedPagination } from '../../../../../../tests/mocks/data';
+
+export default {
+	component: UsersInRoleTable,
+	decorators: [
+		(fn) => (
+			<PageContent marginBlock='neg-x8'>
+				<Margins block={8}>{fn()}</Margins>
+			</PageContent>
+		),
+	],
+} satisfies Meta<typeof UsersInRoleTable>;
+
+const generateMockedUsers = (count: number) =>
+	Array.from({ length: count }, (_, i) => ({
+		_id: `${i + 1}`,
+		username: `user.${i + 1}`,
+		name: `User ${i + 1}`,
+		emails: [{ address: `user${i + 1}@example.com`, verified: i % 2 === 0 }],
+		createdAt: new Date().toISOString(),
+		_updatedAt: new Date().toISOString(),
+		roles: [i < 5 ? 'admin' : 'user'],
+		type: 'user',
+		active: true,
+	}));
+
+const mockedUsers = generateMockedUsers(5);
+
+const paginationData = createMockedPagination(mockedUsers.length, 30);
+
+export const Default = {
+	args: {
+		total: 30,
+		isLoading: false,
+		isError: false,
+		isSuccess: true,
+		users: mockedUsers,
+		onRemove: () => undefined,
+		refetch: () => undefined,
+		paginationData,
+	},
+};
+
+export const withLoading = {
+	args: {
+		total: 0,
+		isLoading: true,
+		isError: false,
+		isSuccess: false,
+		users: [],
+		onRemove: () => undefined,
+		refetch: () => undefined,
+		paginationData,
+	},
+};
+
+export const withNoResults = {
+	args: {
+		total: 0,
+		isLoading: false,
+		isError: false,
+		isSuccess: true,
+		users: [],
+		onRemove: () => undefined,
+		refetch: () => undefined,
+		paginationData,
+	},
+};
+
+export const withError = {
+	args: {
+		total: 0,
+		isLoading: false,
+		isError: true,
+		isSuccess: false,
+		users: [],
+		onRemove: () => undefined,
+		refetch: () => undefined,
+		paginationData,
+	},
+};

apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRoleTable/UsersInRoleTable.tsx

@@ -0,0 +1,77 @@
+import type { IUserInRole, Serialized } from '@rocket.chat/core-typings';
+import { Pagination } from '@rocket.chat/fuselage';
+import {
+	GenericTable,
+	GenericTableHeader,
+	GenericTableHeaderCell,
+	GenericTableBody,
+	GenericTableLoadingTable,
+} from '@rocket.chat/ui-client';
+import type { usePagination } from '@rocket.chat/ui-client';
+import { useTranslation } from 'react-i18next';
+
+import UsersInRoleTableRow from './UsersInRoleTableRow';
+import GenericError from '../../../../../components/GenericError';
+import GenericNoResults from '../../../../../components/GenericNoResults';
+
+export type UsersInRoleTableProps = {
+	isLoading: boolean;
+	isError: boolean;
+	isSuccess: boolean;
+	total: number;
+	users: Serialized<IUserInRole>[];
+	onRemove: (username: IUserInRole['username']) => void;
+	paginationData: ReturnType<typeof usePagination>;
+	refetch: () => void;
+};
+
+const UsersInRoleTable = ({ isLoading, isSuccess, isError, total, users, onRemove, refetch, paginationData }: UsersInRoleTableProps) => {
+	const { t } = useTranslation();
+	const { current, itemsPerPage, setCurrent, setItemsPerPage, ...paginationProps } = paginationData;
+
+	const headers = (
+		<>
+			<GenericTableHeaderCell>{t('Name')}</GenericTableHeaderCell>
+			<GenericTableHeaderCell>{t('Email')}</GenericTableHeaderCell>
+			<GenericTableHeaderCell width='x80'>{t('Actions')}</GenericTableHeaderCell>
+		</>
+	);
+
+	return (
+		<>
+			{isLoading && (
+				<GenericTable>
+					<GenericTableHeader>{headers}</GenericTableHeader>
+					<GenericTableBody>
+						<GenericTableLoadingTable headerCells={3} />
+					</GenericTableBody>
+				</GenericTable>
+			)}
+			{isSuccess && users?.length > 0 && (
+				<>
+					<GenericTable>
+						<GenericTableHeader>{headers}</GenericTableHeader>
+						<GenericTableBody>
+							{users.map((user) => (
+								<UsersInRoleTableRow key={user?._id} user={user} onRemove={onRemove} />
+							))}
+						</GenericTableBody>
+					</GenericTable>
+					<Pagination
+						divider
+						current={current}
+						itemsPerPage={itemsPerPage}
+						count={total}
+						onSetItemsPerPage={setItemsPerPage}
+						onSetCurrent={setCurrent}
+						{...paginationProps}
+					/>
+				</>
+			)}
+			{isSuccess && users?.length === 0 && <GenericNoResults />}
+			{isError && <GenericError buttonAction={refetch} />}
+		</>
+	);
+};
+
+export default UsersInRoleTable;

apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRoleTable/UsersInRoleTableRow.tsx

@@ -0,0 +1,50 @@
+import type { IUserInRole, Serialized } from '@rocket.chat/core-typings';
+import { Box, IconButton } from '@rocket.chat/fuselage';
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
+import { UserAvatar } from '@rocket.chat/ui-avatar';
+import { GenericTableRow, GenericTableCell } from '@rocket.chat/ui-client';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { getUserEmailAddress } from '../../../../../../lib/getUserEmailAddress';
+
+export type UsersInRoleTableRowProps = {
+	user: Serialized<IUserInRole>;
+	onRemove: (username: IUserInRole['username']) => void;
+};
+
+const UsersInRoleTableRow = ({ user, onRemove }: UsersInRoleTableRowProps) => {
+	const { t } = useTranslation();
+	const { _id, name, username, avatarETag } = user;
+	const email = getUserEmailAddress(user);
+
+	const handleRemove = useStableCallback(() => {
+		onRemove(username);
+	});
+
+	return (
+		<GenericTableRow key={_id} tabIndex={0} role='link'>
+			<GenericTableCell withTruncatedText>
+				<Box display='flex' alignItems='center'>
+					<UserAvatar size='x40' username={username ?? ''} etag={avatarETag} />
+					<Box display='flex' withTruncatedText marginInline={8}>
+						<Box fontScale='p2m' withTruncatedText color='default'>
+							{name || username}
+						</Box>
+						{name && (
+							<Box marginInlineStart={4} fontScale='p2' color='hint' withTruncatedText>
+								{`@${username}`}
+							</Box>
+						)}
+					</Box>
+				</Box>
+			</GenericTableCell>
+			<GenericTableCell withTruncatedText>{email}</GenericTableCell>
+			<GenericTableCell>
+				<IconButton small icon='trash' title={t('Remove')} danger onClick={handleRemove} />
+			</GenericTableCell>
+		</GenericTableRow>
+	);
+};
+
+export default memo(UsersInRoleTableRow);

apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRoleTable/index.ts

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