feat: adds pagination in identities table

2026-09-22 13:39:35 +00:00 · 2025-10-08 02:02:19 +05:30
parent 80754fe0b3
commit e7990c493b
8 changed files with 170 additions and 94 deletions
--- a/backend/src/server/routes/v1/admin-router.ts
+++ b/backend/src/server/routes/v1/admin-router.ts
@@ -346,7 +346,10 @@ export const registerAdminRouter = async (server: FastifyZodProvider) => {
            .extend({
              isInstanceAdmin: z.boolean()
            })
-            .array()
+            .array(),
+          meta: z.object({
+            total: z.number()
+          })
        })
      }
    },
@@ -360,8 +363,15 @@ export const registerAdminRouter = async (server: FastifyZodProvider) => {
        ...req.query
      });

+      const count = await server.services.superAdmin.countIdentities({
+        ...req.query
+      });
+
      return {
-        identities
+        identities,
+        meta: {
+          total: count
+        }
      };
    }
  });
--- a/backend/src/services/identity/identity-dal.ts
+++ b/backend/src/services/identity/identity-dal.ts
@@ -60,5 +60,26 @@ export const identityDALFactory = (db: TDbClient) => {
    }
  };

-  return { ...identityOrm, getTrustedIpsByAuthMethod, getIdentitiesByFilter };
+  const countIdentitiesByFilter = async ({ searchTerm }: { searchTerm: string }) => {
+    interface CountResult {
+      count: string;
+    }
+    try {
+      const count = await db
+        .replicaNode()(TableName.Identity)
+        .where((qb) => {
+          if (searchTerm) {
+            void qb.whereILike(`${TableName.Identity}.name`, `%${searchTerm}%`);
+          }
+        })
+        .count("*")
+        .first();
+
+      return parseInt((count as unknown as CountResult).count || "0", 10);
+    } catch (error) {
+      throw new DatabaseError({ error, name: "Count identities by filter" });
+    }
+  };
+
+  return { ...identityOrm, getTrustedIpsByAuthMethod, getIdentitiesByFilter, countIdentitiesByFilter };
 };
--- a/backend/src/services/super-admin/super-admin-service.ts
+++ b/backend/src/services/super-admin/super-admin-service.ts
@@ -55,6 +55,7 @@ import {
  TAdminGetUsersDTO,
  TAdminIntegrationConfig,
  TAdminSignUpDTO,
+  TCountIdentitiesDTO,
  TCountOrganizationsDTO,
  TCreateOrganizationDTO,
  TGetOrganizationsDTO,
@@ -1037,6 +1038,13 @@ export const superAdminServiceFactory = ({
    }));
  };

