From d0fe25219bd78e20a063b70f5f2afdc5cc99bdc6 Mon Sep 17 00:00:00 2001
From: Marcin Tojek <marcin@coder.com>
Date: Fri, 14 Jul 2023 11:06:26 +0200
Subject: [PATCH 1/2] fix(site): paginate audit logs

---
 site/src/pages/AuditPage/AuditPage.test.tsx | 34 +++++++++++++++++++--
 site/src/pages/AuditPage/AuditPage.tsx      | 11 +++++--
 2 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/site/src/pages/AuditPage/AuditPage.test.tsx b/site/src/pages/AuditPage/AuditPage.test.tsx
index 32bd5d53f6fc2..3a52c09cb9dbc 100644
--- a/site/src/pages/AuditPage/AuditPage.test.tsx
+++ b/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,29 @@ 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 +100,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 +119,8 @@ describe("AuditPage", () => {
 
       await waitFor(() =>
         expect(getAuditLogsSpy).toBeCalledWith({
-          limit: 25,
-          offset: 1,
+          limit: DEFAULT_RECORDS_PER_PAGE,
+          offset: 0,
           q: query,
         }),
       )
diff --git a/site/src/pages/AuditPage/AuditPage.tsx b/site/src/pages/AuditPage/AuditPage.tsx
index 5b5bd41eb2cad..dc5bf904a09a4 100644
--- a/site/src/pages/AuditPage/AuditPage.tsx
+++ b/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,
       })
     },

From 8629a53e050c4ff19819ebb1e169c87a81d5912d Mon Sep 17 00:00:00 2001
From: Marcin Tojek <marcin@coder.com>
Date: Fri, 14 Jul 2023 11:14:42 +0200
Subject: [PATCH 2/2] fmt

---
 site/src/pages/AuditPage/AuditPage.test.tsx | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/site/src/pages/AuditPage/AuditPage.test.tsx b/site/src/pages/AuditPage/AuditPage.test.tsx
index 3a52c09cb9dbc..35ea1089bd8a8 100644
--- a/site/src/pages/AuditPage/AuditPage.test.tsx
+++ b/site/src/pages/AuditPage/AuditPage.test.tsx
@@ -71,12 +71,10 @@ describe("AuditPage", () => {
   it("renders page 5", async () => {
     // Given
     const page = 5
-    const getAuditLogsSpy = jest
-      .spyOn(API, "getAuditLogs")
-      .mockResolvedValue({
-        audit_logs: [MockAuditLog, MockAuditLog2],
-        count: 2,
-      })
+    const getAuditLogsSpy = jest.spyOn(API, "getAuditLogs").mockResolvedValue({
+      audit_logs: [MockAuditLog, MockAuditLog2],
+      count: 2,
+    })
 
     // When
     await renderPage({ page: page })