diff --git a/apps/meteor/client/views/admin/users/UsersTable/UsersTable.tsx b/apps/meteor/client/views/admin/users/UsersTable/UsersTable.tsx index 5d959b41ec80..a9773413f0d3 100644 --- a/apps/meteor/client/views/admin/users/UsersTable/UsersTable.tsx +++ b/apps/meteor/client/views/admin/users/UsersTable/UsersTable.tsx @@ -20,7 +20,7 @@ import { usePagination } from '../../../../components/GenericTable/hooks/usePagi import { useSort } from '../../../../components/GenericTable/hooks/useSort'; import { useFilterActiveUsers } from '../hooks/useFilterActiveUsers'; import { useFilterPendingUsers } from '../hooks/useFilterPendingUsers'; -import { useFilterUsersByRole } from '../hooks/useFilterUsersByrole'; +import { useFilterUsersByRole } from '../hooks/useFilterUsersByRole'; import { useListUsers } from '../hooks/useListUsers'; import UsersTableRow from './UsersTableRow'; @@ -135,11 +135,25 @@ const UsersTable = ({ reload, tab }: UsersTableProps): ReactElement | null => { {t('Roles')} ), - - {t('Registration_status')} - , + (tab === 'active' || tab === 'all') && ( + + {t('Registration_status')} + + ), + tab === 'pending' && ( + + {t('Pending_action')} + + ), ], - [mediaQuery, setSort, sortBy, sortDirection, t], + [mediaQuery, setSort, sortBy, sortDirection, t, tab], ); if (error) { @@ -152,7 +166,7 @@ const UsersTable = ({ reload, tab }: UsersTableProps): ReactElement | null => { { {headers} {filteredUsers.map((user) => ( - + ))} diff --git a/apps/meteor/client/views/admin/users/UsersTable/UsersTableRow.tsx b/apps/meteor/client/views/admin/users/UsersTable/UsersTableRow.tsx index 64e3f4858ffa..a59edf905854 100644 --- a/apps/meteor/client/views/admin/users/UsersTable/UsersTableRow.tsx +++ b/apps/meteor/client/views/admin/users/UsersTable/UsersTableRow.tsx @@ -11,15 +11,17 @@ import { UserStatus } from '../../../../components/UserStatus'; import UserAvatar from '../../../../components/avatar/UserAvatar'; type UsersTableRowProps = { - user: Pick; + tab: string; + user: Partial; onClick: (id: IUser['_id']) => void; mediaQuery: boolean; }; -const UsersTableRow = ({ user, onClick, mediaQuery }: UsersTableRowProps): ReactElement => { +const UsersTableRow = ({ tab, user, onClick, mediaQuery }: UsersTableRowProps): ReactElement => { const t = useTranslation(); - const { _id, emails, username, name, status, roles, active, avatarETag } = user; + const { _id, emails, username, name, status, roles, active, avatarETag } = user as IUser; const registrationStatusText = active ? t('Active') : t('Deactivated'); + const pendingAction = user.active === false ? t('Activate') : t('User_first_log_in'); const roleNames = (roles || []) .map((roleId) => (Roles.findOne(roleId, { fields: { name: 1 } }) as IRole | undefined)?.name) @@ -65,10 +67,20 @@ const UsersTableRow = ({ user, onClick, mediaQuery }: UsersTableRowProps): React )} {emails?.length && emails[0].address} + {mediaQuery && {roleNames}} - - {registrationStatusText} - + + {(tab === 'active' || tab === 'all') && ( + + {registrationStatusText} + + )} + + {tab === 'pending' && ( + + {pendingAction} + + )} ); }; diff --git a/apps/meteor/client/views/admin/users/hooks/useFilterUsersByRole.ts b/apps/meteor/client/views/admin/users/hooks/useFilterUsersByRole.ts new file mode 100644 index 000000000000..926fce0e0c70 --- /dev/null +++ b/apps/meteor/client/views/admin/users/hooks/useFilterUsersByRole.ts @@ -0,0 +1,9 @@ +import type { IUser } from '@rocket.chat/core-typings'; + +export const useFilterUsersByRole = (users: Partial[], selectedRoles: string[]) => { + if (!users.length || !selectedRoles.length || selectedRoles.includes('all')) return users; + + return users.filter((currentUser) => { + return currentUser.roles?.some((currentRole) => selectedRoles.includes(currentRole)); + }); +}; diff --git a/apps/meteor/client/views/admin/users/hooks/useFilterUsersByrole.ts b/apps/meteor/client/views/admin/users/hooks/useFilterUsersByrole.ts deleted file mode 100644 index 44b6c6ae1217..000000000000 --- a/apps/meteor/client/views/admin/users/hooks/useFilterUsersByrole.ts +++ /dev/null @@ -1,12 +0,0 @@ -import type { IUser } from '@rocket.chat/core-typings'; - -export const useFilterUsersByRole = ( - users: Pick[], - selectedRoles: string[], -) => { - if (!users.length || !selectedRoles.length || selectedRoles.includes('all')) return users; - - return users.filter((currentUser) => { - return currentUser.roles.some((currentRole) => selectedRoles.includes(currentRole)); - }); -};