fix: fix workspaces pagination (#19448)

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

Author: BrunoQuaresma

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;
 	};

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>;
 }
 

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) => {

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({