fix(site): paginate audit logs (#8513)

site/src/pages/AuditPage/AuditPage.test.tsx

@@ -15,6 +15,7 @@ import { server } from "testHelpers/server"
 
 import * as CreateDayString from "utils/createDayString"
 import AuditPage from "./AuditPage"
+import { DEFAULT_RECORDS_PER_PAGE } from "components/PaginationWidget/utils"
 
 interface RenderPageOptions {
   filter?: string
@@ -67,6 +68,27 @@ describe("AuditPage", () => {
     screen.getByTestId(`audit-log-row-${MockAuditLog2.id}`)
   })
 
+  it("renders page 5", async () => {
+    // Given
+    const page = 5
+    const getAuditLogsSpy = jest.spyOn(API, "getAuditLogs").mockResolvedValue({
+      audit_logs: [MockAuditLog, MockAuditLog2],
+      count: 2,
+    })
+
+    // When
+    await renderPage({ page: page })
+
+    // Then
+    expect(getAuditLogsSpy).toBeCalledWith({
+      limit: DEFAULT_RECORDS_PER_PAGE,
+      offset: DEFAULT_RECORDS_PER_PAGE * (page - 1),
+      q: "",
+    })
+    screen.getByTestId(`audit-log-row-${MockAuditLog.id}`)
+    screen.getByTestId(`audit-log-row-${MockAuditLog2.id}`)
+  })
+
   describe("Filtering", () => {
     it("filters by URL", async () => {
       const getAuditLogsSpy = jest
@@ -76,7 +98,11 @@ describe("AuditPage", () => {
       const query = "resource_type:workspace action:create"
       await renderPage({ filter: query })
 
-      expect(getAuditLogsSpy).toBeCalledWith({ limit: 25, offset: 1, q: query })
+      expect(getAuditLogsSpy).toBeCalledWith({
+        limit: DEFAULT_RECORDS_PER_PAGE,
+        offset: 0,
+        q: query,
+      })
     })
 
     it("resets page to 1 when filter is changed", async () => {
@@ -91,8 +117,8 @@ describe("AuditPage", () => {
 
       await waitFor(() =>
         expect(getAuditLogsSpy).toBeCalledWith({
-          limit: 25,
-          offset: 1,
+          limit: DEFAULT_RECORDS_PER_PAGE,
+          offset: 0,
           q: query,
         }),
       )

site/src/pages/AuditPage/AuditPage.tsx

@@ -1,4 +1,7 @@
-import { nonInitialPage } from "components/PaginationWidget/utils"
+import {
+  DEFAULT_RECORDS_PER_PAGE,
+  nonInitialPage,
+} from "components/PaginationWidget/utils"
 import { useFeatureVisibility } from "hooks/useFeatureVisibility"
 import { FC } from "react"
 import { Helmet } from "react-helmet-async"
@@ -49,9 +52,11 @@ const AuditPage: FC = () => {
   const { data, error } = useQuery({
     queryKey: ["auditLogs", filter.query, pagination.page],
     queryFn: () => {
+      const limit = DEFAULT_RECORDS_PER_PAGE
+      const page = pagination.page
       return getAuditLogs({
-        offset: pagination.page,
-        limit: 25,
+        offset: page <= 0 ? 0 : (page - 1) * limit,
+        limit: limit,
         q: filter.query,
       })
     },