From 72bacc5a2eca67827df6e5d6f123a61c65f33380 Mon Sep 17 00:00:00 2001
From: rique223 <henrique.jobs1@gmail.com>
Date: Thu, 31 Aug 2023 16:51:01 -0300
Subject: [PATCH 01/10] 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.
---
 .../views/admin/users/AdminUsersPage.tsx      | 12 ++--
 .../admin/users/UsersTable/UsersTable.tsx     | 71 +++++--------------
 .../admin/users/hooks/useFilterActiveUsers.ts |  7 ++
 .../views/admin/users/hooks/useListUsers.ts   | 69 ++++++++++++++++++
 4 files changed, 100 insertions(+), 59 deletions(-)
 create mode 100644 apps/meteor/client/views/admin/users/hooks/useFilterActiveUsers.ts
 create mode 100644 apps/meteor/client/views/admin/users/hooks/useListUsers.ts

diff --git a/apps/meteor/client/views/admin/users/AdminUsersPage.tsx b/apps/meteor/client/views/admin/users/AdminUsersPage.tsx
index 838a383d4fc9..c16e6b6a43b2 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} />
 				</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..035f716721c5 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 { 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 { useRoute, useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement, MutableRefObject } from 'react';
 import React, { useRef, useMemo, useState, useEffect } from 'react';
 
@@ -17,14 +15,17 @@ 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;
 };
 
 // TODO: Missing error state
