From 9fd950342c8691916ce1e69b3fa30476aa807fb0 Mon Sep 17 00:00:00 2001
From: rique223 <henrique.jobs1@gmail.com>
Date: Tue, 19 Mar 2024 17:45:54 -0300
Subject: [PATCH 1/8] feat: :sparkles: Add Deactivated users tab to users page
 tab layout

Implemented a new tab in the users page called 'deactivated' that will list all users who have logged in for the first time but are deactivated for any reason, also added a useMemo to the table action menu for optimization and added logic to only show the Status change and Delete options in the menus of the table and the contextual bar when inside the deactivated and pending tabs.
---
 .../admin/users/AdminUserInfoActions.tsx      | 22 ++++---
 .../admin/users/AdminUserInfoWithData.tsx     |  6 +-
 .../views/admin/users/AdminUsersPage.tsx      |  2 +-
 .../admin/users/UsersTable/UsersTableRow.tsx  | 61 +++++++++++--------
 4 files changed, 54 insertions(+), 37 deletions(-)

diff --git a/apps/meteor/client/views/admin/users/AdminUserInfoActions.tsx b/apps/meteor/client/views/admin/users/AdminUserInfoActions.tsx
index c1052889f16f..7b1ef363b6cb 100644
--- a/apps/meteor/client/views/admin/users/AdminUserInfoActions.tsx
+++ b/apps/meteor/client/views/admin/users/AdminUserInfoActions.tsx
@@ -1,4 +1,4 @@
-import type { IUser } from '@rocket.chat/core-typings';
+import type { IUser, IAdminUserTabs } from '@rocket.chat/core-typings';
 import { ButtonGroup, Menu, Option } from '@rocket.chat/fuselage';
 import { useRoute, usePermission, useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
@@ -18,6 +18,7 @@ type AdminUserInfoActionsProps = {
 	isFederatedUser: IUser['federated'];
 	isActive: boolean;
 	isAdmin: boolean;
+	tab: IAdminUserTabs;
 	onChange: () => void;
 	onReload: () => void;
 };
@@ -29,6 +30,7 @@ const AdminUserInfoActions = ({
 	isFederatedUser,
 	isActive,
 	isAdmin,
+	tab,
 	onChange,
 	onReload,
 }: AdminUserInfoActionsProps): ReactElement => {
@@ -62,6 +64,7 @@ const AdminUserInfoActions = ({
 		[userId, userRoute],
 	);
 
+	const isNotPendingDeactivatedNorFederated = tab !== 'pending' && tab !== 'deactivated' && !isFederatedUser;
 	const options = useMemo(
 		() => ({
 			...(canDirectMessage && {
@@ -81,24 +84,25 @@ const AdminUserInfoActions = ({
 					disabled: isFederatedUser,
 				},
 			}),
-			...(changeAdminStatusAction && !isFederatedUser && { makeAdmin: changeAdminStatusAction }),
-			...(resetE2EKeyAction && !isFederatedUser && { resetE2EKey: resetE2EKeyAction }),
-			...(resetTOTPAction && !isFederatedUser && { resetTOTP: resetTOTPAction }),
-			...(deleteUserAction && { delete: deleteUserAction }),
+			...(isNotPendingDeactivatedNorFederated && changeAdminStatusAction && { makeAdmin: changeAdminStatusAction }),
+			...(isNotPendingDeactivatedNorFederated && resetE2EKeyAction && { resetE2EKey: resetE2EKeyAction }),
+			...(isNotPendingDeactivatedNorFederated && resetTOTPAction && { resetTOTP: resetTOTPAction }),
 			...(changeUserStatusAction && !isFederatedUser && { changeActiveStatus: changeUserStatusAction }),
+			...(deleteUserAction && { delete: deleteUserAction }),
 		}),
 		[
-			t,
 			canDirectMessage,
-			directMessageClick,
 			canEditOtherUserInfo,
-			editUserClick,
 			changeAdminStatusAction,
 			changeUserStatusAction,
 			deleteUserAction,
+			directMessageClick,
+			editUserClick,
+			isFederatedUser,
+			isNotPendingDeactivatedNorFederated,
 			resetE2EKeyAction,
 			resetTOTPAction,
-			isFederatedUser,
+			t,
 		],
 	);
 
diff --git a/apps/meteor/client/views/admin/users/AdminUserInfoWithData.tsx b/apps/meteor/client/views/admin/users/AdminUserInfoWithData.tsx
index ee7bb4458311..3b91ef5275ee 100644
--- a/apps/meteor/client/views/admin/users/AdminUserInfoWithData.tsx
+++ b/apps/meteor/client/views/admin/users/AdminUserInfoWithData.tsx
@@ -1,4 +1,4 @@
-import type { IUser } from '@rocket.chat/core-typings';
+import type { IAdminUserTabs, IUser } from '@rocket.chat/core-typings';
 import { Callout } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useSetting, useRolesDescription, useTranslation, useEndpoint, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
@@ -18,9 +18,10 @@ import AdminUserInfoActions from './AdminUserInfoActions';
 type AdminUserInfoWithDataProps = {
 	uid: IUser['_id'];
 	onReload: () => void;
+	tab: IAdminUserTabs;
 };
 
-const AdminUserInfoWithData = ({ uid, onReload }: AdminUserInfoWithDataProps): ReactElement => {
+const AdminUserInfoWithData = ({ uid, onReload, tab }: AdminUserInfoWithDataProps): ReactElement => {
 	const t = useTranslation();
 	const getRoles = useRolesDescription();
 	const approveManuallyUsers = useSetting('Accounts_ManuallyApproveNewUsers');
@@ -123,6 +124,7 @@ const AdminUserInfoWithData = ({ uid, onReload }: AdminUserInfoWithDataProps): R
 					isFederatedUser={!!data.user.federated}
 					onChange={onChange}
 					onReload={onReload}
+					tab={tab}
 				/>
 			}
 		/>
diff --git a/apps/meteor/client/views/admin/users/AdminUsersPage.tsx b/apps/meteor/client/views/admin/users/AdminUsersPage.tsx
index b7243af14739..1d33b5de2ccd 100644
--- a/apps/meteor/client/views/admin/users/AdminUsersPage.tsx
+++ b/apps/meteor/client/views/admin/users/AdminUsersPage.tsx
@@ -177,7 +177,7 @@ const AdminUsersPage = (): ReactElement => {
 							</ContextualbarTitle>
 							<ContextualbarClose onClick={() => router.navigate('/admin/users')} />
 						</ContextualbarHeader>
-						{context === 'info' && id && <AdminUserInfoWithData uid={id} onReload={handleReload} />}
+						{context === 'info' && id && <AdminUserInfoWithData uid={id} onReload={handleReload} tab={tab} />}
 						{context === 'edit' && id && <AdminUserFormWithData uid={id} onReload={handleReload} />}
 						{!isRoutePrevented && context === 'new' && <AdminUserForm onReload={handleReload} />}
 						{!isRoutePrevented && context === 'invite' && <AdminInviteUsers />}
diff --git a/apps/meteor/client/views/admin/users/UsersTable/UsersTableRow.tsx b/apps/meteor/client/views/admin/users/UsersTable/UsersTableRow.tsx
index 727edbc7a188..f2e4128acd7b 100644
--- a/apps/meteor/client/views/admin/users/UsersTable/UsersTableRow.tsx
+++ b/apps/meteor/client/views/admin/users/UsersTable/UsersTableRow.tsx
@@ -65,33 +65,44 @@ const UsersTableRow = ({ user, onClick, onReload, isMobile, isLaptop, tab, isSea
 	const resendWelcomeEmail = useSendWelcomeEmailMutation();
 
 	const isNotPendingDeactivatedNorFederated = tab !== 'pending' && tab !== 'deactivated' && !isFederatedUser;
-	const menuOptions = {
-		...(isNotPendingDeactivatedNorFederated &&
-			changeAdminStatusAction && {
-				makeAdmin: {
-					label: { label: changeAdminStatusAction.label, icon: changeAdminStatusAction.icon },
-					action: changeAdminStatusAction.action,
-				},
+	const menuOptions = useMemo(
+		() => ({
+			...(isNotPendingDeactivatedNorFederated &&
+				changeAdminStatusAction && {
+					makeAdmin: {
+						label: { label: changeAdminStatusAction.label, icon: changeAdminStatusAction.icon },
+						action: changeAdminStatusAction.action,
+					},
+				}),
+			...(isNotPendingDeactivatedNorFederated &&
+				resetE2EKeyAction && {
+					resetE2EKey: { label: { label: resetE2EKeyAction.label, icon: resetE2EKeyAction.icon }, action: resetE2EKeyAction.action },
+				}),
+			...(isNotPendingDeactivatedNorFederated &&
+				resetTOTPAction && {
+					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 },
 			}),
-		...(isNotPendingDeactivatedNorFederated &&
-			resetE2EKeyAction && {
-				resetE2EKey: { label: { label: resetE2EKeyAction.label, icon: resetE2EKeyAction.icon }, action: resetE2EKeyAction.action },
-			}),
-		...(isNotPendingDeactivatedNorFederated &&
-			resetTOTPAction && {
-				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 },
 		}),
-	};
+		[
+			changeAdminStatusAction,
+			changeUserStatusAction,
+			deleteUserAction,
+			isFederatedUser,
+			isNotPendingDeactivatedNorFederated,
+			resetE2EKeyAction,
+			resetTOTPAction,
+		],
+	);
 
 	const handleResendWelcomeEmail = () => resendWelcomeEmail.mutateAsync({ email: emails?.[0].address });
 

From 6ebd9047747d0e38565ef1781b0df515c474a2cc Mon Sep 17 00:00:00 2001
From: rique223 <henrique.jobs1@gmail.com>
Date: Tue, 19 Mar 2024 18:02:04 -0300
Subject: [PATCH 2/8] refactor: :recycle: Improve variant verification for
 users page kebab menu

---
 .../client/views/admin/users/AdminUserInfoActions.tsx  |  4 +++-
 .../views/admin/users/UsersTable/UsersTableRow.tsx     | 10 +++-------
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/apps/meteor/client/views/admin/users/AdminUserInfoActions.tsx b/apps/meteor/client/views/admin/users/AdminUserInfoActions.tsx
index 7b1ef363b6cb..31238eb1c569 100644
--- a/apps/meteor/client/views/admin/users/AdminUserInfoActions.tsx
+++ b/apps/meteor/client/views/admin/users/AdminUserInfoActions.tsx
@@ -121,7 +121,9 @@ 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 => (
+					<Option label={label} title={label} icon={icon} variant={label === 'Delete' ? 'danger' : ''} {...props} />
+				)}
 				options={menuOptions}
 			/>
 		);
diff --git a/apps/meteor/client/views/admin/users/UsersTable/UsersTableRow.tsx b/apps/meteor/client/views/admin/users/UsersTable/UsersTableRow.tsx
index f2e4128acd7b..ea7eaef792c9 100644
--- a/apps/meteor/client/views/admin/users/UsersTable/UsersTableRow.tsx
+++ b/apps/meteor/client/views/admin/users/UsersTable/UsersTableRow.tsx
@@ -179,13 +179,9 @@ const UsersTableRow = ({ user, onClick, onReload, isMobile, isLaptop, tab, isSea
 					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} />
-						)
-					}
+					renderItem={({ label: { label, icon }, ...props }): ReactElement => (
+						<Option label={label} title={label} icon={icon} variant={label === 'Delete' ? 'danger' : ''} {...props} />
+					)}
 					options={menuOptions}
 				/>
 			</GenericTableCell>

From eced9c5a365741965d89567297a05d1299aa7113 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Henrique=20Guimar=C3=A3es=20Ribeiro?=
 <henrique.jobs1@gmail.com>
Date: Wed, 20 Mar 2024 18:10:52 -0300
Subject: [PATCH 3/8] Create gentle-news-wonder.md

---
 .changeset/gentle-news-wonder.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/gentle-news-wonder.md

diff --git a/.changeset/gentle-news-wonder.md b/.changeset/gentle-news-wonder.md
new file mode 100644
index 000000000000..76dfe243c89c
--- /dev/null
+++ b/.changeset/gentle-news-wonder.md
@@ -0,0 +1,5 @@
+---
+"@rocket.chat/meteor": minor
+---
+
+Added a new 'Deactivated' tab to the users page, this tab lists users who have logged in for the first time but have been deactivated for any reason;

From ad9e4eea17bacb5ec5b1afc0cff8e4d642b68ccd Mon Sep 17 00:00:00 2001
From: rique223 <henrique.jobs1@gmail.com>
Date: Wed, 17 Jul 2024 21:50:14 -0300
Subject: [PATCH 4/8] feat: :sparkles: Re-add Active and Deactivated tabs

---
 apps/meteor/client/views/admin/users/AdminUsersPage.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/apps/meteor/client/views/admin/users/AdminUsersPage.tsx b/apps/meteor/client/views/admin/users/AdminUsersPage.tsx
index 1d33b5de2ccd..cad33516d2c4 100644
--- a/apps/meteor/client/views/admin/users/AdminUsersPage.tsx
+++ b/apps/meteor/client/views/admin/users/AdminUsersPage.tsx
@@ -150,6 +150,12 @@ const AdminUsersPage = (): ReactElement => {
 						{pendingUsersCount.isLoading && <Skeleton variant='circle' height='x16' width='x16' mis={8} />}
 						{pendingUsersCount.isSuccess && `(${pendingUsersCount.data})`}
 					</TabsItem>
+					<TabsItem selected={!tab || tab === 'active'} onClick={() => handleTabChangeAndSort('active')}>
+						{t('Active')}
+					</TabsItem>
+					<TabsItem selected={!tab || tab === 'deactivated'} onClick={() => handleTabChangeAndSort('deactivated')}>
+						{t('Deactivated')}
+					</TabsItem>
 				</Tabs>
 				<PageContent>
 					<UsersTable

From f11acf0b0ffdb61f35f2b03b2a3c362b8b66ee10 Mon Sep 17 00:00:00 2001
From: rique223 <henrique.jobs1@gmail.com>
Date: Thu, 18 Jul 2024 17:23:15 -0300
Subject: [PATCH 5/8] fix: :bug: Fix new users panel table menu alignment and
 table pagination

Fixed an alignment problem in which the table menu would be shown a little higher than it should due to transforming the GenericTableCell into display flex. Also solved an issue with the pagination in which if you changed tabs the pagination offset would not be reset.
---
 .../views/admin/users/AdminUsersPage.tsx      | 11 ++--
 .../admin/users/UsersTable/UsersTableRow.tsx  | 50 +++++++++----------
 2 files changed, 31 insertions(+), 30 deletions(-)

diff --git a/apps/meteor/client/views/admin/users/AdminUsersPage.tsx b/apps/meteor/client/views/admin/users/AdminUsersPage.tsx
index cad33516d2c4..fac1cf706c3a 100644
--- a/apps/meteor/client/views/admin/users/AdminUsersPage.tsx
+++ b/apps/meteor/client/views/admin/users/AdminUsersPage.tsx
@@ -86,9 +86,10 @@ const AdminUsersPage = (): ReactElement => {
 		filteredUsersQueryResult?.refetch();
 	};
 
-	const handleTabChangeAndSort = (tab: IAdminUserTabs) => {
+	const handleTabChange = (tab: IAdminUserTabs) => {
 		setTab(tab);
 
+		paginationData.setCurrent(0);
 		sortData.setSort(tab === 'pending' ? 'active' : 'name', 'asc');
 	};
 
@@ -142,18 +143,18 @@ const AdminUsersPage = (): ReactElement => {
 					</Callout>
 				)}
 				<Tabs>
-					<TabsItem selected={!tab || tab === 'all'} onClick={() => handleTabChangeAndSort('all')}>
+					<TabsItem selected={!tab || tab === 'all'} onClick={() => handleTabChange('all')}>
 						{t('All')}
 					</TabsItem>
-					<TabsItem selected={tab === 'pending'} onClick={() => handleTabChangeAndSort('pending')} display='flex' flexDirection='row'>
+					<TabsItem selected={tab === 'pending'} onClick={() => handleTabChange('pending')} display='flex' flexDirection='row'>
 						{`${t('Pending')} `}
 						{pendingUsersCount.isLoading && <Skeleton variant='circle' height='x16' width='x16' mis={8} />}
 						{pendingUsersCount.isSuccess && `(${pendingUsersCount.data})`}
 					</TabsItem>
-					<TabsItem selected={!tab || tab === 'active'} onClick={() => handleTabChangeAndSort('active')}>
+					<TabsItem selected={!tab || tab === 'active'} onClick={() => handleTabChange('active')}>
 						{t('Active')}
 					</TabsItem>
-					<TabsItem selected={!tab || tab === 'deactivated'} onClick={() => handleTabChangeAndSort('deactivated')}>
+					<TabsItem selected={!tab || tab === 'deactivated'} onClick={() => handleTabChange('deactivated')}>
 						{t('Deactivated')}
 					</TabsItem>
 				</Tabs>
diff --git a/apps/meteor/client/views/admin/users/UsersTable/UsersTableRow.tsx b/apps/meteor/client/views/admin/users/UsersTable/UsersTableRow.tsx
index ea7eaef792c9..ab43958b8043 100644
--- a/apps/meteor/client/views/admin/users/UsersTable/UsersTableRow.tsx
+++ b/apps/meteor/client/views/admin/users/UsersTable/UsersTableRow.tsx
@@ -154,36 +154,36 @@ const UsersTableRow = ({ user, onClick, onReload, isMobile, isLaptop, tab, isSea
 			)}
 
 			<GenericTableCell
-				display='flex'
-				justifyContent='flex-end'
 				onClick={(e): void => {
 					e.stopPropagation();
 				}}
 			>
-				{tab === 'pending' && (
-					<>
-						{active ? (
-							<Button small secondary onClick={handleResendWelcomeEmail}>
-								{t('Resend_welcome_email')}
-							</Button>
-						) : (
-							<Button small primary onClick={changeUserStatusAction?.action} disabled={isSeatsCapExceeded}>
-								{t('Activate')}
-							</Button>
-						)}
-					</>
-				)}
-
-				<Menu
-					mi={4}
-					placement='bottom-start'
-					flexShrink={0}
-					key='menu'
-					renderItem={({ label: { label, icon }, ...props }): ReactElement => (
-						<Option label={label} title={label} icon={icon} variant={label === 'Delete' ? 'danger' : ''} {...props} />
+				<Box display='flex' justifyContent='flex-end'>
+					{tab === 'pending' && (
+						<>
+							{active ? (
+								<Button small secondary onClick={handleResendWelcomeEmail}>
+									{t('Resend_welcome_email')}
+								</Button>
+							) : (
+								<Button small primary onClick={changeUserStatusAction?.action} disabled={isSeatsCapExceeded}>
+									{t('Activate')}
+								</Button>
+							)}
+						</>
 					)}
-					options={menuOptions}
-				/>
+
+					<Menu
+						mi={4}
+						placement='bottom-start'
+						flexShrink={0}
+						key='menu'
+						renderItem={({ label: { label, icon }, ...props }): ReactElement => (
+							<Option label={label} title={label} icon={icon} variant={label === 'Delete' ? 'danger' : ''} {...props} />
+						)}
+						options={menuOptions}
+					/>
+				</Box>
 			</GenericTableCell>
 		</GenericTableRow>
 	);

From e741124bdea2b14a599060d556928f420dcccbb6 Mon Sep 17 00:00:00 2001
From: rique223 <henrique.jobs1@gmail.com>
Date: Fri, 19 Jul 2024 11:57:55 -0300
Subject: [PATCH 6/8] Remove unnecessary booleans

---
 apps/meteor/client/views/admin/users/AdminUsersPage.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/meteor/client/views/admin/users/AdminUsersPage.tsx b/apps/meteor/client/views/admin/users/AdminUsersPage.tsx
index fac1cf706c3a..d665ac56c9be 100644
--- a/apps/meteor/client/views/admin/users/AdminUsersPage.tsx
+++ b/apps/meteor/client/views/admin/users/AdminUsersPage.tsx
@@ -151,10 +151,10 @@ const AdminUsersPage = (): ReactElement => {
 						{pendingUsersCount.isLoading && <Skeleton variant='circle' height='x16' width='x16' mis={8} />}
 						{pendingUsersCount.isSuccess && `(${pendingUsersCount.data})`}
 					</TabsItem>
-					<TabsItem selected={!tab || tab === 'active'} onClick={() => handleTabChange('active')}>
+					<TabsItem selected={tab === 'active'} onClick={() => handleTabChange('active')}>
 						{t('Active')}
 					</TabsItem>
-					<TabsItem selected={!tab || tab === 'deactivated'} onClick={() => handleTabChange('deactivated')}>
+					<TabsItem selected={tab === 'deactivated'} onClick={() => handleTabChange('deactivated')}>
 						{t('Deactivated')}
 					</TabsItem>
 				</Tabs>

From 4040402c4cb92cc5a17be3269268dd1c0917ed1e Mon Sep 17 00:00:00 2001
From: Tasso <tasso.evangelista@rocket.chat>
Date: Mon, 22 Jul 2024 20:19:03 -0300
Subject: [PATCH 7/8] Rename `IAdminUserTabs` as `AdminUserTab`

We should avoid add new types in core-typings that are only used for UI.
---
 .../client/views/admin/users/AdminUserInfoActions.tsx     | 5 +++--
 .../client/views/admin/users/AdminUserInfoWithData.tsx    | 5 +++--
 apps/meteor/client/views/admin/users/AdminUsersPage.tsx   | 8 +++++---
 .../client/views/admin/users/UsersTable/UsersTable.tsx    | 6 +++---
 .../client/views/admin/users/UsersTable/UsersTableRow.tsx | 5 +++--
 .../client/views/admin/users/hooks/useFilteredUsers.ts    | 7 +++----
 packages/core-typings/src/IUser.ts                        | 2 --
 7 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/apps/meteor/client/views/admin/users/AdminUserInfoActions.tsx b/apps/meteor/client/views/admin/users/AdminUserInfoActions.tsx
index 31238eb1c569..800222282054 100644
--- a/apps/meteor/client/views/admin/users/AdminUserInfoActions.tsx
+++ b/apps/meteor/client/views/admin/users/AdminUserInfoActions.tsx
@@ -1,4 +1,4 @@
-import type { IUser, IAdminUserTabs } from '@rocket.chat/core-typings';
+import type { IUser } from '@rocket.chat/core-typings';
 import { ButtonGroup, Menu, Option } from '@rocket.chat/fuselage';
 import { useRoute, usePermission, useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
@@ -6,6 +6,7 @@ import React, { useCallback, useMemo } from 'react';
 
 import { UserInfoAction } from '../../../components/UserInfo';
 import { useActionSpread } from '../../hooks/useActionSpread';
+import type { AdminUserTab } from './AdminUsersPage';
 import { useChangeAdminStatusAction } from './hooks/useChangeAdminStatusAction';
 import { useChangeUserStatusAction } from './hooks/useChangeUserStatusAction';
 import { useDeleteUserAction } from './hooks/useDeleteUserAction';
@@ -18,7 +19,7 @@ type AdminUserInfoActionsProps = {
 	isFederatedUser: IUser['federated'];
 	isActive: boolean;
 	isAdmin: boolean;
-	tab: IAdminUserTabs;
+	tab: AdminUserTab;
 	onChange: () => void;
 	onReload: () => void;
 };
diff --git a/apps/meteor/client/views/admin/users/AdminUserInfoWithData.tsx b/apps/meteor/client/views/admin/users/AdminUserInfoWithData.tsx
index 3b91ef5275ee..2318e5ae1dc1 100644
--- a/apps/meteor/client/views/admin/users/AdminUserInfoWithData.tsx
+++ b/apps/meteor/client/views/admin/users/AdminUserInfoWithData.tsx
@@ -1,4 +1,4 @@
-import type { IAdminUserTabs, IUser } from '@rocket.chat/core-typings';
+import type { IUser } from '@rocket.chat/core-typings';
 import { Callout } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useSetting, useRolesDescription, useTranslation, useEndpoint, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
@@ -14,11 +14,12 @@ import { UserInfo } from '../../../components/UserInfo';
 import { UserStatus } from '../../../components/UserStatus';
 import { getUserEmailVerified } from '../../../lib/utils/getUserEmailVerified';
 import AdminUserInfoActions from './AdminUserInfoActions';
+import type { AdminUserTab } from './AdminUsersPage';
 
 type AdminUserInfoWithDataProps = {
 	uid: IUser['_id'];
 	onReload: () => void;
-	tab: IAdminUserTabs;
+	tab: AdminUserTab;
 };
 
 const AdminUserInfoWithData = ({ uid, onReload, tab }: AdminUserInfoWithDataProps): ReactElement => {
diff --git a/apps/meteor/client/views/admin/users/AdminUsersPage.tsx b/apps/meteor/client/views/admin/users/AdminUsersPage.tsx
index d665ac56c9be..4ef44122e303 100644
--- a/apps/meteor/client/views/admin/users/AdminUsersPage.tsx
+++ b/apps/meteor/client/views/admin/users/AdminUsersPage.tsx
@@ -1,4 +1,4 @@
-import type { IAdminUserTabs, LicenseInfo } from '@rocket.chat/core-typings';
+import type { LicenseInfo } from '@rocket.chat/core-typings';
 import { Button, ButtonGroup, Callout, ContextualbarIcon, Skeleton, Tabs, TabsItem } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 import type { OptionProp } from '@rocket.chat/ui-client';
@@ -38,6 +38,8 @@ export type UsersFilters = {
 	roles: OptionProp[];
 };
 
+export type AdminUserTab = 'all' | 'active' | 'deactivated' | 'pending';
+
 export type UsersTableSortingOptions = 'name' | 'username' | 'emails.address' | 'status' | 'active';
 
 const AdminUsersPage = (): ReactElement => {
@@ -64,7 +66,7 @@ const AdminUsersPage = (): ReactElement => {
 	const paginationData = usePagination();
 	const sortData = useSort<UsersTableSortingOptions>('name');
 
-	const [tab, setTab] = useState<IAdminUserTabs>('all');
+	const [tab, setTab] = useState<AdminUserTab>('all');
 	const [userFilters, setUserFilters] = useState<UsersFilters>({ text: '', roles: [] });
 
 	const searchTerm = useDebouncedValue(userFilters.text, 500);
@@ -86,7 +88,7 @@ const AdminUsersPage = (): ReactElement => {
 		filteredUsersQueryResult?.refetch();
 	};
 
-	const handleTabChange = (tab: IAdminUserTabs) => {
+	const handleTabChange = (tab: AdminUserTab) => {
 		setTab(tab);
 
 		paginationData.setCurrent(0);
diff --git a/apps/meteor/client/views/admin/users/UsersTable/UsersTable.tsx b/apps/meteor/client/views/admin/users/UsersTable/UsersTable.tsx
index 01d7007561eb..34d71e6ab371 100644
--- a/apps/meteor/client/views/admin/users/UsersTable/UsersTable.tsx
+++ b/apps/meteor/client/views/admin/users/UsersTable/UsersTable.tsx
@@ -1,4 +1,4 @@
-import type { IAdminUserTabs, IRole, Serialized } from '@rocket.chat/core-typings';
+import type { IRole, Serialized } from '@rocket.chat/core-typings';
 import { Pagination, States, StatesAction, StatesActions, StatesIcon, StatesTitle } from '@rocket.chat/fuselage';
 import { useEffectEvent, useBreakpoints } from '@rocket.chat/fuselage-hooks';
 import type { PaginatedResult, DefaultUserInfo } from '@rocket.chat/rest-typings';
@@ -17,12 +17,12 @@ import {
 } from '../../../../components/GenericTable';
 import type { usePagination } from '../../../../components/GenericTable/hooks/usePagination';
 import type { useSort } from '../../../../components/GenericTable/hooks/useSort';
-import type { UsersFilters, UsersTableSortingOptions } from '../AdminUsersPage';
+import type { AdminUserTab, UsersFilters, UsersTableSortingOptions } from '../AdminUsersPage';
 import UsersTableFilters from './UsersTableFilters';
 import UsersTableRow from './UsersTableRow';
 
 type UsersTableProps = {
-	tab: IAdminUserTabs;
+	tab: AdminUserTab;
 	roleData: { roles: IRole[] } | undefined;
 	onReload: () => void;
 	setUserFilters: Dispatch<SetStateAction<UsersFilters>>;
diff --git a/apps/meteor/client/views/admin/users/UsersTable/UsersTableRow.tsx b/apps/meteor/client/views/admin/users/UsersTable/UsersTableRow.tsx
index ab43958b8043..0d9a030f1447 100644
--- a/apps/meteor/client/views/admin/users/UsersTable/UsersTableRow.tsx
+++ b/apps/meteor/client/views/admin/users/UsersTable/UsersTableRow.tsx
@@ -1,5 +1,5 @@
 import { UserStatus as Status } from '@rocket.chat/core-typings';
-import type { IAdminUserTabs, IRole, IUser, Serialized } from '@rocket.chat/core-typings';
+import type { IRole, IUser, Serialized } from '@rocket.chat/core-typings';
 import { Box, Button, Menu, Option } from '@rocket.chat/fuselage';
 import type { DefaultUserInfo } from '@rocket.chat/rest-typings';
 import { UserAvatar } from '@rocket.chat/ui-avatar';
@@ -10,6 +10,7 @@ import React, { useMemo } from 'react';
 import { Roles } from '../../../../../app/models/client';
 import { GenericTableRow, GenericTableCell } from '../../../../components/GenericTable';
 import { UserStatus } from '../../../../components/UserStatus';
+import type { AdminUserTab } from '../AdminUsersPage';
 import { useChangeAdminStatusAction } from '../hooks/useChangeAdminStatusAction';
 import { useChangeUserStatusAction } from '../hooks/useChangeUserStatusAction';
 import { useDeleteUserAction } from '../hooks/useDeleteUserAction';
@@ -23,7 +24,7 @@ type UsersTableRowProps = {
 	isMobile: boolean;
 	isLaptop: boolean;
 	onReload: () => void;
-	tab: IAdminUserTabs;
+	tab: AdminUserTab;
 	isSeatsCapExceeded: boolean;
 };
 
diff --git a/apps/meteor/client/views/admin/users/hooks/useFilteredUsers.ts b/apps/meteor/client/views/admin/users/hooks/useFilteredUsers.ts
index 9a592d5e449f..f6d14a548b46 100644
--- a/apps/meteor/client/views/admin/users/hooks/useFilteredUsers.ts
+++ b/apps/meteor/client/views/admin/users/hooks/useFilteredUsers.ts
@@ -1,4 +1,3 @@
-import type { IAdminUserTabs } from '@rocket.chat/core-typings';
 import type { UsersListStatusParamsGET } from '@rocket.chat/rest-typings';
 import { useEndpoint, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
 import { useQuery } from '@tanstack/react-query';
@@ -7,12 +6,12 @@ import { useMemo } from 'react';
 
 import type { usePagination } from '../../../../components/GenericTable/hooks/usePagination';
 import type { useSort } from '../../../../components/GenericTable/hooks/useSort';
-import type { UsersTableSortingOptions } from '../AdminUsersPage';
+import type { AdminUserTab, UsersTableSortingOptions } from '../AdminUsersPage';
 
 type UseFilteredUsersOptions = {
 	searchTerm: string;
 	prevSearchTerm: MutableRefObject<string>;
-	tab: IAdminUserTabs;
+	tab: AdminUserTab;
 	paginationData: ReturnType<typeof usePagination>;
 	sortData: ReturnType<typeof useSort<UsersTableSortingOptions>>;
 	selectedRoles: string[];
@@ -27,7 +26,7 @@ const useFilteredUsers = ({ searchTerm, prevSearchTerm, sortData, paginationData
 			setCurrent(0);
 		}
 
-		const listUsersPayload: Partial<Record<IAdminUserTabs, UsersListStatusParamsGET>> = {
+		const listUsersPayload: Partial<Record<AdminUserTab, UsersListStatusParamsGET>> = {
 			all: {},
 			pending: {
 				hasLoggedIn: false,
diff --git a/packages/core-typings/src/IUser.ts b/packages/core-typings/src/IUser.ts
index 136146e40a34..3c6d1c890d7b 100644
--- a/packages/core-typings/src/IUser.ts
+++ b/packages/core-typings/src/IUser.ts
@@ -231,5 +231,3 @@ export type AvatarServiceObject = {
 };
 
 export type AvatarObject = AvatarReset | AvatarUrlObj | FormData | AvatarServiceObject;
-
-export type IAdminUserTabs = 'all' | 'active' | 'deactivated' | 'pending';

From 4715bf01cdb8cd4b43d343dc8d121e7d82190b8b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Henrique=20Guimar=C3=A3es=20Ribeiro?=
 <43561537+rique223@users.noreply.github.com>
Date: Tue, 30 Jul 2024 14:34:43 +0000
Subject: [PATCH 8/8] Update changeset

---
 .changeset/gentle-news-wonder.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/gentle-news-wonder.md b/.changeset/gentle-news-wonder.md
index 76dfe243c89c..dd3218003d7a 100644
--- a/.changeset/gentle-news-wonder.md
+++ b/.changeset/gentle-news-wonder.md
@@ -2,4 +2,4 @@
 "@rocket.chat/meteor": minor
 ---
 
-Added a new 'Deactivated' tab to the users page, this tab lists users who have logged in for the first time but have been deactivated for any reason;
+Added a new 'Deactivated' tab to the users page, this tab lists users who have logged in for the first time but have been deactivated for any reason. Also added the UI code for the Active tab;