From 270ee83613e4a31599b6da14713a1d2ff60aee50 Mon Sep 17 00:00:00 2001
From: Camila Belo <camilaibs@gmail.com>
Date: Mon, 10 Oct 2022 12:08:16 +0200
Subject: [PATCH] refactor: change default page limit text

Signed-off-by: Camila Belo <camilaibs@gmail.com>
---
 .../SearchPagination/SearchPagination.stories.tsx    |  8 ++++++--
 .../SearchPagination/SearchPagination.test.tsx       | 12 +++++++-----
 .../components/SearchPagination/SearchPagination.tsx |  2 +-
 3 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/plugins/search-react/src/components/SearchPagination/SearchPagination.stories.tsx b/plugins/search-react/src/components/SearchPagination/SearchPagination.stories.tsx
index eca668d165..c23fb1e863 100644
--- a/plugins/search-react/src/components/SearchPagination/SearchPagination.stories.tsx
+++ b/plugins/search-react/src/components/SearchPagination/SearchPagination.stories.tsx
@@ -47,11 +47,15 @@ export const Default = () => {
 };
 
 export const CustomPageLimitLabel = () => {
-  return <SearchPagination pageLimitLabel="Page limit:" />;
+  return <SearchPagination pageLimitLabel="PRows per page:" />;
 };
 
 export const CustomPageLimitText = () => {
-  return <SearchPagination pageLimitText={({ from, to }) => `${from}-${to}`} />;
+  return (
+    <SearchPagination
+      pageLimitText={({ from, to }) => `${from}-${to} of more than ${to}`}
+    />
+  );
 };
 
 export const CustomPageLimitOptions = () => {
diff --git a/plugins/search-react/src/components/SearchPagination/SearchPagination.test.tsx b/plugins/search-react/src/components/SearchPagination/SearchPagination.test.tsx
index 723a8a0031..6e4abcdbda 100644
--- a/plugins/search-react/src/components/SearchPagination/SearchPagination.test.tsx
+++ b/plugins/search-react/src/components/SearchPagination/SearchPagination.test.tsx
@@ -47,7 +47,7 @@ describe('SearchPagination', () => {
 
     expect(screen.getByText('Results per page:')).toBeInTheDocument();
     expect(screen.getByText('25')).toBeInTheDocument();
-    expect(screen.getByText('1-25 of more than 25')).toBeInTheDocument();
+    expect(screen.getByText('1-25')).toBeInTheDocument();
     expect(screen.getByLabelText('Next page')).toBeEnabled();
     expect(screen.getByLabelText('Previous page')).toBeDisabled();
   });
@@ -88,12 +88,14 @@ describe('SearchPagination', () => {
     await renderWithEffects(
       <TestApiProvider apis={[[searchApiRef, { query }]]}>
         <SearchContextProvider>
-          <SearchPagination pageLimitText={({ from, to }) => `${from}-${to}`} />
+          <SearchPagination
+            pageLimitText={({ from, to }) => `${from}-${to} of more than ${to}`}
+          />
         </SearchContextProvider>
       </TestApiProvider>,
     );
 
-    expect(screen.getByText('1-25')).toBeInTheDocument();
+    expect(screen.getByText('1-25 of more than 25')).toBeInTheDocument();
   });
 
   it('Accept custom page limit options', async () => {
@@ -153,7 +155,7 @@ describe('SearchPagination', () => {
 
     await userEvent.click(screen.getByLabelText('Next page'));
 
-    expect(screen.getByText('51-75 of more than 75')).toBeInTheDocument();
+    expect(screen.getByText('51-75')).toBeInTheDocument();
 
     expect(query).toHaveBeenLastCalledWith(
       expect.objectContaining({
@@ -163,7 +165,7 @@ describe('SearchPagination', () => {
 
     await userEvent.click(screen.getByLabelText('Previous page'));
 
-    expect(screen.getByText('26-50 of more than 50')).toBeInTheDocument();
+    expect(screen.getByText('26-50')).toBeInTheDocument();
 
     expect(query).toHaveBeenLastCalledWith(
       expect.objectContaining({
diff --git a/plugins/search-react/src/components/SearchPagination/SearchPagination.tsx b/plugins/search-react/src/components/SearchPagination/SearchPagination.tsx
index c0d1c127c8..e5807832e9 100644
--- a/plugins/search-react/src/components/SearchPagination/SearchPagination.tsx
+++ b/plugins/search-react/src/components/SearchPagination/SearchPagination.tsx
@@ -110,7 +110,7 @@ export const SearchPaginationBase = (props: SearchPaginationBaseProps) => {
     onPageCursorChange,
     pageLimit: rowsPerPage = 25,
     pageLimitLabel: labelRowsPerPage = 'Results per page:',
-    pageLimitText: labelDisplayedRows,
+    pageLimitText: labelDisplayedRows = ({ from, to }) => `${from}-${to}`,
     pageLimitOptions: rowsPerPageOptions,
     onPageLimitChange,
     ...rest