From 5eb62c070196f6a0b65d4c4bf64dfddfb22bd9b3 Mon Sep 17 00:00:00 2001
From: Presley Pizzo <presley@coder.com>
Date: Mon, 7 Nov 2022 22:38:07 +0000
Subject: [PATCH 1/6] Hide pagination widget when not needed. Don't merge until
 count is in.

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

diff --git a/site/src/components/PaginationWidget/PaginationWidget.tsx b/site/src/components/PaginationWidget/PaginationWidget.tsx
index e3765e524a398..e46bc0c53954d 100644
--- a/site/src/components/PaginationWidget/PaginationWidget.tsx
+++ b/site/src/components/PaginationWidget/PaginationWidget.tsx
@@ -36,10 +36,15 @@ export const PaginationWidget = ({
 
   const numPages = numRecords
     ? Math.ceil(numRecords / numRecordsPerPage)
-    : undefined
+    : 0
   const firstPageActive = currentPage === 1 && numPages !== 0
   const lastPageActive = currentPage === numPages && numPages !== 0
 
+  // if beyond page 1, show pagination widget on an empty page so the user can navigate
+  if (currentPage === 1 && numPages <= 1) {
+    return null
+  }
+
   return (
     <div style={containerStyle} className={styles.defaultContainerStyles}>
       <Button

From 79774b743e822aa208e77fc94c1c9c0826574822 Mon Sep 17 00:00:00 2001
From: Presley Pizzo <presley@coder.com>
Date: Tue, 8 Nov 2022 16:10:33 +0000
Subject: [PATCH 2/6] Format

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

diff --git a/site/src/components/PaginationWidget/PaginationWidget.tsx b/site/src/components/PaginationWidget/PaginationWidget.tsx
index e46bc0c53954d..82509ab7b65e5 100644
--- a/site/src/components/PaginationWidget/PaginationWidget.tsx
+++ b/site/src/components/PaginationWidget/PaginationWidget.tsx
@@ -34,9 +34,7 @@ export const PaginationWidget = ({
   const currentPage = paginationState.context.page
   const numRecordsPerPage = paginationState.context.limit
 
-  const numPages = numRecords
-    ? Math.ceil(numRecords / numRecordsPerPage)
-    : 0
+  const numPages = numRecords ? Math.ceil(numRecords / numRecordsPerPage) : 0
   const firstPageActive = currentPage === 1 && numPages !== 0
   const lastPageActive = currentPage === numPages && numPages !== 0
 

From 332123bc7f174aa3bfb97e47a711c17e3a78d100 Mon Sep 17 00:00:00 2001
From: Presley Pizzo <presley@coder.com>
Date: Tue, 8 Nov 2022 16:35:01 +0000
Subject: [PATCH 3/6] Refactor

---
 .../PaginationWidget/PaginationWidget.tsx     | 49 +++++++++----------
 1 file changed, 23 insertions(+), 26 deletions(-)

diff --git a/site/src/components/PaginationWidget/PaginationWidget.tsx b/site/src/components/PaginationWidget/PaginationWidget.tsx
index 82509ab7b65e5..62ceaeb67ea95 100644
--- a/site/src/components/PaginationWidget/PaginationWidget.tsx
+++ b/site/src/components/PaginationWidget/PaginationWidget.tsx
@@ -37,24 +37,21 @@ export const PaginationWidget = ({
   const numPages = numRecords ? Math.ceil(numRecords / numRecordsPerPage) : 0
   const firstPageActive = currentPage === 1 && numPages !== 0
   const lastPageActive = currentPage === numPages && numPages !== 0
-
-  // if beyond page 1, show pagination widget on an empty page so the user can navigate
-  if (currentPage === 1 && numPages <= 1) {
-    return null
-  }
+  // if beyond page 1, show pagination widget even if there's only one true page, so user can navigate back
+  const showWidget = numPages > 1 || currentPage > 1
 
   return (
-    <div style={containerStyle} className={styles.defaultContainerStyles}>
-      <Button
-        className={styles.prevLabelStyles}
-        aria-label="Previous page"
-        disabled={firstPageActive}
-        onClick={() => send({ type: "PREVIOUS_PAGE" })}
-      >
-        <KeyboardArrowLeft />
-        <div>{prevLabel}</div>
-      </Button>
-      <Maybe condition={numPages !== undefined}>
+    <Maybe condition={showWidget}>
+      <div style={containerStyle} className={styles.defaultContainerStyles}>
+        <Button
+          className={styles.prevLabelStyles}
+          aria-label="Previous page"
+          disabled={firstPageActive}
+          onClick={() => send({ type: "PREVIOUS_PAGE" })}
+        >
+          <KeyboardArrowLeft />
+          <div>{prevLabel}</div>
+        </Button>
         <ChooseOne>
           <Cond condition={isMobile}>
             <PageButton
@@ -85,16 +82,16 @@ export const PaginationWidget = ({
               )}
           </Cond>
         </ChooseOne>
-      </Maybe>
-      <Button
-        aria-label="Next page"
-        disabled={lastPageActive}
-        onClick={() => send({ type: "NEXT_PAGE" })}
-      >
-        <div>{nextLabel}</div>
-        <KeyboardArrowRight />
-      </Button>
-    </div>
+        <Button
+          aria-label="Next page"
+          disabled={lastPageActive}
+          onClick={() => send({ type: "NEXT_PAGE" })}
+        >
+          <div>{nextLabel}</div>
+          <KeyboardArrowRight />
+        </Button>
+      </div>
+    </Maybe>
   )
 }
 

From bff70248635a703d16f4b50ef68299698c2b88a9 Mon Sep 17 00:00:00 2001
From: Presley Pizzo <presley@coder.com>
Date: Tue, 8 Nov 2022 16:42:54 +0000
Subject: [PATCH 4/6] Remove story

---
 .../components/PaginationWidget/PaginationWidget.stories.tsx | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/site/src/components/PaginationWidget/PaginationWidget.stories.tsx b/site/src/components/PaginationWidget/PaginationWidget.stories.tsx
index 6e36bff4ac1b8..e05a112e0729b 100644
--- a/site/src/components/PaginationWidget/PaginationWidget.stories.tsx
+++ b/site/src/components/PaginationWidget/PaginationWidget.stories.tsx
@@ -25,11 +25,6 @@ const Template: Story<PaginationWidgetProps> = (
   args: PaginationWidgetProps,
 ) => <PaginationWidget {...args} />
 
-export const UnknownPageNumbers = Template.bind({})
-UnknownPageNumbers.args = {
-  numRecords: undefined,
-}
-
 export const LessThan8Pages = Template.bind({})
 LessThan8Pages.args = {
   numRecords: 84,

From 04564709952a855dfdf9419362b7c738129479a6 Mon Sep 17 00:00:00 2001
From: Presley Pizzo <presley@coder.com>
Date: Tue, 8 Nov 2022 17:49:48 +0000
Subject: [PATCH 5/6] Fix bug

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

diff --git a/site/src/components/PaginationWidget/PaginationWidget.tsx b/site/src/components/PaginationWidget/PaginationWidget.tsx
index 62ceaeb67ea95..930da4d164ee6 100644
--- a/site/src/components/PaginationWidget/PaginationWidget.tsx
+++ b/site/src/components/PaginationWidget/PaginationWidget.tsx
@@ -61,8 +61,7 @@ export const PaginationWidget = ({
             />
           </Cond>
           <Cond>
-            {numPages &&
-              buildPagedList(numPages, currentPage).map((page) =>
+            {buildPagedList(numPages, currentPage).map((page) =>
                 typeof page !== "number" ? (
                   <PageButton
                     key={`Page${page}`}

From 6ad26e10d27b2f02725d65d590efd0700f290d91 Mon Sep 17 00:00:00 2001
From: Presley Pizzo <presley@coder.com>
Date: Tue, 8 Nov 2022 17:51:26 +0000
Subject: [PATCH 6/6] Format

---
 .../PaginationWidget/PaginationWidget.tsx     | 34 +++++++++----------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/site/src/components/PaginationWidget/PaginationWidget.tsx b/site/src/components/PaginationWidget/PaginationWidget.tsx
index 930da4d164ee6..d247f29ed59d7 100644
--- a/site/src/components/PaginationWidget/PaginationWidget.tsx
+++ b/site/src/components/PaginationWidget/PaginationWidget.tsx
@@ -62,23 +62,23 @@ export const PaginationWidget = ({
           </Cond>
           <Cond>
             {buildPagedList(numPages, currentPage).map((page) =>
-                typeof page !== "number" ? (
-                  <PageButton
-                    key={`Page${page}`}
-                    activePage={currentPage}
-                    placeholder="..."
-                    disabled
-                  />
-                ) : (
-                  <PageButton
-                    key={`Page${page}`}
-                    activePage={currentPage}
-                    page={page}
-                    numPages={numPages}
-                    onPageClick={() => send({ type: "GO_TO_PAGE", page })}
-                  />
-                ),
-              )}
+              typeof page !== "number" ? (
+                <PageButton
+                  key={`Page${page}`}
+                  activePage={currentPage}
+                  placeholder="..."
+                  disabled
+                />
+              ) : (
+                <PageButton
+                  key={`Page${page}`}
+                  activePage={currentPage}
+                  page={page}
+                  numPages={numPages}
+                  onPageClick={() => send({ type: "GO_TO_PAGE", page })}
+                />
+              ),
+            )}
           </Cond>
         </ChooseOne>
         <Button