Add pagination for user assignment modal

backend/src/ee/routes/v1/group-router.ts

@@ -115,31 +115,40 @@ export const registerGroupRouter = async (server: FastifyZodProvider) => {
       params: z.object({
         slug: z.string().trim().describe(GROUPS.LIST_USERS.slug)
       }),
+      querystring: z.object({
+        offset: z.coerce.number().min(0).max(100).default(0).describe(GROUPS.LIST_USERS.offset),
+        limit: z.coerce.number().min(1).max(100).default(10).describe(GROUPS.LIST_USERS.limit),
+        username: z.string().optional().describe(GROUPS.LIST_USERS.username)
+      }),
       response: {
-        200: UsersSchema.pick({
+        200: z.object({
-          email: true,
+          users: UsersSchema.pick({
-          username: true,
+            email: true,
-          firstName: true,
+            username: true,
-          lastName: true,
+            firstName: true,
-          id: true
+            lastName: true,
+            id: true
+          })
+            .merge(
+              z.object({
+                isPartOfGroup: z.boolean()
+              })
+            )
+            .array(),
+          totalCount: z.number()
         })
-          .merge(
-            z.object({
-              isPartOfGroup: z.boolean()
-            })
-          )
-          .array()
       }
     },
     handler: async (req) => {
-      const users = await server.services.group.listGroupUsers({
+      const { users, totalCount } = await server.services.group.listGroupUsers({
         groupSlug: req.params.slug,
         actor: req.permission.type,
         actorId: req.permission.id,
         actorAuthMethod: req.permission.authMethod,
-        actorOrgId: req.permission.orgId
+        actorOrgId: req.permission.orgId,
+        ...req.query
       });
-      return users;
+      return { users, totalCount };
     }
   });
 

backend/src/ee/services/group/group-dal.ts

@@ -59,10 +59,48 @@ export const groupDALFactory = (db: TDbClient) => {
     }
   };
 
-  // special query
+  const countAllGroupMembers = async ({ orgId, groupId }: { orgId: string; groupId: string }) => {
-  const findAllGroupMembers = async (orgId: string, groupId: string) => {
     try {
-      const members = await db(TableName.OrgMembership)
+      interface CountResult {
+        count: string;
+      }
+
+      const doc = await db<CountResult>(TableName.OrgMembership)
+        .where(`${TableName.OrgMembership}.orgId`, orgId)
+        .join(TableName.Users, `${TableName.OrgMembership}.userId`, `${TableName.Users}.id`)
+        .leftJoin(TableName.UserGroupMembership, function () {
+          this.on(`${TableName.UserGroupMembership}.userId`, "=", `${TableName.Users}.id`).andOn(
+            `${TableName.UserGroupMembership}.groupId`,
+            "=",
+            db.raw("?", [groupId])
+          );
+        })
+        .where({ isGhost: false })
+        .count(`${TableName.Users}.id`)
+        .first();
+
+      return parseInt((doc?.count as string) || "0", 10);
+    } catch (err) {
+      throw new DatabaseError({ error: err, name: "Count all group members" });
+    }
+  };
+
+  // special query
+  const findAllGroupMembers = async ({
+    orgId,
+    groupId,
+    offset = 0,
+    limit,
+    username
+  }: {
+    orgId: string;
+    groupId: string;
+    offset?: number;
+    limit?: number;
+    username?: string;
+  }) => {
+    try {
+      let query = db(TableName.OrgMembership)
         .where(`${TableName.OrgMembership}.orgId`, orgId)
         .join(TableName.Users, `${TableName.OrgMembership}.userId`, `${TableName.Users}.id`)
         .leftJoin(TableName.UserGroupMembership, function () {
@@ -82,16 +120,29 @@ export const groupDALFactory = (db: TDbClient) => {
           db.ref("id").withSchema(TableName.Users).as("userId")
           // db.raw(`CASE WHEN "${TableName.UserGroupMembership}"."groupId" IS NOT NULL THEN TRUE ELSE FALSE END as isPartOfGroup`)
         )
-        .where({ isGhost: false }); // MAKE SURE USER IS NOT A GHOST USER
+        .where({ isGhost: false }) // MAKE SURE USER IS NOT A GHOST USER
+        .offset(offset);
 
-      return members.map(({ email, username, firstName, lastName, userId, groupId: memberGroupId }) => ({
+      if (limit) {
-        id: userId,
+        query = query.limit(limit);
-        email,
+      }
-        username,
+
-        firstName,
+      if (username) {
-        lastName,
+        query = query.andWhere(`${TableName.Users}.username`, "ilike", `%${username}%`);
-        isPartOfGroup: !!memberGroupId
+      }
-      }));
+
+      const members = await query;
+
+      return members.map(
+        ({ email, username: memberUsername, firstName, lastName, userId, groupId: memberGroupId }) => ({
+          id: userId,
+          email,
+          username: memberUsername,
+          firstName,
+          lastName,
+          isPartOfGroup: !!memberGroupId
+        })
+      );
     } catch (error) {
       throw new DatabaseError({ error, name: "Find all org members" });
     }
@@ -100,6 +151,7 @@ export const groupDALFactory = (db: TDbClient) => {
   return {
     findGroups,
     findByOrgId,
+    countAllGroupMembers,
     findAllGroupMembers,
     ...groupOrm
   };

backend/src/ee/services/group/group-service.ts

@@ -29,7 +29,10 @@ import { TUserGroupMembershipDALFactory } from "./user-group-membership-dal";
 
 type TGroupServiceFactoryDep = {
   userDAL: Pick<TUserDALFactory, "findOne" | "findUserEncKeyByUsername">;
-  groupDAL: Pick<TGroupDALFactory, "create" | "findOne" | "update" | "delete" | "findAllGroupMembers">;
+  groupDAL: Pick<
+    TGroupDALFactory,
+    "create" | "findOne" | "update" | "delete" | "findAllGroupMembers" | "countAllGroupMembers"
+  >;
   groupProjectDAL: Pick<TGroupProjectDALFactory, "find">;
   orgDAL: Pick<TOrgDALFactory, "findMembership">;
   userGroupMembershipDAL: Pick<
@@ -185,7 +188,16 @@ export const groupServiceFactory = ({
     return group;
   };
 
-  const listGroupUsers = async ({ groupSlug, actor, actorId, actorAuthMethod, actorOrgId }: TListGroupUsersDTO) => {
+  const listGroupUsers = async ({
+    groupSlug,
+    offset,
+    limit,
+    username,
+    actor,
+    actorId,
+    actorAuthMethod,
+    actorOrgId
+  }: TListGroupUsersDTO) => {
     if (!actorOrgId) throw new BadRequestError({ message: "Failed to create group without organization" });
 
     const { permission } = await permissionService.getOrgPermission(
@@ -207,8 +219,20 @@ export const groupServiceFactory = ({
         message: `Failed to find group with slug ${groupSlug}`
       });
 
-    const users = await groupDAL.findAllGroupMembers(group.orgId, group.id);
+    const users = await groupDAL.findAllGroupMembers({
-    return users;
+      orgId: group.orgId,
+      groupId: group.id,
+      offset,
+      limit,
+      username
+    });
+
+    const totalCount = await groupDAL.countAllGroupMembers({
+      orgId: group.orgId,
+      groupId: group.id
+    });
+
+    return { users, totalCount };
   };
 
   const addUserToGroup = async ({

backend/src/ee/services/group/group-types.ts

@@ -21,6 +21,9 @@ export type TDeleteGroupDTO = {
 
 export type TListGroupUsersDTO = {
   groupSlug: string;
+  offset: number;
+  limit: number;
+  username?: string;
 } & TGenericPermission;
 
 export type TAddUserToGroupDTO = {

backend/src/ee/services/scim/scim-service.ts

@@ -536,7 +536,10 @@ export const scimServiceFactory = ({
       });
     }
 
-    const users = await groupDAL.findAllGroupMembers(group.orgId, group.id);
+    const users = await groupDAL.findAllGroupMembers({
+      orgId: group.orgId,
+      groupId: group.id
+    });
 
     return buildScimGroup({
       groupId: group.id,

backend/src/lib/api-docs/constants.ts

@@ -14,7 +14,10 @@ export const GROUPS = {
     slug: "The slug of the group to delete"
   },
   LIST_USERS: {
-    slug: "The slug of the group to list users for"
+    slug: "The slug of the group to list users for",
+    offset: "The offset to start from. If you enter 10, it will start from the 10th user.",
+    limit: "The number of users to return.",
+    username: "The username to search for."
   },
   ADD_USER: {
     slug: "The slug of the group to add the user to.",

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`);
+      const params = new URLSearchParams({
-
+        offset: String(offset),
-      return users;
+        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
+    Tr} from "@app/components/v2";
-} 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}