= ({
{query.isSuccess && (
= ({
limit,
totalRecords,
currentOffsetStart,
+ countIsCapped,
className,
}) => {
const theme = useTheme();
@@ -49,12 +51,20 @@ export const PaginationHeader: FC = ({
{totalRecords !== 0 && currentOffsetStart !== undefined && (
- Showing {currentOffsetStart} to{" "}
+ Showing {currentOffsetStart.toLocaleString()} to{" "}
- {currentOffsetStart +
- Math.min(limit - 1, totalRecords - currentOffsetStart)}
+ {(
+ currentOffsetStart +
+ (countIsCapped
+ ? limit - 1
+ : Math.min(limit - 1, totalRecords - currentOffsetStart))
+ ).toLocaleString()}
+ {" "}
+ of{" "}
+
+ {totalRecords.toLocaleString()}
+ {countIsCapped && "+"}
{" "}
- of {totalRecords.toLocaleString()}{" "}
{paginationUnitLabel}
)}
diff --git a/site/src/components/PaginationWidget/PaginationWidgetBase.tsx b/site/src/components/PaginationWidget/PaginationWidgetBase.tsx
index 02b5d39a6b..449568ba54 100644
--- a/site/src/components/PaginationWidget/PaginationWidgetBase.tsx
+++ b/site/src/components/PaginationWidget/PaginationWidgetBase.tsx
@@ -14,6 +14,10 @@ export type PaginationWidgetBaseProps = {
hasPreviousPage?: boolean;
hasNextPage?: boolean;
+ /** Override the computed totalPages.
+ * Used when, e.g., the row count is capped and the user navigates beyond
+ * the known range, so totalPages stays at least as high as currentPage. */
+ totalPages?: number;
};
export const PaginationWidgetBase: FC = ({
@@ -23,10 +27,11 @@ export const PaginationWidgetBase: FC = ({
onPageChange,
hasPreviousPage,
hasNextPage,
+ totalPages: totalPagesProp,
}) => {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down("md"));
- const totalPages = Math.ceil(totalRecords / pageSize);
+ const totalPages = totalPagesProp ?? Math.ceil(totalRecords / pageSize);
if (totalPages < 2) {
return null;
diff --git a/site/src/hooks/usePaginatedQuery.jest.ts b/site/src/hooks/usePaginatedQuery.jest.ts
index 3811cd134c..0ec0779de7 100644
--- a/site/src/hooks/usePaginatedQuery.jest.ts
+++ b/site/src/hooks/usePaginatedQuery.jest.ts
@@ -269,6 +269,78 @@ describe.skip(usePaginatedQuery.name, () => {
});
});
+ describe("Capped count behavior", () => {
+ const mockQueryKey = jest.fn(() => ["mock"]);
+
+ // Returns count 2001 (capped) with items on pages up to page 84
+ // (84 * 25 = 2100 items total).
+ const mockCappedQueryFn = jest.fn(({ pageNumber, limit }) => {
+ const totalItems = 2100;
+ const offset = (pageNumber - 1) * limit;
+ // Returns 0 items when the requested page is past the end, simulating
+ // an empty server response.
+ const itemsOnPage = Math.max(0, Math.min(limit, totalItems - offset));
+ return Promise.resolve({
+ data: new Array(itemsOnPage).fill(pageNumber),
+ count: 2001,
+ count_cap: 2000,
+ });
+ });
+
+ it("Caps totalRecords at 2000 when count exceeds cap", async () => {
+ const { result } = await render({
+ queryKey: mockQueryKey,
+ queryFn: mockCappedQueryFn,
+ });
+
+ await waitFor(() => expect(result.current.isSuccess).toBe(true));
+ expect(result.current.totalRecords).toBe(2000);
+ });
+
+ it("hasNextPage is true when count is capped", async () => {
+ const { result } = await render(
+ { queryKey: mockQueryKey, queryFn: mockCappedQueryFn },
+ "/?page=80",
+ );
+
+ await waitFor(() => expect(result.current.isSuccess).toBe(true));
+ expect(result.current.hasNextPage).toBe(true);
+ });
+
+ it("hasPreviousPage is true when count is capped and page is beyond cap", async () => {
+ const { result } = await render(
+ { queryKey: mockQueryKey, queryFn: mockCappedQueryFn },
+ "/?page=83",
+ );
+
+ await waitFor(() => expect(result.current.isSuccess).toBe(true));
+ expect(result.current.hasPreviousPage).toBe(true);
+ });
+
+ it("Does not redirect to last page when count is capped and page is valid", async () => {
+ const { result } = await render(
+ { queryKey: mockQueryKey, queryFn: mockCappedQueryFn },
+ "/?page=83",
+ );
+
+ await waitFor(() => expect(result.current.isSuccess).toBe(true));
+ // Should stay on page 83 — not redirect to page 80.
+ expect(result.current.currentPage).toBe(83);
+ });
+
+ it("Redirects to last known page when navigating beyond actual data", async () => {
+ const { result } = await render(
+ { queryKey: mockQueryKey, queryFn: mockCappedQueryFn },
+ "/?page=999",
+ );
+
+ // Page 999 has no items. Should redirect to page 81
+ // (ceil(2001 / 25) = 81), the last page guaranteed to
+ // have data.
+ await waitFor(() => expect(result.current.currentPage).toBe(81));
+ });
+ });
+
describe("Passing in searchParams property", () => {
const mockQueryKey = jest.fn(() => ["mock"]);
const mockQueryFn = jest.fn(({ pageNumber, limit }) =>
diff --git a/site/src/hooks/usePaginatedQuery.ts b/site/src/hooks/usePaginatedQuery.ts
index 200674d69c..1ad03272a7 100644
--- a/site/src/hooks/usePaginatedQuery.ts
+++ b/site/src/hooks/usePaginatedQuery.ts
@@ -144,16 +144,44 @@ export function usePaginatedQuery<
placeholderData: keepPreviousData,
});
- const totalRecords = query.data?.count;
- const totalPages =
- totalRecords !== undefined ? Math.ceil(totalRecords / limit) : undefined;
+ const count = query.data?.count;
+ const countCap = query.data?.count_cap;
+ const countIsCapped =
+ countCap !== undefined &&
+ countCap > 0 &&
+ count !== undefined &&
+ count > countCap;
+ const totalRecords = countIsCapped ? countCap : count;
+ let totalPages =
+ totalRecords !== undefined
+ ? Math.max(
+ Math.ceil(totalRecords / limit),
+ // True count is not known; let them navigate forward
+ // until they hit an empty page (checked below).
+ countIsCapped ? currentPage : 0,
+ )
+ : undefined;
+
+ // When the true count is unknown, the user can navigate past
+ // all actual data. If that happens, we need to redirect (via
+ // updatePageIfInvalid) to the last page guaranteed to be not
+ // empty.
+ const pageIsEmpty =
+ query.data != null &&
+ !Object.values(query.data).some((v) => Array.isArray(v) && v.length > 0);
+ if (pageIsEmpty) {
+ totalPages = count !== undefined ? Math.ceil(count / limit) : 1;
+ }
const hasNextPage =
- totalRecords !== undefined && limit + currentPageOffset < totalRecords;
+ totalRecords !== undefined &&
+ ((countIsCapped && !pageIsEmpty) ||
+ limit + currentPageOffset < totalRecords);
const hasPreviousPage =
totalRecords !== undefined &&
currentPage > 1 &&
- currentPageOffset - limit < totalRecords;
+ ((countIsCapped && !pageIsEmpty) ||
+ currentPageOffset - limit < totalRecords);
const queryClient = useQueryClient();
const prefetchPage = useEffectEvent((newPage: number) => {
@@ -224,10 +252,14 @@ export function usePaginatedQuery<
});
useEffect(() => {
- if (!query.isFetching && totalPages !== undefined) {
+ if (
+ !query.isFetching &&
+ totalPages !== undefined &&
+ currentPage > totalPages
+ ) {
void updatePageIfInvalid(totalPages);
}
- }, [updatePageIfInvalid, query.isFetching, totalPages]);
+ }, [updatePageIfInvalid, query.isFetching, totalPages, currentPage]);
const onPageChange = (newPage: number) => {
// Page 1 is the only page that can be safely navigated to without knowing
@@ -236,7 +268,12 @@ export function usePaginatedQuery<
return;
}
- const cleanedInput = clamp(Math.trunc(newPage), 1, totalPages ?? 1);
+ // If the true count is unknown, we allow navigating past the
+ // known page range.
+ const upperBound = countIsCapped
+ ? Number.MAX_SAFE_INTEGER
+ : (totalPages ?? 1);
+ const cleanedInput = clamp(Math.trunc(newPage), 1, upperBound);
if (Number.isNaN(cleanedInput)) {
return;
}
@@ -274,6 +311,7 @@ export function usePaginatedQuery<
totalRecords: totalRecords as number,
totalPages: totalPages as number,
currentOffsetStart: currentPageOffset + 1,
+ countIsCapped,
}
: {
isSuccess: false,
@@ -282,6 +320,7 @@ export function usePaginatedQuery<
totalRecords: undefined,
totalPages: undefined,
currentOffsetStart: undefined,
+ countIsCapped: false as const,
}),
};
@@ -323,6 +362,7 @@ export type PaginationResultInfo = {
totalRecords: undefined;
totalPages: undefined;
currentOffsetStart: undefined;
+ countIsCapped: false;
}
| {
isSuccess: true;
@@ -331,6 +371,7 @@ export type PaginationResultInfo = {
totalRecords: number;
totalPages: number;
currentOffsetStart: number;
+ countIsCapped: boolean;
}
);
@@ -417,6 +458,7 @@ type QueryPageParamsWithPayload = QueryPageParams & {
*/
export type PaginatedData = {
count: number;
+ count_cap?: number;
};
/**
diff --git a/site/src/pages/AuditPage/AuditPage.jest.tsx b/site/src/pages/AuditPage/AuditPage.jest.tsx
index ea7e5d9c44..27dd221006 100644
--- a/site/src/pages/AuditPage/AuditPage.jest.tsx
+++ b/site/src/pages/AuditPage/AuditPage.jest.tsx
@@ -65,6 +65,7 @@ describe("AuditPage", () => {
const getAuditLogsSpy = jest.spyOn(API, "getAuditLogs").mockResolvedValue({
audit_logs: [MockAuditLog, MockAuditLog2],
count: 2,
+ count_cap: 0,
});
// When
@@ -84,7 +85,11 @@ describe("AuditPage", () => {
it("filters by URL", async () => {
const getAuditLogsSpy = jest
.spyOn(API, "getAuditLogs")
- .mockResolvedValue({ audit_logs: [MockAuditLog], count: 1 });
+ .mockResolvedValue({
+ audit_logs: [MockAuditLog],
+ count: 1,
+ count_cap: 0,
+ });
const query = "resource_type:workspace action:create";
await renderPage({ filter: query });
@@ -115,4 +120,29 @@ describe("AuditPage", () => {
);
});
});
+
+ describe("Capped count", () => {
+ it("shows capped count indicator and navigates to next page with correct offset", async () => {
+ jest.spyOn(API, "getAuditLogs").mockResolvedValue({
+ audit_logs: [MockAuditLog, MockAuditLog2],
+ count: 2001,
+ count_cap: 2000,
+ });
+
+ const user = userEvent.setup();
+ await renderPage();
+
+ await screen.findByText(/2,000\+/);
+
+ await user.click(screen.getByRole("button", { name: /next page/i }));
+
+ await waitFor(() =>
+ expect(API.getAuditLogs).toHaveBeenLastCalledWith<[AuditLogsRequest]>({
+ limit: DEFAULT_RECORDS_PER_PAGE,
+ offset: DEFAULT_RECORDS_PER_PAGE,
+ q: "",
+ }),
+ );
+ });
+ });
});
diff --git a/site/src/pages/ConnectionLogPage/ConnectionLogPage.jest.tsx b/site/src/pages/ConnectionLogPage/ConnectionLogPage.jest.tsx
index 2ce25e5a33..ae1b2a9fa6 100644
--- a/site/src/pages/ConnectionLogPage/ConnectionLogPage.jest.tsx
+++ b/site/src/pages/ConnectionLogPage/ConnectionLogPage.jest.tsx
@@ -69,6 +69,7 @@ describe("ConnectionLogPage", () => {
MockDisconnectedSSHConnectionLog,
],
count: 2,
+ count_cap: 0,
});
// When
@@ -95,6 +96,7 @@ describe("ConnectionLogPage", () => {
.mockResolvedValue({
connection_logs: [MockConnectedSSHConnectionLog],
count: 1,
+ count_cap: 0,
});
const query = "type:ssh status:connected";