-const UsersTable = ({ reload }: UsersTableProps): ReactElement | null => {
+const UsersTable = ({ reload, tab }: UsersTableProps): ReactElement | null => {
 	const t = useTranslation();
 	const usersRoute = useRoute('admin-users');
 	const mediaQuery = useMediaQuery('(min-width: 1024px)');
@@ -34,55 +35,19 @@ const UsersTable = ({ reload }: UsersTableProps): ReactElement | null => {
 	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, error, refetch } = useListUsers(
+		searchTerm,
+		prevSearchTerm,
+		setCurrent,
+		sortBy,
+		sortDirection,
+		itemsPerPage,
+		current,
 	);
 
-	const getUsers = useEndpoint('GET', '/v1/users.list');
-
-	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 = [...useFilterActiveUsers(data?.users, tab)];
 
 	useEffect(() => {
 		reload.current = refetch;
@@ -151,12 +116,12 @@ 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) => (
+							{(tab === 'all' ? data.users : filteredUsers).map((user) => (
 								<UsersTableRow key={user._id} onClick={handleClick} mediaQuery={mediaQuery} user={user} />
 							))}
 						</GenericTableBody>
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..86c97245d745
--- /dev/null
+++ b/apps/meteor/client/views/admin/users/hooks/useFilterActiveUsers.ts
@@ -0,0 +1,7 @@
+import type { UsersEndpoints } from '@rocket.chat/rest-typings';
+
+export const useFilterActiveUsers = (users: ReturnType<UsersEndpoints['/v1/users.list']['GET']>['users'] | undefined, tab: string) => {
+	if (!users || tab !== 'active') return [];
+
+	return users.filter((currentUser) => currentUser.active);
+};
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;
+};

From 444c93016a7310d40ad3efd74eaaf69dca67f50e Mon Sep 17 00:00:00 2001
From: rique223 <henrique.jobs1@gmail.com>
Date: Tue, 5 Sep 2023 19:25:58 -0300
Subject: [PATCH 02/10] 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.
---
 .../admin/users/UsersTable/UsersTable.tsx     | 61 ++++++++++++++++---
 .../admin/users/hooks/useFilterActiveUsers.ts |  7 ++-
 .../admin/users/hooks/useFilterUsersByrole.ts | 12 ++++
 .../MultiSelectCustom/MultiSelectCustom.tsx   |  4 +-
 .../MultiSelectCustomAnchor.tsx               |  9 ++-
 .../MultiSelectCustomList.tsx                 |  4 +-
 6 files changed, 79 insertions(+), 18 deletions(-)
 create mode 100644 apps/meteor/client/views/admin/users/hooks/useFilterUsersByrole.ts

diff --git a/apps/meteor/client/views/admin/users/UsersTable/UsersTable.tsx b/apps/meteor/client/views/admin/users/UsersTable/UsersTable.tsx
index 035f716721c5..7fe4688c9735 100644
--- a/apps/meteor/client/views/admin/users/UsersTable/UsersTable.tsx
+++ b/apps/meteor/client/views/admin/users/UsersTable/UsersTable.tsx
@@ -1,6 +1,9 @@
 import { Pagination } from '@rocket.chat/fuselage';
 import { useMediaQuery, useDebouncedValue, useMutableCallback } from '@rocket.chat/fuselage-hooks';
-import { useRoute, useTranslation } from '@rocket.chat/ui-contexts';
+import type { OptionProp } from '@rocket.chat/ui-client';
+import { MultiSelectCustom } from '@rocket.chat/ui-client';
+import { useEndpoint, useRoute, useTranslation } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
 import type { ReactElement, MutableRefObject } from 'react';
 import React, { useRef, useMemo, useState, useEffect } from 'react';
 
@@ -16,6 +19,7 @@ import {
 import { usePagination } from '../../../../components/GenericTable/hooks/usePagination';
 import { useSort } from '../../../../components/GenericTable/hooks/useSort';
 import { useFilterActiveUsers } from '../hooks/useFilterActiveUsers';
+import { useFilterUsersByRole } from '../hooks/useFilterUsersByrole';
 import { useListUsers } from '../hooks/useListUsers';
 import UsersTableRow from './UsersTableRow';
 
@@ -29,7 +33,34 @@ const UsersTable = ({ reload, tab }: UsersTableProps): ReactElement | null => {
 	const t = useTranslation();
 	const usersRoute = useRoute('admin-users');
 	const mediaQuery = useMediaQuery('(min-width: 1024px)');
+	const getRoles = useEndpoint('GET', '/v1/roles.list');
+	const { data: roleData, isSuccess: hasRoleData } = useQuery(['roles'], async () => getRoles());
+
+	const roleFilterStructure = useMemo(
+		() =>
+			[
+				{
+					id: 'filter_by_role',
+					text: 'Filter_by_role',
+					isGroupTitle: true,
+				},
+				{
+					id: 'all',
+					text: 'All_roles',
+					isGroupTitle: false,
+				},
+				...((hasRoleData && roleData.roles) || []).map((currentRole) => ({
+					id: currentRole._id,
+					text: currentRole.name,
+					isGroupTitle: false,
+				})),
+			] as OptionProp[],
+		[hasRoleData, roleData?.roles],
+	);
+
 	const [text, setText] = useState('');
+	const [roleFilterOptions, setRoleFilterOptions] = useState<OptionProp[]>([]);
+	const [roleFilterSelectedOptions, setRoleFilterSelectedOptions] = useState<OptionProp[]>([]);
 
 	const { current, itemsPerPage, setItemsPerPage, setCurrent, ...paginationProps } = usePagination();
 	const { sortBy, sortDirection, setSort } = useSort<'name' | 'username' | 'emails.address' | 'status'>('name');
@@ -47,15 +78,22 @@ const UsersTable = ({ reload, tab }: UsersTableProps): ReactElement | null => {
 		current,
 	);
 
-	const filteredUsers = [...useFilterActiveUsers(data?.users, tab)];
+	const useAllUsers = () => (tab === 'all' && isSuccess ? data?.users : []);
+
+	const currentTabUsers = [...useAllUsers(), ...useFilterActiveUsers(data?.users, tab)];
+	const filteredUsers = useFilterUsersByRole(
+		currentTabUsers,
+		roleFilterSelectedOptions.map((currentRole) => currentRole.id),
+	);
 
 	useEffect(() => {
 		reload.current = refetch;
-	}, [reload, refetch]);
+		prevSearchTerm.current = searchTerm;
+	}, [reload, refetch, searchTerm]);
 
 	useEffect(() => {
-		prevSearchTerm.current = searchTerm;
-	}, [searchTerm]);
+		setRoleFilterOptions(roleFilterStructure);
+	}, [roleFilterStructure]);
 
 	const handleClick = useMutableCallback((id): void =>
 		usersRoute.push({
@@ -109,7 +147,16 @@ const UsersTable = ({ reload, tab }: UsersTableProps): ReactElement | null => {
 
 	return (
 		<>
-			<FilterByText autoFocus placeholder={t('Search_Users')} onChange={({ text }): void => setText(text)} />
+			<FilterByText autoFocus placeholder={t('Search_Users')} onChange={({ text }): void => setText(text)}>
+				<MultiSelectCustom
+					dropdownOptions={roleFilterOptions}
+					defaultTitle='All_roles'
+					selectedOptionsTitle='Rooms'
+					setSelectedOptions={setRoleFilterSelectedOptions}
+					selectedOptions={roleFilterSelectedOptions}
+					customSetSelected={setRoleFilterOptions}
+				/>
+			</FilterByText>
 			{isLoading && (
 				<GenericTable>
 					<GenericTableHeader>{headers}</GenericTableHeader>
@@ -121,7 +168,7 @@ const UsersTable = ({ reload, tab }: UsersTableProps): ReactElement | null => {
 					<GenericTable>
 						<GenericTableHeader>{headers}</GenericTableHeader>
 						<GenericTableBody>
-							{(tab === 'all' ? data.users : filteredUsers).map((user) => (
+							{filteredUsers.map((user) => (
 								<UsersTableRow key={user._id} onClick={handleClick} mediaQuery={mediaQuery} user={user} />
 							))}
 						</GenericTableBody>
diff --git a/apps/meteor/client/views/admin/users/hooks/useFilterActiveUsers.ts b/apps/meteor/client/views/admin/users/hooks/useFilterActiveUsers.ts
index 86c97245d745..a8dd6acfa3b7 100644
--- a/apps/meteor/client/views/admin/users/hooks/useFilterActiveUsers.ts
+++ b/apps/meteor/client/views/admin/users/hooks/useFilterActiveUsers.ts
@@ -1,6 +1,9 @@
-import type { UsersEndpoints } from '@rocket.chat/rest-typings';
+import type { IUser } from '@rocket.chat/core-typings';
 
-export const useFilterActiveUsers = (users: ReturnType<UsersEndpoints['/v1/users.list']['GET']>['users'] | undefined, tab: string) => {
+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/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}

From a1d01d5afddf1b075fe44e25ba31257596591575 Mon Sep 17 00:00:00 2001
From: rique223 <henrique.jobs1@gmail.com>
Date: Tue, 12 Sep 2023 10:27:06 -0300
Subject: [PATCH 03/10] WIP: Remove filters

---
 .../admin/users/UsersTable/UsersTable.tsx     | 81 +++++--------------
 .../rocketchat-i18n/i18n/en.i18n.json         |  6 +-
 2 files changed, 25 insertions(+), 62 deletions(-)

diff --git a/apps/meteor/client/views/admin/users/UsersTable/UsersTable.tsx b/apps/meteor/client/views/admin/users/UsersTable/UsersTable.tsx
index 7fe4688c9735..48ede4678d66 100644
--- a/apps/meteor/client/views/admin/users/UsersTable/UsersTable.tsx
+++ b/apps/meteor/client/views/admin/users/UsersTable/UsersTable.tsx
@@ -1,9 +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 type { OptionProp } from '@rocket.chat/ui-client';
-import { MultiSelectCustom } from '@rocket.chat/ui-client';
-import { useEndpoint, useRoute, 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';
 
@@ -19,7 +16,6 @@ import {
 import { usePagination } from '../../../../components/GenericTable/hooks/usePagination';
 import { useSort } from '../../../../components/GenericTable/hooks/useSort';
 import { useFilterActiveUsers } from '../hooks/useFilterActiveUsers';
-import { useFilterUsersByRole } from '../hooks/useFilterUsersByrole';
 import { useListUsers } from '../hooks/useListUsers';
 import UsersTableRow from './UsersTableRow';
 
@@ -31,36 +27,10 @@ type UsersTableProps = {
 // TODO: Missing error state
 const UsersTable = ({ reload, tab }: UsersTableProps): ReactElement | null => {
 	const t = useTranslation();
-	const usersRoute = useRoute('admin-users');
+	const router = useRouter();
 	const mediaQuery = useMediaQuery('(min-width: 1024px)');
-	const getRoles = useEndpoint('GET', '/v1/roles.list');
-	const { data: roleData, isSuccess: hasRoleData } = useQuery(['roles'], async () => getRoles());
-
-	const roleFilterStructure = useMemo(
-		() =>
-			[
-				{
-					id: 'filter_by_role',
-					text: 'Filter_by_role',
-					isGroupTitle: true,
-				},
-				{
-					id: 'all',
-					text: 'All_roles',
-					isGroupTitle: false,
-				},
-				...((hasRoleData && roleData.roles) || []).map((currentRole) => ({
-					id: currentRole._id,
-					text: currentRole.name,
-					isGroupTitle: false,
-				})),
-			] as OptionProp[],
-		[hasRoleData, roleData?.roles],
-	);
 
 	const [text, setText] = useState('');
-	const [roleFilterOptions, setRoleFilterOptions] = useState<OptionProp[]>([]);
-	const [roleFilterSelectedOptions, setRoleFilterSelectedOptions] = useState<OptionProp[]>([]);
 
 	const { current, itemsPerPage, setItemsPerPage, setCurrent, ...paginationProps } = usePagination();
 	const { sortBy, sortDirection, setSort } = useSort<'name' | 'username' | 'emails.address' | 'status'>('name');
@@ -68,7 +38,7 @@ const UsersTable = ({ reload, tab }: UsersTableProps): ReactElement | null => {
 	const searchTerm = useDebouncedValue(text, 500);
 	const prevSearchTerm = useRef('');
 
-	const { data, isLoading, isSuccess, error, refetch } = useListUsers(
+	const { data, isLoading, isSuccess, isError, refetch } = useListUsers(
 		searchTerm,
 		prevSearchTerm,
 		setCurrent,
@@ -80,25 +50,20 @@ const UsersTable = ({ reload, tab }: UsersTableProps): ReactElement | null => {
 
 	const useAllUsers = () => (tab === 'all' && isSuccess ? data?.users : []);
 
-	const currentTabUsers = [...useAllUsers(), ...useFilterActiveUsers(data?.users, tab)];
-	const filteredUsers = useFilterUsersByRole(
-		currentTabUsers,
-		roleFilterSelectedOptions.map((currentRole) => currentRole.id),
-	);
+	const filteredUsers = [...useAllUsers(), ...useFilterActiveUsers(data?.users, tab)];
 
 	useEffect(() => {
 		reload.current = refetch;
 		prevSearchTerm.current = searchTerm;
 	}, [reload, refetch, searchTerm]);
 
-	useEffect(() => {
-		setRoleFilterOptions(roleFilterStructure);
-	}, [roleFilterStructure]);
-
 	const handleClick = useMutableCallback((id): void =>
-		usersRoute.push({
-			context: 'info',
-			id,
+		router.navigate({
+			name: 'admin-users',
+			params: {
+				context: 'info',
+				id,
+			},
 		}),
 	);
 
@@ -141,22 +106,9 @@ const UsersTable = ({ reload, tab }: UsersTableProps): ReactElement | null => {
 		[mediaQuery, setSort, sortBy, sortDirection, t],
 	);
 
-	if (error) {
-		return null;
-	}
-
 	return (
 		<>
-			<FilterByText autoFocus placeholder={t('Search_Users')} onChange={({ text }): void => setText(text)}>
-				<MultiSelectCustom
-					dropdownOptions={roleFilterOptions}
-					defaultTitle='All_roles'
-					selectedOptionsTitle='Rooms'
-					setSelectedOptions={setRoleFilterSelectedOptions}
-					selectedOptions={roleFilterSelectedOptions}
-					customSetSelected={setRoleFilterOptions}
-				/>
-			</FilterByText>
+			<FilterByText autoFocus placeholder={t('Search_Users')} onChange={({ text }): void => setText(text)} />
 			{isLoading && (
 				<GenericTable>
 					<GenericTableHeader>{headers}</GenericTableHeader>
@@ -185,6 +137,15 @@ const UsersTable = ({ reload, tab }: 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/packages/rocketchat-i18n/i18n/en.i18n.json b/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json
index 756f74a3acb5..3e730ac8530f 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",
@@ -2315,6 +2317,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",
@@ -6031,9 +6035,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"

From d3f01f7e1be062500b0c98d582e2ff19b7de9dee Mon Sep 17 00:00:00 2001
From: rique223 <henrique.jobs1@gmail.com>
Date: Thu, 21 Sep 2023 17:38:36 -0300
Subject: [PATCH 04/10] feat: :sparkles: WIP: Implement new actions menu for
 users page table

---
 .../views/admin/users/AdminUsersPage.tsx      |  2 +-
 .../admin/users/UsersTable/UsersTable.tsx     | 21 ++++--
 .../admin/users/UsersTable/UsersTableRow.tsx  | 75 +++++++++++++++++--
 3 files changed, 86 insertions(+), 12 deletions(-)

diff --git a/apps/meteor/client/views/admin/users/AdminUsersPage.tsx b/apps/meteor/client/views/admin/users/AdminUsersPage.tsx
index d98364d2d6f6..e0e88bedcd90 100644
--- a/apps/meteor/client/views/admin/users/AdminUsersPage.tsx
+++ b/apps/meteor/client/views/admin/users/AdminUsersPage.tsx
@@ -81,7 +81,7 @@ const UsersPage = (): ReactElement => {
 							{t('Deactivated')}
 						</Tabs.Item>
 					</Tabs>
-					<UsersTable reload={reload} tab={tab} />
+					<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 48ede4678d66..55fd15a195bd 100644
--- a/apps/meteor/client/views/admin/users/UsersTable/UsersTable.tsx
+++ b/apps/meteor/client/views/admin/users/UsersTable/UsersTable.tsx
@@ -22,10 +22,11 @@ import UsersTableRow from './UsersTableRow';
 type UsersTableProps = {
 	reload: MutableRefObject<() => void>;
 	tab: string;
+	onReload: () => void;
 };
 
 // TODO: Missing error state
-const UsersTable = ({ reload, tab }: UsersTableProps): ReactElement | null => {
+const UsersTable = ({ reload, tab, onReload }: UsersTableProps): ReactElement | null => {
 	const t = useTranslation();
 	const router = useRouter();
 	const mediaQuery = useMediaQuery('(min-width: 1024px)');
@@ -57,15 +58,17 @@ const UsersTable = ({ reload, tab }: UsersTableProps): ReactElement | null => {
 		prevSearchTerm.current = searchTerm;
 	}, [reload, refetch, searchTerm]);
 
-	const handleClick = useMutableCallback((id): void =>
+	const handleClick = useMutableCallback((id, e: React.MouseEvent<HTMLElement, MouseEvent> | React.KeyboardEvent<HTMLElement>): void => {
+		e.stopPropagation();
+
 		router.navigate({
 			name: 'admin-users',
 			params: {
 				context: 'info',
 				id,
 			},
-		}),
-	);
+		});
+	});
 
 	const headers = useMemo(
 		() => [
@@ -102,6 +105,7 @@ const UsersTable = ({ reload, tab }: UsersTableProps): ReactElement | null => {
 			<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],
 	);
@@ -121,7 +125,14 @@ 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}
+									refetchUsers={refetch}
+									onReload={onReload}
+								/>
 							))}
 						</GenericTableBody>
 					</GenericTable>
diff --git a/apps/meteor/client/views/admin/users/UsersTable/UsersTableRow.tsx b/apps/meteor/client/views/admin/users/UsersTable/UsersTableRow.tsx
index 64e3f4858ffa..495e8112ab5e 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,21 @@ 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;
 };
 
-const UsersTableRow = ({ user, onClick, mediaQuery }: UsersTableRowProps): ReactElement => {
+const UsersTableRow = ({ user, onClick, mediaQuery, refetchUsers, onReload }: UsersTableRowProps): ReactElement => {
 	const t = useTranslation();
 	const { _id, emails, username, name, status, roles, active, avatarETag } = user;
 	const registrationStatusText = active ? t('Active') : t('Deactivated');
@@ -26,10 +35,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 },
+			}),
+		...(deleteUserAction && {
+			delete: { label: { label: deleteUserAction.label, icon: deleteUserAction.icon }, action: deleteUserAction.action },
+		}),
+		...(changeUserStatusAction &&
+			!isFederatedUser && {
+				changeActiveStatus: {
+					label: { label: changeUserStatusAction.label, icon: changeUserStatusAction.icon },
+					action: changeUserStatusAction.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
@@ -69,6 +122,16 @@ const UsersTableRow = ({ user, onClick, mediaQuery }: UsersTableRowProps): React
 			<GenericTableCell fontScale='p2' color='hint' withTruncatedText>
 				{registrationStatusText}
 			</GenericTableCell>
+			<GenericTableCell>
+				<Menu
+					mi={4}
+					placement='bottom-start'
+					flexShrink={0}
+					key='menu'
+					renderItem={({ label: { label, icon }, ...props }): ReactElement => <Option label={label} title={label} icon={icon} {...props} />}
+					options={menuOptions}
+				/>
+			</GenericTableCell>
 		</GenericTableRow>
 	);
 };

From 26940ba080d08a169f52481e7f6c78582a6dc07a Mon Sep 17 00:00:00 2001
From: rique223 <henrique.jobs1@gmail.com>
Date: Mon, 25 Sep 2023 16:03:28 -0300
Subject: [PATCH 05/10] 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.
---
 .../admin/users/AdminUserInfoActions.tsx      | 10 ++++-
 .../admin/users/UsersTable/UsersTable.tsx     | 38 +++++++++++++------
 .../admin/users/UsersTable/UsersTableRow.tsx  | 20 +++++++---
 3 files changed, 49 insertions(+), 19 deletions(-)

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/UsersTable/UsersTable.tsx b/apps/meteor/client/views/admin/users/UsersTable/UsersTable.tsx
index 55fd15a195bd..82bdbc147d62 100644
--- a/apps/meteor/client/views/admin/users/UsersTable/UsersTable.tsx
+++ b/apps/meteor/client/views/admin/users/UsersTable/UsersTable.tsx
@@ -58,17 +58,31 @@ const UsersTable = ({ reload, tab, onReload }: UsersTableProps): ReactElement |
 		prevSearchTerm.current = searchTerm;
 	}, [reload, refetch, searchTerm]);
 
-	const handleClick = useMutableCallback((id, e: React.MouseEvent<HTMLElement, MouseEvent> | React.KeyboardEvent<HTMLElement>): void => {
-		e.stopPropagation();
-
-		router.navigate({
-			name: 'admin-users',
-			params: {
-				context: 'info',
-				id,
-			},
-		});
-	});
+	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', ' '];
+
+			if (isKeyboardEvent(e) && !keyboardSubmitKeys.includes(e.key)) {
+				return;
+			}
+
+			router.navigate({
+				name: 'admin-users',
+				params: {
+					context: 'info',
+					id,
+				},
+			});
+		},
+	);
 
 	const headers = useMemo(
 		() => [
@@ -127,7 +141,7 @@ const UsersTable = ({ reload, tab, onReload }: UsersTableProps): ReactElement |
 							{filteredUsers.map((user) => (
 								<UsersTableRow
 									key={user._id}
-									onClick={handleClick}
+									onClick={handleClickOrKeyDown}
 									mediaQuery={mediaQuery}
 									user={user}
 									refetchUsers={refetch}
diff --git a/apps/meteor/client/views/admin/users/UsersTable/UsersTableRow.tsx b/apps/meteor/client/views/admin/users/UsersTable/UsersTableRow.tsx
index 495e8112ab5e..84dc54f223b1 100644
--- a/apps/meteor/client/views/admin/users/UsersTable/UsersTableRow.tsx
+++ b/apps/meteor/client/views/admin/users/UsersTable/UsersTableRow.tsx
@@ -67,9 +67,6 @@ const UsersTableRow = ({ user, onClick, mediaQuery, refetchUsers, onReload }: Us
 			!isFederatedUser && {
 				resetTOTP: { label: { label: resetTOTPAction.label, icon: resetTOTPAction.icon }, action: resetTOTPAction.action },
 			}),
-		...(deleteUserAction && {
-			delete: { label: { label: deleteUserAction.label, icon: deleteUserAction.icon }, action: deleteUserAction.action },
-		}),
 		...(changeUserStatusAction &&
 			!isFederatedUser && {
 				changeActiveStatus: {
@@ -77,6 +74,9 @@ const UsersTableRow = ({ user, onClick, mediaQuery, refetchUsers, onReload }: Us
 					action: changeUserStatusAction.action,
 				},
 			}),
+		...(deleteUserAction && {
+			delete: { label: { label: deleteUserAction.label, icon: deleteUserAction.icon }, action: deleteUserAction.action },
+		}),
 	};
 
 	return (
@@ -122,13 +122,23 @@ const UsersTableRow = ({ user, onClick, mediaQuery, refetchUsers, onReload }: Us
 			<GenericTableCell fontScale='p2' color='hint' withTruncatedText>
 				{registrationStatusText}
 			</GenericTableCell>
-			<GenericTableCell>
+			<GenericTableCell
+				onClick={(e): void => {
+					e.stopPropagation();
+				}}
+			>
 				<Menu
 					mi={4}
 					placement='bottom-start'
 					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}
 				/>
 			</GenericTableCell>

From 444ab6f3005f5c82b503f84377f2479f5331f74e Mon Sep 17 00:00:00 2001
From: rique223 <henrique.jobs1@gmail.com>
Date: Tue, 26 Sep 2023 17:20:34 -0300
Subject: [PATCH 06/10] 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.
---
 .../components/InfoPanel/InfoPanelTitle.tsx   | 18 +++----
 .../components/UserCard/UserCardRoles.tsx     |  2 +-
 .../client/components/UserInfo/UserInfo.tsx   | 48 +++++++++----------
 3 files changed, 34 insertions(+), 34 deletions(-)

diff --git a/apps/meteor/client/components/InfoPanel/InfoPanelTitle.tsx b/apps/meteor/client/components/InfoPanel/InfoPanelTitle.tsx
index 7ea4de6d9867..1eed6a57d6d0 100644
--- a/apps/meteor/client/components/InfoPanel/InfoPanelTitle.tsx
+++ b/apps/meteor/client/components/InfoPanel/InfoPanelTitle.tsx
@@ -1,19 +1,19 @@
-import { Box, Icon } from '@rocket.chat/fuselage';
-import type { Keys as IconName } from '@rocket.chat/icons';
-import type { FC, ReactNode } from 'react';
+import { Box } from '@rocket.chat/fuselage';
+// import type { Keys as IconName } from '@rocket.chat/icons';
+import type { FC } from 'react';
 import React from 'react';
 
 type InfoPanelTitleProps = {
 	title: string;
-	icon: ReactNode;
+	// icon: ReactNode;
 };
 
-const isValidIcon = (icon: ReactNode): icon is IconName => typeof icon === 'string';
+// 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>
-		{isValidIcon(icon) ? <Icon name={icon} size='x22' /> : icon}
-		<Box mis={8} withTruncatedText title={title}>
+const InfoPanelTitle: FC<InfoPanelTitleProps> = ({ title }) => (
+	<Box display='flex' flexShrink={0} alignItems='center' fontScale='p1m' color='default' withTruncatedText>
+		{/* {isValidIcon(icon) ? <Icon name={icon} size='x22' /> : icon} */}
+		<Box withTruncatedText title={title}>
 			{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..9d0af574c35b 100644
--- a/apps/meteor/client/components/UserInfo/UserInfo.tsx
+++ b/apps/meteor/client/components/UserInfo/UserInfo.tsx
@@ -54,7 +54,7 @@ const UserInfo = ({
 	email,
 	verified,
 	createdAt,
-	status,
+	// status,
 	statusText,
 	customFields,
 	canViewAllInfo,
@@ -78,26 +78,26 @@ const UserInfo = ({
 				{actions && <InfoPanel.Section>{actions}</InfoPanel.Section>}
 
 				<InfoPanel.Section>
-					{userDisplayName && <InfoPanel.Title icon={status} title={userDisplayName} />}
+					{userDisplayName && <InfoPanel.Title title={userDisplayName} />}
 					{statusText && (
 						<InfoPanel.Text>
-							<MarkdownText content={statusText} parseEmoji={true} />
+							<MarkdownText content={statusText} parseEmoji={true} variant='inline' />
 						</InfoPanel.Text>
 					)}
 				</InfoPanel.Section>
 
 				<InfoPanel.Section>
-					{roles.length !== 0 && (
+					{nickname && (
 						<InfoPanel.Field>
-							<InfoPanel.Label>{t('Roles')}</InfoPanel.Label>
-							<UserCard.Roles>{roles}</UserCard.Roles>
+							<InfoPanel.Label>{t('Nickname')}</InfoPanel.Label>
+							<InfoPanel.Text>{nickname}</InfoPanel.Text>
 						</InfoPanel.Field>
 					)}
 
-					{Number.isInteger(utcOffset) && (
+					{roles.length !== 0 && (
 						<InfoPanel.Field>
-							<InfoPanel.Label>{t('Local_Time')}</InfoPanel.Label>
-							<InfoPanel.Text>{utcOffset && <UTCClock utcOffset={utcOffset} />}</InfoPanel.Text>
+							<InfoPanel.Label>{t('Roles')}</InfoPanel.Label>
+							<UserCard.Roles>{roles}</UserCard.Roles>
 						</InfoPanel.Field>
 					)}
 
@@ -108,35 +108,35 @@ const UserInfo = ({
 						</InfoPanel.Field>
 					)}
 
-					{canViewAllInfo && (
+					{Number.isInteger(utcOffset) && (
 						<InfoPanel.Field>
-							<InfoPanel.Label>{t('Last_login')}</InfoPanel.Label>
-							<InfoPanel.Text>{lastLogin ? timeAgo(lastLogin) : t('Never')}</InfoPanel.Text>
+							<InfoPanel.Label>{t('Local_Time')}</InfoPanel.Label>
+							<InfoPanel.Text>{utcOffset && <UTCClock utcOffset={utcOffset} />}</InfoPanel.Text>
 						</InfoPanel.Field>
 					)}
 
-					{name && (
+					{bio && (
 						<InfoPanel.Field>
-							<InfoPanel.Label>{t('Full_Name')}</InfoPanel.Label>
-							<InfoPanel.Text>{name}</InfoPanel.Text>
+							<InfoPanel.Label>{t('Bio')}</InfoPanel.Label>
+							<InfoPanel.Text withTruncatedText={false}>
+								<MarkdownText variant='inline' content={bio} />
+							</InfoPanel.Text>
 						</InfoPanel.Field>
 					)}
 
-					{nickname && (
+					{canViewAllInfo && (
 						<InfoPanel.Field>
-							<InfoPanel.Label>{t('Nickname')}</InfoPanel.Label>
-							<InfoPanel.Text>{nickname}</InfoPanel.Text>
+							<InfoPanel.Label>{t('Last_login')}</InfoPanel.Label>
+							<InfoPanel.Text>{lastLogin ? timeAgo(lastLogin) : t('Never')}</InfoPanel.Text>
 						</InfoPanel.Field>
 					)}
 
-					{bio && (
+					{/* {name && (
 						<InfoPanel.Field>
-							<InfoPanel.Label>{t('Bio')}</InfoPanel.Label>
-							<InfoPanel.Text withTruncatedText={false}>
-								<MarkdownText variant='inline' content={bio} />
-							</InfoPanel.Text>
+							<InfoPanel.Label>{t('Full_Name')}</InfoPanel.Label>
+							<InfoPanel.Text>{name}</InfoPanel.Text>
 						</InfoPanel.Field>
-					)}
+					)} */}
 
 					{phone && (
 						<InfoPanel.Field>

From 6e2f2ad2823e588a9b89a1c46fd2b191543b4016 Mon Sep 17 00:00:00 2001
From: rique223 <henrique.jobs1@gmail.com>
Date: Tue, 26 Sep 2023 18:16:53 -0300
Subject: [PATCH 07/10] Typecheck

---
 apps/meteor/client/components/InfoPanel/InfoPanelTitle.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/meteor/client/components/InfoPanel/InfoPanelTitle.tsx b/apps/meteor/client/components/InfoPanel/InfoPanelTitle.tsx
index 1eed6a57d6d0..ce23118f3b81 100644
--- a/apps/meteor/client/components/InfoPanel/InfoPanelTitle.tsx
+++ b/apps/meteor/client/components/InfoPanel/InfoPanelTitle.tsx
@@ -1,11 +1,11 @@
 import { Box } from '@rocket.chat/fuselage';
 // import type { Keys as IconName } from '@rocket.chat/icons';
-import type { FC } from 'react';
+import type { FC, ReactNode } from 'react';
 import React from 'react';
 
 type InfoPanelTitleProps = {
 	title: string;
-	// icon: ReactNode;
+	icon?: ReactNode;
 };
 
 // const isValidIcon = (icon: ReactNode): icon is IconName => typeof icon === 'string';

From 55810be2b15bfc5d4f0a75e4902950d8f66605d6 Mon Sep 17 00:00:00 2001
From: rique223 <henrique.jobs1@gmail.com>
Date: Tue, 26 Sep 2023 18:23:51 -0300
Subject: [PATCH 08/10] Re-add icon back to InfoPanelTitle

---
 .../client/components/InfoPanel/InfoPanelTitle.tsx     | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/meteor/client/components/InfoPanel/InfoPanelTitle.tsx b/apps/meteor/client/components/InfoPanel/InfoPanelTitle.tsx
index ce23118f3b81..9496c287fc76 100644
--- a/apps/meteor/client/components/InfoPanel/InfoPanelTitle.tsx
+++ b/apps/meteor/client/components/InfoPanel/InfoPanelTitle.tsx
@@ -1,5 +1,5 @@
-import { Box } from '@rocket.chat/fuselage';
-// import type { Keys as IconName } from '@rocket.chat/icons';
+import { Box, Icon } from '@rocket.chat/fuselage';
+import type { Keys as IconName } from '@rocket.chat/icons';
 import type { FC, ReactNode } from 'react';
 import React from 'react';
 
@@ -8,11 +8,11 @@ type InfoPanelTitleProps = {
 	icon?: ReactNode;
 };
 
-// const isValidIcon = (icon: ReactNode): icon is IconName => typeof icon === 'string';
+const isValidIcon = (icon: ReactNode): icon is IconName => typeof icon === 'string';
 
-const InfoPanelTitle: FC<InfoPanelTitleProps> = ({ title }) => (
+const InfoPanelTitle: FC<InfoPanelTitleProps> = ({ title, icon }) => (
 	<Box display='flex' flexShrink={0} alignItems='center' fontScale='p1m' color='default' withTruncatedText>
-		{/* {isValidIcon(icon) ? <Icon name={icon} size='x22' /> : icon} */}
+		{isValidIcon(icon) ? <Icon name={icon} size='x22' /> : icon}
 		<Box withTruncatedText title={title}>
 			{title}
 		</Box>

From fb367d117a2b8c75129520a9c5a4b20340f769f6 Mon Sep 17 00:00:00 2001
From: rique223 <henrique.jobs1@gmail.com>
Date: Fri, 29 Sep 2023 11:46:06 -0300
Subject: [PATCH 09/10] Hide registration status and justify actions menu

---
 .../admin/users/UsersTable/UsersTable.tsx      | 18 ++++++++++++++----
 .../admin/users/UsersTable/UsersTableRow.tsx   | 13 +++++++++----
 2 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/apps/meteor/client/views/admin/users/UsersTable/UsersTable.tsx b/apps/meteor/client/views/admin/users/UsersTable/UsersTable.tsx
index 82bdbc147d62..7f2dd575e66e 100644
--- a/apps/meteor/client/views/admin/users/UsersTable/UsersTable.tsx
+++ b/apps/meteor/client/views/admin/users/UsersTable/UsersTable.tsx
@@ -116,12 +116,21 @@ const UsersTable = ({ reload, tab, onReload }: UsersTableProps): ReactElement |
 					{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],
 	);
 
 	return (
@@ -146,6 +155,7 @@ const UsersTable = ({ reload, tab, onReload }: UsersTableProps): ReactElement |
 									user={user}
 									refetchUsers={refetch}
 									onReload={onReload}
+									tab={tab}
 								/>
 							))}
 						</GenericTableBody>
diff --git a/apps/meteor/client/views/admin/users/UsersTable/UsersTableRow.tsx b/apps/meteor/client/views/admin/users/UsersTable/UsersTableRow.tsx
index 84dc54f223b1..637ad5018615 100644
--- a/apps/meteor/client/views/admin/users/UsersTable/UsersTableRow.tsx
+++ b/apps/meteor/client/views/admin/users/UsersTable/UsersTableRow.tsx
@@ -23,9 +23,10 @@ type UsersTableRowProps = {
 	mediaQuery: boolean;
 	refetchUsers: ReturnType<typeof useQuery>['refetch'];
 	onReload: () => void;
+	tab: string;
 };
 
-const UsersTableRow = ({ user, onClick, mediaQuery, refetchUsers, onReload }: 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');
@@ -119,10 +120,14 @@ const UsersTableRow = ({ user, onClick, mediaQuery, refetchUsers, onReload }: Us
 
 			<GenericTableCell withTruncatedText>{emails?.length && emails[0].address}</GenericTableCell>
 			{mediaQuery && <GenericTableCell withTruncatedText>{roleNames}</GenericTableCell>}
-			<GenericTableCell fontScale='p2' color='hint' withTruncatedText>
-				{registrationStatusText}
-			</GenericTableCell>
+			{tab === 'all' && (
+				<GenericTableCell fontScale='p2' color='hint' withTruncatedText>
+					{registrationStatusText}
+				</GenericTableCell>
+			)}
 			<GenericTableCell
+				display='flex'
+				justifyContent='flex-end'
 				onClick={(e): void => {
 					e.stopPropagation();
 				}}

From e2c3dbe6a2785273cafceda7d42b8b1e73964376 Mon Sep 17 00:00:00 2001
From: rique223 <henrique.jobs1@gmail.com>
Date: Mon, 2 Oct 2023 17:09:00 -0300
Subject: [PATCH 10/10] Review, reintroduce contextual bar full name and status

---
 .../meteor/client/components/InfoPanel/InfoPanelTitle.tsx | 2 +-
 apps/meteor/client/components/UserInfo/UserInfo.tsx       | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/meteor/client/components/InfoPanel/InfoPanelTitle.tsx b/apps/meteor/client/components/InfoPanel/InfoPanelTitle.tsx
index 9496c287fc76..615f6762efd1 100644
--- a/apps/meteor/client/components/InfoPanel/InfoPanelTitle.tsx
+++ b/apps/meteor/client/components/InfoPanel/InfoPanelTitle.tsx
@@ -13,7 +13,7 @@ const isValidIcon = (icon: ReactNode): icon is IconName => typeof icon === 'stri
 const InfoPanelTitle: FC<InfoPanelTitleProps> = ({ title, icon }) => (
 	<Box display='flex' flexShrink={0} alignItems='center' fontScale='p1m' color='default' withTruncatedText>
 		{isValidIcon(icon) ? <Icon name={icon} size='x22' /> : icon}
-		<Box withTruncatedText title={title}>
+		<Box withTruncatedText title={title} mis={8}>
 			{title}
 		</Box>
 	</Box>
diff --git a/apps/meteor/client/components/UserInfo/UserInfo.tsx b/apps/meteor/client/components/UserInfo/UserInfo.tsx
index 9d0af574c35b..8a42f1b87026 100644
--- a/apps/meteor/client/components/UserInfo/UserInfo.tsx
+++ b/apps/meteor/client/components/UserInfo/UserInfo.tsx
@@ -54,7 +54,7 @@ const UserInfo = ({
 	email,
 	verified,
 	createdAt,
-	// status,
+	status,
 	statusText,
 	customFields,
 	canViewAllInfo,
@@ -78,7 +78,7 @@ const UserInfo = ({
 				{actions && <InfoPanel.Section>{actions}</InfoPanel.Section>}
 
 				<InfoPanel.Section>
-					{userDisplayName && <InfoPanel.Title title={userDisplayName} />}
+					{userDisplayName && <InfoPanel.Title icon={status} title={userDisplayName} />}
 					{statusText && (
 						<InfoPanel.Text>
 							<MarkdownText content={statusText} parseEmoji={true} variant='inline' />
@@ -131,12 +131,12 @@ const UserInfo = ({
 						</InfoPanel.Field>
 					)}
 
-					{/* {name && (
+					{name && (
 						<InfoPanel.Field>
 							<InfoPanel.Label>{t('Full_Name')}</InfoPanel.Label>
 							<InfoPanel.Text>{name}</InfoPanel.Text>
 						</InfoPanel.Field>
-					)} */}
+					)}
 
 					{phone && (
 						<InfoPanel.Field>