+  const countIdentities = async ({ searchTerm }: TCountIdentitiesDTO) => {
+    const count = await identityDAL.countIdentitiesByFilter({
+      searchTerm
+    });
+    return count;
+  };
+
  const grantServerAdminAccessToUser = async (userId: string) => {
    if (!licenseService.onPremFeatures?.instanceUserManagement) {
      throw new BadRequestError({
@@ -1145,6 +1153,7 @@ export const superAdminServiceFactory = ({
    getUsers,
    deleteUser,
    getIdentities,
+    countIdentities,
    getAdminIntegrationsConfig,
    updateRootEncryptionStrategy,
    getConfiguredEncryptionStrategies,
--- a/backend/src/services/super-admin/super-admin-types.ts
+++ b/backend/src/services/super-admin/super-admin-types.ts
@@ -38,6 +38,10 @@ export type TCountOrganizationsDTO = {
  searchTerm: string;
 };

+export type TCountIdentitiesDTO = {
+  searchTerm: string;
+};
+
 export type TCreateOrganizationDTO = {
  name: string;
  inviteAdminEmails: string[];
--- a/frontend/src/hooks/api/admin/queries.ts
+++ b/frontend/src/hooks/api/admin/queries.ts
@@ -8,7 +8,6 @@ import {
 } from "@tanstack/react-query";

 import { apiRequest } from "@app/config/request";
-import { Identity } from "@app/hooks/api/identities/types";

 import { User } from "../types";
 import {
@@ -17,6 +16,7 @@ import {
  AdminGetUsersFilters,
  AdminIntegrationsConfig,
  TGetEnvOverrides,
+  TGetIdentitiesResponse,
  TGetInvalidatingCacheStatus,
  TGetOrganizationsResponse,
  TGetServerRootKmsEncryptionDetails,
@@ -122,24 +122,21 @@ export const useAdminGetUsers = (
 };

 export const useAdminGetIdentities = (filters: AdminGetIdentitiesFilters) => {
-  return useInfiniteQuery({
-    initialPageParam: 0,
+  return useQuery({
    queryKey: adminQueryKeys.getIdentities(filters),
-    queryFn: async ({ pageParam }) => {
-      const { data } = await apiRequest.get<{ identities: Identity[] }>(
+    queryFn: async () => {
+      const { data } = await apiRequest.get<TGetIdentitiesResponse>(
        "/api/v1/admin/identity-management/identities",
        {
          params: {
-            ...filters,
-            offset: pageParam
+            ...filters
          }
        }
      );

-      return data.identities;
+      return { identities: data.identities, totalCount: data.meta.total };
    },
-    getNextPageParam: (lastPage, pages) =>
-      lastPage.length !== 0 ? pages.length * filters.limit : undefined
+    placeholderData: (previousData) => previousData
  });
 };

--- a/frontend/src/hooks/api/admin/types.ts
+++ b/frontend/src/hooks/api/admin/types.ts
@@ -1,3 +1,4 @@
+import { Identity } from "@app/hooks/api/identities/types";
 import { OrgMembershipStatus } from "@app/hooks/api/organization/types";

 import { Organization } from "../types";
@@ -34,11 +35,18 @@ export type OrganizationWithProjects = Organization & {
  }[];
 };

+type PaginatedDataMeta = {
+  total: number;
+};
+
 export type TGetOrganizationsResponse = {
  organizations: OrganizationWithProjects[];
-  meta: {
-    total: number;
-  };
+  meta: PaginatedDataMeta;
+};
+
+export type TGetIdentitiesResponse = {
+  identities: Identity[];
+  meta: PaginatedDataMeta;
 };

 export type TServerConfig = {
@@ -100,8 +108,9 @@ export type AdminGetUsersFilters = {
 };

 export type AdminGetIdentitiesFilters = {
-  limit: number;
-  searchTerm: string;
+  limit?: number;
+  offset?: number;
+  searchTerm?: string;
 };

 export type AdminIntegrationsConfig = {
@@ -171,6 +180,10 @@ export type TResendOrgInviteDTO = {
  membershipId: string;
 };

-export enum AdminOrganizationOrderBy {
+export enum AdminOrganizationsOrderBy {
+  Name = "name"
+}
+
+export enum AdminIdentitiesOrderBy {
  Name = "name"
 }
--- a/frontend/src/pages/admin/ResourceOverviewPage/components/MachineIdentitiesTable.tsx
+++ b/frontend/src/pages/admin/ResourceOverviewPage/components/MachineIdentitiesTable.tsx
@@ -11,7 +11,6 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { createNotification } from "@app/components/notifications";
 import {
  Badge,
-  Button,
  DeleteActionModal,
  DropdownMenu,
  DropdownMenuContent,
@@ -20,6 +19,7 @@ import {
  EmptyState,
  IconButton,
  Input,
+  Pagination,
  Table,
  TableContainer,
  TableSkeleton,
@@ -29,9 +29,15 @@ import {
  THead,
  Tr
 } from "@app/components/v2";
-import { useDebounce, usePopUp } from "@app/hooks";
+import {
+  getUserTablePreference,
+  PreferenceKey,
+  setUserTablePreference
+} from "@app/helpers/userTablePreferences";
+import { useDebounce, usePagination, usePopUp, useResetPageHelper } from "@app/hooks";
 import { useAdminRemoveIdentitySuperAdminAccess } from "@app/hooks/api/admin";
 import { useAdminGetIdentities } from "@app/hooks/api/admin/queries";
+import { AdminIdentitiesOrderBy } from "@app/hooks/api/admin/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";

 const IdentityPanelTable = ({
@@ -48,14 +54,35 @@ const IdentityPanelTable = ({
  const [searchIdentityFilter, setSearchIdentityFilter] = useState("");
  const [debouncedSearchTerm] = useDebounce(searchIdentityFilter, 500);

-  const { data, isPending, isFetchingNextPage, hasNextPage, fetchNextPage } = useAdminGetIdentities(
-    {
-      limit: 20,
-      searchTerm: debouncedSearchTerm
-    }
-  );
+  const { offset, limit, setPage, perPage, page, setPerPage } =
+    usePagination<AdminIdentitiesOrderBy>(AdminIdentitiesOrderBy.Name, {
+      initPerPage: getUserTablePreference(
+        "ResourceOverviewIdentitiesTable",
+        PreferenceKey.PerPage,
+        10
+      )
+    });

-  const isEmpty = !isPending && !data?.pages?.[0].length;
+  const handlePerPageChange = (newPerPage: number) => {
+    setPerPage(newPerPage);
+    setUserTablePreference("ResourceOverviewIdentitiesTable", PreferenceKey.PerPage, newPerPage);
+  };
+
+  const { data, isPending } = useAdminGetIdentities({
+    limit,
+    offset,
+    searchTerm: debouncedSearchTerm
+  });
+
+  const { identities, totalCount = 0 } = data ?? {};
+
+  const isEmpty = !isPending && !totalCount;
+
+  useResetPageHelper({
+    totalCount,
+    offset,
+    setPage
+  });

  return (
    <>
@@ -80,75 +107,70 @@ const IdentityPanelTable = ({
            <TBody>
              {isPending && <TableSkeleton columns={2} innerKey="identities" />}
              {!isPending &&
-                data?.pages?.map((identities) =>
-                  identities.map(({ name, id, isInstanceAdmin }) => (
-                    <Tr key={`identity-${id}`} className="w-full">
-                      <Td>
-                        {name}
-                        {isInstanceAdmin && (
-                          <Badge variant="primary" className="ml-2">
-                            Server Admin
-                          </Badge>
-                        )}
-                      </Td>
-                      <Td>
-                        {isInstanceAdmin && (
-                          <div className="flex justify-end">
-                            <DropdownMenu>
-                              <DropdownMenuTrigger asChild>
-                                <IconButton
-                                  ariaLabel="Options"
-                                  colorSchema="secondary"
-                                  className="w-6"
-                                  variant="plain"
+                identities?.map(({ name, id, isInstanceAdmin }) => (
+                  <Tr key={`identity-${id}`} className="w-full">
+                    <Td>
+                      {name}
+                      {isInstanceAdmin && (
+                        <Badge variant="primary" className="ml-2">
+                          Server Admin
+                        </Badge>
+                      )}
+                    </Td>
+                    <Td>
+                      {isInstanceAdmin && (
+                        <div className="flex justify-end">
+                          <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                              <IconButton
+                                ariaLabel="Options"
+                                colorSchema="secondary"
+                                className="w-6"
+                                variant="plain"
+                              >
+                                <FontAwesomeIcon icon={faEllipsisV} />
+                              </IconButton>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent sideOffset={2} align="end">
+                              {isInstanceAdmin && (
+                                <DropdownMenuItem
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    handlePopUpOpen("removeServerAdmin", { name, id });
+                                  }}
+                                  icon={
+                                    <div className="relative">
+                                      <FontAwesomeIcon icon={faShieldHalved} />
+                                      <FontAwesomeIcon
+                                        className="absolute -bottom-[0.01rem] -right-1"
+                                        size="2xs"
+                                        icon={faXmark}
+                                      />
+                                    </div>
+                                  }
                                >
-                                  <FontAwesomeIcon icon={faEllipsisV} />
-                                </IconButton>
-                              </DropdownMenuTrigger>
-                              <DropdownMenuContent sideOffset={2} align="end">
-                                {isInstanceAdmin && (
-                                  <DropdownMenuItem
-                                    onClick={(e) => {
-                                      e.stopPropagation();
-                                      handlePopUpOpen("removeServerAdmin", { name, id });
-                                    }}
-                                    icon={
-                                      <div className="relative">
-                                        <FontAwesomeIcon icon={faShieldHalved} />
-                                        <FontAwesomeIcon
-                                          className="absolute -bottom-[0.01rem] -right-1"
-                                          size="2xs"
-                                          icon={faXmark}
-                                        />
-                                      </div>
-                                    }
-                                  >
-                                    Remove Server Admin
-                                  </DropdownMenuItem>
-                                )}
-                              </DropdownMenuContent>
-                            </DropdownMenu>
-                          </div>
-                        )}
-                      </Td>
-                    </Tr>
-                  ))
-                )}
+                                  Remove Server Admin
+                                </DropdownMenuItem>
+                              )}
+                            </DropdownMenuContent>
+                          </DropdownMenu>
+                        </div>
+                      )}
+                    </Td>
+                  </Tr>
+                ))}
            </TBody>
          </Table>
          {!isPending && isEmpty && <EmptyState title="No identities found" icon={faWrench} />}
        </TableContainer>
-        {!isEmpty && (
-          <Button
-            className="mt-4 py-3 text-sm"
-            isFullWidth
-            variant="outline_bg"
-            isLoading={isFetchingNextPage}
-            isDisabled={isFetchingNextPage || !hasNextPage}
-            onClick={() => fetchNextPage()}
-          >
-            {hasNextPage ? "Load More" : "End of List"}
-          </Button>
+        {!isPending && totalCount > 0 && (
+          <Pagination
+            count={totalCount}
+            page={page}
+            perPage={perPage}
+            onChangePage={(newPage) => setPage(newPage)}
+            onChangePerPage={handlePerPageChange}
+          />
        )}
      </div>
    </>
--- a/frontend/src/pages/admin/ResourceOverviewPage/components/OrganizationsTable.tsx
+++ b/frontend/src/pages/admin/ResourceOverviewPage/components/OrganizationsTable.tsx
@@ -62,7 +62,7 @@ import {
  useServerAdminAccessOrg,
  useServerAdminResendOrgInvite
 } from "@app/hooks/api";
-import { AdminOrganizationOrderBy, OrganizationWithProjects } from "@app/hooks/api/admin/types";
+import { AdminOrganizationsOrderBy, OrganizationWithProjects } from "@app/hooks/api/admin/types";
 import { OrderByDirection } from "@app/hooks/api/generic/types";
 import { OrgMembershipStatus } from "@app/hooks/api/organization/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
@@ -450,7 +450,7 @@ const OrganizationsPanelTable = ({
  const navigate = useNavigate();

  const { offset, limit, setPage, perPage, page, setPerPage } =
-    usePagination<AdminOrganizationOrderBy>(AdminOrganizationOrderBy.Name, {
+    usePagination<AdminOrganizationsOrderBy>(AdminOrganizationsOrderBy.Name, {
      initPerPage: getUserTablePreference("ResourceOverviewOrgsTable", PreferenceKey.PerPage, 10)
    });