create new pendingAction collumn

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')}
 				</GenericTableHeaderCell>
 			),
-			<GenericTableHeaderCell w='x100' key='status' direction={sortDirection} active={sortBy === 'status'} onClick={setSort} sort='status'>
-				{t('Registration_status')}
-			</GenericTableHeaderCell>,
+			(tab === 'active' || tab === 'all') && (
+				<GenericTableHeaderCell
+					w='x100'
+					key='status'
+					direction={sortDirection}
+					active={sortBy === 'status'}
+					onClick={setSort}
+					sort='status'
+				>
+					{t('Registration_status')}
+				</GenericTableHeaderCell>
+			),
+			tab === 'pending' && (
+				<GenericTableHeaderCell w='x100' key='action' direction={sortDirection} active={sortBy === 'name'} onClick={setSort} sort='name'>
+					{t('Pending_action')}
+				</GenericTableHeaderCell>
+			),
 		],
-		[mediaQuery, setSort, sortBy, sortDirection, t],
+		[mediaQuery, setSort, sortBy, sortDirection, t, tab],
 	);
 
 	if (error) {
@@ -152,7 +166,7 @@ const UsersTable = ({ reload, tab }: UsersTableProps): ReactElement | null => {
 				<MultiSelectCustom
 					dropdownOptions={roleFilterOptions}
 					defaultTitle='All_roles'
-					selectedOptionsTitle='Rooms'
+					selectedOptionsTitle='Roles'
 					setSelectedOptions={setRoleFilterSelectedOptions}
 					selectedOptions={roleFilterSelectedOptions}
 					customSetSelected={setRoleFilterOptions}
@@ -170,7 +184,7 @@ const UsersTable = ({ reload, tab }: UsersTableProps): ReactElement | null => {
 						<GenericTableHeader>{headers}</GenericTableHeader>
 						<GenericTableBody>
 							{filteredUsers.map((user) => (
-								<UsersTableRow key={user._id} onClick={handleClick} mediaQuery={mediaQuery} user={user} />
+								<UsersTableRow key={user._id} onClick={handleClick} mediaQuery={mediaQuery} user={user} tab={tab} />
 							))}
 						</GenericTableBody>
 					</GenericTable>

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<IUser, '_id' | 'username' | 'name' | 'status' | 'emails' | 'active' | 'avatarETag' | 'roles'>;
+	tab: string;
+	user: Partial<IUser>;
 	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
 			)}
 
 			<GenericTableCell withTruncatedText>{emails?.length && emails[0].address}</GenericTableCell>
+
 			{mediaQuery && <GenericTableCell withTruncatedText>{roleNames}</GenericTableCell>}
-			<GenericTableCell fontScale='p2' color='hint' withTruncatedText>
-				{registrationStatusText}
-			</GenericTableCell>
+
+			{(tab === 'active' || tab === 'all') && (
+				<GenericTableCell fontScale='p2' color='hint' withTruncatedText>
+					{registrationStatusText}
+				</GenericTableCell>
+			)}
+
+			{tab === 'pending' && (
+				<GenericTableCell fontScale='p2' color='hint' withTruncatedText>
+					{pendingAction}
+				</GenericTableCell>
+			)}
 		</GenericTableRow>
 	);
 };

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<IUser>[], selectedRoles: string[]) => {
+	if (!users.length || !selectedRoles.length || selectedRoles.includes('all')) return users;
+
+	return users.filter((currentUser) => {
+		return currentUser.roles?.some((currentRole) => selectedRoles.includes(currentRole));
+	});
+};