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

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

@@ -0,0 +1,175 @@
+import type { IRole, IRoom } from '@rocket.chat/core-typings';
+import { Box, Field, FieldLabel, FieldRow, Margins, ButtonGroup, Button, Callout, FieldError } from '@rocket.chat/fuselage';
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
+import { usePagination, Page, PageHeader, PageContent } from '@rocket.chat/ui-client';
+import { useToastMessageDispatch, useEndpoint, useRouter } from '@rocket.chat/ui-contexts';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { useId, useMemo } from 'react';
+import { useForm, Controller } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+import UsersInRoleTable from './UsersInRoleTable';
+import { useRemoveUserFromRole } from './hooks/useRemoveUserFromRole';
+import RoomAutoComplete from '../../../../components/RoomAutoComplete';
+import UserAutoCompleteMultiple from '../../../../components/UserAutoCompleteMultiple';
+
+type UsersInRolePayload = {
+	rid?: IRoom['_id'];
+	users: string[];
+};
+
+export type UsersInRolePageProps = { role: IRole };
+
+const UsersInRolePage = ({ role }: UsersInRolePageProps) => {
+	const { t } = useTranslation();
+	const dispatchToastMessage = useToastMessageDispatch();
+	const queryClient = useQueryClient();
+
+	const {
+		control,
+		handleSubmit,
+		formState: { errors, isDirty },
+		watch,
+	} = useForm<UsersInRolePayload>({ defaultValues: { users: [] } });
+
+	const { _id, name, description } = role;
+	const router = useRouter();
+	const addUserToRoleEndpoint = useEndpoint('POST', '/v1/roles.addUserToRole');
+
+	const { rid } = watch();
+	const roomFieldId = useId();
+	const usersFieldId = useId();
+
+	const handleAdd = useStableCallback(async ({ users, rid }: UsersInRolePayload) => {
+		try {
+			await Promise.all(
+				users.map(async (user) => {
+					if (user) {
+						await addUserToRoleEndpoint({ roleId: _id, username: user, roomId: rid });
+					}
+				}),
+			);
+			dispatchToastMessage({ type: 'success', message: t('Users_added') });
+			queryClient.invalidateQueries({
+				queryKey: ['getUsersInRole'],
+			});
+		} catch (error) {
+			dispatchToastMessage({ type: 'error', message: error });
+		}
+	});
+
+	const getUsersInRoleEndpoint = useEndpoint('GET', '/v1/roles.getUsersInRole');
+
+	const paginationData = usePagination();
+	const { itemsPerPage, current } = paginationData;
+
+	const query = useMemo(
+		() => ({
+			role: _id,
+			...(rid && { roomId: rid }),
+			...(itemsPerPage && { count: itemsPerPage }),
+			...(current && { offset: current }),
+		}),
+		[itemsPerPage, current, rid, _id],
+	);
+
+	const { data, isLoading, isSuccess, refetch, isError } = useQuery({
+		queryKey: ['getUsersInRole', _id, query],
+		queryFn: async () => getUsersInRoleEndpoint(query),
+	});
+
+	const handleRemove = useRemoveUserFromRole({ rid, roleId: _id, roleName: name, roleDescription: description });
+
+	return (
+		<Page>
+			<PageHeader title={`${t('Users_in_role')} "${description || name}"`}>
+				<ButtonGroup>
+					<Button onClick={() => router.navigate(`/admin/permissions/edit/${_id}`)}>{t('Back')}</Button>
+				</ButtonGroup>
+			</PageHeader>
+			<PageContent>
+				<Box display='flex' flexDirection='column' width='full' marginInline='neg-x4'>
+					<Margins inline={4}>
+						{role.scope !== 'Users' && (
+							<Field marginBlockEnd={4}>
+								<FieldLabel htmlFor={roomFieldId}>{t('Choose_a_room')}</FieldLabel>
+								<FieldRow>
+									<Controller
+										control={control}
+										name='rid'
+										rules={{ required: t('Required_field', { field: t('Room') }) }}
+										render={({ field: { onChange, value } }) => (
+											<RoomAutoComplete
+												id={roomFieldId}
+												aria-required='true'
+												aria-invalid={Boolean(errors.rid)}
+												aria-describedby={`${roomFieldId}-error`}
+												scope='admin'
+												value={value}
+												onChange={onChange}
+												placeholder={t('Room')}
+											/>
+										)}
+									/>
+								</FieldRow>
+								{errors.rid && (
+									<FieldError aria-live='assertive' id={`${roomFieldId}-error`}>
+										{errors.rid.message}
+									</FieldError>
+								)}
+							</Field>
+						)}
+						<Field>
+							<FieldLabel htmlFor={usersFieldId}>{t('Add_users')}</FieldLabel>
+							<FieldRow>
+								<Controller
+									control={control}
+									name='users'
+									rules={{ required: t('Required_field', { field: t('Users') }) }}
+									render={({ field: { onChange, value } }) => (
+										<UserAutoCompleteMultiple
+											id={usersFieldId}
+											aria-required='true'
+											aria-invalid={Boolean(errors.users)}
+											aria-describedby={`${usersFieldId}-error`}
+											value={value}
+											placeholder={t('Users')}
+											onChange={onChange}
+										/>
+									)}
+								/>
+								<Button marginInlineStart={8} primary onClick={handleSubmit(handleAdd)} disabled={!isDirty}>
+									{t('Add')}
+								</Button>
+							</FieldRow>
+							{errors.users && (
+								<FieldRow>
+									<FieldError aria-live='assertive' id={`${usersFieldId}-error`}>
+										{errors.users.message}
+									</FieldError>
+								</FieldRow>
+							)}
+						</Field>
+					</Margins>
+				</Box>
+				<Margins blockStart={8}>
+					{(role.scope === 'Users' || rid) && (
+						<UsersInRoleTable
+							isLoading={isLoading}
+							isError={isError}
+							isSuccess={isSuccess}
+							total={data?.total || 0}
+							users={data?.users || []}
+							onRemove={handleRemove}
+							refetch={refetch}
+							paginationData={paginationData}
+						/>
+					)}
+					{role.scope !== 'Users' && !rid && <Callout type='info'>{t('Select_a_room')}</Callout>}
+				</Margins>
+			</PageContent>
+		</Page>
+	);
+};
+
+export default UsersInRolePage;

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

