From a59967a63aa0a737a054076831f4375b2ee03f52 Mon Sep 17 00:00:00 2001
From: David Edler <david.edler@canonical.com>
Date: Tue, 5 Sep 2023 11:45:36 +0200
Subject: [PATCH] fix(pagination) avoid ellipsis when no gap is present

---
 src/components/Pagination/Pagination.test.tsx | 25 +++++++++++++++++++
 src/components/Pagination/Pagination.tsx      |  4 +--
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/components/Pagination/Pagination.test.tsx b/src/components/Pagination/Pagination.test.tsx
index fe16988a4..a0b172e42 100644
--- a/src/components/Pagination/Pagination.test.tsx
+++ b/src/components/Pagination/Pagination.test.tsx
@@ -423,6 +423,7 @@ describe("<Pagination />", () => {
     expect(await screen.findAllByRole("button", { name: "2" })).toHaveLength(1);
     expect(await screen.findAllByRole("button", { name: "3" })).toHaveLength(1);
     expect(await screen.findAllByRole("button", { name: "4" })).toHaveLength(1);
+    expect(screen.queryByText("…")).not.toBeInTheDocument();
   });
 
   it("renders all pages on page 2 without duplicating first or last page", async () => {
@@ -440,6 +441,7 @@ describe("<Pagination />", () => {
     expect(await screen.findAllByRole("button", { name: "2" })).toHaveLength(1);
     expect(await screen.findAllByRole("button", { name: "3" })).toHaveLength(1);
     expect(await screen.findAllByRole("button", { name: "4" })).toHaveLength(1);
+    expect(screen.queryByText("…")).not.toBeInTheDocument();
   });
 
   it("renders all pages on page 3 without duplicating first or last page", async () => {
@@ -457,6 +459,7 @@ describe("<Pagination />", () => {
     expect(await screen.findAllByRole("button", { name: "2" })).toHaveLength(1);
     expect(await screen.findAllByRole("button", { name: "3" })).toHaveLength(1);
     expect(await screen.findAllByRole("button", { name: "4" })).toHaveLength(1);
+    expect(screen.queryByText("…")).not.toBeInTheDocument();
   });
 
   it("renders all pages on page 4 without duplicating first or last page", async () => {
@@ -474,5 +477,27 @@ describe("<Pagination />", () => {
     expect(await screen.findAllByRole("button", { name: "2" })).toHaveLength(1);
     expect(await screen.findAllByRole("button", { name: "3" })).toHaveLength(1);
     expect(await screen.findAllByRole("button", { name: "4" })).toHaveLength(1);
+    expect(screen.queryByText("…")).not.toBeInTheDocument();
+  });
+
+  it("renders all pages on page 4 without duplicating first or last page", async () => {
+    render(
+      <Pagination
+        itemsPerPage={2}
+        totalItems={20}
+        paginate={jest.fn()}
+        currentPage={4}
+        truncateThreshold={3}
+      />
+    );
+
+    expect(await screen.findAllByRole("button", { name: "1" })).toHaveLength(1);
+    expect(await screen.findAllByRole("button", { name: "3" })).toHaveLength(1);
+    expect(await screen.findAllByRole("button", { name: "4" })).toHaveLength(1);
+    expect(await screen.findAllByRole("button", { name: "5" })).toHaveLength(1);
+    expect(await screen.findAllByRole("button", { name: "10" })).toHaveLength(
+      1
+    );
+    expect(screen.queryAllByText("…")).toHaveLength(2);
   });
 });
diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
index 273581622..6e0d9ac12 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -55,7 +55,7 @@ const generatePaginationItems = (
         onClick={() => changePage(1)}
       />
     );
-    if (![1, 2, 3].includes(currentPage)) {
+    if (!visiblePages.includes(2)) {
       items.push(<PaginationItemSeparator key="sep1" />);
     }
   }
@@ -73,7 +73,7 @@ const generatePaginationItems = (
 
   if (truncated) {
     // render last in sequence
-    if (![lastPage, lastPage - 1, lastPage - 2].includes(currentPage)) {
+    if (!visiblePages.includes(lastPage - 1)) {
       items.push(<PaginationItemSeparator key="sep2" />);
     }
     items.push(