From 4e9925fd3fbd835715986fae7f1b0c3d5a4559ca Mon Sep 17 00:00:00 2001
From: WithoutPants <53250216+WithoutPants@users.noreply.github.com>
Date: Wed, 4 Sep 2024 09:41:53 +1000
Subject: [PATCH] Show page numbers on low page count (#5206)

Shows individual page numbers instead of the page count selector when pages < 4.
---
 ui/v2.5/src/components/List/Pagination.tsx | 36 +++++++++++++++++-----
 1 file changed, 28 insertions(+), 8 deletions(-)

diff --git a/ui/v2.5/src/components/List/Pagination.tsx b/ui/v2.5/src/components/List/Pagination.tsx
index acca41f28..3db7d2f82 100644
--- a/ui/v2.5/src/components/List/Pagination.tsx
+++ b/ui/v2.5/src/components/List/Pagination.tsx
@@ -8,7 +8,7 @@ import {
   Overlay,
   Popover,
 } from "react-bootstrap";
-import { FormattedMessage, useIntl } from "react-intl";
+import { FormattedMessage, FormattedNumber, useIntl } from "react-intl";
 import useFocus from "src/utils/focus";
 import { Icon } from "../Shared/Icon";
 import { faCheck, faChevronDown } from "@fortawesome/free-solid-svg-icons";
@@ -143,6 +143,8 @@ interface IPaginationIndexProps {
   metadataByline?: React.ReactNode;
 }
 
+const minPagesForCompact = 4;
+
 export const Pagination: React.FC<IPaginationProps> = ({
   itemsPerPage,
   currentPage,
@@ -156,6 +158,30 @@ export const Pagination: React.FC<IPaginationProps> = ({
     [totalItems, itemsPerPage]
   );
 
+  const pageButtons = useMemo(() => {
+    if (totalPages >= minPagesForCompact)
+      return (
+        <PageCount
+          totalPages={totalPages}
+          currentPage={currentPage}
+          onChangePage={onChangePage}
+        />
+      );
+
+    const pages = [...Array(totalPages).keys()].map((i) => i + 1);
+
+    return pages.map((page: number) => (
+      <Button
+        variant="secondary"
+        key={page}
+        active={currentPage === page}
+        onClick={() => onChangePage(page)}
+      >
+        <FormattedNumber value={page} />
+      </Button>
+    ));
+  }, [totalPages, currentPage, onChangePage]);
+
   if (totalPages <= 1) return <div />;
 
   return (
@@ -176,13 +202,7 @@ export const Pagination: React.FC<IPaginationProps> = ({
       >
         &lt;
       </Button>
-
-      <PageCount
-        totalPages={totalPages}
-        currentPage={currentPage}
-        onChangePage={onChangePage}
-      />
-
+      {pageButtons}
       <Button
         variant="secondary"
         disabled={currentPage === totalPages}