Merge pull request #5640 from HHS/OPS-5574/add-all-fy-years

feat: add 'All' fiscal year option to CAN list

Author: rajohnson90

frontend/src/api/opsAPI.js

@@ -299,8 +299,10 @@ export const opsApi = createApi({
         getCanFilterOptions: builder.query({
             query: ({ fiscalYear }) => {
                 const queryParams = [];
-                if (fiscalYear) {
-                    queryParams.push(`fiscal_year=${fiscalYear}`);
+                if (fiscalYear && fiscalYear.length > 0) {
+                    fiscalYear.forEach((year) => {
+                        queryParams.push(`fiscal_year=${year}`);
+                    });
                 }
                 const queryString = queryParams.length > 0 ? `?${queryParams.join("&")}` : "";
                 return `/cans-filters/${queryString}`;
@@ -748,8 +750,10 @@ export const opsApi = createApi({
                 budgetMax
             }) => {
                 let queryParams = [];
-                if (fiscalYear) {
-                    queryParams.push(`fiscal_year=${fiscalYear}`);
+                if (fiscalYear && fiscalYear.length > 0) {
+                    fiscalYear.forEach((year) => {
+                        queryParams.push(`fiscal_year=${year}`);
+                    });
                 }
                 if (sortConditions) {
                     queryParams.push(`sort_conditions=${sortConditions}`);

frontend/src/api/opsAPI.test.js

@@ -918,7 +918,7 @@ describe("opsAPI - Wave 2 high-yield endpoint coverage", () => {
         );
 
         const storeRef = setupApiStore(opsApi);
-        await storeRef.store.dispatch(opsApi.endpoints.getCanFilterOptions.initiate({ fiscalYear: 2026 }));
+        await storeRef.store.dispatch(opsApi.endpoints.getCanFilterOptions.initiate({ fiscalYear: [2026] }));
 
         expect(capturedUrl).toContain("fiscal_year=2026");
     });

frontend/src/pages/cans/list/CANFiscalYearSelect/CANFiscalYearSelect.jsx

@@ -13,6 +13,7 @@ const CANFiscalYearSelect = ({ fiscalYear, setSelectedFiscalYear }) => {
         <FiscalYear
             fiscalYear={fiscalYear}
             handleChangeFiscalYear={setSelectedFiscalYear}
+            showAllOption={true}
         />
     );
 };

frontend/src/pages/cans/list/CanList.jsx

@@ -26,7 +26,6 @@ const CanList = () => {
     const navigate = useNavigate();
     const { sortDescending, sortCondition, setSortConditions } = useSetSortConditions();
     const [selectedFiscalYear, setSelectedFiscalYear] = React.useState(getCurrentFiscalYear());
-    const fiscalYear = Number(selectedFiscalYear);
     const [currentPage, setCurrentPage] = React.useState(1); // 1-indexed for UI
     const [pageSize] = React.useState(ITEMS_PER_PAGE);
     const [filters, setFilters] = React.useState({
@@ -37,6 +36,18 @@ const CanList = () => {
         budget: []
     });
 
+    // Determine fiscal year filter - send empty array when "All" is selected
+    const getFiscalYearFilter = () => {
+        if (selectedFiscalYear === "All") {
+            return [];
+        }
+        return [Number(selectedFiscalYear)];
+    };
+
+    const fiscalYearFilter = getFiscalYearFilter();
+    // For components that need a numeric fiscal year (summary cards, display)
+    const fiscalYear = fiscalYearFilter.length > 0 ? fiscalYearFilter[0] : undefined;
+
     // Extract filter values for API
     const activePeriodIds = filters.activePeriod?.map((ap) => ap.id) || [];
     const TRANSFER_METHOD_MAP = Object.fromEntries(
@@ -55,7 +66,7 @@ const CanList = () => {
         isLoading,
         isFetching
     } = useGetCansQuery({
-        fiscalYear: selectedFiscalYear,
+        fiscalYear: fiscalYearFilter,
         sortConditions: sortCondition,
         sortDescending,
         page: currentPage - 1, // Convert to 0-indexed for API
@@ -75,7 +86,7 @@ const CanList = () => {
         isLoading: filterOptionsLoading,
         isFetching: filterOptionsFetching
     } = useGetCanFilterOptionsQuery({
-        fiscalYear: selectedFiscalYear
+        fiscalYear: fiscalYearFilter
     });
 
     // Extract cans array and metadata from wrapped response
@@ -197,7 +208,7 @@ const CanList = () => {
                 SummaryCardsSection={
                     !isTableLoading && (
                         <CANSummaryCards
-                            fiscalYear={fiscalYear}
+                            fiscalYear={selectedFiscalYear === "All" ? "All FYs" : fiscalYear}
                             totalBudget={fundingSummaryData?.funding?.total_funding}
                             newFunding={fundingSummaryData?.funding?.new_funding}
                             carryForward={fundingSummaryData?.funding?.carry_forward_funding}

frontend/src/pages/cans/list/CanList.test.jsx

@@ -1,4 +1,5 @@
-import { render, screen } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { describe, it, expect, beforeEach, vi } from "vitest";
 import CanList from "./CanList";
 import { useGetCanFilterOptionsQuery, useGetCansFundingQuery, useGetCansQuery } from "../../../api/opsAPI";
@@ -38,7 +39,16 @@ vi.mock("./CANFilterTags", () => ({
 }));
 
 vi.mock("./CANFiscalYearSelect", () => ({
-    default: () => <div data-testid="can-fiscal-year-select">FY</div>
+    default: ({ fiscalYear, setSelectedFiscalYear }) => (
+        <select
+            data-testid="can-fiscal-year-select"
+            value={fiscalYear}
+            onChange={(e) => setSelectedFiscalYear(e.target.value)}
+        >
+            <option value={fiscalYear}>{fiscalYear}</option>
+            <option value="All">All</option>
+        </select>
+    )
 }));
 
 vi.mock("../../../components/UI/Table/Table.hooks", () => ({
@@ -109,4 +119,48 @@ describe("CanList", () => {
         expect(screen.getByTestId("can-table")).toBeInTheDocument();
         expect(screen.getByTestId("can-summary-cards")).toBeInTheDocument();
     });
+
+    it("sends empty fiscalYear array when 'All' is selected, resulting in no fiscal_year query param", async () => {
+        const user = userEvent.setup();
+
+        render(<CanList />);
+
+        // Initially, should call with current fiscal year as array
+        expect(useGetCansQuery).toHaveBeenCalledWith(
+            expect.objectContaining({
+                fiscalYear: expect.any(Array)
+            })
+        );
+
+        // Get the initial call's fiscalYear to verify it's not empty
+        const initialCall = useGetCansQuery.mock.calls[0][0];
+        expect(initialCall.fiscalYear).toHaveLength(1);
+
+        // Change fiscal year to "All"
+        const fiscalYearSelect = screen.getByTestId("can-fiscal-year-select");
+        await user.selectOptions(fiscalYearSelect, "All");
+
+        // Wait for the component to re-render with new params
+        await waitFor(() => {
+            // Find the most recent call
+            const calls = useGetCansQuery.mock.calls;
+            const lastCall = calls[calls.length - 1][0];
+
+            // Verify fiscalYear is an empty array (which results in no query param)
+            expect(lastCall.fiscalYear).toEqual([]);
+        });
+
+        // Also verify the filter options query receives empty array
+        await waitFor(() => {
+            const calls = useGetCanFilterOptionsQuery.mock.calls;
+            const lastCall = calls[calls.length - 1][0];
+            expect(lastCall.fiscalYear).toEqual([]);
+        });
+
+        await waitFor(() => {
+            const calls = useGetCansFundingQuery.mock.calls;
+            const lastCall = calls[calls.length - 1][0];
+            expect(lastCall.fiscalYear).toBeUndefined();
+        });
+    });
 });