fix: Users in role table not rendering the empty state properly

.changeset/rare-colts-repair.md

@@ -0,0 +1,5 @@
+---
+'@rocket.chat/meteor': patch
+---
+
+Fixes an issue not rendering the proper error and empty state on users in role table

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

@@ -1,9 +1,10 @@
 import type { IRole, IRoom } from '@rocket.chat/core-typings';
-import { Box, Field, FieldLabel, FieldRow, Margins, ButtonGroup, Button, Callout } from '@rocket.chat/fuselage';
-import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
-import { useToastMessageDispatch, useRoute, useEndpoint, useTranslation } from '@rocket.chat/ui-contexts';
+import { Box, Field, FieldLabel, FieldRow, Margins, ButtonGroup, Button, Callout, FieldError } from '@rocket.chat/fuselage';
+import { useEffectEvent, useUniqueId } from '@rocket.chat/fuselage-hooks';
+import { useToastMessageDispatch, useEndpoint, useTranslation, useRouter } from '@rocket.chat/ui-contexts';
+import { useQueryClient } from '@tanstack/react-query';
 import type { ReactElement } from 'react';
-import React, { useRef } from 'react';
+import React from 'react';
 import { useForm, Controller } from 'react-hook-form';
 
 import { Page, PageHeader, PageContent } from '../../../../components/Page';
