sts-sponsors team mailing list archive

[Jones Ogolo <mp+440396@xxxxxxxxxxxxxxxxxx>]

Jones Ogolo has proposed merging ~jonesogolo/maas-site-manager:1541-fix-pagination-loading-state into maas-site-manager:main.

Commit message:
Add loading prop for Pagination component

Requested reviews:
  MAAS Committers (maas-committers)

For more details, see:
https://code.launchpad.net/~jonesogolo/maas-site-manager/+git/maas-site-manager/+merge/440396

Added a fix that disables input and buttons on the pagination component when data loads initially.
Added tests to check functionality.
-- 
Your team MAAS Committers is requested to review the proposed merge of ~jonesogolo/maas-site-manager:1541-fix-pagination-loading-state into maas-site-manager:main.

diff --git a/frontend/src/components/TokensList/TokensList.tsx b/frontend/src/components/TokensList/TokensList.tsx
index d0e3575..c56e053 100644
--- a/frontend/src/components/TokensList/TokensList.tsx
+++ b/frontend/src/components/TokensList/TokensList.tsx
@@ -50,6 +50,7 @@ const TokensList = () => {
       <PaginationBar
         currentPage={page + 1}
         dataContext="tokens"
+        isDataLoading={isLoading}
         itemsPerPage={size}
         onNextClick={handleNextClick}
         onPreviousClick={handlePreviousClick}
diff --git a/frontend/src/components/base/PaginationBar/PaginationBar.test.tsx b/frontend/src/components/base/PaginationBar/PaginationBar.test.tsx
index 4fede4c..a36ebde 100644
--- a/frontend/src/components/base/PaginationBar/PaginationBar.test.tsx
+++ b/frontend/src/components/base/PaginationBar/PaginationBar.test.tsx
@@ -7,6 +7,7 @@ it("should render the PaginationBar component correctly", () => {
     <PaginationBar
       currentPage={1}
       dataContext="tokens"
+      isDataLoading={false}
       itemsPerPage={10}
       onNextClick={() => {}}
       onPreviousClick={() => {}}
diff --git a/frontend/src/components/base/PaginationBar/PaginationBar.tsx b/frontend/src/components/base/PaginationBar/PaginationBar.tsx
index 43faf76..f995b8f 100644
--- a/frontend/src/components/base/PaginationBar/PaginationBar.tsx
+++ b/frontend/src/components/base/PaginationBar/PaginationBar.tsx
@@ -11,6 +11,7 @@ type TokensTableControlProps = AppPaginationProps & {
   resetPageCount: () => void;
   dataContext: string;
   setCurrentPage: (page: number) => void;
+  isDataLoading: boolean;
 };
 
 const PaginationBar = ({
@@ -23,6 +24,7 @@ const PaginationBar = ({
   resetPageCount,
   dataContext,
   setCurrentPage,
+  isDataLoading,
 }: TokensTableControlProps) => {
   const pageCounts = useMemo(() => [20, 30, 50], []);
   const pageOptions = useMemo(
@@ -58,6 +60,7 @@ const PaginationBar = ({
       <Col medium={3} size={3} small={4}>
         <TablePagination
           currentPage={currentPage}
+          isDataLoading={isDataLoading}
           itemsPerPage={itemsPerPage}
           onNextClick={onNextClick}
           onPreviousClick={onPreviousClick}
diff --git a/frontend/src/components/base/TablePagination/TablePagination.test.tsx b/frontend/src/components/base/TablePagination/TablePagination.test.tsx
index e1c4a3d..88486e1 100644
--- a/frontend/src/components/base/TablePagination/TablePagination.test.tsx
+++ b/frontend/src/components/base/TablePagination/TablePagination.test.tsx
@@ -8,6 +8,7 @@ it("should render pagination component correctly", () => {
   render(
     <TablePagination
       currentPage={1}
+      isDataLoading={false}
       itemsPerPage={10}
       onNextClick={() => {}}
       onPreviousClick={() => {}}
@@ -22,6 +23,7 @@ it("should render previous button as disabled on first page", () => {
   render(
     <TablePagination
       currentPage={1}
+      isDataLoading={false}
       itemsPerPage={10}
       onNextClick={() => {}}
       onPreviousClick={() => {}}
@@ -36,6 +38,7 @@ it("should render next button as disabled on last page", () => {
   render(
     <TablePagination
       currentPage={1}
+      isDataLoading={false}
       itemsPerPage={10}
       onNextClick={() => {}}
       onPreviousClick={() => {}}
@@ -52,6 +55,7 @@ it("next and previous buttons work as expected", async () => {
   render(
     <TablePagination
       currentPage={2}
+      isDataLoading={false}
       itemsPerPage={10}
       onNextClick={onNextClick}
       onPreviousClick={onPreviousClick}
@@ -73,6 +77,7 @@ it("should have a numeric input showing the current page", () => {
   render(
     <TablePagination
       currentPage={currentPage}
+      isDataLoading={false}
       itemsPerPage={10}
       onNextClick={() => {}}
       onPreviousClick={() => {}}
@@ -83,3 +88,21 @@ it("should have a numeric input showing the current page", () => {
 
   expect(screen.getByRole("spinbutton", { name: /current page/i })).toHaveValue(currentPage);
 });
+
+it("numeric input and buttons should be disabled when data is loading", () => {
+  render(
+    <TablePagination
+      currentPage={1}
+      isDataLoading={true}
+      itemsPerPage={10}
+      onNextClick={() => {}}
+      onPreviousClick={() => {}}
+      setCurrentPage={() => {}}
+      totalItems={1}
+    />,
+  );
+
+  expect(screen.getByRole("spinbutton", { name: /current page/i })).toBeDisabled();
+  expect(screen.getByRole("button", { name: /previous page/i })).toBeDisabled();
+  expect(screen.getByRole("button", { name: /next page/i })).toBeDisabled();
+});
diff --git a/frontend/src/components/base/TablePagination/TablePagination.tsx b/frontend/src/components/base/TablePagination/TablePagination.tsx
index b4763bb..a953da7 100644
--- a/frontend/src/components/base/TablePagination/TablePagination.tsx
+++ b/frontend/src/components/base/TablePagination/TablePagination.tsx
@@ -10,6 +10,7 @@ export type AppPaginationProps = {
   onNextClick: () => void;
   onPreviousClick: () => void;
   setCurrentPage: (x: number) => void;
+  isDataLoading: boolean;
 };
 
 const TablePagination = ({
@@ -19,6 +20,7 @@ const TablePagination = ({
   onNextClick,
   onPreviousClick,
   setCurrentPage,
+  isDataLoading,
 }: AppPaginationProps) => {
   const totalPages = useMemo(() => Math.ceil(totalItems / itemsPerPage), [itemsPerPage, totalItems]);
 
@@ -37,7 +39,7 @@ const TablePagination = ({
           <Button
             appearance="base"
             aria-label="previous page"
-            disabled={currentPage === 1}
+            disabled={currentPage === 1 || isDataLoading}
             hasIcon
             onClick={onPreviousClick}
           >
@@ -48,6 +50,7 @@ const TablePagination = ({
         <Input
           aria-label="current page"
           className="current-page"
+          disabled={isDataLoading}
           error={isInputError ? "The entered value is out of range" : undefined}
           min={1}
           onChange={handlePageInput}
@@ -60,7 +63,7 @@ const TablePagination = ({
           <Button
             appearance="base"
             aria-label="next page"
-            disabled={currentPage === totalPages}
+            disabled={currentPage === totalPages || isDataLoading}
             hasIcon
             onClick={onNextClick}
           >