From 9fec852397bbe4658a2a2732d1792168015063da Mon Sep 17 00:00:00 2001 From: weimiao67 Date: Wed, 26 Feb 2025 13:48:56 -0700 Subject: [PATCH 1/4] fix: fixed can table pagination bug --- .../CANs/CANBudgetLineTable/CANBudgetLineTable.jsx | 11 +++++++++-- frontend/src/components/CANs/CANTable/CANTable.jsx | 6 +++++- .../PortfolioSpending/PortfolioSpending.jsx | 1 + frontend/src/pages/cans/detail/CanSpending.jsx | 1 + 4 files changed, 16 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/CANs/CANBudgetLineTable/CANBudgetLineTable.jsx b/frontend/src/components/CANs/CANBudgetLineTable/CANBudgetLineTable.jsx index 5597cfd3d6..efecb27020 100644 --- a/frontend/src/components/CANs/CANBudgetLineTable/CANBudgetLineTable.jsx +++ b/frontend/src/components/CANs/CANBudgetLineTable/CANBudgetLineTable.jsx @@ -1,9 +1,10 @@ -import React from "react"; +import React, { useEffect } from "react"; import { calculatePercent, formatDateNeeded } from "../../../helpers/utils"; import Table from "../../UI/Table"; import { CAN_HEADERS, PORTFOLIO_HEADERS } from "./CABBudgetLineTable.constants"; import CANBudgetLineTableRow from "./CANBudgetLineTableRow"; import PaginationNav from "../../UI/PaginationNav"; +import DebugCode from "../../DebugCode"; /** * @typedef {import("../../../components/BudgetLineItems/BudgetLineTypes").BudgetLine} BudgetLine */ @@ -12,6 +13,7 @@ import PaginationNav from "../../UI/PaginationNav"; * @typedef {Object} CANBudgetLineTableProps * @property {BudgetLine[]} budgetLines * @property {number} totalFunding + * @property {number} fiscalYear * @property {'portfolio' | 'can'} [tableType] */ @@ -20,12 +22,16 @@ import PaginationNav from "../../UI/PaginationNav"; * @param {CANBudgetLineTableProps} props * @returns {JSX.Element} - The component JSX. */ -const CANBudgetLineTable = ({ budgetLines, totalFunding, tableType = "can" }) => { +const CANBudgetLineTable = ({ budgetLines, totalFunding, fiscalYear, tableType = "can" }) => { const ITEMS_PER_PAGE = import.meta.env.MODE === "production" ? 25 : 3; const [currentPage, setCurrentPage] = React.useState(1); let visibleBudgetLines = [...budgetLines]; visibleBudgetLines = visibleBudgetLines.slice((currentPage - 1) * ITEMS_PER_PAGE, currentPage * ITEMS_PER_PAGE); + useEffect(() => { + setCurrentPage(1); + }, [fiscalYear]); + if (budgetLines.length === 0) { return

No budget lines have been added to this CAN.

; } @@ -64,6 +70,7 @@ const CANBudgetLineTable = ({ budgetLines, totalFunding, tableType = "can" }) => itemsPerPage={ITEMS_PER_PAGE} /> )} + ); }; diff --git a/frontend/src/components/CANs/CANTable/CANTable.jsx b/frontend/src/components/CANs/CANTable/CANTable.jsx index 8c2ec6af3c..14c3d2bcdd 100644 --- a/frontend/src/components/CANs/CANTable/CANTable.jsx +++ b/frontend/src/components/CANs/CANTable/CANTable.jsx @@ -1,5 +1,5 @@ import PropTypes from "prop-types"; -import React from "react"; +import React, { useEffect } from "react"; import { NO_DATA } from "../../../constants"; import PaginationNav from "../../UI/PaginationNav"; import { findFundingBudgetBudgetByFiscalYear, formatObligateBy } from "./CANTable.helpers"; @@ -22,6 +22,10 @@ const CANTable = ({ cans, fiscalYear }) => { let cansPerPage = [...cans]; cansPerPage = cansPerPage.slice((currentPage - 1) * CANS_PER_PAGE, currentPage * CANS_PER_PAGE); + useEffect(() => { + setCurrentPage(1); + }, [fiscalYear]); + if (cans.length === 0) { return

No CANs found

; } diff --git a/frontend/src/components/Portfolios/PortfolioSpending/PortfolioSpending.jsx b/frontend/src/components/Portfolios/PortfolioSpending/PortfolioSpending.jsx index a99f92bab6..624591ce2d 100644 --- a/frontend/src/components/Portfolios/PortfolioSpending/PortfolioSpending.jsx +++ b/frontend/src/components/Portfolios/PortfolioSpending/PortfolioSpending.jsx @@ -79,6 +79,7 @@ const PortfolioSpending = () => { diff --git a/frontend/src/pages/cans/detail/CanSpending.jsx b/frontend/src/pages/cans/detail/CanSpending.jsx index ff1f61052c..9ba689fb8b 100644 --- a/frontend/src/pages/cans/detail/CanSpending.jsx +++ b/frontend/src/pages/cans/detail/CanSpending.jsx @@ -106,6 +106,7 @@ const CanSpending = ({ ); From f935156a56a88cd2775bb6653138c364eb3d8dad Mon Sep 17 00:00:00 2001 From: weimiao67 Date: Wed, 26 Feb 2025 14:03:36 -0700 Subject: [PATCH 2/4] test: adds e2e test coverage for can list pagination --- frontend/cypress/e2e/canList.cy.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/frontend/cypress/e2e/canList.cy.js b/frontend/cypress/e2e/canList.cy.js index 58c008bbb8..2094d73d81 100644 --- a/frontend/cypress/e2e/canList.cy.js +++ b/frontend/cypress/e2e/canList.cy.js @@ -76,6 +76,16 @@ describe("CAN List", () => { .find("svg") .should("have.attr", "aria-hidden", "true"); + // switch fiscal year to 2025 + cy.get("#fiscal-year-select").select("2025"); + cy.wait(500); + cy.get("tbody").find("tr").should("have.length", 4); + + // switch fiscal year to 2023 + cy.get("#fiscal-year-select").select("2023"); + cy.wait(500); + cy.get("li").should("have.class", "usa-pagination__item").contains("2").click(); + // 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"); From 3dbb69c8f87918839405fc671d9f78acf6a70d88 Mon Sep 17 00:00:00 2001 From: weimiao67 Date: Wed, 26 Feb 2025 22:56:06 -0700 Subject: [PATCH 3/4] chore: removes debug code --- .../components/CANs/CANBudgetLineTable/CANBudgetLineTable.jsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/frontend/src/components/CANs/CANBudgetLineTable/CANBudgetLineTable.jsx b/frontend/src/components/CANs/CANBudgetLineTable/CANBudgetLineTable.jsx index efecb27020..b9d6d0249d 100644 --- a/frontend/src/components/CANs/CANBudgetLineTable/CANBudgetLineTable.jsx +++ b/frontend/src/components/CANs/CANBudgetLineTable/CANBudgetLineTable.jsx @@ -4,7 +4,6 @@ import Table from "../../UI/Table"; import { CAN_HEADERS, PORTFOLIO_HEADERS } from "./CABBudgetLineTable.constants"; import CANBudgetLineTableRow from "./CANBudgetLineTableRow"; import PaginationNav from "../../UI/PaginationNav"; -import DebugCode from "../../DebugCode"; /** * @typedef {import("../../../components/BudgetLineItems/BudgetLineTypes").BudgetLine} BudgetLine */ @@ -70,7 +69,6 @@ const CANBudgetLineTable = ({ budgetLines, totalFunding, fiscalYear, tableType = itemsPerPage={ITEMS_PER_PAGE} /> )} - ); }; From 4d8635bf7521a157d2bfcccad972626c968bb6f4 Mon Sep 17 00:00:00 2001 From: weimiao67 Date: Thu, 27 Feb 2025 09:18:52 -0700 Subject: [PATCH 4/4] chore: fixed linter error --- .../Portfolios/PortfolioSpending/PortfolioSpending.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/Portfolios/PortfolioSpending/PortfolioSpending.jsx b/frontend/src/components/Portfolios/PortfolioSpending/PortfolioSpending.jsx index 7d6a576681..64b587c325 100644 --- a/frontend/src/components/Portfolios/PortfolioSpending/PortfolioSpending.jsx +++ b/frontend/src/components/Portfolios/PortfolioSpending/PortfolioSpending.jsx @@ -89,7 +89,7 @@ const PortfolioSpending = () => {