feat: add pagination to the organizaton members table (#16870)

Closes
[coder/internal#344](https://github.com/coder/internal/issues/344)

coderd/database/dbmem/dbmem.go

@@ -9596,7 +9596,7 @@ func (q *FakeQuerier) PaginatedOrganizationMembers(_ context.Context, arg databa
 	// All of the members in the organization
 	orgMembers := make([]database.OrganizationMember, 0)
 	for _, mem := range q.organizationMembers {
-		if arg.OrganizationID != uuid.Nil && mem.OrganizationID != arg.OrganizationID {
+		if mem.OrganizationID != arg.OrganizationID {
 			continue
 		}
 
@@ -9606,7 +9606,7 @@ func (q *FakeQuerier) PaginatedOrganizationMembers(_ context.Context, arg databa
 	selectedMembers := make([]database.PaginatedOrganizationMembersRow, 0)
 
 	skippedMembers := 0
-	for _, organizationMember := range q.organizationMembers {
+	for _, organizationMember := range orgMembers {
 		if skippedMembers < int(arg.OffsetOpt) {
 			skippedMembers++
 			continue

codersdk/organizations.go

@@ -82,14 +82,13 @@ type OrganizationMemberWithUserData struct {
 }
 
 type PaginatedMembersRequest struct {
-	OrganizationID uuid.UUID `table:"organization id" json:"organization_id" format:"uuid"`
-	Limit          int       `json:"limit,omitempty"`
-	Offset         int       `json:"offset,omitempty"`
+	Limit  int `json:"limit,omitempty"`
+	Offset int `json:"offset,omitempty"`
 }
 
 type PaginatedMembersResponse struct {
-	Members []OrganizationMemberWithUserData
-	Count   int `json:"count"`
+	Members []OrganizationMemberWithUserData `json:"members"`
+	Count   int                              `json:"count"`
 }
 
 type CreateOrganizationRequest struct {

site/src/api/api.ts

@@ -583,6 +583,24 @@ class ApiMethods {
 		return response.data;
 	};
 
+	/**
+	 * @param organization Can be the organization's ID or name
+	 * @param options Pagination options
+	 */
+	getOrganizationPaginatedMembers = async (
+		organization: string,
+		options?: TypesGen.Pagination,
+	) => {
+		const url = getURLWithSearchParams(
+			`/api/v2/organizations/${organization}/paginated-members`,
+			options,
+		);
+		const response =
+			await this.axios.get<TypesGen.PaginatedMembersResponse>(url);
+
+		return response.data;
+	};
+
 	/**
 	 * @param organization Can be the organization's ID or name
 	 */

site/src/api/queries/organizations.ts

@@ -2,9 +2,12 @@ import { API } from "api/api";
 import type {
 	CreateOrganizationRequest,
 	GroupSyncSettings,
+	PaginatedMembersRequest,
+	PaginatedMembersResponse,
 	RoleSyncSettings,
 	UpdateOrganizationRequest,
 } from "api/typesGenerated";
+import type { UsePaginatedQueryOptions } from "hooks/usePaginatedQuery";
 import {
 	type OrganizationPermissionName,
 	type OrganizationPermissions,
@@ -59,13 +62,45 @@ export const organizationMembersKey = (id: string) => [
 	"members",
 ];
 
+/**
+ * Creates a query configuration to fetch all members of an organization.
+ *
+ * Unlike the paginated version, this function sets the `limit` parameter to 0,
+ * which instructs the API to return all organization members in a single request
+ * without pagination.
+ *
+ * @param id - The unique identifier of the organization
+ * @returns A query configuration object for use with React Query
+ *
+ * @see paginatedOrganizationMembers - For fetching members with pagination support
+ */
 export const organizationMembers = (id: string) => {
 	return {
-		queryFn: () => API.getOrganizationMembers(id),
+		queryFn: () => API.getOrganizationPaginatedMembers(id, { limit: 0 }),
 		queryKey: organizationMembersKey(id),
 	};
 };
 
+export const paginatedOrganizationMembers = (
+	id: string,
+	searchParams: URLSearchParams,
+): UsePaginatedQueryOptions<
+	PaginatedMembersResponse,
+	PaginatedMembersRequest
+> => {
+	return {
+		searchParams,
+		queryPayload: ({ limit, offset }) => {
+			return {
+				limit: limit,
+				offset: offset,
+			};
+		},
+		queryKey: ({ payload }) => [...organizationMembersKey(id), payload],
+		queryFn: ({ payload }) => API.getOrganizationPaginatedMembers(id, payload),
+	};
+};
+
 export const addOrganizationMember = (queryClient: QueryClient, id: string) => {
 	return {
 		mutationFn: (userId: string) => {

site/src/api/typesGenerated.ts

@@ -1486,14 +1486,13 @@ export interface OrganizationSyncSettings {
 
 // From codersdk/organizations.go
 export interface PaginatedMembersRequest {
-	readonly organization_id: string;
 	readonly limit?: number;
 	readonly offset?: number;
 }
 
 // From codersdk/organizations.go
 export interface PaginatedMembersResponse {
-	readonly Members: readonly OrganizationMemberWithUserData[];
+	readonly members: readonly OrganizationMemberWithUserData[];
 	readonly count: number;
 }
 

site/src/components/UserAutocomplete/UserAutocomplete.tsx

@@ -69,7 +69,6 @@ export const MemberAutocomplete: FC<MemberAutocompleteProps> = ({
 }) => {
 	const [filter, setFilter] = useState<string>();
 
-	// Currently this queries all members, as there is no pagination.
 	const membersQuery = useQuery({
 		...organizationMembers(organizationId),
 		enabled: filter !== undefined,
@@ -80,7 +79,7 @@ export const MemberAutocomplete: FC<MemberAutocompleteProps> = ({
 			error={membersQuery.error}
 			isFetching={membersQuery.isFetching}
 			setFilter={setFilter}
-			users={membersQuery.data}
+			users={membersQuery.data?.members}
 			{...props}
 		/>
 	);

site/src/pages/OrganizationSettingsPage/OrganizationMembersPage.test.tsx

@@ -38,8 +38,8 @@ beforeEach(() => {
 
 const renderPage = async () => {
 	renderWithOrganizationSettingsLayout(<OrganizationMembersPage />, {
-		route: `/organizations/${MockOrganization.name}/members`,
-		path: "/organizations/:organization/members",
+		route: `/organizations/${MockOrganization.name}/paginated-members`,
+		path: "/organizations/:organization/paginated-members",
 	});
 	await waitForLoaderToBeRemoved();
 };

site/src/pages/OrganizationSettingsPage/OrganizationMembersPage.tsx

@@ -3,7 +3,7 @@ import { getErrorMessage } from "api/errors";
 import { groupsByUserIdInOrganization } from "api/queries/groups";
 import {
 	addOrganizationMember,
-	organizationMembers,
+	paginatedOrganizationMembers,
 	removeOrganizationMember,
 	updateOrganizationMemberRoles,
 } from "api/queries/organizations";
@@ -14,12 +14,13 @@ import { EmptyState } from "components/EmptyState/EmptyState";
 import { displayError, displaySuccess } from "components/GlobalSnackbar/utils";
 import { Stack } from "components/Stack/Stack";
 import { useAuthenticated } from "contexts/auth/RequireAuth";
+import { usePaginatedQuery } from "hooks/usePaginatedQuery";
 import { useOrganizationSettings } from "modules/management/OrganizationSettingsLayout";
 import { RequirePermission } from "modules/permissions/RequirePermission";
 import { type FC, useState } from "react";
 import { Helmet } from "react-helmet-async";
 import { useMutation, useQuery, useQueryClient } from "react-query";
-import { useParams } from "react-router-dom";
+import { useParams, useSearchParams } from "react-router-dom";
 import { pageTitle } from "utils/page";
 import { OrganizationMembersPageView } from "./OrganizationMembersPageView";
 
@@ -30,17 +31,23 @@ const OrganizationMembersPage: FC = () => {
 		organization: string;
 	};
 	const { organization, organizationPermissions } = useOrganizationSettings();
+	const searchParamsResult = useSearchParams();
 
-	const membersQuery = useQuery(organizationMembers(organizationName));
 	const organizationRolesQuery = useQuery(organizationRoles(organizationName));
 	const groupsByUserIdQuery = useQuery(
 		groupsByUserIdInOrganization(organizationName),
 	);
 
-	const members = membersQuery.data?.map((member) => {
-		const groups = groupsByUserIdQuery.data?.get(member.user_id) ?? [];
-		return { ...member, groups };
-	});
+	const membersQuery = usePaginatedQuery(
+		paginatedOrganizationMembers(organizationName, searchParamsResult[0]),
+	);
+
+	const members = membersQuery.data?.members.map(
+		(member: OrganizationMemberWithUserData) => {
+			const groups = groupsByUserIdQuery.data?.get(member.user_id) ?? [];
+			return { ...member, groups };
+		},
+	);
 
 	const addMemberMutation = useMutation(
 		addOrganizationMember(queryClient, organizationName),
@@ -95,6 +102,7 @@ const OrganizationMembersPage: FC = () => {
 				isUpdatingMemberRoles={updateMemberRolesMutation.isLoading}
 				me={me}
 				members={members}
+				membersQuery={membersQuery}
 				addMember={async (user: User) => {
 					await addMemberMutation.mutateAsync(user.id);
 					void membersQuery.refetch();

site/src/pages/OrganizationSettingsPage/OrganizationMembersPageView.stories.tsx

@@ -1,4 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import { mockSuccessResult } from "components/PaginationWidget/PaginationContainer.mocks";
+import type { UsePaginatedQueryResult } from "hooks/usePaginatedQuery";
 import {
 	MockOrganizationMember,
 	MockOrganizationMember2,
@@ -14,11 +16,16 @@ const meta: Meta<typeof OrganizationMembersPageView> = {
 		error: undefined,
 		isAddingMember: false,
 		isUpdatingMemberRoles: false,
+		canViewMembers: true,
 		me: MockUser,
 		members: [
 			{ ...MockOrganizationMember, groups: [] },
 			{ ...MockOrganizationMember2, groups: [] },
 		],
+		membersQuery: {
+			...mockSuccessResult,
+			totalRecords: 2,
+		} as UsePaginatedQueryResult,
 		addMember: () => Promise.resolve(),
 		removeMember: () => Promise.resolve(),
 		updateMemberRoles: () => Promise.resolve(),

site/src/pages/OrganizationSettingsPage/OrganizationMembersPageView.tsx

@@ -18,6 +18,7 @@ import {
 	MoreMenuTrigger,
 	ThreeDotsButton,
 } from "components/MoreMenu/MoreMenu";
+import { PaginationContainer } from "components/PaginationWidget/PaginationContainer";
 import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
 import { Stack } from "components/Stack/Stack";
 import {
@@ -29,6 +30,7 @@ import {
 	TableRow,
 } from "components/Table/Table";
 import { UserAutocomplete } from "components/UserAutocomplete/UserAutocomplete";
+import type { PaginationResultInfo } from "hooks/usePaginatedQuery";
 import { TriangleAlert } from "lucide-react";
 import { UserGroupsCell } from "pages/UsersPage/UsersTable/UserGroupsCell";
 import { type FC, useState } from "react";
@@ -44,6 +46,9 @@ interface OrganizationMembersPageViewProps {
 	isUpdatingMemberRoles: boolean;
 	me: User;
 	members: Array<OrganizationMemberTableEntry> | undefined;
+	membersQuery: PaginationResultInfo & {
+		isPreviousData: boolean;
+	};
 	addMember: (user: User) => Promise<void>;
 	removeMember: (member: OrganizationMemberWithUserData) => void;
 	updateMemberRoles: (
@@ -66,6 +71,7 @@ export const OrganizationMembersPageView: FC<
 	isAddingMember,
 	isUpdatingMemberRoles,
 	me,
+	membersQuery,
 	members,
 	addMember,
 	removeMember,
@@ -92,81 +98,82 @@ export const OrganizationMembersPageView: FC<
 						</p>
 					</div>
 				)}
-
-				<Table>
-					<TableHeader>
-						<TableRow>
-							<TableHead className="w-2/6">User</TableHead>
-							<TableHead className="w-2/6">
-								<Stack direction="row" spacing={1} alignItems="center">
-									<span>Roles</span>
-									<TableColumnHelpTooltip variant="roles" />
-								</Stack>
-							</TableHead>
-							<TableHead className="w-2/6">
-								<Stack direction="row" spacing={1} alignItems="center">
-									<span>Groups</span>
-									<TableColumnHelpTooltip variant="groups" />
-								</Stack>
-							</TableHead>
-							<TableHead className="w-auto" />
-						</TableRow>
-					</TableHeader>
-					<TableBody>
-						{members?.map((member) => (
-							<TableRow key={member.user_id} className="align-baseline">
-								<TableCell>
-									<AvatarData
-										avatar={
-											<Avatar
-												fallback={member.username}
-												src={member.avatar_url}
-											/>
-										}
-										title={member.name || member.username}
-										subtitle={member.email}
-									/>
-								</TableCell>
-								<UserRoleCell
-									inheritedRoles={member.global_roles}
-									roles={member.roles}
-									allAvailableRoles={allAvailableRoles}
-									oidcRoleSyncEnabled={false}
-									isLoading={isUpdatingMemberRoles}
-									canEditUsers={canEditMembers}
-									onEditRoles={async (roles) => {
-										try {
-											await updateMemberRoles(member, roles);
-											displaySuccess("Roles updated successfully.");
-										} catch (error) {
-											displayError(
-												getErrorMessage(error, "Failed to update roles."),
-											);
-										}
-									}}
-								/>
-								<UserGroupsCell userGroups={member.groups} />
-								<TableCell>
-									{member.user_id !== me.id && canEditMembers && (
-										<MoreMenu>
-											<MoreMenuTrigger>
-												<ThreeDotsButton />
-											</MoreMenuTrigger>
-											<MoreMenuContent>
-												<MoreMenuItem
-													danger
-													onClick={() => removeMember(member)}
-												>
-													Remove
-												</MoreMenuItem>
-											</MoreMenuContent>
-										</MoreMenu>
-									)}
-								</TableCell>
+				<PaginationContainer query={membersQuery} paginationUnitLabel="members">
+					<Table>
+						<TableHeader>
+							<TableRow>
+								<TableHead className="w-2/6">User</TableHead>
+								<TableHead className="w-2/6">
+									<Stack direction="row" spacing={1} alignItems="center">
+										<span>Roles</span>
+										<TableColumnHelpTooltip variant="roles" />
+									</Stack>
+								</TableHead>
+								<TableHead className="w-2/6">
+									<Stack direction="row" spacing={1} alignItems="center">
+										<span>Groups</span>
+										<TableColumnHelpTooltip variant="groups" />
+									</Stack>
+								</TableHead>
+								<TableHead className="w-auto" />
 							</TableRow>
-						))}
-					</TableBody>
-				</Table>
+						</TableHeader>
+						<TableBody>
+							{members?.map((member) => (
+								<TableRow key={member.user_id} className="align-baseline">
+									<TableCell>
+										<AvatarData
+											avatar={
+												<Avatar
+													fallback={member.username}
+													src={member.avatar_url}
+												/>
+											}
+											title={member.name || member.username}
+											subtitle={member.email}
+										/>
+									</TableCell>
+									<UserRoleCell
+										inheritedRoles={member.global_roles}
+										roles={member.roles}
+										allAvailableRoles={allAvailableRoles}
+										oidcRoleSyncEnabled={false}
+										isLoading={isUpdatingMemberRoles}
+										canEditUsers={canEditMembers}
+										onEditRoles={async (roles) => {
+											try {
+												await updateMemberRoles(member, roles);
+												displaySuccess("Roles updated successfully.");
+											} catch (error) {
+												displayError(
+													getErrorMessage(error, "Failed to update roles."),
+												);
+											}
+										}}
+									/>
+									<UserGroupsCell userGroups={member.groups} />
+									<TableCell>
+										{member.user_id !== me.id && canEditMembers && (
+											<MoreMenu>
+												<MoreMenuTrigger>
+													<ThreeDotsButton />
+												</MoreMenuTrigger>
+												<MoreMenuContent>
+													<MoreMenuItem
+														danger
+														onClick={() => removeMember(member)}
+													>
+														Remove
+													</MoreMenuItem>
+												</MoreMenuContent>
+											</MoreMenu>
+										)}
+									</TableCell>
+								</TableRow>
+							))}
+						</TableBody>
+					</Table>
+				</PaginationContainer>
 			</div>
 		</div>
 	);

site/src/testHelpers/handlers.ts

@@ -64,11 +64,11 @@ export const handlers = [
 			M.MockOrganizationAuditorRole,
 		]);
 	}),
-	http.get("/api/v2/organizations/:organizationId/members", () => {
-		return HttpResponse.json([
-			M.MockOrganizationMember,
-			M.MockOrganizationMember2,
-		]);
+	http.get("/api/v2/organizations/:organizationId/paginated-members", () => {
+		return HttpResponse.json({
+			members: [M.MockOrganizationMember, M.MockOrganizationMember2],
+			count: 2,
+		});
 	}),
 	http.delete(
 		"/api/v2/organizations/:organizationId/members/:userId",