{
+ const projectTypeOptions = [
+ {
+ id: PROJECT_TYPE_RESEARCH,
+ title: PROJECT_TYPE_LABELS[PROJECT_TYPE_RESEARCH]
+ },
+ {
+ id: PROJECT_TYPE_ADMIN_SUPPORT,
+ title: PROJECT_TYPE_LABELS[PROJECT_TYPE_ADMIN_SUPPORT]
+ }
+ ];
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ )
+}));
+
+vi.mock("../../../../components/Portfolios/PortfoliosComboBox", () => ({
+ default: ({ selectedPortfolios, setSelectedPortfolios }) => (
+
+
+
+
+ )
+}));
+
+vi.mock("../../../../components/Projects/ProjectTitleComboBox", () => ({
+ default: ({ selectedProjects, setSelectedProjects }) => (
+
+
+
+
+ )
+}));
+
+vi.mock("../../../../components/Projects/ProjectTypeComboBox", () => ({
+ default: ({ selectedProjectTypes, setSelectedProjectTypes }) => (
+
+
+
+
+ )
+}));
+
+vi.mock("../../../../components/Agreements/AgreementNameComboBox", () => ({
+ default: ({ selectedAgreementNames, setSelectedAgreementNames }) => (
+
+
+
+
+ )
+}));
+
+// Mock react-modal
+vi.mock("react-modal", () => {
+ const Modal = ({ isOpen, children }) => (isOpen ? {children}
: null);
+ Modal.setAppElement = vi.fn();
+ return {
+ default: Modal
+ };
+});
+
+// Mock ResizeObserver
+class ResizeObserver {
+ observe() {}
+ unobserve() {}
+ disconnect() {}
+}
+
+window.ResizeObserver = ResizeObserver;
+
+describe("ProjectFilterButton", () => {
+ const mockSetFilters = vi.fn();
+
+ const defaultFilters = {
+ fiscalYear: [],
+ portfolio: [],
+ projectSearch: [],
+ agreementSearch: [],
+ projectType: []
+ };
+
+ const mockProjectFilterOptions = {
+ fiscal_years: [2023, 2024, 2025],
+ portfolios: [
+ { id: 1, name: "Portfolio A" },
+ { id: 2, name: "Portfolio B" }
+ ],
+ agreement_names: ["Agreement 1", "Agreement 2"]
+ };
+
+ // Create a simple mock store without RTK Query middleware
+ const mockStore = configureStore({
+ reducer: {
+ userSlice: (state = { activeUser: { id: 1, roles: [] } }) => state
+ }
+ });
+
+ // Helper to render with Router and Redux context
+ const renderWithRouter = (ui) => {
+ return render(
+
+ {ui}
+
+ );
+ };
+
+ beforeEach(() => {
+ mockSetFilters.mockClear();
+ });
+
+ it("should render the filter button", () => {
+ renderWithRouter(
+
+ );
+
+ expect(screen.getByText("Filters")).toBeInTheDocument();
+ });
+
+ it("should open modal when filter button is clicked", async () => {
+ const user = userEvent.setup();
+ renderWithRouter(
+
+ );
+
+ const filterButton = screen.getByText("Filters");
+ await user.click(filterButton);
+
+ await waitFor(() => {
+ expect(screen.getByTestId("modal")).toBeInTheDocument();
+ });
+ });
+
+ it("should display all five filter fieldsets in modal", async () => {
+ const user = userEvent.setup();
+ renderWithRouter(
+
+ );
+
+ const filterButton = screen.getByText("Filters");
+ await user.click(filterButton);
+
+ await waitFor(() => {
+ expect(screen.getByTestId("fiscal-year-combobox")).toBeInTheDocument();
+ });
+
+ expect(screen.getByTestId("portfolios-combobox")).toBeInTheDocument();
+ expect(screen.getByTestId("project-title-combobox")).toBeInTheDocument();
+ expect(screen.getByTestId("project-type-combobox")).toBeInTheDocument();
+ expect(screen.getByTestId("agreement-name-combobox")).toBeInTheDocument();
+ });
+
+ it("should display Apply and Reset buttons in modal", async () => {
+ const user = userEvent.setup();
+ renderWithRouter(
+
+ );
+
+ const filterButton = screen.getByText("Filters");
+ await user.click(filterButton);
+
+ await waitFor(() => {
+ expect(screen.getByRole("button", { name: /apply/i })).toBeInTheDocument();
+ });
+
+ expect(screen.getByRole("button", { name: /reset/i })).toBeInTheDocument();
+ });
+
+ it("should call setFilters when Apply is clicked", async () => {
+ const user = userEvent.setup();
+ renderWithRouter(
+
+ );
+
+ const filterButton = screen.getByText("Filters");
+ await user.click(filterButton);
+
+ await waitFor(() => {
+ expect(screen.getByRole("button", { name: /apply/i })).toBeInTheDocument();
+ });
+
+ const applyButton = screen.getByRole("button", { name: /apply/i });
+ await user.click(applyButton);
+
+ expect(mockSetFilters).toHaveBeenCalled();
+ });
+
+ it("should reset filters when Reset is clicked", async () => {
+ const user = userEvent.setup();
+ const filtersWithSelections = {
+ fiscalYear: [{ id: 2023, title: "2023" }],
+ portfolio: [{ id: 1, name: "Portfolio A" }],
+ projectSearch: [{ title: "Project Alpha" }],
+ agreementSearch: [{ title: "Agreement 1" }],
+ projectType: [{ title: "RESEARCH" }]
+ };
+
+ renderWithRouter(
+
+ );
+
+ const filterButton = screen.getByText("Filters");
+ await user.click(filterButton);
+
+ await waitFor(() => {
+ expect(screen.getByRole("button", { name: /reset/i })).toBeInTheDocument();
+ });
+
+ const resetButton = screen.getByRole("button", { name: /reset/i });
+ await user.click(resetButton);
+
+ expect(mockSetFilters).toHaveBeenCalledWith({
+ fiscalYear: [],
+ portfolio: [],
+ projectSearch: [],
+ agreementSearch: [],
+ projectType: []
+ });
+ });
+
+ it("should close modal when Apply is clicked", async () => {
+ const user = userEvent.setup();
+ renderWithRouter(
+
+ );
+
+ const filterButton = screen.getByText("Filters");
+ await user.click(filterButton);
+
+ await waitFor(() => {
+ expect(screen.getByTestId("modal")).toBeInTheDocument();
+ });
+
+ const applyButton = screen.getByRole("button", { name: /apply/i });
+ await user.click(applyButton);
+
+ await waitFor(() => {
+ expect(screen.queryByTestId("modal")).not.toBeInTheDocument();
+ });
+ });
+
+ it("should sync state with filters prop via useEffect", async () => {
+ const { rerender } = renderWithRouter(
+
+ );
+
+ const updatedFilters = {
+ fiscalYear: [{ id: 2023, title: "2023" }],
+ portfolio: [{ id: 1, name: "Portfolio A" }],
+ projectSearch: [{ title: "Project Alpha" }],
+ agreementSearch: [{ title: "Agreement 1" }],
+ projectType: [{ title: "RESEARCH" }]
+ };
+
+ rerender(
+
+ );
+
+ // Internal state should sync with updated filters
+ expect(screen.getByText("Filters")).toBeInTheDocument();
+ });
+
+ it("should handle loading state for filter options", () => {
+ renderWithRouter(
+
+ );
+
+ expect(screen.getByText("Filters")).toBeInTheDocument();
+ });
+
+ it("should handle empty filter options", () => {
+ const emptyOptions = {
+ fiscal_years: [],
+ portfolios: [],
+ agreement_names: []
+ };
+
+ renderWithRouter(
+
+ );
+
+ expect(screen.getByText("Filters")).toBeInTheDocument();
+ });
+
+ it("should handle undefined filter options", () => {
+ renderWithRouter(
+
+ );
+
+ expect(screen.getByText("Filters")).toBeInTheDocument();
+ });
+
+ it("should display correct filter labels", async () => {
+ const user = userEvent.setup();
+ renderWithRouter(
+
+ );
+
+ const filterButton = screen.getByText("Filters");
+ await user.click(filterButton);
+
+ await waitFor(() => {
+ expect(screen.getByText("Compare Fiscal Years")).toBeInTheDocument();
+ });
+
+ expect(screen.getByText("Portfolio")).toBeInTheDocument();
+ expect(screen.getByText("Project Title")).toBeInTheDocument();
+ expect(screen.getByText("Project Type")).toBeInTheDocument();
+ expect(screen.getByText("Agreement Title")).toBeInTheDocument();
+ });
+});
diff --git a/frontend/src/pages/projects/list/ProjectFilterButton/ProjectFilterTypes.d.ts b/frontend/src/pages/projects/list/ProjectFilterButton/ProjectFilterTypes.d.ts
new file mode 100644
index 0000000000..b05af23496
--- /dev/null
+++ b/frontend/src/pages/projects/list/ProjectFilterButton/ProjectFilterTypes.d.ts
@@ -0,0 +1,13 @@
+export type FilterOption = {
+ id: number | string;
+ title: string;
+ name?: string;
+};
+
+export type Filters = {
+ fiscalYear?: FilterOption[];
+ portfolio?: FilterOption[];
+ projectSearch?: FilterOption[];
+ agreementSearch?: FilterOption[];
+ projectType?: FilterOption[];
+};
diff --git a/frontend/src/pages/projects/list/ProjectFilterTags/ProjectFilterTags.hooks.js b/frontend/src/pages/projects/list/ProjectFilterTags/ProjectFilterTags.hooks.js
new file mode 100644
index 0000000000..c7244ff566
--- /dev/null
+++ b/frontend/src/pages/projects/list/ProjectFilterTags/ProjectFilterTags.hooks.js
@@ -0,0 +1,79 @@
+import { useMemo } from "react";
+
+/**
+ * @typedef {import("../ProjectFilterButton/ProjectFilterTypes.d.ts").Filters} Filters
+ */
+
+/**
+ * @typedef {Object} Tag
+ * @property {string} tagText
+ * @property {string} filter
+ */
+
+/**
+ * Custom hook for managing tags list
+ * @param {Filters} filters
+ * @returns {Tag[]}
+ */
+export const useTagsList = (filters) => {
+ const tagsList = useMemo(() => {
+ // Map each filter key to the property name we need to extract
+ const propertyMap = {
+ portfolio: "name",
+ fiscalYear: "title",
+ projectSearch: "title",
+ agreementSearch: "title",
+ projectType: "title"
+ };
+
+ // Transform all filters into tags in one pass
+ return Object.entries(propertyMap).flatMap(([filterKey, propertyName]) =>
+ (filters[filterKey] ?? []).map((item) => ({
+ tagText: item[propertyName],
+ filter: filterKey
+ }))
+ );
+ }, [filters]);
+
+ return tagsList;
+};
+
+/**
+ * Removes a filter tag
+ * @param {Tag} tag - The tag to remove
+ * @param {function(function(Filters): Filters): void} setFilters - Function to update filters
+ */
+export const removeFilter = (tag, setFilters) => {
+ switch (tag.filter) {
+ case "fiscalYear":
+ setFilters((prevState) => ({
+ ...prevState,
+ fiscalYear: prevState.fiscalYear.filter((fiscalYear) => fiscalYear.title !== tag.tagText)
+ }));
+ break;
+ case "portfolio":
+ setFilters((prevState) => ({
+ ...prevState,
+ portfolio: prevState.portfolio.filter((portfolio) => portfolio.name !== tag.tagText)
+ }));
+ break;
+ case "projectSearch":
+ setFilters((prevState) => ({
+ ...prevState,
+ projectSearch: prevState.projectSearch.filter((project) => project.title !== tag.tagText)
+ }));
+ break;
+ case "agreementSearch":
+ setFilters((prevState) => ({
+ ...prevState,
+ agreementSearch: prevState.agreementSearch.filter((agreement) => agreement.title !== tag.tagText)
+ }));
+ break;
+ case "projectType":
+ setFilters((prevState) => ({
+ ...prevState,
+ projectType: prevState.projectType.filter((type) => type.title !== tag.tagText)
+ }));
+ break;
+ }
+};
diff --git a/frontend/src/pages/projects/list/ProjectFilterTags/ProjectFilterTags.jsx b/frontend/src/pages/projects/list/ProjectFilterTags/ProjectFilterTags.jsx
new file mode 100644
index 0000000000..23f5351d99
--- /dev/null
+++ b/frontend/src/pages/projects/list/ProjectFilterTags/ProjectFilterTags.jsx
@@ -0,0 +1,29 @@
+import { isEmpty, groupBy } from "lodash";
+import FilterTags from "../../../../components/UI/FilterTags/FilterTags";
+import FilterTagsWrapper from "../../../../components/UI/FilterTags/FilterTagsWrapper";
+import { removeFilter, useTagsList } from "./ProjectFilterTags.hooks";
+/**
+ * A filter tags component for projects.
+ * @param {Object} props - The component props.
+ * @param {import("./ProjectFilterTags.hooks").Filters} props.filters - The current filters.
+ * @param {Function} props.setFilters - A function to call to set the filters.
+ * @returns {JSX.Element} - The project filter tags element.
+ */
+export const ProjectFilterTags = ({ filters, setFilters }) => {
+ const tagsList = useTagsList(filters);
+
+ const tagsListByFilter = groupBy(tagsList, "filter");
+ const tagsListByFilterMerged = Object.values(tagsListByFilter).flat();
+
+ return (
+ !isEmpty(tagsList) && (
+
+ removeFilter(tag, setFilters)}
+ tagsList={tagsListByFilterMerged}
+ />
+
+ )
+ );
+};
+export default ProjectFilterTags;
diff --git a/frontend/src/pages/projects/list/ProjectFilterTags/ProjectFilterTags.test.jsx b/frontend/src/pages/projects/list/ProjectFilterTags/ProjectFilterTags.test.jsx
new file mode 100644
index 0000000000..3bdd70c0d9
--- /dev/null
+++ b/frontend/src/pages/projects/list/ProjectFilterTags/ProjectFilterTags.test.jsx
@@ -0,0 +1,286 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import ProjectFilterTags from "./ProjectFilterTags";
+
+describe("ProjectFilterTags", () => {
+ const mockSetFilters = vi.fn();
+
+ const mockFilters = {
+ fiscalYear: [],
+ portfolio: [],
+ projectSearch: [],
+ agreementSearch: [],
+ projectType: []
+ };
+
+ beforeEach(() => {
+ mockSetFilters.mockClear();
+ });
+
+ it("should not render when no filters are active", () => {
+ render(
+
+ );
+
+ // Should render nothing when no filters are active
+ expect(screen.queryByRole("button")).not.toBeInTheDocument();
+ });
+
+ it("should render fiscal year filter tags", () => {
+ const filtersWithFY = {
+ ...mockFilters,
+ fiscalYear: [
+ { id: 2023, title: "FY 2023" },
+ { id: 2024, title: "FY 2024" }
+ ]
+ };
+
+ render(
+
+ );
+
+ expect(screen.getByText("FY 2023")).toBeInTheDocument();
+ expect(screen.getByText("FY 2024")).toBeInTheDocument();
+ });
+
+ it("should render portfolio filter tags", () => {
+ const filtersWithPortfolio = {
+ ...mockFilters,
+ portfolio: [
+ { id: 1, name: "Portfolio A" },
+ { id: 2, name: "Portfolio B" }
+ ]
+ };
+
+ render(
+
+ );
+
+ expect(screen.getByText("Portfolio A")).toBeInTheDocument();
+ expect(screen.getByText("Portfolio B")).toBeInTheDocument();
+ });
+
+ it("should render project search filter tags", () => {
+ const filtersWithProjects = {
+ ...mockFilters,
+ projectSearch: [{ title: "Project Alpha" }, { title: "Project Beta" }]
+ };
+
+ render(
+
+ );
+
+ expect(screen.getByText("Project Alpha")).toBeInTheDocument();
+ expect(screen.getByText("Project Beta")).toBeInTheDocument();
+ });
+
+ it("should render agreement search filter tags", () => {
+ const filtersWithAgreements = {
+ ...mockFilters,
+ agreementSearch: [{ title: "Agreement 1" }, { title: "Agreement 2" }]
+ };
+
+ render(
+
+ );
+
+ expect(screen.getByText("Agreement 1")).toBeInTheDocument();
+ expect(screen.getByText("Agreement 2")).toBeInTheDocument();
+ });
+
+ it("should render project type filter tags", () => {
+ const filtersWithTypes = {
+ ...mockFilters,
+ projectType: [{ title: "RESEARCH" }, { title: "ADMINISTRATIVE_AND_SUPPORT" }]
+ };
+
+ render(
+
+ );
+
+ expect(screen.getByText("RESEARCH")).toBeInTheDocument();
+ expect(screen.getByText("ADMINISTRATIVE_AND_SUPPORT")).toBeInTheDocument();
+ });
+
+ it("should render all filter types together", () => {
+ const allFilters = {
+ fiscalYear: [{ id: 2023, title: "FY 2023" }],
+ portfolio: [{ id: 1, name: "Portfolio A" }],
+ projectSearch: [{ title: "Project Alpha" }],
+ agreementSearch: [{ title: "Agreement 1" }],
+ projectType: [{ title: "RESEARCH" }]
+ };
+
+ render(
+
+ );
+
+ expect(screen.getByText("FY 2023")).toBeInTheDocument();
+ expect(screen.getByText("Portfolio A")).toBeInTheDocument();
+ expect(screen.getByText("Project Alpha")).toBeInTheDocument();
+ expect(screen.getByText("Agreement 1")).toBeInTheDocument();
+ expect(screen.getByText("RESEARCH")).toBeInTheDocument();
+ });
+
+ it("should remove fiscal year filter when tag is clicked", async () => {
+ const user = userEvent.setup();
+ const filtersWithFY = {
+ ...mockFilters,
+ fiscalYear: [
+ { id: 2023, title: "FY 2023" },
+ { id: 2024, title: "FY 2024" }
+ ]
+ };
+
+ render(
+
+ );
+
+ const fy2023Icon = screen.getByLabelText("Remove FY 2023 filter");
+ await user.click(fy2023Icon);
+
+ expect(mockSetFilters).toHaveBeenCalled();
+ });
+
+ it("should remove portfolio filter when tag is clicked", async () => {
+ const user = userEvent.setup();
+ const filtersWithPortfolio = {
+ ...mockFilters,
+ portfolio: [
+ { id: 1, name: "Portfolio A" },
+ { id: 2, name: "Portfolio B" }
+ ]
+ };
+
+ render(
+
+ );
+
+ const portfolioAIcon = screen.getByLabelText("Remove Portfolio A filter");
+ await user.click(portfolioAIcon);
+
+ expect(mockSetFilters).toHaveBeenCalled();
+ });
+
+ it("should remove project search filter when tag is clicked", async () => {
+ const user = userEvent.setup();
+ const filtersWithProjects = {
+ ...mockFilters,
+ projectSearch: [{ title: "Project Alpha" }]
+ };
+
+ render(
+
+ );
+
+ const projectIcon = screen.getByLabelText("Remove Project Alpha filter");
+ await user.click(projectIcon);
+
+ expect(mockSetFilters).toHaveBeenCalled();
+ });
+
+ it("should remove agreement search filter when tag is clicked", async () => {
+ const user = userEvent.setup();
+ const filtersWithAgreements = {
+ ...mockFilters,
+ agreementSearch: [{ title: "Agreement 1" }]
+ };
+
+ render(
+
+ );
+
+ const agreementIcon = screen.getByLabelText("Remove Agreement 1 filter");
+ await user.click(agreementIcon);
+
+ expect(mockSetFilters).toHaveBeenCalled();
+ });
+
+ it("should remove project type filter when tag is clicked", async () => {
+ const user = userEvent.setup();
+ const filtersWithTypes = {
+ ...mockFilters,
+ projectType: [{ title: "RESEARCH" }]
+ };
+
+ render(
+
+ );
+
+ const typeIcon = screen.getByLabelText("Remove RESEARCH filter");
+ await user.click(typeIcon);
+
+ expect(mockSetFilters).toHaveBeenCalled();
+ });
+
+ it("should handle multiple tags of same filter type", () => {
+ const filtersWithMultiple = {
+ ...mockFilters,
+ fiscalYear: [
+ { id: 2023, title: "FY 2023" },
+ { id: 2024, title: "FY 2024" },
+ { id: 2025, title: "FY 2025" }
+ ]
+ };
+
+ render(
+
+ );
+
+ expect(screen.getByText("FY 2023")).toBeInTheDocument();
+ expect(screen.getByText("FY 2024")).toBeInTheDocument();
+ expect(screen.getByText("FY 2025")).toBeInTheDocument();
+ });
+
+ it("should handle empty arrays for all filter types", () => {
+ render(
+
+ );
+
+ // Should not render any tags
+ expect(screen.queryByRole("button")).not.toBeInTheDocument();
+ });
+});
diff --git a/frontend/src/pages/projects/list/ProjectsList.jsx b/frontend/src/pages/projects/list/ProjectsList.jsx
index 586b3235df..6c95287f3c 100644
--- a/frontend/src/pages/projects/list/ProjectsList.jsx
+++ b/frontend/src/pages/projects/list/ProjectsList.jsx
@@ -1,7 +1,7 @@
import React from "react";
import { useNavigate } from "react-router-dom";
import { PacmanLoader } from "react-spinners";
-import { useGetProjectsQuery, useLazyGetProjectsQuery } from "../../../api/opsAPI";
+import { useGetProjectsQuery, useLazyGetProjectsQuery, useGetProjectsFilterOptionsQuery } from "../../../api/opsAPI";
import App from "../../../App";
import DebugCode from "../../../components/DebugCode";
import TablePageLayout from "../../../components/Layouts/TablePageLayout";
@@ -17,6 +17,8 @@ import { getCurrentFiscalYear } from "../../../helpers/utils";
import useAlert from "../../../hooks/use-alert.hooks";
import icons from "../../../uswds/img/sprite.svg";
import { handleProjectsExport, PROJECT_SORT_CODES } from "./ProjectsList.helpers";
+import ProjectFilterButton from "./ProjectFilterButton/ProjectFilterButton";
+import ProjectFilterTags from "./ProjectFilterTags/ProjectFilterTags";
/**
* Page component for the projects list with server-side pagination, sorting, and fiscal year filtering.
@@ -31,6 +33,15 @@ const ProjectsList = () => {
const { setAlert } = useAlert();
const [getAllProjectsTrigger] = useLazyGetProjectsQuery();
const { sortDescending, sortCondition, setSortConditions } = useSetSortConditions(PROJECT_SORT_CODES.TITLE, false);
+ const [filters, setFilters] = React.useState({
+ fiscalYear: [],
+ portfolio: [],
+ projectSearch: [],
+ agreementSearch: [],
+ projectType: []
+ });
+
+ const { data: projectFilterOptions, isLoading: isLoadingProjectFilterOptions } = useGetProjectsFilterOptionsQuery();
const {
data: projectsResponse,
@@ -38,6 +49,9 @@ const ProjectsList = () => {
isFetching,
isError
} = useGetProjectsQuery({
+ filters: {
+ ...filters
+ },
sortConditions: sortCondition,
sortDescending,
page: currentPage - 1,
@@ -113,37 +127,55 @@ const ProjectsList = () => {
title="Projects"
subtitle="All Projects"
details="This is a list of all projects across OPRE for the selected fiscal year. Draft budget lines are not included in the Totals."
+ FilterTags={
+
+ }
FilterButton={
-
- {totalCount > 0 && (
-
- )}
-
+ <>
+
+
+ {totalCount > 0 && (
+
+ )}
+
+
+