From a1f8f058f83aa00f22aff7e2a952e5fdbda00c71 Mon Sep 17 00:00:00 2001
From: Paula Stachova <paula.stachova@tutanota.com>
Date: Wed, 4 Sep 2024 17:54:14 +0200
Subject: [PATCH] fix(compass-crud): fix nextPage availability logic
 COMPASS-8239 (#6197)

---
 .../src/components/crud-toolbar.spec.tsx      | 53 +++++++++++++------
 .../src/components/crud-toolbar.tsx           |  6 ++-
 2 files changed, 42 insertions(+), 17 deletions(-)

diff --git a/packages/compass-crud/src/components/crud-toolbar.spec.tsx b/packages/compass-crud/src/components/crud-toolbar.spec.tsx
index 6827f08c688..295ef0999b2 100644
--- a/packages/compass-crud/src/components/crud-toolbar.spec.tsx
+++ b/packages/compass-crud/src/components/crud-toolbar.spec.tsx
@@ -151,24 +151,47 @@ describe('CrudToolbar Component', function () {
     expect(screen.getByTestId('docs-toolbar-prev-page-btn')).to.be.visible;
   });
 
-  it('should have the next page button disabled when on the first page without more than a page of documents', function () {
-    const getPageSpy = sinon.spy();
-    renderCrudToolbar({
-      getPage: getPageSpy,
-      count: 5,
-      page: 0,
-      start: 1,
-      end: 5,
+  context('respecting the docsPerPage setting', () => {
+    it('should have the next page button disabled when on the first page without more than a page of documents', function () {
+      const getPageSpy = sinon.spy();
+      renderCrudToolbar({
+        getPage: getPageSpy,
+        docsPerPage: 50,
+        count: 50,
+        page: 0,
+        start: 1,
+        end: 50,
+      });
+      expect(getPageSpy.called).to.be.false;
+      fireEvent.click(screen.getByTestId('docs-toolbar-next-page-btn'));
+
+      expect(
+        screen.getByTestId('docs-toolbar-next-page-btn')
+      ).to.have.attribute('aria-disabled', 'true');
+
+      expect(getPageSpy.calledOnce).to.be.false;
     });
-    expect(getPageSpy.called).to.be.false;
-    fireEvent.click(screen.getByTestId('docs-toolbar-next-page-btn'));
 
-    expect(screen.getByTestId('docs-toolbar-next-page-btn')).to.have.attribute(
-      'aria-disabled',
-      'true'
-    );
+    it('should have the next page button disabled when on the first page with more than a page of documents', function () {
+      const getPageSpy = sinon.spy();
+      renderCrudToolbar({
+        getPage: getPageSpy,
+        docsPerPage: 25,
+        count: 50,
+        page: 0,
+        start: 1,
+        end: 25,
+      });
+      expect(getPageSpy.called).to.be.false;
+      fireEvent.click(screen.getByTestId('docs-toolbar-next-page-btn'));
 
-    expect(getPageSpy.calledOnce).to.be.false;
+      expect(
+        screen.getByTestId('docs-toolbar-next-page-btn')
+      ).to.have.attribute('aria-disabled', 'false');
+
+      expect(getPageSpy.calledOnce).to.be.true;
+      expect(getPageSpy.firstCall.args[0]).to.equal(1);
+    });
   });
 
   it('should call to get the next page when the prev button is hit on a non-first page', function () {
diff --git a/packages/compass-crud/src/components/crud-toolbar.tsx b/packages/compass-crud/src/components/crud-toolbar.tsx
index 3c307d0c1da..47355683ece 100644
--- a/packages/compass-crud/src/components/crud-toolbar.tsx
+++ b/packages/compass-crud/src/components/crud-toolbar.tsx
@@ -173,8 +173,10 @@ const CrudToolbar: React.FunctionComponent<CrudToolbarProps> = ({
   const nextButtonDisabled = useMemo(
     // If we don't know the count, we can't know if there are more pages.
     () =>
-      count === undefined || count === null ? false : 20 * (page + 1) >= count,
-    [count, page]
+      count === undefined || count === null
+        ? false
+        : docsPerPage * (page + 1) >= count,
+    [count, page, docsPerPage]
   );
 
   const enableExplainPlan = usePreference('enableExplainPlan');