fix: use new endpoint in Autocomplete component

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

@@ -589,13 +589,14 @@ class ApiMethods {
 	 */
 	getOrganizationPaginatedMembers = async (
 		organization: string,
-		options?: TypesGen.Pagination
+		options?: TypesGen.Pagination,
 	) => {
 		const url = getURLWithSearchParams(
 			`/api/v2/organizations/${organization}/paginated-members`,
-			options
+			options,
 		);
-		const response = await this.axios.get<TypesGen.PaginatedMembersResponse>(url);
+		const response =
+			await this.axios.get<TypesGen.PaginatedMembersResponse>(url);
 
 		return response.data;
 	};

site/src/api/queries/organizations.ts

@@ -2,6 +2,7 @@ import { API } from "api/api";
 import type {
 	CreateOrganizationRequest,
 	GroupSyncSettings,
+	PaginatedMembersRequest,
 	PaginatedMembersResponse,
 	RoleSyncSettings,
 	UpdateOrganizationRequest,
@@ -63,21 +64,22 @@ export const organizationMembersKey = (id: string) => [
 
 export function paginatedOrganizationMembers(
 	organizationName: string,
-	searchParams: URLSearchParams
-): UsePaginatedQueryOptions<PaginatedMembersResponse, { limit: number; offset: number }> {
+	searchParams: URLSearchParams,
+): UsePaginatedQueryOptions<PaginatedMembersResponse, PaginatedMembersRequest> {
 	return {
 		searchParams,
-		queryPayload: (params) => {
+		queryPayload: ({ limit, offset }) => {
 			return {
-				limit: params.limit,
-				offset: params.offset,
+				limit: limit,
+				offset: offset,
 			};
 		},
 		queryKey: ({ payload }) => [
 			...organizationMembersKey(organizationName),
 			payload,
 		],
-		queryFn: ({ payload }) => API.getOrganizationPaginatedMembers(organizationName, payload),
+		queryFn: ({ payload }) =>
+			API.getOrganizationPaginatedMembers(organizationName, payload),
 	};
 }
 

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

@@ -3,12 +3,13 @@ import Autocomplete from "@mui/material/Autocomplete";
 import CircularProgress from "@mui/material/CircularProgress";
 import TextField from "@mui/material/TextField";
 import { getErrorMessage } from "api/errors";
-import { organizationMembers } from "api/queries/organizations";
+import { paginatedOrganizationMembers } from "api/queries/organizations";
 import { users } from "api/queries/users";
 import type { OrganizationMemberWithUserData, User } from "api/typesGenerated";
 import { Avatar } from "components/Avatar/Avatar";
 import { AvatarData } from "components/Avatar/AvatarData";
 import { useDebouncedFunction } from "hooks/debounce";
+import { usePaginatedQuery } from "hooks/usePaginatedQuery";
 import {
 	type ChangeEvent,
 	type ComponentProps,
@@ -69,18 +70,20 @@ export const MemberAutocomplete: FC<MemberAutocompleteProps> = ({
 }) => {
 	const [filter, setFilter] = useState<string>();
 
+	const searchParams = new URLSearchParams();
+	searchParams.append("limit", "0");
+
 	// Currently this queries all members, as there is no pagination.
-	const membersQuery = useQuery({
-		...organizationMembers(organizationId),
+	const membersQuery = usePaginatedQuery({
+		...paginatedOrganizationMembers(organizationId, searchParams),
 		enabled: filter !== undefined,
-		keepPreviousData: true,
 	});
 	return (
 		<InnerAutocomplete<OrganizationMemberWithUserData>
 			error={membersQuery.error}
 			isFetching={membersQuery.isFetching}
 			setFilter={setFilter}
-			users={membersQuery.data}
+			users={membersQuery.data?.members}
 			{...props}
 		/>
 	);

site/src/pages/OrganizationSettingsPage/OrganizationMembersPage.tsx

@@ -39,13 +39,15 @@ const OrganizationMembersPage: FC = () => {
 	);
 
 	const membersQuery = usePaginatedQuery(
-		paginatedOrganizationMembers(organizationName, searchParamsResult[0])
+		paginatedOrganizationMembers(organizationName, searchParamsResult[0]),
 	);
 
-	const members = membersQuery.data?.Members.map((member: OrganizationMemberWithUserData) => {
-		const groups = groupsByUserIdQuery.data?.get(member.user_id) ?? [];
-		return { ...member, groups };
-	});
+	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),
@@ -81,8 +83,8 @@ const OrganizationMembersPage: FC = () => {
 		);
 	}
 
-	const isLoading = 
-		membersQuery.isLoading || 
+	const isLoading =
+		membersQuery.isLoading ||
 		organizationRolesQuery.isLoading ||
 		groupsByUserIdQuery.isLoading;
 

site/src/pages/OrganizationSettingsPage/OrganizationMembersPageView.tsx

@@ -11,6 +11,7 @@ import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { Avatar } from "components/Avatar/Avatar";
 import { AvatarData } from "components/Avatar/AvatarData";
 import { displayError, displaySuccess } from "components/GlobalSnackbar/utils";
+import { Loader } from "components/Loader/Loader";
 import {
 	MoreMenu,
 	MoreMenuContent,
@@ -20,7 +21,6 @@ import {
 } from "components/MoreMenu/MoreMenu";
 import { PaginationContainer } from "components/PaginationWidget/PaginationContainer";
 import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
-import { Loader } from "components/Loader/Loader";
 import { Stack } from "components/Stack/Stack";
 import {
 	Table,