feat: adds pagination in users table

backend/src/server/routes/v1/admin-router.ts

@@ -172,7 +172,10 @@ export const registerAdminRouter = async (server: FastifyZodProvider) => {
             email: true,
             id: true,
             superAdmin: true
-          }).array()
+          }).array(),
+          meta: z.object({
+            total: z.number()
+          })
         })
       }
     },
@@ -186,8 +189,16 @@ export const registerAdminRouter = async (server: FastifyZodProvider) => {
         ...req.query
       });
 
+      const count = await server.services.superAdmin.countUsers({
+        searchTerm: req.query.searchTerm,
+        adminsOnly: req.query.adminsOnly
+      });
+
       return {
-        users
+        users,
+        meta: {
+          total: count
+        }
       };
     }
   });
@@ -247,7 +258,7 @@ export const registerAdminRouter = async (server: FastifyZodProvider) => {
         ...req.query
       });
       const count = await server.services.superAdmin.countOrganizations({
-        ...req.query
+        searchTerm: req.query.searchTerm
       });
 
       return {
@@ -364,7 +375,7 @@ export const registerAdminRouter = async (server: FastifyZodProvider) => {
       });
 
       const count = await server.services.superAdmin.countIdentities({
-        ...req.query
+        searchTerm: req.query.searchTerm
       });
 
       return {

backend/src/services/super-admin/super-admin-service.ts

@@ -57,6 +57,7 @@ import {
   TAdminSignUpDTO,
   TCountIdentitiesDTO,
   TCountOrganizationsDTO,
+  TCountUsersDTO,
   TCreateOrganizationDTO,
   TGetOrganizationsDTO,
   TResendOrgInviteDTO
@@ -670,6 +671,15 @@ export const superAdminServiceFactory = ({
     });
   };
 
+  const countUsers = async ({ searchTerm, adminsOnly }: TCountUsersDTO) => {
+    const count = await userDAL.countUsersByFilter({
+      searchTerm,
+      adminsOnly
+    });
+
+    return count;
+  };
+
   const deleteUser = async (userId: string) => {
     const superAdmins = await userDAL.find({
       superAdmin: true
@@ -1151,6 +1161,7 @@ export const superAdminServiceFactory = ({
     adminSignUp,
     bootstrapInstance,
     getUsers,
+    countUsers,
     deleteUser,
     getIdentities,
     countIdentities,

backend/src/services/super-admin/super-admin-types.ts

@@ -42,6 +42,11 @@ export type TCountIdentitiesDTO = {
   searchTerm: string;
 };
 
+export type TCountUsersDTO = {
+  searchTerm: string;
+  adminsOnly: boolean;
+};
+
 export type TCreateOrganizationDTO = {
   name: string;
   inviteAdminEmails: string[];

backend/src/services/user/user-dal.ts

@@ -70,6 +70,35 @@ export const userDALFactory = (db: TDbClient) => {
     }
   };
 
+  const countUsersByFilter = async ({ searchTerm, adminsOnly }: { searchTerm: string; adminsOnly: boolean }) => {
+    interface CountResult {
+      count: string;
+    }
+    try {
+      const count = await db
+        .replicaNode()(TableName.Users)
+        .where("isGhost", "=", false)
+        .where((qb) => {
+          if (searchTerm) {
+            void qb
+              .whereILike("email", `%${searchTerm}%`)
+              .orWhereILike("firstName", `%${searchTerm}%`)
+              .orWhereILike("lastName", `%${searchTerm}%`)
+              .orWhereRaw('lower("username") like ?', `%${searchTerm}%`);
+          }
+          if (adminsOnly) {
+            void qb.where("superAdmin", true);
+          }
+        })
+        .count("*")
+        .first();
+
+      return parseInt((count as unknown as CountResult).count || "0", 10);
+    } catch (error) {
+      throw new DatabaseError({ error, name: "Count Users by filter" });
+    }
+  };
+
   // USER ENCRYPTION FUNCTIONS
   // -------------------------
   const findUserEncKeyByUsername = async ({ username }: { username: string }) => {
@@ -243,6 +272,7 @@ export const userDALFactory = (db: TDbClient) => {
     findOneUserAction,
     createUserAction,
     getUsersByFilter,
+    countUsersByFilter,
     findAllMyAccounts,
     findUserByEmail
   };

frontend/src/hooks/api/admin/queries.ts

@@ -1,15 +1,7 @@
-import {
+import { useQuery, UseQueryOptions } from "@tanstack/react-query";
-  DefaultError,
-  InfiniteData,
-  UndefinedInitialDataInfiniteOptions,
-  useInfiniteQuery,
-  useQuery,
-  UseQueryOptions
-} from "@tanstack/react-query";
 
 import { apiRequest } from "@app/config/request";
 
-import { User } from "../types";
 import {
   AdminGetIdentitiesFilters,
   AdminGetOrganizationsFilters,
@@ -20,6 +12,7 @@ import {
   TGetInvalidatingCacheStatus,
   TGetOrganizationsResponse,
   TGetServerRootKmsEncryptionDetails,
+  TGetUsersResponse,
   TServerConfig
 } from "./types";
 
@@ -87,37 +80,22 @@ export const useGetServerConfig = ({
     enabled: options?.enabled ?? true
   });
 
-export const useAdminGetUsers = (
+export const useAdminGetUsers = (filters: AdminGetUsersFilters) => {
-  filters: AdminGetUsersFilters,
+  return useQuery({
-  options?: Partial<
-    UndefinedInitialDataInfiniteOptions<
-      User[],
-      DefaultError,
-      InfiniteData<User[]>,
-      ReturnType<typeof adminQueryKeys.getUsers>,
-      number
-    >
-  >
-) => {
-  return useInfiniteQuery({
-    initialPageParam: 0,
     queryKey: adminQueryKeys.getUsers(filters),
-    queryFn: async ({ pageParam }) => {
+    queryFn: async () => {
-      const { data } = await apiRequest.get<{ users: User[] }>(
+      const { data } = await apiRequest.get<TGetUsersResponse>(
         "/api/v1/admin/user-management/users",
         {
           params: {
-            ...filters,
+            ...filters
-            offset: pageParam
           }
         }
       );
 
-      return data.users;
+      return { users: data.users, totalCount: data.meta.total };
     },
-    getNextPageParam: (lastPage, pages) =>
+    placeholderData: (previousData) => previousData
-      lastPage.length !== 0 ? pages.length * filters.limit : undefined,
-    ...options
   });
 };
 

frontend/src/hooks/api/admin/types.ts

@@ -1,7 +1,7 @@
 import { Identity } from "@app/hooks/api/identities/types";
 import { OrgMembershipStatus } from "@app/hooks/api/organization/types";
 
-import { Organization } from "../types";
+import { Organization, User } from "../types";
 
 export enum LoginMethod {
   EMAIL = "email",
@@ -49,6 +49,11 @@ export type TGetIdentitiesResponse = {
   meta: PaginatedDataMeta;
 };
 
+export type TGetUsersResponse = {
+  users: User[];
+  meta: PaginatedDataMeta;
+};
+
 export type TServerConfig = {
   initialized: boolean;
   allowSignUp: boolean;
@@ -102,9 +107,10 @@ export type AdminGetOrganizationsFilters = {
 };
 
 export type AdminGetUsersFilters = {
-  limit: number;
+  limit?: number;
-  searchTerm: string;
+  offset?: number;
-  adminsOnly: boolean;
+  searchTerm?: string;
+  adminsOnly?: boolean;
 };
 
 export type AdminGetIdentitiesFilters = {
@@ -187,3 +193,7 @@ export enum AdminOrganizationsOrderBy {
 export enum AdminIdentitiesOrderBy {
   Name = "name"
 }
+
+export enum AdminUsersOrderBy {
+  Username = "username"
+}

frontend/src/pages/admin/AccessManagementPage/components/AddServerAdminModal.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from "react";
+import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
@@ -55,18 +55,14 @@ const Content = ({ onClose }: ContentProps) => {
   const [searchUserFilter, setSearchUserFilter] = useState("");
   const [debouncedSearchTerm, setDebouncedSearchTerm] = useDebounce(searchUserFilter, 500);
 
-  const { data, isFetching } = useAdminGetUsers(
+  const { data, isPending } = useAdminGetUsers({
-    {
     limit: 20,
     searchTerm: debouncedSearchTerm,
     adminsOnly: false
-    },
+  });
-    {
-      placeholderData: (prev) => prev
-    }
-  );
 
-  const users = useMemo(() => data?.pages.flat().filter((user) => !user.superAdmin) ?? [], [data]);
+  const { users: usersData = [] } = data ?? {};
+  const users = usersData.filter((user) => !user.superAdmin);
 
   const onSubmit = async ({ user }: FormData) => {
     try {
@@ -91,7 +87,7 @@ const Content = ({ onClose }: ContentProps) => {
         render={({ field, fieldState: { error } }) => (
           <FormControl isError={Boolean(error)} errorText={error?.message} label="User">
             <FilterableSelect
-              isLoading={searchUserFilter !== debouncedSearchTerm || isFetching}
+              isLoading={searchUserFilter !== debouncedSearchTerm || isPending}
               className="w-full"
               placeholder="Search users..."
               options={users}

frontend/src/pages/admin/AccessManagementPage/components/ServerAdminsTable.tsx

@@ -11,7 +11,6 @@ import {
   faXmark
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { InfiniteData } from "@tanstack/react-query";
 import { twMerge } from "tailwind-merge";
 
 import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
@@ -28,6 +27,7 @@ import {
   EmptyState,
   IconButton,
   Input,
+  Pagination,
   Table,
   TableContainer,
   TableSkeleton,
@@ -39,13 +39,19 @@ import {
   Tr
 } from "@app/components/v2";
 import { useSubscription, useUser } from "@app/context";
-import { useDebounce, usePopUp } from "@app/hooks";
+import {
+  getUserTablePreference,
+  PreferenceKey,
+  setUserTablePreference
+} from "@app/helpers/userTablePreferences";
+import { useDebounce, usePagination, usePopUp } from "@app/hooks";
 import {
   useAdminBulkDeleteUsers,
   useAdminDeleteUser,
   useAdminGetUsers,
   useRemoveUserServerAdminAccess
 } from "@app/hooks/api";
+import { AdminUsersOrderBy } from "@app/hooks/api/admin/types";
 import { User } from "@app/hooks/api/users/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 import { AddServerAdminModal } from "@app/pages/admin/AccessManagementPage/components/AddServerAdminModal";
@@ -54,15 +60,17 @@ const removeServerAdminUpgradePlanMessage = "Removing Server Admin permissions f
 
 const ServerAdminsPanelTable = ({
   handlePopUpOpen,
-  users: usersPages,
+  users,
   isPending,
   searchUserFilter,
   setSearchUserFilter,
-  isFetchingNextPage,
-  fetchNextPage,
-  hasNextPage,
   selectedUsers,
-  setSelectedUsers
+  setSelectedUsers,
+  totalCount,
+  page,
+  perPage,
+  setPage,
+  handlePerPageChange
 }: {
   handlePopUpOpen: (
     popUpName: keyof UsePopUpState<
@@ -75,20 +83,20 @@ const ServerAdminsPanelTable = ({
     }
   ) => void;
   isPending: boolean;
-  users: InfiniteData<User[], unknown> | undefined;
+  users?: User[];
   searchUserFilter: string;
   setSearchUserFilter: (filter: string) => void;
   selectedUsers: User[];
   setSelectedUsers: Dispatch<SetStateAction<User[]>>;
-  isFetchingNextPage: boolean;
+  totalCount: number;
-  fetchNextPage: () => void;
+  page: number;
-  hasNextPage: boolean;
+  perPage: number;
+  setPage: Dispatch<SetStateAction<number>>;
+  handlePerPageChange: (newPerPage: number) => void;
 }) => {
   const { subscription } = useSubscription();
 
-  const users = usersPages?.pages.flat();
+  const isEmpty = !isPending && totalCount === 0;
-
-  const isEmpty = !isPending && !users?.length;
 
   const selectedUserIds = selectedUsers.map((user) => user.id);
 
@@ -241,16 +249,13 @@ const ServerAdminsPanelTable = ({
           {!isPending && isEmpty && <EmptyState title="No users found" icon={faUsers} />}
         </TableContainer>
         {!isEmpty && (
-          <Button
+          <Pagination
-            className="mt-4 py-3 text-sm"
+            count={totalCount}
-            isFullWidth
+            page={page}
-            variant="outline_bg"
+            perPage={perPage}
-            isLoading={isFetchingNextPage}
+            onChangePage={(newPage) => setPage(newPage)}
-            isDisabled={isFetchingNextPage || !hasNextPage}
+            onChangePerPage={handlePerPageChange}
-            onClick={() => fetchNextPage()}
+          />
-          >
-            {hasNextPage ? "Load More" : "End of List"}
-          </Button>
         )}
       </div>
     </>
@@ -278,18 +283,27 @@ export const ServerAdminsTable = () => {
   const [searchUserFilter, setSearchUserFilter] = useState("");
   const [debouncedSearchTerm] = useDebounce(searchUserFilter, 500);
 
-  const {
+  const { offset, limit, setPage, perPage, page, setPerPage } = usePagination<AdminUsersOrderBy>(
-    data: users,
+    AdminUsersOrderBy.Username,
-    isPending,
+    {
-    isFetchingNextPage,
+      initPerPage: getUserTablePreference("ServerAdminUsersTable", PreferenceKey.PerPage, 20)
-    hasNextPage,
+    }
-    fetchNextPage
+  );
-  } = useAdminGetUsers({
+
-    limit: 20,
+  const handlePerPageChange = (newPerPage: number) => {
+    setPerPage(newPerPage);
+    setUserTablePreference("ServerAdminUsersTable", PreferenceKey.PerPage, newPerPage);
+  };
+
+  const { data, isPending } = useAdminGetUsers({
+    limit,
+    offset,
     searchTerm: debouncedSearchTerm,
     adminsOnly: true
   });
 
+  const { users = [], totalCount = 0 } = data ?? {};
+
   const handleRemoveUser = async () => {
     const { id } = popUp?.removeUser?.data as { id: string; username: string };
 
@@ -389,9 +403,11 @@ export const ServerAdminsTable = () => {
           searchUserFilter={searchUserFilter}
           setSearchUserFilter={setSearchUserFilter}
           isPending={isPending}
-          isFetchingNextPage={isFetchingNextPage}
+          page={page}
-          hasNextPage={hasNextPage}
+          perPage={perPage}
-          fetchNextPage={fetchNextPage}
+          setPage={setPage}
+          handlePerPageChange={handlePerPageChange}
+          totalCount={totalCount}
         />
         <DeleteActionModal
           isOpen={popUp.removeUser.isOpen}

frontend/src/pages/admin/ResourceOverviewPage/components/AddOrganizationModal.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from "react";
+import { useState } from "react";
 import { Controller, useFieldArray, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
@@ -72,18 +72,13 @@ const Content = ({ onClose }: ContentProps) => {
   const [searchUserFilter, setSearchUserFilter] = useState("");
   const [debouncedSearchTerm, setDebouncedSearchTerm] = useDebounce(searchUserFilter, 500);
 
-  const { data, isFetching } = useAdminGetUsers(
+  const { data, isPending } = useAdminGetUsers({
-    {
     limit: 20,
     searchTerm: debouncedSearchTerm,
     adminsOnly: false
-    },
+  });
-    {
-      placeholderData: (prev) => prev
-    }
-  );
 
-  const users = useMemo(() => data?.pages.flat() ?? [], [data]);
+  const { users = [] } = data ?? {};
 
   const onSubmit = async ({ name, invitees }: FormData) => {
     try {
@@ -155,7 +150,7 @@ const Content = ({ onClose }: ContentProps) => {
                   })
                   .includes(input)
               }
-              isLoading={searchUserFilter !== debouncedSearchTerm || isFetching}
+              isLoading={searchUserFilter !== debouncedSearchTerm || isPending}
               className="w-full"
               placeholder="Search users or invite new ones..."
               isMulti

frontend/src/pages/admin/ResourceOverviewPage/components/UserIdentitiesTable.tsx

@@ -13,7 +13,6 @@ import {
   faXmark
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { InfiniteData } from "@tanstack/react-query";
 import { twMerge } from "tailwind-merge";
 
 import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
@@ -31,6 +30,7 @@ import {
   EmptyState,
   IconButton,
   Input,
+  Pagination,
   Table,
   TableContainer,
   TableSkeleton,
@@ -42,7 +42,12 @@ import {
   Tr
 } from "@app/components/v2";
 import { useSubscription, useUser } from "@app/context";
-import { useDebounce, usePopUp } from "@app/hooks";
+import {
+  getUserTablePreference,
+  PreferenceKey,
+  setUserTablePreference
+} from "@app/helpers/userTablePreferences";
+import { useDebounce, usePagination, usePopUp } from "@app/hooks";
 import {
   useAdminBulkDeleteUsers,
   useAdminDeleteUser,
@@ -50,6 +55,7 @@ import {
   useAdminGrantServerAdminAccess,
   useRemoveUserServerAdminAccess
 } from "@app/hooks/api";
+import { AdminUsersOrderBy } from "@app/hooks/api/admin/types";
 import { User } from "@app/hooks/api/users/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
@@ -58,17 +64,19 @@ const removeServerAdminUpgradePlanMessage = "Removing Server Admin permissions f
 
 const UserPanelTable = ({
   handlePopUpOpen,
-  users: usersPages,
+  users,
   isPending,
   adminsOnly,
   searchUserFilter,
   setSearchUserFilter,
   setAdminsOnly,
-  isFetchingNextPage,
-  fetchNextPage,
-  hasNextPage,
   selectedUsers,
-  setSelectedUsers
+  setSelectedUsers,
+  totalCount,
+  page,
+  perPage,
+  setPage,
+  handlePerPageChange
 }: {
   handlePopUpOpen: (
     popUpName: keyof UsePopUpState<
@@ -81,22 +89,22 @@ const UserPanelTable = ({
     }
   ) => void;
   isPending: boolean;
-  users: InfiniteData<User[], unknown> | undefined;
+  users: User[] | undefined;
   adminsOnly: boolean;
   setAdminsOnly: (adminsOnly: boolean) => void;
   searchUserFilter: string;
   setSearchUserFilter: (filter: string) => void;
   selectedUsers: User[];
   setSelectedUsers: Dispatch<SetStateAction<User[]>>;
-  isFetchingNextPage: boolean;
+  totalCount: number;
-  fetchNextPage: () => void;
+  page: number;
-  hasNextPage: boolean;
+  perPage: number;
+  setPage: Dispatch<SetStateAction<number>>;
+  handlePerPageChange: (newPerPage: number) => void;
 }) => {
   const { subscription } = useSubscription();
 
-  const users = usersPages?.pages.flat();
+  const isEmpty = !isPending && totalCount === 0;
-
-  const isEmpty = !isPending && !users?.length;
   const isTableFiltered = Boolean(adminsOnly);
 
   const selectedUserIds = selectedUsers.map((user) => user.id);
@@ -302,16 +310,13 @@ const UserPanelTable = ({
           {!isPending && isEmpty && <EmptyState title="No users found" icon={faUsers} />}
         </TableContainer>
         {!isEmpty && (
-          <Button
+          <Pagination
-            className="mt-4 py-3 text-sm"
+            count={totalCount}
-            isFullWidth
+            page={page}
-            variant="outline_bg"
+            perPage={perPage}
-            isLoading={isFetchingNextPage}
+            onChangePage={(newPage) => setPage(newPage)}
-            isDisabled={isFetchingNextPage || !hasNextPage}
+            onChangePerPage={handlePerPageChange}
-            onClick={() => fetchNextPage()}
+          />
-          >
-            {hasNextPage ? "Load More" : "End of List"}
-          </Button>
         )}
       </div>
     </>
@@ -341,18 +346,27 @@ export const UserIdentitiesTable = () => {
   const [adminsOnly, setAdminsOnly] = useState(false);
   const [debouncedSearchTerm] = useDebounce(searchUserFilter, 500);
 
-  const {
+  const { offset, limit, setPage, perPage, page, setPerPage } = usePagination<AdminUsersOrderBy>(
-    data: users,
+    AdminUsersOrderBy.Username,
-    isPending,
+    {
-    isFetchingNextPage,
+      initPerPage: getUserTablePreference("ResourceOverviewUsersTable", PreferenceKey.PerPage, 20)
-    hasNextPage,
+    }
-    fetchNextPage
+  );
-  } = useAdminGetUsers({
+
-    limit: 20,
+  const handlePerPageChange = (newPerPage: number) => {
+    setPerPage(newPerPage);
+    setUserTablePreference("ResourceOverviewUsersTable", PreferenceKey.PerPage, newPerPage);
+  };
+
+  const { data, isPending } = useAdminGetUsers({
+    limit,
+    offset,
     searchTerm: debouncedSearchTerm,
     adminsOnly
   });
 
+  const { users, totalCount = 0 } = data ?? {};
+
   const handleRemoveUser = async () => {
     const { id } = popUp?.removeUser?.data as { id: string; username: string };
 
@@ -479,9 +493,11 @@ export const UserIdentitiesTable = () => {
           isPending={isPending}
           adminsOnly={adminsOnly}
           setAdminsOnly={setAdminsOnly}
-          isFetchingNextPage={isFetchingNextPage}
+          page={page}
-          hasNextPage={hasNextPage}
+          perPage={perPage}
-          fetchNextPage={fetchNextPage}
+          setPage={setPage}
+          handlePerPageChange={handlePerPageChange}
+          totalCount={totalCount}
         />
         <DeleteActionModal
           isOpen={popUp.removeUser.isOpen}