From 92f2867cb89bb2e8d27dd4ab088aab99f294fb55 Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Tue, 25 Oct 2022 13:57:39 +0000
Subject: [PATCH 1/3] fix: Don't show pagination during workspaces load

---
 site/src/components/PaginationWidget/PaginationWidget.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/site/src/components/PaginationWidget/PaginationWidget.tsx b/site/src/components/PaginationWidget/PaginationWidget.tsx
index f2dfbfb0900ed..f2746397fc98e 100644
--- a/site/src/components/PaginationWidget/PaginationWidget.tsx
+++ b/site/src/components/PaginationWidget/PaginationWidget.tsx
@@ -120,15 +120,15 @@ export const PaginationWidget = ({
   activePage = 1,
   containerStyle,
 }: PaginationWidgetProps): JSX.Element | null => {
-  const numPages = numRecords ? Math.ceil(numRecords / numRecordsPerPage) : 0
+  const numPages = numRecords ? Math.ceil(numRecords / numRecordsPerPage) : 1
   const firstPageActive = activePage === 1 && numPages !== 0
   const lastPageActive = activePage === numPages && numPages !== 0
   const theme = useTheme()
   const isMobile = useMediaQuery(theme.breakpoints.down("sm"))
   const styles = useStyles()
 
-  // No need to display any pagination if we know the number of pages is 1
-  if (numPages === 1 || numRecords === 0) {
+  // No need to display any pagination if we know the number of pages is 1 or 0
+  if (numPages <= 1 || numRecords === 0) {
     return null
   }
 

From 10ba7f0053e584a223d124dbb7ba11da7b8abfdc Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Tue, 25 Oct 2022 13:58:38 +0000
Subject: [PATCH 2/3] Fix default value

---
 site/src/components/PaginationWidget/PaginationWidget.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/components/PaginationWidget/PaginationWidget.tsx b/site/src/components/PaginationWidget/PaginationWidget.tsx
index f2746397fc98e..040fb4d31131e 100644
--- a/site/src/components/PaginationWidget/PaginationWidget.tsx
+++ b/site/src/components/PaginationWidget/PaginationWidget.tsx
@@ -120,7 +120,7 @@ export const PaginationWidget = ({
   activePage = 1,
   containerStyle,
 }: PaginationWidgetProps): JSX.Element | null => {
-  const numPages = numRecords ? Math.ceil(numRecords / numRecordsPerPage) : 1
+  const numPages = numRecords ? Math.ceil(numRecords / numRecordsPerPage) : 0
   const firstPageActive = activePage === 1 && numPages !== 0
   const lastPageActive = activePage === numPages && numPages !== 0
   const theme = useTheme()

From fda9677968fb027e4b8d7ac9bbf65a9c66eb8f6b Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Tue, 25 Oct 2022 17:16:26 +0000
Subject: [PATCH 3/3] Fix test

---
 .../PaginationWidget.test.tsx                 | 27 +++++++++----------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/site/src/components/PaginationWidget/PaginationWidget.test.tsx b/site/src/components/PaginationWidget/PaginationWidget.test.tsx
index 4136fe7972f9d..ffc330de38d18 100644
--- a/site/src/components/PaginationWidget/PaginationWidget.test.tsx
+++ b/site/src/components/PaginationWidget/PaginationWidget.test.tsx
@@ -3,29 +3,28 @@ import { render } from "../../testHelpers/renderHelpers"
 import { PaginationWidget } from "./PaginationWidget"
 
 describe("PaginatedList", () => {
-  it("displays an accessible previous and next button regardless of the number of pages", async () => {
-    const { container } = render(
+  it("displays an accessible previous and next button", () => {
+    render(
       <PaginationWidget
         prevLabel="Previous"
         nextLabel="Next"
+        numRecords={200}
+        numRecordsPerPage={12}
+        activePage={1}
         onPrevClick={() => jest.fn()}
         onNextClick={() => jest.fn()}
       />,
     )
 
     expect(
-      await screen.findByRole("button", { name: "Previous page" }),
-    ).toBeTruthy()
-    expect(
-      await screen.findByRole("button", { name: "Next page" }),
-    ).toBeTruthy()
-    // Shouldn't render any pages if no records are passed in
+      screen.getByRole("button", { name: "Previous page" }),
+    ).toBeInTheDocument()
     expect(
-      await container.querySelectorAll(`button[name="Page button"]`),
-    ).toHaveLength(0)
+      screen.getByRole("button", { name: "Next page" }),
+    ).toBeInTheDocument()
   })
 
-  it("displays the expected number of pages with one ellipsis tile", async () => {
+  it("displays the expected number of pages with one ellipsis tile", () => {
     const { container } = render(
       <PaginationWidget
         prevLabel="Previous"
@@ -41,11 +40,11 @@ describe("PaginatedList", () => {
 
     // 7 total spaces. 6 are page numbers, one is ellipsis
     expect(
-      await container.querySelectorAll(`button[name="Page button"]`),
+      container.querySelectorAll(`button[name="Page button"]`),
     ).toHaveLength(6)
   })
 
-  it("displays the expected number of pages with two ellipsis tiles", async () => {
+  it("displays the expected number of pages with two ellipsis tiles", () => {
     const { container } = render(
       <PaginationWidget
         prevLabel="Previous"
@@ -61,7 +60,7 @@ describe("PaginatedList", () => {
 
     // 7 total spaces. 2 sets of ellipsis on either side of the active page
     expect(
-      await container.querySelectorAll(`button[name="Page button"]`),
+      container.querySelectorAll(`button[name="Page button"]`),
     ).toHaveLength(5)
   })
 })