fix(compass-crud): fix nextPage availability logic COMPASS-8239 (#6197)

mongodb-js · Sep 4, 2024 · a1f8f05 · a1f8f05
1 parent daaf192
commit a1f8f05
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 17 deletions.
diff --git 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
@@ -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');