From a98e659ac28c082a26bed1694e05a741b8690c3c Mon Sep 17 00:00:00 2001
From: Felipe <84182706+felipe-rod123@users.noreply.github.com>
Date: Tue, 5 Sep 2023 23:12:43 -0300
Subject: [PATCH] create filter for pending users (work in progress)

---
 .../views/admin/users/AdminUsersPage.tsx       | 18 +++++++++---------
 .../admin/users/UsersTable/UsersTable.tsx      |  3 ++-
 .../admin/users/hooks/useFilterPendingUsers.ts |  7 +++++++
 3 files changed, 18 insertions(+), 10 deletions(-)
 create mode 100644 apps/meteor/client/views/admin/users/hooks/useFilterPendingUsers.ts

diff --git a/apps/meteor/client/views/admin/users/AdminUsersPage.tsx b/apps/meteor/client/views/admin/users/AdminUsersPage.tsx
index c16e6b6a43b2..dbc0c28ef7a7 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<'all' | 'invited' | 'new' | 'active' | 'deactivated'>('all');
+	const [tab, setTab] = useState<'all' | 'invited' | 'pending' | 'active' | 'deactivated'>('all');
 
 	useEffect(() => {
 		if (!context || !seatsCap) {
@@ -51,7 +51,7 @@ const UsersPage = (): ReactElement => {
 					) : (
 						<ButtonGroup>
 							{canCreateUser && (
-								<Button icon='user-plus' onClick={() => router.navigate('/admin/users/new')}>
+								<Button icon='user-plus' onClick={() => router.navigate('/admin/users/pending')}>
 									{t('New')}
 								</Button>
 							)}
@@ -68,11 +68,8 @@ const UsersPage = (): ReactElement => {
 						<Tabs.Item selected={!tab || tab === 'all'} onClick={() => setTab('all')}>
 							{t('All')}
 						</Tabs.Item>
-						<Tabs.Item selected={tab === 'invited'} onClick={() => setTab('invited')}>
-							{t('Invited')}
-						</Tabs.Item>
-						<Tabs.Item selected={tab === 'new'} onClick={() => setTab('new')}>
-							{t('New_users')}
+						<Tabs.Item selected={tab === 'pending'} onClick={() => setTab('pending')}>
+							{t('Pending')}
 						</Tabs.Item>
 						<Tabs.Item selected={tab === 'active'} onClick={() => setTab('active')}>
 							{t('Active')}
@@ -80,6 +77,9 @@ const UsersPage = (): ReactElement => {
 						<Tabs.Item selected={tab === 'deactivated'} onClick={() => setTab('deactivated')}>
 							{t('Deactivated')}
 						</Tabs.Item>
+						<Tabs.Item selected={tab === 'invited'} onClick={() => setTab('invited')}>
+							{t('Invited')}
+						</Tabs.Item>
 					</Tabs>
 					<UsersTable reload={reload} tab={tab} />
 				</Page.Content>
@@ -90,14 +90,14 @@ const UsersPage = (): ReactElement => {
 						<ContextualbarTitle>
 							{context === 'info' && t('User_Info')}
 							{context === 'edit' && t('Edit_User')}
-							{context === 'new' && t('Add_User')}
+							{context === 'pending' && t('Add_User')}
 							{context === 'invite' && t('Invite_Users')}
 						</ContextualbarTitle>
 						<ContextualbarClose onClick={() => router.navigate('/admin/users')} />
 					</ContextualbarHeader>
 					{context === 'info' && id && <AdminUserInfoWithData uid={id} onReload={handleReload} />}
 					{context === 'edit' && id && <AdminUserFormWithData uid={id} onReload={handleReload} />}
-					{context === 'new' && <AdminUserForm onReload={handleReload} />}
+					{context === 'pending' && <AdminUserForm onReload={handleReload} />}
 					{context === 'invite' && <AdminInviteUsers />}
 				</Contextualbar>
 			)}
diff --git a/apps/meteor/client/views/admin/users/UsersTable/UsersTable.tsx b/apps/meteor/client/views/admin/users/UsersTable/UsersTable.tsx
index 7fe4688c9735..5d959b41ec80 100644
--- a/apps/meteor/client/views/admin/users/UsersTable/UsersTable.tsx
+++ b/apps/meteor/client/views/admin/users/UsersTable/UsersTable.tsx
@@ -19,6 +19,7 @@ import {
 import { usePagination } from '../../../../components/GenericTable/hooks/usePagination';
 import { useSort } from '../../../../components/GenericTable/hooks/useSort';
 import { useFilterActiveUsers } from '../hooks/useFilterActiveUsers';
+import { useFilterPendingUsers } from '../hooks/useFilterPendingUsers';
 import { useFilterUsersByRole } from '../hooks/useFilterUsersByrole';
 import { useListUsers } from '../hooks/useListUsers';
 import UsersTableRow from './UsersTableRow';
@@ -80,7 +81,7 @@ const UsersTable = ({ reload, tab }: UsersTableProps): ReactElement | null => {
 
 	const useAllUsers = () => (tab === 'all' && isSuccess ? data?.users : []);
 
-	const currentTabUsers = [...useAllUsers(), ...useFilterActiveUsers(data?.users, tab)];
+	const currentTabUsers = [...useAllUsers(), ...useFilterActiveUsers(data?.users, tab), ...useFilterPendingUsers(data?.users, tab)];
 	const filteredUsers = useFilterUsersByRole(
 		currentTabUsers,
 		roleFilterSelectedOptions.map((currentRole) => currentRole.id),
diff --git a/apps/meteor/client/views/admin/users/hooks/useFilterPendingUsers.ts b/apps/meteor/client/views/admin/users/hooks/useFilterPendingUsers.ts
new file mode 100644
index 000000000000..54c5051bb7d6
--- /dev/null
+++ b/apps/meteor/client/views/admin/users/hooks/useFilterPendingUsers.ts
@@ -0,0 +1,7 @@
+import type { IUser } from '@rocket.chat/core-typings';
+
+export const useFilterPendingUsers = (users: Partial<IUser>[] | undefined, tab: string) => {
+	if (!users || tab !== 'pending') return [];
+
+	return users.filter((currentUser) => currentUser.active === false || !currentUser.lastLogin);
+};