From 90da483aa7094fa9893a25cab15a7d09726aebaf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Henrique=20Guimar=C3=A3es=20Ribeiro?=
 <henrique.jobs1@gmail.com>
Date: Wed, 4 Oct 2023 16:32:28 -0300
Subject: [PATCH] feat: Implement users page active tab (#30242)

* feat: :sparkles: Filter users list by active users

Implemented the necessary resources to filter the list of users and to return only those who are active, when the active tab is enabled.

* feat: :sparkles: Implement new roles filter in the admin users page

Implemented a new filter on the users' page that retrieves the roles list and creates a dropdown menu. When any of its options is selected, it will filter the users' list to display only those with the selected roles. Additionally, I made some minor adjustments to the MultiSelectCustom component and introduced some new hooks.

* WIP: Remove filters

* feat: :sparkles: WIP: Implement new actions menu for users page table

* feat: :sparkles: Finish users table menu

Completed the implementation of the users table actions menu by preventing the propagation of the click event that triggered the opening of the contextual bar when the menu was clicked. Also, ensured that the contextual bar only opens when the "Enter" or "Space" keys are used for keyboard navigation and enhanced the options menu in the contextual bar as specified in Figma.

* refactor: :recycle: Remove status badge from contextual bar and reorg

Removed the status from the users page contextual bar (the need to remove this may not be concrete, for now it will be only commented until the final decision is made). Also changed the order of the contextual bar info and changed some minor styles to follow figma specs.

* Typecheck

* Re-add icon back to InfoPanelTitle

* Hide registration status and justify actions menu

* Review, reintroduce contextual bar full name and status
---
 .../components/InfoPanel/InfoPanelTitle.tsx   |   6 +-
 .../components/UserCard/UserCardRoles.tsx     |   2 +-
 .../client/components/UserInfo/UserInfo.tsx   |  40 ++---
 .../admin/users/AdminUserInfoActions.tsx      |  10 +-
 .../views/admin/users/AdminUsersPage.tsx      |  12 +-
 .../admin/users/UsersTable/UsersTable.tsx     | 152 +++++++++---------
 .../admin/users/UsersTable/UsersTableRow.tsx  |  94 ++++++++++-
 .../admin/users/hooks/useFilterActiveUsers.ts |  10 ++
 .../admin/users/hooks/useFilterUsersByrole.ts |  12 ++
 .../views/admin/users/hooks/useListUsers.ts   |  69 ++++++++
 .../rocketchat-i18n/i18n/en.i18n.json         |   6 +-
 .../MultiSelectCustom/MultiSelectCustom.tsx   |   4 +-
 .../MultiSelectCustomAnchor.tsx               |   9 +-
 .../MultiSelectCustomList.tsx                 |   4 +-
 14 files changed, 307 insertions(+), 123 deletions(-)
 create mode 100644 apps/meteor/client/views/admin/users/hooks/useFilterActiveUsers.ts
 create mode 100644 apps/meteor/client/views/admin/users/hooks/useFilterUsersByrole.ts
 create mode 100644 apps/meteor/client/views/admin/users/hooks/useListUsers.ts

diff --git a/apps/meteor/client/components/InfoPanel/InfoPanelTitle.tsx b/apps/meteor/client/components/InfoPanel/InfoPanelTitle.tsx
index 7ea4de6d9867..615f6762efd1 100644
--- a/apps/meteor/client/components/InfoPanel/InfoPanelTitle.tsx
+++ b/apps/meteor/client/components/InfoPanel/InfoPanelTitle.tsx
@@ -5,15 +5,15 @@ import React from 'react';
 
 type InfoPanelTitleProps = {
 	title: string;
-	icon: ReactNode;
+	icon?: ReactNode;
 };
 
 const isValidIcon = (icon: ReactNode): icon is IconName => typeof icon === 'string';
 
 const InfoPanelTitle: FC<InfoPanelTitleProps> = ({ title, icon }) => (
-	<Box display='flex' flexShrink={0} alignItems='center' fontScale='h4' color='default' withTruncatedText>
+	<Box display='flex' flexShrink={0} alignItems='center' fontScale='p1m' color='default' withTruncatedText>
 		{isValidIcon(icon) ? <Icon name={icon} size='x22' /> : icon}
-		<Box mis={8} withTruncatedText title={title}>
+		<Box withTruncatedText title={title} mis={8}>
 			{title}
 		</Box>
 	</Box>
diff --git a/apps/meteor/client/components/UserCard/UserCardRoles.tsx b/apps/meteor/client/components/UserCard/UserCardRoles.tsx
index 9cd22ebdff35..f7a977d4a4dc 100644
--- a/apps/meteor/client/components/UserCard/UserCardRoles.tsx
+++ b/apps/meteor/client/components/UserCard/UserCardRoles.tsx
@@ -6,7 +6,7 @@ import UserCardInfo from './UserCardInfo';
 
 const UserCardRoles = ({ children }: { children: ReactNode }): ReactElement => (
 	<Box m='neg-x2'>
-		<UserCardInfo flexWrap='wrap' display='flex' flexShrink={0}>
+		<UserCardInfo mb={8} flexWrap='wrap' display='flex' flexShrink={0}>
 			{children}
 		</UserCardInfo>
 	</Box>
diff --git a/apps/meteor/client/components/UserInfo/UserInfo.tsx b/apps/meteor/client/components/UserInfo/UserInfo.tsx
index bdce27d028ad..8a42f1b87026 100644
--- a/apps/meteor/client/components/UserInfo/UserInfo.tsx
+++ b/apps/meteor/client/components/UserInfo/UserInfo.tsx
@@ -81,12 +81,19 @@ const UserInfo = ({
 					{userDisplayName && <InfoPanel.Title icon={status} title={userDisplayName} />}
 					{statusText && (
 						<InfoPanel.Text>
-							<MarkdownText content={statusText} parseEmoji={true} />
+							<MarkdownText content={statusText} parseEmoji={true} variant='inline' />
 						</InfoPanel.Text>
 					)}
 				</InfoPanel.Section>
 
 				<InfoPanel.Section>
+					{nickname && (
+						<InfoPanel.Field>
+							<InfoPanel.Label>{t('Nickname')}</InfoPanel.Label>
+							<InfoPanel.Text>{nickname}</InfoPanel.Text>
+						</InfoPanel.Field>
+					)}
+
 					{roles.length !== 0 && (
 						<InfoPanel.Field>
 							<InfoPanel.Label>{t('Roles')}</InfoPanel.Label>
@@ -94,6 +101,13 @@ const UserInfo = ({
 						</InfoPanel.Field>
 					)}
 
+					{username && username !== name && (
+						<InfoPanel.Field>
+							<InfoPanel.Label>{t('Username')}</InfoPanel.Label>
+							<InfoPanel.Text data-qa='UserInfoUserName'>{username}</InfoPanel.Text>
+						</InfoPanel.Field>
+					)}
+
 					{Number.isInteger(utcOffset) && (
 						<InfoPanel.Field>
 							<InfoPanel.Label>{t('Local_Time')}</InfoPanel.Label>
@@ -101,10 +115,12 @@ const UserInfo = ({
 						</InfoPanel.Field>
 					)}
 
-					{username && username !== name && (
+					{bio && (
 						<InfoPanel.Field>
-							<InfoPanel.Label>{t('Username')}</InfoPanel.Label>
-							<InfoPanel.Text data-qa='UserInfoUserName'>{username}</InfoPanel.Text>
+							<InfoPanel.Label>{t('Bio')}</InfoPanel.Label>
+							<InfoPanel.Text withTruncatedText={false}>
+								<MarkdownText variant='inline' content={bio} />
+							</InfoPanel.Text>
 						</InfoPanel.Field>
 					)}
 
@@ -122,22 +138,6 @@ const UserInfo = ({
 						</InfoPanel.Field>
 					)}
 
-					{nickname && (
-						<InfoPanel.Field>
-							<InfoPanel.Label>{t('Nickname')}</InfoPanel.Label>
-							<InfoPanel.Text>{nickname}</InfoPanel.Text>
-						</InfoPanel.Field>
-					)}
-
-					{bio && (
-						<InfoPanel.Field>
-							<InfoPanel.Label>{t('Bio')}</InfoPanel.Label>
-							<InfoPanel.Text withTruncatedText={false}>
-								<MarkdownText variant='inline' content={bio} />
-							</InfoPanel.Text>
-						</InfoPanel.Field>
-					)}
-
 					{phone && (
 						<InfoPanel.Field>
 							<InfoPanel.Label>{t('Phone')}</InfoPanel.Label>
diff --git a/apps/meteor/client/views/admin/users/AdminUserInfoActions.tsx b/apps/meteor/client/views/admin/users/AdminUserInfoActions.tsx
index d003b47ba2af..dd0bf833f72b 100644
--- a/apps/meteor/client/views/admin/users/AdminUserInfoActions.tsx
+++ b/apps/meteor/client/views/admin/users/AdminUserInfoActions.tsx
@@ -83,8 +83,8 @@ const AdminUserInfoActions = ({
 			...(changeAdminStatusAction && !isFederatedUser && { makeAdmin: changeAdminStatusAction }),
 			...(resetE2EKeyAction && !isFederatedUser && { resetE2EKey: resetE2EKeyAction }),
 			...(resetTOTPAction && !isFederatedUser && { resetTOTP: resetTOTPAction }),
-			...(deleteUserAction && { delete: deleteUserAction }),
 			...(changeUserStatusAction && !isFederatedUser && { changeActiveStatus: changeUserStatusAction }),
+			...(deleteUserAction && { delete: deleteUserAction }),
 		}),
 		[
 			t,
@@ -116,7 +116,13 @@ const AdminUserInfoActions = ({
 				secondary
 				flexShrink={0}
 				key='menu'
-				renderItem={({ label: { label, icon }, ...props }): ReactElement => <Option label={label} title={label} icon={icon} {...props} />}
+				renderItem={({ label: { label, icon }, ...props }): ReactElement =>
+					label === 'Delete' ? (
+						<Option label={label} title={label} icon={icon} variant='danger' {...props} />
+					) : (
+						<Option label={label} title={label} icon={icon} {...props} />
+					)
+				}
 				options={menuOptions}
 			/>
 		);
diff --git a/apps/meteor/client/views/admin/users/AdminUsersPage.tsx b/apps/meteor/client/views/admin/users/AdminUsersPage.tsx
index e4f1f25b2c7b..e0e88bedcd90 100644
--- a/apps/meteor/client/views/admin/users/AdminUsersPage.tsx
+++ b/apps/meteor/client/views/admin/users/AdminUsersPage.tsx
@@ -25,7 +25,7 @@ const UsersPage = (): ReactElement => {
 	const canCreateUser = usePermission('create-user');
 	const canBulkCreateUser = usePermission('bulk-register-user');
 
-	const [tab, setTab] = useState<string>('all');
+	const [tab, setTab] = useState<'all' | 'invited' | 'new' | 'active' | 'deactivated'>('all');
 
 	useEffect(() => {
 		if (!context || !seatsCap) {
@@ -68,20 +68,20 @@ const UsersPage = (): ReactElement => {
 						<Tabs.Item selected={!tab || tab === 'all'} onClick={() => setTab('all')}>
 							{t('All')}
 						</Tabs.Item>
-						<Tabs.Item selected={tab === 'tab-invited'} onClick={() => setTab('tab-invited')}>
+						<Tabs.Item selected={tab === 'invited'} onClick={() => setTab('invited')}>
 							{t('Invited')}
 						</Tabs.Item>
-						<Tabs.Item selected={tab === 'tab-new'} onClick={() => setTab('tab-new')}>
+						<Tabs.Item selected={tab === 'new'} onClick={() => setTab('new')}>
 							{t('New_users')}
 						</Tabs.Item>
-						<Tabs.Item selected={tab === 'tab-active'} onClick={() => setTab('tab-active')}>
+						<Tabs.Item selected={tab === 'active'} onClick={() => setTab('active')}>
 							{t('Active')}
 						</Tabs.Item>
-						<Tabs.Item selected={tab === 'tab-deactivated'} onClick={() => setTab('tab-deactivated')}>
+						<Tabs.Item selected={tab === 'deactivated'} onClick={() => setTab('deactivated')}>
 							{t('Deactivated')}
 						</Tabs.Item>
 					</Tabs>
-					<UsersTable reload={reload} />
+					<UsersTable reload={reload} tab={tab} onReload={handleReload} />
 				</Page.Content>
 			</Page>
 			{context && (
diff --git a/apps/meteor/client/views/admin/users/UsersTable/UsersTable.tsx b/apps/meteor/client/views/admin/users/UsersTable/UsersTable.tsx
index 44175ec47de7..7f2dd575e66e 100644
--- a/apps/meteor/client/views/admin/users/UsersTable/UsersTable.tsx
+++ b/apps/meteor/client/views/admin/users/UsersTable/UsersTable.tsx
@@ -1,8 +1,6 @@
-import { Pagination } from '@rocket.chat/fuselage';
+import { Pagination, States, StatesAction, StatesActions, StatesIcon, StatesTitle } from '@rocket.chat/fuselage';
 import { useMediaQuery, useDebouncedValue, useMutableCallback } from '@rocket.chat/fuselage-hooks';
-import { escapeRegExp } from '@rocket.chat/string-helpers';
-import { useEndpoint, useRoute, useToastMessageDispatch, useTranslation } from '@rocket.chat/ui-contexts';
-import { useQuery } from '@tanstack/react-query';
+import { useRouter, useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement, MutableRefObject } from 'react';
 import React, { useRef, useMemo, useState, useEffect } from 'react';
 
@@ -17,86 +15,73 @@ import {
 } from '../../../../components/GenericTable';
 import { usePagination } from '../../../../components/GenericTable/hooks/usePagination';
 import { useSort } from '../../../../components/GenericTable/hooks/useSort';
+import { useFilterActiveUsers } from '../hooks/useFilterActiveUsers';
+import { useListUsers } from '../hooks/useListUsers';
 import UsersTableRow from './UsersTableRow';
 
 type UsersTableProps = {
 	reload: MutableRefObject<() => void>;
+	tab: string;
+	onReload: () => void;
 };
 
 // TODO: Missing error state
-const UsersTable = ({ reload }: UsersTableProps): ReactElement | null => {
+const UsersTable = ({ reload, tab, onReload }: UsersTableProps): ReactElement | null => {
 	const t = useTranslation();
-	const usersRoute = useRoute('admin-users');
+	const router = useRouter();
 	const mediaQuery = useMediaQuery('(min-width: 1024px)');
+
 	const [text, setText] = useState('');
 
 	const { current, itemsPerPage, setItemsPerPage, setCurrent, ...paginationProps } = usePagination();
 	const { sortBy, sortDirection, setSort } = useSort<'name' | 'username' | 'emails.address' | 'status'>('name');
 
 	const searchTerm = useDebouncedValue(text, 500);
-	const prevSearchTerm = useRef<string>('');
-
-	const query = useDebouncedValue(
-		useMemo(() => {
-			if (searchTerm !== prevSearchTerm.current) {
-				setCurrent(0);
-			}
-
-			return {
-				fields: JSON.stringify({
-					name: 1,
-					username: 1,
-					emails: 1,
-					roles: 1,
-					status: 1,
-					avatarETag: 1,
-					active: 1,
-				}),
-				query: JSON.stringify({
-					$or: [
-						{ 'emails.address': { $regex: escapeRegExp(searchTerm), $options: 'i' } },
-						{ username: { $regex: escapeRegExp(searchTerm), $options: 'i' } },
-						{ name: { $regex: escapeRegExp(searchTerm), $options: 'i' } },
-					],
-				}),
-				sort: `{ "${sortBy}": ${sortDirection === 'asc' ? 1 : -1} }`,
-				count: itemsPerPage,
-				offset: searchTerm === prevSearchTerm.current ? current : 0,
-			};
-		}, [searchTerm, sortBy, sortDirection, itemsPerPage, current, setCurrent]),
-		500,
+	const prevSearchTerm = useRef('');
+
+	const { data, isLoading, isSuccess, isError, refetch } = useListUsers(
+		searchTerm,
+		prevSearchTerm,
+		setCurrent,
+		sortBy,
+		sortDirection,
+		itemsPerPage,
+		current,
 	);
 
-	const getUsers = useEndpoint('GET', '/v1/users.list');
+	const useAllUsers = () => (tab === 'all' && isSuccess ? data?.users : []);
 
-	const dispatchToastMessage = useToastMessageDispatch();
-
-	const { data, isLoading, error, isSuccess, refetch } = useQuery(
-		['users', query],
-		async () => {
-			const users = await getUsers(query);
-			return users;
-		},
-		{
-			onError: (error) => {
-				dispatchToastMessage({ type: 'error', message: error });
-			},
-		},
-	);
+	const filteredUsers = [...useAllUsers(), ...useFilterActiveUsers(data?.users, tab)];
 
 	useEffect(() => {
 		reload.current = refetch;
-	}, [reload, refetch]);
-
-	useEffect(() => {
 		prevSearchTerm.current = searchTerm;
-	}, [searchTerm]);
+	}, [reload, refetch, searchTerm]);
+
+	const isKeyboardEvent = (
+		event: React.MouseEvent<HTMLElement, MouseEvent> | React.KeyboardEvent<HTMLElement>,
+	): event is React.KeyboardEvent<HTMLElement> => {
+		return (event as React.KeyboardEvent<HTMLElement>).key !== undefined;
+	};
+
+	const handleClickOrKeyDown = useMutableCallback(
+		(id, e: React.MouseEvent<HTMLElement, MouseEvent> | React.KeyboardEvent<HTMLElement>): void => {
+			e.stopPropagation();
+
+			const keyboardSubmitKeys = ['Enter', ' '];
 
-	const handleClick = useMutableCallback((id): void =>
-		usersRoute.push({
-			context: 'info',
-			id,
-		}),
+			if (isKeyboardEvent(e) && !keyboardSubmitKeys.includes(e.key)) {
+				return;
+			}
+
+			router.navigate({
+				name: 'admin-users',
+				params: {
+					context: 'info',
+					id,
+				},
+			});
+		},
 	);
 
 	const headers = useMemo(
@@ -131,17 +116,23 @@ const UsersTable = ({ reload }: 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 === 'all' && (
+				<GenericTableHeaderCell
+					w='x100'
+					key='status'
+					direction={sortDirection}
+					active={sortBy === 'status'}
+					onClick={setSort}
+					sort='status'
+				>
+					{t('Registration_status')}
+				</GenericTableHeaderCell>
+			),
+			<GenericTableHeaderCell key='actions' w='x44' />,
 		],
-		[mediaQuery, setSort, sortBy, sortDirection, t],
+		[mediaQuery, setSort, sortBy, sortDirection, t, tab],
 	);
 
-	if (error) {
-		return null;
-	}
-
 	return (
 		<>
 			<FilterByText autoFocus placeholder={t('Search_Users')} onChange={({ text }): void => setText(text)} />
@@ -151,13 +142,21 @@ const UsersTable = ({ reload }: UsersTableProps): ReactElement | null => {
 					<GenericTableBody>{isLoading && <GenericTableLoadingTable headerCells={5} />}</GenericTableBody>
 				</GenericTable>
 			)}
-			{data?.users && data.count > 0 && isSuccess && (
+			{isSuccess && !!data && !!filteredUsers && data.count > 0 && (
 				<>
 					<GenericTable>
 						<GenericTableHeader>{headers}</GenericTableHeader>
 						<GenericTableBody>
-							{data?.users.map((user) => (
-								<UsersTableRow key={user._id} onClick={handleClick} mediaQuery={mediaQuery} user={user} />
+							{filteredUsers.map((user) => (
+								<UsersTableRow
+									key={user._id}
+									onClick={handleClickOrKeyDown}
+									mediaQuery={mediaQuery}
+									user={user}
+									refetchUsers={refetch}
+									onReload={onReload}
+									tab={tab}
+								/>
 							))}
 						</GenericTableBody>
 					</GenericTable>
@@ -173,6 +172,15 @@ const UsersTable = ({ reload }: UsersTableProps): ReactElement | null => {
 				</>
 			)}
 			{isSuccess && data?.count === 0 && <GenericNoResults />}
+			{isError && (
+				<States>
+					<StatesIcon name='warning' variation='danger' />
+					<StatesTitle>{t('Something_went_wrong')}</StatesTitle>
+					<StatesActions>
+						<StatesAction onClick={() => refetch()}>{t('Reload_page')}</StatesAction>
+					</StatesActions>
+				</States>
+			)}
 		</>
 	);
 };
diff --git a/apps/meteor/client/views/admin/users/UsersTable/UsersTableRow.tsx b/apps/meteor/client/views/admin/users/UsersTable/UsersTableRow.tsx
index 64e3f4858ffa..637ad5018615 100644
--- a/apps/meteor/client/views/admin/users/UsersTable/UsersTableRow.tsx
+++ b/apps/meteor/client/views/admin/users/UsersTable/UsersTableRow.tsx
@@ -1,7 +1,9 @@
-import { UserStatus as Status } from '@rocket.chat/core-typings';
+import { UserStatus as Status, isUserFederated } from '@rocket.chat/core-typings';
 import type { IRole, IUser } from '@rocket.chat/core-typings';
-import { Box } from '@rocket.chat/fuselage';
+import { Box, Menu, Option } from '@rocket.chat/fuselage';
+import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useTranslation } from '@rocket.chat/ui-contexts';
+import type { useQuery } from '@tanstack/react-query';
 import type { ReactElement } from 'react';
 import React from 'react';
 
@@ -9,14 +11,22 @@ import { Roles } from '../../../../../app/models/client';
 import { GenericTableRow, GenericTableCell } from '../../../../components/GenericTable';
 import { UserStatus } from '../../../../components/UserStatus';
 import UserAvatar from '../../../../components/avatar/UserAvatar';
+import { useChangeAdminStatusAction } from '../hooks/useChangeAdminStatusAction';
+import { useChangeUserStatusAction } from '../hooks/useChangeUserStatusAction';
+import { useDeleteUserAction } from '../hooks/useDeleteUserAction';
+import { useResetE2EEKeyAction } from '../hooks/useResetE2EEKeyAction';
+import { useResetTOTPAction } from '../hooks/useResetTOTPAction';
 
 type UsersTableRowProps = {
 	user: Pick<IUser, '_id' | 'username' | 'name' | 'status' | 'emails' | 'active' | 'avatarETag' | 'roles'>;
-	onClick: (id: IUser['_id']) => void;
+	onClick: (id: IUser['_id'], e: React.MouseEvent<HTMLElement, MouseEvent> | React.KeyboardEvent<HTMLElement>) => void;
 	mediaQuery: boolean;
+	refetchUsers: ReturnType<typeof useQuery>['refetch'];
+	onReload: () => void;
+	tab: string;
 };
 
-const UsersTableRow = ({ user, onClick, mediaQuery }: UsersTableRowProps): ReactElement => {
+const UsersTableRow = ({ user, onClick, mediaQuery, refetchUsers, onReload, tab }: UsersTableRowProps): ReactElement => {
 	const t = useTranslation();
 	const { _id, emails, username, name, status, roles, active, avatarETag } = user;
 	const registrationStatusText = active ? t('Active') : t('Deactivated');
@@ -26,10 +36,54 @@ const UsersTableRow = ({ user, onClick, mediaQuery }: UsersTableRowProps): React
 		.filter((roleName): roleName is string => !!roleName)
 		.join(', ');
 
+	const userId = user._id;
+	const isAdmin = user.roles?.includes('admin');
+	const isActive = user.active;
+	const isFederatedUser = isUserFederated(user);
+
+	const onChange = useMutableCallback(() => {
+		onReload();
+		refetchUsers();
+	});
+
+	const changeAdminStatusAction = useChangeAdminStatusAction(userId, isAdmin, onChange);
+	const changeUserStatusAction = useChangeUserStatusAction(userId, isActive, onChange);
+	const deleteUserAction = useDeleteUserAction(userId, onChange, onReload);
+	const resetTOTPAction = useResetTOTPAction(userId);
+	const resetE2EKeyAction = useResetE2EEKeyAction(userId);
+
+	const menuOptions = {
+		...(changeAdminStatusAction &&
+			!isFederatedUser && {
+				makeAdmin: {
+					label: { label: changeAdminStatusAction.label, icon: changeAdminStatusAction.icon },
+					action: changeAdminStatusAction.action,
+				},
+			}),
+		...(resetE2EKeyAction &&
+			!isFederatedUser && {
+				resetE2EKey: { label: { label: resetE2EKeyAction.label, icon: resetE2EKeyAction.icon }, action: resetE2EKeyAction.action },
+			}),
+		...(resetTOTPAction &&
+			!isFederatedUser && {
+				resetTOTP: { label: { label: resetTOTPAction.label, icon: resetTOTPAction.icon }, action: resetTOTPAction.action },
+			}),
+		...(changeUserStatusAction &&
+			!isFederatedUser && {
+				changeActiveStatus: {
+					label: { label: changeUserStatusAction.label, icon: changeUserStatusAction.icon },
+					action: changeUserStatusAction.action,
+				},
+			}),
+		...(deleteUserAction && {
+			delete: { label: { label: deleteUserAction.label, icon: deleteUserAction.icon }, action: deleteUserAction.action },
+		}),
+	};
+
 	return (
 		<GenericTableRow
-			onKeyDown={(): void => onClick(_id)}
-			onClick={(): void => onClick(_id)}
+			onKeyDown={(e): void => onClick(_id, e)}
+			onClick={(e): void => onClick(_id, e)}
 			tabIndex={0}
 			role='link'
 			action
@@ -66,8 +120,32 @@ 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}
+			{tab === 'all' && (
+				<GenericTableCell fontScale='p2' color='hint' withTruncatedText>
+					{registrationStatusText}
+				</GenericTableCell>
+			)}
+			<GenericTableCell
+				display='flex'
+				justifyContent='flex-end'
+				onClick={(e): void => {
+					e.stopPropagation();
+				}}
+			>
+				<Menu
+					mi={4}
+					placement='bottom-start'
+					flexShrink={0}
+					key='menu'
+					renderItem={({ label: { label, icon }, ...props }): ReactElement =>
+						label === 'Delete' ? (
+							<Option label={label} title={label} icon={icon} variant='danger' {...props} />
+						) : (
+							<Option label={label} title={label} icon={icon} {...props} />
+						)
+					}
+					options={menuOptions}
+				/>
 			</GenericTableCell>
 		</GenericTableRow>
 	);
diff --git a/apps/meteor/client/views/admin/users/hooks/useFilterActiveUsers.ts b/apps/meteor/client/views/admin/users/hooks/useFilterActiveUsers.ts
new file mode 100644
index 000000000000..a8dd6acfa3b7
--- /dev/null
+++ b/apps/meteor/client/views/admin/users/hooks/useFilterActiveUsers.ts
@@ -0,0 +1,10 @@
+import type { IUser } from '@rocket.chat/core-typings';
+
+export const useFilterActiveUsers = (
+	users: Pick<IUser, '_id' | 'username' | 'name' | 'status' | 'roles' | 'emails' | 'active' | 'avatarETag'>[] | undefined,
+	tab: string,
+) => {
+	if (!users || tab !== 'active') return [];
+
+	return users.filter((currentUser) => currentUser.active);
+};
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..44b6c6ae1217
--- /dev/null
+++ b/apps/meteor/client/views/admin/users/hooks/useFilterUsersByrole.ts
@@ -0,0 +1,12 @@
+import type { IUser } from '@rocket.chat/core-typings';
+
+export const useFilterUsersByRole = (
+	users: Pick<IUser, '_id' | 'username' | 'name' | 'status' | 'roles' | 'emails' | 'active' | 'avatarETag'>[],
+	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/useListUsers.ts b/apps/meteor/client/views/admin/users/hooks/useListUsers.ts
new file mode 100644
index 000000000000..57b263f2f360
--- /dev/null
+++ b/apps/meteor/client/views/admin/users/hooks/useListUsers.ts
@@ -0,0 +1,69 @@
+import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
+import { escapeRegExp } from '@rocket.chat/string-helpers';
+import { useEndpoint, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+import type { MutableRefObject } from 'react';
+import { useMemo } from 'react';
+
+import type { usePagination } from '../../../../components/GenericTable/hooks/usePagination';
+import type { useSort } from '../../../../components/GenericTable/hooks/useSort';
+
+export const useListUsers = (
+	searchTerm: string,
+	prevSearchTerm: MutableRefObject<string>,
+	setCurrent: ReturnType<typeof usePagination>['setCurrent'],
+	sortBy: ReturnType<typeof useSort>['sortBy'],
+	sortDirection: ReturnType<typeof useSort>['sortDirection'],
+	itemsPerPage: ReturnType<typeof usePagination>['itemsPerPage'],
+	current: ReturnType<typeof usePagination>['current'],
+) => {
+	const query = useDebouncedValue(
+		useMemo(() => {
+			if (searchTerm !== prevSearchTerm.current) {
+				setCurrent(0);
+			}
+
+			return {
+				fields: JSON.stringify({
+					name: 1,
+					username: 1,
+					emails: 1,
+					roles: 1,
+					status: 1,
+					avatarETag: 1,
+					active: 1,
+				}),
+				query: JSON.stringify({
+					$or: [
+						{ 'emails.address': { $regex: escapeRegExp(searchTerm), $options: 'i' } },
+						{ username: { $regex: escapeRegExp(searchTerm), $options: 'i' } },
+						{ name: { $regex: escapeRegExp(searchTerm), $options: 'i' } },
+					],
+				}),
+				sort: `{ "${sortBy}": ${sortDirection === 'asc' ? 1 : -1} }`,
+				count: itemsPerPage,
+				offset: searchTerm === prevSearchTerm.current ? current : 0,
+			};
+		}, [searchTerm, prevSearchTerm, sortBy, sortDirection, itemsPerPage, current, setCurrent]),
+		500,
+	);
+
+	const getUsers = useEndpoint('GET', '/v1/users.list');
+
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	const usersListQueryResult = useQuery(
+		['users', query],
+		async () => {
+			const users = await getUsers(query);
+			return users;
+		},
+		{
+			onError: (error) => {
+				dispatchToastMessage({ type: 'error', message: error });
+			},
+		},
+	);
+
+	return usersListQueryResult;
+};
diff --git a/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json b/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json
index 72aef9af6407..cd8b88fe4058 100644
--- a/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json
+++ b/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json
@@ -396,6 +396,8 @@
   "AutoLinker_UrlsRegExp": "AutoLinker URL Regular Expression",
   "All_messages": "All messages",
   "All_Prices": "All prices",
+  "All_roles": "All roles",
+  "All_rooms": "All rooms",
   "All_status": "All status",
   "All_users": "All users",
   "All_users_in_the_channel_can_write_new_messages": "All users in the channel can write new messages",
@@ -2317,6 +2319,8 @@
   "Filter_by_category": "Filter by Category",
   "Filter_by_Custom_Fields": "Filter by Custom Fields",
   "Filter_By_Price": "Filter by price",
+  "Filter_by_role": "Filter by role",
+  "Filter_by_room": "Filter by room type",
   "Filter_By_Status": "Filter by status",
   "Filters": "Filters",
   "Filters_applied": "Filters applied",
@@ -6055,9 +6059,7 @@
   "multiple_instance_solutions": "multiple instance solutions",
   "Uninstall_grandfathered_app": "Uninstall {{appName}}?",
   "App_will_lose_grandfathered_status": "**This {{context}} app will lose its grandfathered status.**  \n  \nWorkspaces on Community Edition can have up to {{limit}} {{context}} apps enabled. Grandfathered apps count towards the limit but the limit is not applied to them.",
-  "All_rooms": "All rooms",
   "All_visible": "All visible",
-  "Filter_by_room": "Filter by room type",
   "Filter_by_visibility": "Filter by visibility",
   "Registration_status": "Registration status",
   "Theme_Appearence": "Theme Appearence"
diff --git a/packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustom.tsx b/packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustom.tsx
index 1420a62346d6..a81d93f8c2f5 100644
--- a/packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustom.tsx
+++ b/packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustom.tsx
@@ -53,12 +53,12 @@ export type OptionProp = TitleOptionProp | CheckboxOptionProp;
  */
 type DropDownProps = {
 	dropdownOptions: OptionProp[];
-	defaultTitle: TranslationKey;
+	defaultTitle: string;
 	selectedOptionsTitle: TranslationKey;
 	selectedOptions: OptionProp[];
 	setSelectedOptions: Dispatch<SetStateAction<OptionProp[]>>;
 	customSetSelected: Dispatch<SetStateAction<OptionProp[]>>;
-	searchBarText?: TranslationKey;
+	searchBarText?: string;
 };
 
 export const MultiSelectCustom = ({
diff --git a/packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustomAnchor.tsx b/packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustomAnchor.tsx
index 9f6a15d38ba1..d06e6d881f92 100644
--- a/packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustomAnchor.tsx
+++ b/packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustomAnchor.tsx
@@ -1,15 +1,14 @@
 import { css } from '@rocket.chat/css-in-js';
 import { Box, Button, Icon, Palette } from '@rocket.chat/fuselage';
-import type { TranslationKey } from '@rocket.chat/ui-contexts';
-import { useTranslation } from '@rocket.chat/ui-contexts';
+import { TranslationKey, useTranslation } from '@rocket.chat/ui-contexts';
 import type { ComponentProps } from 'react';
 import { forwardRef } from 'react';
 
 type MultiSelectCustomAnchorProps = {
 	onClick?: (value: boolean) => void;
 	collapsed: boolean;
-	defaultTitle: TranslationKey;
-	selectedOptionsTitle: TranslationKey;
+	defaultTitle: string;
+	selectedOptionsTitle: string;
 	selectedOptionsCount: number;
 	maxCount: number;
 } & ComponentProps<typeof Button>;
@@ -59,7 +58,7 @@ const MultiSelectCustomAnchor = forwardRef<HTMLElement, MultiSelectCustomAnchorP
 			className={inputStyle}
 			{...props}
 		>
-			{isDirty ? `${t(selectedOptionsTitle)} (${selectedOptionsCount})` : t(defaultTitle)}
+			{isDirty ? `${t(selectedOptionsTitle as TranslationKey)} (${selectedOptionsCount})` : t(defaultTitle as TranslationKey)}
 			<Icon name='chevron-down' fontSize='x20' color='hint' />
 		</Box>
 	);
diff --git a/packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustomList.tsx b/packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustomList.tsx
index 7e6bfdb9fee1..85ee17f1751d 100644
--- a/packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustomList.tsx
+++ b/packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustomList.tsx
@@ -14,7 +14,7 @@ const MultiSelectCustomList = ({
 }: {
 	options: OptionProp[];
 	onSelected: (item: OptionProp, e?: FormEvent<HTMLElement>) => void;
-	searchBarText?: TranslationKey;
+	searchBarText?: string;
 }) => {
 	const t = useTranslation();
 
@@ -33,7 +33,7 @@ const MultiSelectCustomList = ({
 				<Option>
 					<SearchInput
 						name='select-search'
-						placeholder={t(searchBarText)}
+						placeholder={t(searchBarText as TranslationKey)}
 						autoComplete='off'
 						addon={<Icon name='magnifier' size='x20' />}
 						onChange={handleChange}