Add pagination for user assignment modal

frontend/src/hooks/api/groups/mutations.tsx

@@ -102,7 +102,7 @@ export const useAddUserToGroup = () => {
             return data;
         },
         onSuccess: (_, { slug }) => {
-            queryClient.invalidateQueries(groupKeys.getGroupUserMembership(slug));
+            queryClient.invalidateQueries(groupKeys.forGroupUserMemberships(slug));
         }
     });
 };
@@ -124,7 +124,7 @@ export const useRemoveUserFromGroup = () => {
             return data;
         },
         onSuccess: (_, { slug }) => {
-            queryClient.invalidateQueries(groupKeys.getGroupUserMembership(slug));
+            queryClient.invalidateQueries(groupKeys.forGroupUserMemberships(slug));
         }
     });
 };

frontend/src/hooks/api/groups/queries.tsx

@@ -3,7 +3,19 @@ import { useQuery } from "@tanstack/react-query";
 import { apiRequest } from "@app/config/request";
 
 export const groupKeys = {
-  getGroupUserMembership: (slug: string) => [{ slug }, "group-user-memberships"] as const
+  allGroupUserMemberships: () => ["group-user-memberships"] as const,
+  forGroupUserMemberships: (slug: string) => [...groupKeys.allGroupUserMemberships(), slug] as const,
+  specificGroupUserMemberships: ({
+    slug,
+    offset,
+    limit,
+    username
+  }: {
+    slug: string;
+    offset: number;
+    limit: number;
+    username: string;
+  }) => [...groupKeys.forGroupUserMemberships(slug), { offset, limit, username }] as const
 };
 
 type TUser = {
@@ -15,14 +27,39 @@ type TUser = {
   isPartOfGroup: boolean;
 };
 
-export const useListGroupUsers = (groupSlug: string) => {
+export const useListGroupUsers = ({
+  groupSlug,
+  offset = 0,
+  limit = 10,
+  username
+}: {
+  groupSlug: string;
+  offset: number;
+  limit: number;
+  username: string;
+}) => {
   return useQuery({
-    queryKey: groupKeys.getGroupUserMembership(groupSlug),
+    queryKey: groupKeys.specificGroupUserMemberships({
+      slug: groupSlug,
+      offset,
+      limit,
+      username
+    }),
     enabled: Boolean(groupSlug),
     queryFn: async () => {
-      const { data: users } = await apiRequest.get<TUser[]>(`/api/v1/groups/${groupSlug}/users`);
-
-      return users;
-    }
+      const params = new URLSearchParams({
+        offset: String(offset),
+        limit: String(limit),
+        username
+      });
+      
+      const { data } = await apiRequest.get<{ users: TUser[]; totalCount: number; }>(
+        `/api/v1/groups/${groupSlug}/users`, {
+          params
+        }
+      );
+      
+      return data;
+    },
   });
 };

frontend/src/views/Org/MembersPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupMembersModal.tsx

@@ -1,4 +1,4 @@
-import { useMemo,useState } from "react";
+import { useState } from "react";
 import { faMagnifyingGlass,faUsers } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
@@ -10,6 +10,7 @@ import {
     Input,
     Modal,
     ModalContent,
+    Pagination,
     Table,
     TableContainer,
     TableSkeleton,
@@ -17,8 +18,7 @@ import {
     Td,
     Th,
     THead,
-    Tr
-} from "@app/components/v2";
+    Tr} from "@app/components/v2";
 import {
     OrgPermissionActions,
     OrgPermissionSubjects
@@ -38,13 +38,21 @@ export const OrgGroupMembersModal = ({
     popUp,
     handlePopUpToggle
 }: Props) => {
+    const [page, setPage] = useState(1);
+    const [perPage, setPerPage] = useState(10);
     const [searchMemberFilter, setSearchMemberFilter] = useState("");
     
     const popUpData = popUp?.groupMembers?.data as {
         slug: string;
     };
     
-    const { data: users, isLoading } = useListGroupUsers(popUpData?.slug ?? "");
+    const { data, isLoading } = useListGroupUsers({
+        groupSlug: popUpData?.slug,
+        offset: (page - 1) * perPage,
+        limit: perPage,
+        username: searchMemberFilter
+    });
+    
     const { mutateAsync: assignMutateAsync } = useAddUserToGroup();
     const { mutateAsync: unassignMutateAsync } = useRemoveUserFromGroup();
     
@@ -76,17 +84,6 @@ export const OrgGroupMembersModal = ({
         }
     }
     
-    const filterdUser = useMemo(
-        () =>
-        users?.filter(
-            ({ firstName, lastName, username }) =>
-              firstName?.toLowerCase().includes(searchMemberFilter.toLowerCase()) ||
-              lastName?.toLowerCase().includes(searchMemberFilter.toLowerCase()) ||
-              username?.toLowerCase().includes(searchMemberFilter.toLowerCase())
-          ),
-        [users, searchMemberFilter]
-      );
-    
     return (
         <Modal
             isOpen={popUp?.groupMembers?.isOpen}
@@ -111,7 +108,7 @@ export const OrgGroupMembersModal = ({
                         </THead>
                         <TBody>
                             {isLoading && <TableSkeleton columns={2} innerKey="group-users" />}
-                            {!isLoading && filterdUser?.map(({
+                            {!isLoading && data?.users?.map(({
                                 id,
                                 firstName,
                                 lastName,
@@ -150,7 +147,16 @@ export const OrgGroupMembersModal = ({
                             })}
                         </TBody>
                     </Table>
-                    {!isLoading && !filterdUser?.length && (
+                    {!isLoading && data?.totalCount !== undefined && (
+                        <Pagination
+                            count={data.totalCount}
+                            page={page}
+                            perPage={perPage}
+                            onChangePage={(newPage) => setPage(newPage)}
+                            onChangePerPage={(newPerPage) => setPerPage(newPerPage)}
+                        />
+                    )}
+                    {!isLoading && !data?.users?.length && (
                         <EmptyState
                             title="No users found"
                             icon={faUsers}