fix: fix workspaces pagination (#19448)

BrunoQuaresma · web-flow · commit 54440af95364 · 2025-08-21T14:59:37.000-03:00
Fixes #18707 **Before:** https://github.com/user-attachments/assets/6d4fba3e-0f24-4f60-adb6-d48d73b720ff **After:** https://github.com/user-attachments/assets/483dad99-3095-4647-990d-8386dd0c4d75
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -1187,9 +1187,9 @@ class ApiMethods {
 	};
 
 	getWorkspaces = async (
-		options: TypesGen.WorkspacesRequest,
+		req: TypesGen.WorkspacesRequest,
 	): Promise<TypesGen.WorkspacesResponse> => {
-		const url = getURLWithSearchParams("/api/v2/workspaces", options);
+		const url = getURLWithSearchParams("/api/v2/workspaces", req);
 		const response = await this.axios.get<TypesGen.WorkspacesResponse>(url);
 		return response.data;
 	};
diff --git a/site/src/api/queries/workspaces.ts b/site/src/api/queries/workspaces.ts
@@ -139,15 +139,14 @@ async function findMatchWorkspace(q: string): Promise<Workspace | undefined> {
 	}
 }
 
-function workspacesKey(config: WorkspacesRequest = {}) {
-	const { q, limit } = config;
-	return ["workspaces", { q, limit }] as const;
+function workspacesKey(req: WorkspacesRequest = {}) {
+	return ["workspaces", req] as const;
 }
 
-export function workspaces(config: WorkspacesRequest = {}) {
+export function workspaces(req: WorkspacesRequest = {}) {
 	return {
-		queryKey: workspacesKey(config),
-		queryFn: () => API.getWorkspaces(config),
+		queryKey: workspacesKey(req),
+		queryFn: () => API.getWorkspaces(req),
 	} as const satisfies QueryOptions<WorkspacesResponse>;
 }
 
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPage.test.tsx b/site/src/pages/WorkspacesPage/WorkspacesPage.test.tsx
@@ -305,6 +305,67 @@ describe("WorkspacesPage", () => {
 			MockStoppedWorkspace.latest_build.template_version_id,
 		);
 	});
+
+	it("correctly handles pagination by including pagination parameters in query key", async () => {
+		const totalWorkspaces = 50;
+		const workspacesPage1 = Array.from({ length: 25 }, (_, i) => ({
+			...MockWorkspace,
+			id: `page1-workspace-${i}`,
+			name: `page1-workspace-${i}`,
+		}));
+		const workspacesPage2 = Array.from({ length: 25 }, (_, i) => ({
+			...MockWorkspace,
+			id: `page2-workspace-${i}`,
+			name: `page2-workspace-${i}`,
+		}));
+
+		const getWorkspacesSpy = jest.spyOn(API, "getWorkspaces");
+
+		getWorkspacesSpy.mockImplementation(({ offset }) => {
+			switch (offset) {
+				case 0:
+					return Promise.resolve({
+						workspaces: workspacesPage1,
+						count: totalWorkspaces,
+					});
+				case 25:
+					return Promise.resolve({
+						workspaces: workspacesPage2,
+						count: totalWorkspaces,
+					});
+				default:
+					return Promise.reject(new Error("Unexpected offset"));
+			}
+		});
+
+		const user = userEvent.setup();
+		renderWithAuth(<WorkspacesPage />);
+
+		await waitFor(() => {
+			expect(screen.getByText("page1-workspace-0")).toBeInTheDocument();
+		});
+
+		expect(getWorkspacesSpy).toHaveBeenLastCalledWith({
+			q: "owner:me",
+			offset: 0,
+			limit: 25,
+		});
+
+		const nextPageButton = screen.getByRole("button", { name: /next page/i });
+		await user.click(nextPageButton);
+
+		await waitFor(() => {
+			expect(screen.getByText("page2-workspace-0")).toBeInTheDocument();
+		});
+
+		expect(getWorkspacesSpy).toHaveBeenLastCalledWith({
+			q: "owner:me",
+			offset: 25,
+			limit: 25,
+		});
+
+		expect(screen.queryByText("page1-workspace-0")).not.toBeInTheDocument();
+	});
 });
 
 const getWorkspaceCheckbox = (workspace: Workspace) => {
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPage.tsx b/site/src/pages/WorkspacesPage/WorkspacesPage.tsx
@@ -116,7 +116,8 @@ const WorkspacesPage: FC = () => {
 	});
 
 	const workspacesQueryOptions = workspaces({
-		...pagination,
+		limit: pagination.limit,
+		offset: pagination.offset,
 		q: filterState.filter.query,
 	});
 	const { data, error, refetch } = useQuery({

Original file line number	Diff line number	Diff line change
`@@ -139,15 +139,14 @@ async function findMatchWorkspace(q: string): Promise<Workspace \| undefined> {`
`139`	`139`	`}`
`140`	`140`	`}`
`141`	`141`
`142`		`-function workspacesKey(config: WorkspacesRequest = {}) {`
`143`		`- const { q, limit } = config;`
`144`		`- return ["workspaces", { q, limit }] as const;`
	`142`	`+function workspacesKey(req: WorkspacesRequest = {}) {`
	`143`	`+ return ["workspaces", req] as const;`
`145`	`144`	`}`
`146`	`145`
`147`		`-export function workspaces(config: WorkspacesRequest = {}) {`
	`146`	`+export function workspaces(req: WorkspacesRequest = {}) {`
`148`	`147`	`return {`
`149`		`- queryKey: workspacesKey(config),`
`150`		`- queryFn: () => API.getWorkspaces(config),`
	`148`	`+ queryKey: workspacesKey(req),`
	`149`	`+ queryFn: () => API.getWorkspaces(req),`
`151`	`150`	`} as const satisfies QueryOptions<WorkspacesResponse>;`
`152`	`151`	`}`
`153`	`152`