feat: ✨adds pagination to Can Budget Lines

frontend/cypress/e2e/canDetail.cy.js

@@ -41,4 +41,34 @@ describe("CAN detail page", () => {
         cy.get("tbody").should("not.exist");
         cy.get("p").should("contain", "No budget lines have been added to this CAN.");
     });
+    it("pagination on the bli table works as expected", () => {
+        cy.visit("/cans/504/spending");
+        cy.get("#fiscal-year-select").select("2043");
+        cy.wait(1000);
+        cy.get("ul").should("have.class", "usa-pagination__list");
+        cy.get("li").should("have.class", "usa-pagination__item").contains("1");
+        cy.get("button").should("have.class", "usa-current").contains("1");
+        cy.get("li").should("have.class", "usa-pagination__item").contains("2");
+        cy.get("li").should("have.class", "usa-pagination__item").contains("Next");
+        cy.get("tbody").find("tr").should("have.length", 3);
+        cy.get("li")
+            .should("have.class", "usa-pagination__item")
+            .contains("Previous")
+            .find("svg")
+            .should("have.attr", "aria-hidden", "true");
+
+        // go to the second page
+        cy.get("li").should("have.class", "usa-pagination__item").contains("2").click();
+        cy.get("button").should("have.class", "usa-current").contains("2");
+        cy.get("li").should("have.class", "usa-pagination__item").contains("Previous");
+        cy.get("li")
+            .should("have.class", "usa-pagination__item")
+            .contains("Next")
+            .find("svg")
+            .should("have.attr", "aria-hidden", "true");
+
+        // go back to the first page
+        cy.get("li").should("have.class", "usa-pagination__item").contains("1").click();
+        cy.get("button").should("have.class", "usa-current").contains("1");
+    });
 });

frontend/src/components/CANs/CANBudgetLineTable/CANBudgetLineTable.jsx

@@ -1,8 +1,9 @@
-import { formatDateNeeded } from "../../../helpers/utils";
+import React from "react";
+import { calculatePercent, formatDateNeeded } from "../../../helpers/utils";
 import Table from "../../UI/Table";
 import { TABLE_HEADERS } from "./CABBudgetLineTable.constants";
 import CANBudgetLineTableRow from "./CANBudgetLineTableRow";
-import { calculatePercent } from "../../../helpers/utils";
+import PaginationNav from "../../UI/PaginationNav";
 /**
  * @typedef {import("../../../components/BudgetLineItems/BudgetLineTypes").BudgetLine} BudgetLine
  */
@@ -19,33 +20,49 @@ import { calculatePercent } from "../../../helpers/utils";
  * @returns  {JSX.Element} - The component JSX.
  */
 const CANBudgetLineTable = ({ budgetLines, totalFunding }) => {
+    // TODO: once in prod, change this to 25
+    const ITEMS_PER_PAGE = 3;
+    const [currentPage, setCurrentPage] = React.useState(1);
+    let visibleBudgetLines = [...budgetLines];
+    visibleBudgetLines = visibleBudgetLines.slice((currentPage - 1) * ITEMS_PER_PAGE, currentPage * ITEMS_PER_PAGE);
+
     if (budgetLines.length === 0) {
         return <p className="text-center">No budget lines have been added to this CAN.</p>;
     }
 
     return (
-        <Table tableHeadings={TABLE_HEADERS}>
-            {budgetLines.map((budgetLine) => (
-                <CANBudgetLineTableRow
-                    key={budgetLine.id}
-                    budgetLine={budgetLine}
-                    blId={budgetLine.id}
-                    agreementName="TBD"
-                    obligateDate={formatDateNeeded(budgetLine.date_needed || "")}
-                    fiscalYear={budgetLine.fiscal_year || "TBD"}
-                    amount={budgetLine.amount ?? 0}
-                    fee={budgetLine.proc_shop_fee_percentage}
-                    percentOfCAN={calculatePercent(budgetLine.amount ?? 0, totalFunding)}
-                    status={budgetLine.status}
-                    inReview={budgetLine.in_review}
-                    creatorId={budgetLine.created_by}
-                    creationDate={budgetLine.created_on}
-                    procShopCode="TBD"
-                    procShopFeePercentage={budgetLine.proc_shop_fee_percentage}
-                    notes={budgetLine.comments || "No Notes added"}
+        <>
+            <Table tableHeadings={TABLE_HEADERS}>
+                {visibleBudgetLines.map((budgetLine) => (
+                    <CANBudgetLineTableRow
+                        key={budgetLine.id}
+                        budgetLine={budgetLine}
+                        blId={budgetLine.id}
+                        agreementName="TBD"
+                        obligateDate={formatDateNeeded(budgetLine.date_needed || "")}
+                        fiscalYear={budgetLine.fiscal_year || "TBD"}
+                        amount={budgetLine.amount ?? 0}
+                        fee={budgetLine.proc_shop_fee_percentage}
+                        percentOfCAN={calculatePercent(budgetLine.amount ?? 0, totalFunding)}
+                        status={budgetLine.status}
+                        inReview={budgetLine.in_review}
+                        creatorId={budgetLine.created_by}
+                        creationDate={budgetLine.created_on}
+                        procShopCode="TBD"
+                        procShopFeePercentage={budgetLine.proc_shop_fee_percentage}
+                        notes={budgetLine.comments || "No Notes added"}
+                    />
+                ))}
+            </Table>
+            {budgetLines.length > ITEMS_PER_PAGE && (
+                <PaginationNav
+                    currentPage={currentPage}
+                    setCurrentPage={setCurrentPage}
+                    items={budgetLines}
+                    itemsPerPage={ITEMS_PER_PAGE}
                 />
-            ))}
-        </Table>
+            )}
+        </>
     );
 };