fix: Don't show pagination during workspaces load (#4743)

BrunoQuaresma · web-flow · commit 2ffefc3bbdc9 · 2022-10-25T17:41:18.000Z
diff --git 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)
   })
 })
diff --git a/site/src/components/PaginationWidget/PaginationWidget.tsx b/site/src/components/PaginationWidget/PaginationWidget.tsx
@@ -127,8 +127,8 @@ export const PaginationWidget = ({
   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
   }
 

Original file line number	Diff line number	Diff line change
`@@ -127,8 +127,8 @@ export const PaginationWidget = ({`
`127`	`127`	`const isMobile = useMediaQuery(theme.breakpoints.down("sm"))`
`128`	`128`	`const styles = useStyles()`
`129`	`129`
`130`		`- // No need to display any pagination if we know the number of pages is 1`
`131`		`- if (numPages === 1 \|\| numRecords === 0) {`
	`130`	`+ // No need to display any pagination if we know the number of pages is 1 or 0`
	`131`	`+ if (numPages <= 1 \|\| numRecords === 0) {`
`132`	`132`	`return null`
`133`	`133`	`}`
`134`	`134`