From 619db407a4e9591f9c583c4bfa4d633fa7ee14d7 Mon Sep 17 00:00:00 2001 From: Enrique Moreno Date: Wed, 26 Feb 2025 12:28:25 +0100 Subject: [PATCH 1/3] Made changes to the Paginator component to prevent displaying when totalItems < itemsPerPage --- packages/lib/src/paginator/Paginator.test.tsx | 8 ++++---- packages/lib/src/paginator/Paginator.tsx | 6 ++++-- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/lib/src/paginator/Paginator.test.tsx b/packages/lib/src/paginator/Paginator.test.tsx index 4902eba8b9..fbde3ce5b2 100644 --- a/packages/lib/src/paginator/Paginator.test.tsx +++ b/packages/lib/src/paginator/Paginator.test.tsx @@ -22,13 +22,13 @@ import DxcPaginator from "./Paginator"; describe("Paginator component tests", () => { test("Paginator renders with default values", () => { const { getByText } = render(); - expect(getByText("1 to 1 of 1")).toBeTruthy(); - expect(getByText("Page: 1 of 1")).toBeTruthy(); + expect(getByText("1 to 5 of 10")).toBeTruthy(); + expect(getByText("Page: 1 of 2")).toBeTruthy(); }); test("Paginator renders with currentPage", () => { - const { getByText } = render(); - expect(getByText("Page: 2 of 1")).toBeTruthy(); + const { getByText } = render(); + expect(getByText("Page: 2 of 2")).toBeTruthy(); }); test("Paginator renders with itemsPerPageOptions", () => { diff --git a/packages/lib/src/paginator/Paginator.tsx b/packages/lib/src/paginator/Paginator.tsx index 3f2486c861..3fddc6b4f4 100644 --- a/packages/lib/src/paginator/Paginator.tsx +++ b/packages/lib/src/paginator/Paginator.tsx @@ -10,7 +10,7 @@ const DxcPaginator = ({ currentPage = 1, itemsPerPage = 5, itemsPerPageOptions, - totalItems = 1, + totalItems = 10, showGoToPage, onPageChange, itemsPerPageFunction, @@ -28,7 +28,7 @@ const DxcPaginator = ({ const colorsTheme = useContext(HalstackContext); const translatedLabels = useContext(HalstackLanguageContext); - return ( + return totalItems > itemsPerPage ? ( @@ -126,6 +126,8 @@ const DxcPaginator = ({ + ) : ( + <> ); }; From 88006d79a9c9c21a71eec2b901071747b43b38b8 Mon Sep 17 00:00:00 2001 From: Enrique Moreno Date: Wed, 26 Feb 2025 16:36:24 +0100 Subject: [PATCH 2/3] Moved the conditional rendering of the paginator to our components that use it --- packages/lib/src/data-grid/DataGrid.tsx | 2 +- packages/lib/src/paginator/Paginator.test.tsx | 8 ++++---- packages/lib/src/paginator/Paginator.tsx | 6 ++---- packages/lib/src/resultset-table/ResultsetTable.tsx | 2 +- 4 files changed, 8 insertions(+), 10 deletions(-) diff --git a/packages/lib/src/data-grid/DataGrid.tsx b/packages/lib/src/data-grid/DataGrid.tsx index 4caf502637..3035bbeb22 100644 --- a/packages/lib/src/data-grid/DataGrid.tsx +++ b/packages/lib/src/data-grid/DataGrid.tsx @@ -260,7 +260,7 @@ const DxcDataGrid = ({ summaryRowHeight={colorsTheme.dataGrid.summaryRowHeight} className="fill-grid" /> - {showPaginator && ( + {showPaginator && (totalItems ?? rows.length) > itemsPerPage && ( { test("Paginator renders with default values", () => { const { getByText } = render(); - expect(getByText("1 to 5 of 10")).toBeTruthy(); - expect(getByText("Page: 1 of 2")).toBeTruthy(); + expect(getByText("1 to 1 of 1")).toBeTruthy(); + expect(getByText("Page: 1 of 1")).toBeTruthy(); }); test("Paginator renders with currentPage", () => { - const { getByText } = render(); - expect(getByText("Page: 2 of 2")).toBeTruthy(); + const { getByText } = render(); + expect(getByText("Page: 2 of 1")).toBeTruthy(); }); test("Paginator renders with itemsPerPageOptions", () => { diff --git a/packages/lib/src/paginator/Paginator.tsx b/packages/lib/src/paginator/Paginator.tsx index 3fddc6b4f4..3f2486c861 100644 --- a/packages/lib/src/paginator/Paginator.tsx +++ b/packages/lib/src/paginator/Paginator.tsx @@ -10,7 +10,7 @@ const DxcPaginator = ({ currentPage = 1, itemsPerPage = 5, itemsPerPageOptions, - totalItems = 10, + totalItems = 1, showGoToPage, onPageChange, itemsPerPageFunction, @@ -28,7 +28,7 @@ const DxcPaginator = ({ const colorsTheme = useContext(HalstackContext); const translatedLabels = useContext(HalstackLanguageContext); - return totalItems > itemsPerPage ? ( + return ( @@ -126,8 +126,6 @@ const DxcPaginator = ({ - ) : ( - <> ); }; diff --git a/packages/lib/src/resultset-table/ResultsetTable.tsx b/packages/lib/src/resultset-table/ResultsetTable.tsx index e304e05865..a4989a2eb9 100644 --- a/packages/lib/src/resultset-table/ResultsetTable.tsx +++ b/packages/lib/src/resultset-table/ResultsetTable.tsx @@ -166,7 +166,7 @@ const DxcResultsetTable = ({ ))} - {!hidePaginator && ( + {!hidePaginator && rows.length > itemsPerPage && ( Date: Thu, 27 Feb 2025 14:15:05 +0100 Subject: [PATCH 3/3] Fixed storybook interactions for paginator changes --- packages/lib/src/resultset-table/ResultsetTable.stories.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/lib/src/resultset-table/ResultsetTable.stories.tsx b/packages/lib/src/resultset-table/ResultsetTable.stories.tsx index 92d02d1cbe..2b2f77f5fa 100644 --- a/packages/lib/src/resultset-table/ResultsetTable.stories.tsx +++ b/packages/lib/src/resultset-table/ResultsetTable.stories.tsx @@ -409,7 +409,7 @@ export const AscendentSorting: Story = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); const idHeader = canvas.getAllByRole("button")[0]; - const idHeader2 = canvas.getAllByRole("button")[6]; + const idHeader2 = canvas.getAllByRole("button")[2]; idHeader && (await userEvent.click(idHeader)); idHeader2 && (await userEvent.click(idHeader2)); }, @@ -420,7 +420,7 @@ export const DescendantSorting: Story = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); const nameHeader = canvas.getAllByRole("button")[1]; - const nameHeader2 = canvas.getAllByRole("button")[7]; + const nameHeader2 = canvas.getAllByRole("button")[3]; nameHeader && (await userEvent.click(nameHeader)); nameHeader && (await userEvent.click(nameHeader)); nameHeader2 && (await userEvent.click(nameHeader2));