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;