simplify pagination buttons

- no custom css - put click events on buttons instead of labels - use standard disabled state instead of custom cursor, grey text
jupyterhub · Sep 13, 2024 · 86e4f42 · 86e4f42
1 parent 6ccb809
commit 86e4f42
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 43 deletions.
diff --git a/jsx/src/components/PaginationFooter/PaginationFooter.jsx b/jsx/src/components/PaginationFooter/PaginationFooter.jsx
@@ -2,8 +2,6 @@ import React from "react";
 import PropTypes from "prop-types";
 import { Button, FormControl } from "react-bootstrap";
 
-import "./pagination-footer.css";
-
 const PaginationFooter = (props) => {
   const { offset, limit, visible, total, next, prev, handleLimit } = props;
   return (
@@ -13,33 +11,45 @@ const PaginationFooter = (props) => {
         {total ? `of ${total}` : ""}
         <br />
         {offset >= 1 ? (
-          <Button variant="light" size="sm">
-            <span
-              className="active-pagination"
-              data-testid="paginate-prev"
-              onClick={prev}
-            >
-              Previous
-            </span>
+          <Button
+            variant="light"
+            size="sm"
+            onClick={prev}
+            className="me-2"
+            data-testid="paginate-prev"
+          >
+            Previous
           </Button>
         ) : (
-          <Button variant="light" size="sm">
-            <span className="inactive-pagination">Previous</span>
+          <Button
+            variant="light"
+            size="sm"
+            className="me-2"
+            disabled
+            aria-disabled="true"
+          >
+            Previous
           </Button>
         )}
         {offset + visible < total ? (
-          <Button variant="light" size="sm">
-            <span
-              className="active-pagination"
-              data-testid="paginate-next"
-              onClick={next}
-            >
-              Next
-            </span>
+          <Button
+            variant="light"
+            size="sm"
+            className="me-2"
+            onClick={next}
+            data-testid="paginate-next"
+          >
+            Next
           </Button>
         ) : (
-          <Button variant="light" size="sm">
-            <span className="inactive-pagination">Next</span>
+          <Button
+            variant="light"
+            size="sm"
+            className="me-2"
+            disabled
+            aria-disabled="true"
+          >
+            Next
           </Button>
         )}
         <label>

diff --git a/jsx/src/components/PaginationFooter/pagination-footer.css b/jsx/src/components/PaginationFooter/pagination-footer.css
diff --git a/jupyterhub/tests/browser/test_browser.py b/jupyterhub/tests/browser/test_browser.py
@@ -1186,7 +1186,7 @@ async def test_paging_on_admin_page(
         re.compile(".*" + f"1-{min(users_count_db, 50)}" + ".*")
     )
     if users_count_db > 50:
-        await expect(btn_next.locator("//span")).to_have_class("active-pagination")
+        await expect(btn_next).to_be_enabled()
         # click on Next button
         await btn_next.click()
         if users_count_db <= 100:
@@ -1195,15 +1195,13 @@ async def test_paging_on_admin_page(
             )
         else:
             await expect(displaying).to_have_text(re.compile(".*" + "51-100" + ".*"))
-            await expect(btn_next.locator("//span")).to_have_class("active-pagination")
-        await expect(btn_previous.locator("//span")).to_have_class("active-pagination")
+            await expect(btn_next).to_be_enabled()
+        await expect(btn_previous).to_be_enabled()
         # click on Previous button
         await btn_previous.click()
     else:
-        await expect(btn_next.locator("//span")).to_have_class("inactive-pagination")
-        await expect(btn_previous.locator("//span")).to_have_class(
-            "inactive-pagination"
-        )
+        await expect(btn_next).to_be_disabled()
+        await expect(btn_previous).to_be_disabled()
 
 
 @pytest.mark.parametrize(