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));
- });
-};