From 774a9541d764f07868c9b4e5d32bde8e119d5d12 Mon Sep 17 00:00:00 2001
From: Rohan <45748283+r100-stack@users.noreply.github.com>
Date: Wed, 16 Oct 2024 15:50:23 -0400
Subject: [PATCH] `TablePaginator` only shows ellipses when needed (#2303)

---
 .changeset/fluffy-pillows-flow.md             |  5 ++
 .../src/core/Table/TablePaginator.tsx         |  9 ++-
 testing/e2e/app/routes/Table/spec.ts          | 80 ++++++++++++++++++-
 3 files changed, 90 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/fluffy-pillows-flow.md

diff --git a/.changeset/fluffy-pillows-flow.md b/.changeset/fluffy-pillows-flow.md
new file mode 100644
index 00000000000..6d6cd77cc61
--- /dev/null
+++ b/.changeset/fluffy-pillows-flow.md
@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': patch
+---
+
+`TablePaginator` shows ellipses only whenever needed.
diff --git a/packages/itwinui-react/src/core/Table/TablePaginator.tsx b/packages/itwinui-react/src/core/Table/TablePaginator.tsx
index 0e78d2fdd22..fa0ac1ad2e2 100644
--- a/packages/itwinui-react/src/core/Table/TablePaginator.tsx
+++ b/packages/itwinui-react/src/core/Table/TablePaginator.tsx
@@ -259,6 +259,10 @@ export const TablePaginator = (props: TablePaginatorProps) => {
     endPage = totalPagesCount;
   }
 
+  // Show ellipsis only if there is a gap between the extremities and the middle pages
+  const showStartEllipsis = startPage > 1;
+  const showEndEllipsis = endPage < totalPagesCount - 1;
+
   const hasNoRows = totalPagesCount === 0;
   const showPagesList = totalPagesCount > 1 || isLoading;
   const showPageSizeList =
@@ -326,18 +330,19 @@ export const TablePaginator = (props: TablePaginatorProps) => {
               if (visibleCount === 1) {
                 return pageButton(focusedIndex);
               }
+
               return (
                 <>
                   {startPage !== 0 && (
                     <>
                       {pageButton(0, 0)}
-                      {ellipsis}
+                      {showStartEllipsis ? ellipsis : null}
                     </>
                   )}
                   {pageList.slice(startPage, endPage)}
                   {endPage !== totalPagesCount && !isLoading && (
                     <>
-                      {ellipsis}
+                      {showEndEllipsis ? ellipsis : null}
                       {pageButton(totalPagesCount - 1, 0)}
                     </>
                   )}
diff --git a/testing/e2e/app/routes/Table/spec.ts b/testing/e2e/app/routes/Table/spec.ts
index aefbda64782..d5f5c67b623 100644
--- a/testing/e2e/app/routes/Table/spec.ts
+++ b/testing/e2e/app/routes/Table/spec.ts
@@ -454,7 +454,7 @@ test.describe('Table Paginator', () => {
     );
 
     // Go to the 6th page
-    await page.locator('button').last().click({ clickCount: 5 });
+    await page.locator('button').last().click();
 
     await expect(page.locator(`[role="cell"]`).first()).toHaveText('Name 250');
     await expect(page.locator(`[role="cell"]`).last()).toHaveText(
@@ -468,7 +468,7 @@ test.describe('Table Paginator', () => {
     await setContainerSize(page, '800px');
 
     // Go to the 6th page
-    await page.locator('button').last().click({ clickCount: 5 });
+    await page.locator('button').last().click();
 
     const paginatorButtons = page.locator('#paginator button', {
       hasText: /[0-9]+/,
@@ -519,6 +519,82 @@ test.describe('Table Paginator', () => {
     });
   });
 
+  test(`should show ellipses only when a gap of one or more pages`, async ({
+    page,
+  }) => {
+    await page.goto(`/Table?exampleType=withTablePaginator`);
+
+    await expectOverflowState({
+      page,
+      expectedItemLength: 11,
+      expectedOverflowingEllipsisVisibleCount: 0,
+    });
+
+    await setContainerSize(page, '800px');
+
+    const paginatorButtons = page.locator('#paginator button', {
+      hasText: /[0-9]+/,
+    });
+    const ellipses = page.locator('#paginator span', {
+      hasText: /^…$/,
+    });
+
+    await expect(paginatorButtons).toHaveText(['1', '2', '3', '4', '5', '11']);
+    await expect(ellipses).toHaveCount(1);
+
+    await paginatorButtons.locator('*', { hasText: '4' }).click();
+    await expect(paginatorButtons).toHaveText([
+      '1',
+      '2',
+      '3',
+      '4',
+      '5',
+      '6',
+      '11',
+    ]);
+    await expect(ellipses).toHaveCount(1);
+
+    await paginatorButtons.locator('*', { hasText: '5' }).click();
+    await expect(paginatorButtons).toHaveText([
+      '1',
+      '3',
+      '4',
+      '5',
+      '6',
+      '7',
+      '11',
+    ]);
+    await expect(ellipses).toHaveCount(2);
+
+    await paginatorButtons.locator('*', { hasText: '11' }).click();
+    await expect(paginatorButtons).toHaveText(['1', '7', '8', '9', '10', '11']);
+    await expect(ellipses).toHaveCount(1);
+
+    await paginatorButtons.locator('*', { hasText: '8' }).click();
+    await expect(paginatorButtons).toHaveText([
+      '1',
+      '6',
+      '7',
+      '8',
+      '9',
+      '10',
+      '11',
+    ]);
+    await expect(ellipses).toHaveCount(1);
+
+    await paginatorButtons.locator('*', { hasText: '7' }).click();
+    await expect(paginatorButtons).toHaveText([
+      '1',
+      '5',
+      '6',
+      '7',
+      '8',
+      '9',
+      '11',
+    ]);
+    await expect(ellipses).toHaveCount(2);
+  });
+
   test(`should at minimum always show one page`, async ({ page }) => {
     await page.goto(`/Table?exampleType=withTablePaginator`);