Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 8 commits into from
May 31, 2024
Merged

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

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
5f0ebe0
fix: Users in role list not working properly
dougfabris May 10, 2024
3a0f91e
Merge remote-tracking branch 'origin/develop' into fix/usersInRoleList
dougfabris May 16, 2024
8ebf3cc
fix: ui tweaks
dougfabris May 16, 2024
e9a1de4
test: add e2e tests
dougfabris May 16, 2024
1b5e8b1
Merge remote-tracking branch 'origin/develop' into fix/usersInRoleList
dougfabris May 23, 2024
68984cd
chore: changeset
dougfabris May 23, 2024
3b06b2b
fix: review
dougfabris May 23, 2024
e077ec0
Merge branch 'develop' into fix/usersInRoleList
kodiakhq[bot] May 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/rare-colts-repair.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@rocket.chat/meteor': patch
---

Fixes an issue not rendering the proper error and empty state on users in role table
88 changes: 55 additions & 33 deletions apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRolePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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 });
}
Expand All @@ -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>
Expand Down
107 changes: 68 additions & 39 deletions apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRoleTable/UsersInRoleTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,79 +1,106 @@
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 && users.length > 0 && (
<>
dougfabris marked this conversation as resolved.
Show resolved Hide resolved
<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>
Expand All @@ -82,13 +109,15 @@ const UsersInRoleTable = ({
divider
current={current}
itemsPerPage={itemsPerPage}
count={total}
count={users.length || 0}
onSetItemsPerPage={onSetItemsPerPage}
onSetCurrent={onSetCurrent}
{...paginationProps}
/>
</>
)}
{users && users.length === 0 && <GenericNoResults />}
{isError && <GenericError buttonAction={refetch} />}
</>
);
};
Expand Down
32 changes: 14 additions & 18 deletions ...eteor/client/views/admin/permissions/UsersInRole/UsersInRoleTable/UsersInRoleTableRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -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);
});

Expand All @@ -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>
);
Expand Down