@@ -18,42 +19,35 @@ type UsersInRolePayload = {
 
 const UsersInRolePage = ({ role }: { role: IRole }): ReactElement => {
 	const t = useTranslation();
-	const reload = useRef<() => void>(() => undefined);
 	const dispatchToastMessage = useToastMessageDispatch();
+	const queryClient = useQueryClient();
 
 	const {
 		control,
 		handleSubmit,
-		formState: { isDirty },
-		reset,
-		getValues,
+		formState: { errors, isDirty },
+		watch,
 	} = useForm<UsersInRolePayload>({ defaultValues: { users: [] } });
 
 	const { _id, name, description } = role;
-	const router = useRoute('admin-permissions');
-	const addUser = useEndpoint('POST', '/v1/roles.addUserToRole');
+	const router = useRouter();
+	const addUserToRoleEndpoint = useEndpoint('POST', '/v1/roles.addUserToRole');
 
-	const rid = getValues('rid');
+	const { rid } = watch();
+	const roomFieldId = useUniqueId();
+	const usersFieldId = useUniqueId();
 
-	const handleReturn = useMutableCallback(() => {
-		router.push({
-			context: 'edit',
-			_id,
-		});
-	});
-
-	const handleAdd = useMutableCallback(async ({ users, rid }: UsersInRolePayload) => {
+	const handleAdd = useEffectEvent(async ({ users, rid }: UsersInRolePayload) => {
 		try {
 			await Promise.all(
 				users.map(async (user) => {
 					if (user) {
-						await addUser({ roleName: _id, username: user, roomId: rid });
+						await addUserToRoleEndpoint({ roleName: _id, username: user, roomId: rid });
 					}
 				}),
 			);
 			dispatchToastMessage({ type: 'success', message: t('Users_added') });
-			reload.current();
-			reset();
+			queryClient.invalidateQueries(['getUsersInRole']);
 		} catch (error) {
 			dispatchToastMessage({ type: 'error', message: error });
 		}
@@ -63,48 +57,76 @@ const UsersInRolePage = ({ role }: { role: IRole }): ReactElement => {
 		<Page>
 			<PageHeader title={`${t('Users_in_role')} "${description || name}"`}>
 				<ButtonGroup>
-					<Button onClick={handleReturn}>{t('Back')}</Button>
+					<Button onClick={() => router.navigate(`/admin/permissions/edit/${_id}`)}>{t('Back')}</Button>
 				</ButtonGroup>
 			</PageHeader>
 			<PageContent>
 				<Box display='flex' flexDirection='column' w='full' mi='neg-x4'>
 					<Margins inline={4}>
 						{role.scope !== 'Users' && (
 							<Field mbe={4}>
-								<FieldLabel>{t('Choose_a_room')}</FieldLabel>
+								<FieldLabel htmlFor={roomFieldId}>{t('Choose_a_room')}</FieldLabel>
 								<FieldRow>
 									<Controller
 										control={control}
 										name='rid'
-										render={({ field: { onChange, value } }): ReactElement => (
-											<RoomAutoComplete scope='admin' value={value} onChange={onChange} placeholder={t('Room')} />
+										rules={{ required: t('error-the-field-is-required', { 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>{t('Add_users')}</FieldLabel>
+							<FieldLabel htmlFor={usersFieldId}>{t('Add_users')}</FieldLabel>
 							<FieldRow>
 								<Controller
 									control={control}
 									name='users'
-									render={({ field: { onChange, value } }): ReactElement => (
-										<UserAutoCompleteMultiple value={value} placeholder={t('User')} onChange={onChange} />
+									rules={{ required: t('error-the-field-is-required', { 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 mis={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 reloadRef={reload} rid={rid} roleId={_id} roleName={name} description={description} />
-					)}
+					{(role.scope === 'Users' || rid) && <UsersInRoleTable rid={rid} roleId={_id} roleName={name} description={description} />}
 					{role.scope !== 'Users' && !rid && <Callout type='info'>{t('Select_a_room')}</Callout>}
 				</Margins>
 			</PageContent>

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

@@ -1,79 +1,107 @@
-import type { IRole, IRoom, IUserInRole } from '@rocket.chat/core-typings';
+import type { IRole, IRoom } from '@rocket.chat/core-typings';
 import { Pagination } from '@rocket.chat/fuselage';
-import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
+import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { useSetModal, useToastMessageDispatch, useEndpoint, useTranslation } from '@rocket.chat/ui-contexts';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
 import type { ReactElement } from 'react';
-import React from 'react';
+import React, { useMemo } from 'react';
 
+import GenericError from '../../../../../components/GenericError';
 import GenericModal from '../../../../../components/GenericModal';
 import GenericNoResults from '../../../../../components/GenericNoResults';
-import { GenericTable, GenericTableHeader, GenericTableHeaderCell, GenericTableBody } from '../../../../../components/GenericTable';
-import type { usePagination } from '../../../../../components/GenericTable/hooks/usePagination';
+import {
+	GenericTable,
+	GenericTableHeader,
+	GenericTableHeaderCell,
+	GenericTableBody,
+	GenericTableLoadingTable,
+} from '../../../../../components/GenericTable';
+import { usePagination } from '../../../../../components/GenericTable/hooks/usePagination';
 import UsersInRoleTableRow from './UsersInRoleTableRow';
 
 type UsersInRoleTableProps = {
-	users: IUserInRole[];
-	reload: () => void;
 	roleName: IRole['name'];
 	roleId: IRole['_id'];
 	description: IRole['description'];
-	total: number;
 	rid?: IRoom['_id'];
-	paginationData: ReturnType<typeof usePagination>;
 };
 
-// TODO: Missing error state
-const UsersInRoleTable = ({
-	users,
-	reload,
-	roleName,
-	roleId,
-	description,
-	total,
-	rid,
-	paginationData,
-}: UsersInRoleTableProps): ReactElement => {
+const UsersInRoleTable = ({ rid, roleId, roleName, description }: UsersInRoleTableProps): ReactElement => {
 	const t = useTranslation();
 	const setModal = useSetModal();
 	const dispatchToastMessage = useToastMessageDispatch();
-	const removeUser = useEndpoint('POST', '/v1/roles.removeUserFromRole');
-	const { current, itemsPerPage, setItemsPerPage: onSetItemsPerPage, setCurrent: onSetCurrent, ...paginationProps } = paginationData;
+	const queryClient = useQueryClient();
 
-	const closeModal = (): void => setModal();
+	const getUsersInRoleEndpoint = useEndpoint('GET', '/v1/roles.getUsersInRole');
+	const removeUserFromRoleEndpoint = useEndpoint('POST', '/v1/roles.removeUserFromRole');
 
-	const handleRemove = useMutableCallback((username) => {
-		const remove = async (): Promise<void> => {
+	const { current, itemsPerPage, setItemsPerPage: onSetItemsPerPage, setCurrent: onSetCurrent, ...paginationProps } = usePagination();
+
+	const query = useMemo(
+		() => ({
+			role: roleId,
+			...(rid && { roomId: rid }),
+			...(itemsPerPage && { count: itemsPerPage }),
+			...(current && { offset: current }),
+		}),
+		[itemsPerPage, current, rid, roleId],
+	);
+
+	const { data, isLoading, isSuccess, refetch, isError } = useQuery(['getUsersInRole', roleId, query], async () =>
+		getUsersInRoleEndpoint(query),
+	);
+
+	const users =
+		data?.users?.map((user) => ({
+			...user,
+			createdAt: new Date(user.createdAt),
+			_updatedAt: new Date(user._updatedAt),
+		})) || [];
+
+	const handleRemove = useEffectEvent((username) => {
+		const remove = async () => {
 			try {
-				await removeUser({ roleId, username, scope: rid });
+				await removeUserFromRoleEndpoint({ roleId, username, scope: rid });
 				dispatchToastMessage({ type: 'success', message: t('User_removed') });
-			} catch (error: unknown) {
+				queryClient.invalidateQueries(['getUsersInRole']);
+			} catch (error) {
 				dispatchToastMessage({ type: 'error', message: error });
 			} finally {
-				closeModal();
-				reload();
+				setModal(null);
 			}
 		};
 
 		setModal(
-			<GenericModal variant='danger' onConfirm={remove} onClose={closeModal} onCancel={closeModal} confirmText={t('Delete')}>
+			<GenericModal variant='danger' onConfirm={remove} onCancel={() => setModal(null)} confirmText={t('Delete')}>
 				{t('The_user_s_will_be_removed_from_role_s', username, description || roleName)}
 			</GenericModal>,
 		);
 	});
 
+	const headers = (
+		<>
+			<GenericTableHeaderCell>{t('Name')}</GenericTableHeaderCell>
+			<GenericTableHeaderCell>{t('Email')}</GenericTableHeaderCell>
+			<GenericTableHeaderCell w='x80'></GenericTableHeaderCell>
+		</>
+	);
+
 	return (
 		<>
-			{users.length === 0 && <GenericNoResults />}
-			{users.length > 0 && (
+			{isLoading && (
+				<GenericTable>
+					<GenericTableHeader>{headers}</GenericTableHeader>
+					<GenericTableBody>
+						<GenericTableLoadingTable headerCells={2} />
+					</GenericTableBody>
+				</GenericTable>
+			)}
+			{isSuccess && users?.length > 0 && (
 				<>
 					<GenericTable>
-						<GenericTableHeader>
-							<GenericTableHeaderCell>{t('Name')}</GenericTableHeaderCell>
-							<GenericTableHeaderCell>{t('Email')}</GenericTableHeaderCell>
-							<GenericTableHeaderCell w='x80'></GenericTableHeaderCell>
-						</GenericTableHeader>
+						<GenericTableHeader>{headers}</GenericTableHeader>
 						<GenericTableBody>
-							{users.map((user) => (
+							{users?.map((user) => (
 								<UsersInRoleTableRow onRemove={handleRemove} key={user?._id} user={user} />
 							))}
 						</GenericTableBody>
@@ -82,13 +110,15 @@ const UsersInRoleTable = ({
 						divider
 						current={current}
 						itemsPerPage={itemsPerPage}
-						count={total}
+						count={users.length || 0}
 						onSetItemsPerPage={onSetItemsPerPage}
 						onSetCurrent={onSetCurrent}
 						{...paginationProps}
 					/>
 				</>
 			)}
+			{users?.length === 0 && <GenericNoResults />}
+			{isError && <GenericError buttonAction={refetch} />}
 		</>
 	);
 };

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

@@ -1,7 +1,8 @@
 import type { IUserInRole } from '@rocket.chat/core-typings';
-import { Box, Button, Icon } from '@rocket.chat/fuselage';
-import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
+import { Box, IconButton } from '@rocket.chat/fuselage';
+import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { UserAvatar } from '@rocket.chat/ui-avatar';
+import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import React, { memo } from 'react';
 
@@ -14,10 +15,11 @@ type UsersInRoleTableRowProps = {
 };
 
 const UsersInRoleTableRow = ({ user, onRemove }: UsersInRoleTableRowProps): ReactElement => {
+	const t = useTranslation();
 	const { _id, name, username, avatarETag } = user;
 	const email = getUserEmailAddress(user);
 
-	const handleRemove = useMutableCallback(() => {
+	const handleRemove = useEffectEvent(() => {
 		onRemove(username);
 	});
 
@@ -27,26 +29,20 @@ const UsersInRoleTableRow = ({ user, onRemove }: UsersInRoleTableRowProps): Reac
 				<Box display='flex' alignItems='center'>
 					<UserAvatar size='x40' username={username ?? ''} etag={avatarETag} />
 					<Box display='flex' withTruncatedText mi={8}>
-						<Box display='flex' flexDirection='column' alignSelf='center' withTruncatedText>
-							<Box fontScale='p2m' withTruncatedText color='default'>
-								{name || username}
-							</Box>
-							{name && (
-								<Box fontScale='p2' color='hint' withTruncatedText>
-									{' '}
-									{`@${username}`}{' '}
-								</Box>
-							)}
+						<Box fontScale='p2m' withTruncatedText color='default'>
+							{name || username}
 						</Box>
+						{name && (
+							<Box mis={4} fontScale='p2' color='hint' withTruncatedText>
+								{`@${username}`}
+							</Box>
+						)}
 					</Box>
 				</Box>
 			</GenericTableCell>
 			<GenericTableCell withTruncatedText>{email}</GenericTableCell>
-			<GenericTableCell withTruncatedText>
-				{/* FIXME: Replace to IconButton */}
-				<Button small square secondary danger onClick={handleRemove}>
-					<Icon name='trash' size='x20' />
-				</Button>
+			<GenericTableCell>
+				<IconButton small icon='trash' title={t('Remove')} danger onClick={handleRemove} />
 			</GenericTableCell>
 		</GenericTableRow>
 	);