@@ -0,0 +1,17 @@
+import { useRouteParameter } from '@rocket.chat/ui-contexts';
+
+import UsersInRolePage from './UsersInRolePage';
+import { useRole } from '../hooks/useRole';
+
+const UsersInRolePageWithData = () => {
+	const _id = useRouteParameter('_id');
+	const role = useRole(_id);
+
+	if (!role) {
+		return null;
+	}
+
+	return <UsersInRolePage role={role} />;
+};
+
+export default UsersInRolePageWithData;

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';

apps/meteor/client/views/admin/permissions/UsersInRole/hooks/useRemoveUserFromRole.tsx

@@ -0,0 +1,52 @@
+import type { IRole, IRoom, IUserInRole } from '@rocket.chat/core-typings';
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
+import { GenericModal } from '@rocket.chat/ui-client';
+import { useSetModal, useToastMessageDispatch, useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQueryClient } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+
+export const useRemoveUserFromRole = ({
+	rid,
+	roleId,
+	roleName,
+	roleDescription,
+}: {
+	rid?: IRoom['_id'];
+	roleId: IRole['_id'];
+	roleName: IRole['name'];
+	roleDescription: IRole['description'];
+}) => {
+	const { t } = useTranslation();
+
+	const setModal = useSetModal();
+	const dispatchToastMessage = useToastMessageDispatch();
+	const queryClient = useQueryClient();
+
+	const removeUserFromRoleEndpoint = useEndpoint('POST', '/v1/roles.removeUserFromRole');
+
+	const handleRemove = useStableCallback((username: IUserInRole['username']) => {
+		const remove = async () => {
+			try {
+				if (!username) throw new Error('Username is required');
+
+				await removeUserFromRoleEndpoint({ roleId, username, scope: rid });
+				dispatchToastMessage({ type: 'success', message: t('User_removed') });
+				queryClient.invalidateQueries({
+					queryKey: ['getUsersInRole'],
+				});
+			} catch (error) {
+				dispatchToastMessage({ type: 'error', message: error });
+			} finally {
+				setModal(null);
+			}
+		};
+
+		setModal(
+			<GenericModal variant='danger' onConfirm={remove} onCancel={() => setModal(null)} confirmText={t('Delete')}>
+				{t('The_user_s_will_be_removed_from_role_s', { username, role: roleDescription || roleName })}
+			</GenericModal>,
+		);
+	});
+
+	return handleRemove;
+};

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

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