style: moar UX feedback

HHS · Oct 15, 2024 · 1ad8bfb · 1ad8bfb
1 parent dfbcd53
commit 1ad8bfb
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 14 deletions.
diff --git a/frontend/cypress/e2e/canList.cy.js b/frontend/cypress/e2e/canList.cy.js
@@ -73,7 +73,7 @@ describe("CAN List", () => {
 
         cy.get("span").contains("1 Year").should("exist");
         cy.get("span").contains("Direct").should("exist");
-        cy.get("span").contains("CC").should("exist");
+        cy.get("span").contains("Child Care (CC)").should("exist");
 
         // No CANs found
         cy.get("tbody").should("not.exist");

diff --git a/frontend/src/components/UI/FilterTags/FilterTags.jsx b/frontend/src/components/UI/FilterTags/FilterTags.jsx
@@ -16,12 +16,13 @@ import Tag from "../Tag";
  * @returns {JSX.Element} - The filter tag component. (A pill with an 'x' to remove it)
  */
 const FilterTag = ({ tag, removeFilter }) => (
-    <Tag className="bg-brand-primary-light display-flex flex-align-center">
+    <Tag className="bg-brand-primary-light text-brand-primary-dark display-flex flex-align-center">
         {tag.tagText}
         <svg
-            className="height-2 width-2 text-brand-primary-dark margin-left-05 cursor-pointer"
+            className="height-2 width-2 margin-left-05 cursor-pointer"
             onClick={() => removeFilter(tag)}
             id={`filter-tag-${tag.filter}`}
+            style={{ fill: "currentColor" }}
         >
             <use xlinkHref={`${icons}#cancel`}></use>
         </svg>

diff --git a/frontend/src/pages/cans/list/CanList.helpers.js b/frontend/src/pages/cans/list/CanList.helpers.js
@@ -89,7 +89,9 @@ const applyAdditionalFilters = (cans, filters) => {
     }
     if (filters.portfolio && filters.portfolio.length > 0) {
         filteredCANs = filteredCANs.filter((can) =>
-            filters.portfolio?.some((portfolio) => portfolio.title.toUpperCase() === can.portfolio.name.toUpperCase())
+            filters.portfolio?.some(
+                (portfolio) => portfolio.title == `${can.portfolio.name} (${can.portfolio.abbreviation})`
+            )
         );
     }
     // TODO: Add other filters here
@@ -113,7 +115,7 @@ export const getPortfolioOptions = (cans) => {
         return [];
     }
     const portfolios = cans.reduce((acc, can) => {
-        acc.add(can.portfolio.name);
+        acc.add(`${can.portfolio.name} (${can.portfolio.abbreviation})`);
         return acc;
     }, new Set());
 

diff --git a/frontend/src/pages/cans/list/CanList.helpers.test.js b/frontend/src/pages/cans/list/CanList.helpers.test.js
@@ -139,40 +139,42 @@ describe("Portfolio filtering and options", () => {
         {
             id: 1,
             obligate_by: "2023-12-31",
-            portfolio: { division_id: 1, abbreviation: "ABC" },
+            portfolio: { division_id: 1, name: "Portfolio A", abbreviation: "ABC" },
             budget_line_items: [{ team_members: [{ id: 1 }] }],
             active_period: 1
         },
         {
             id: 2,
             obligate_by: "2023-11-30",
-            portfolio: { division_id: 2, abbreviation: "XYZ" },
+            portfolio: { division_id: 2, name: "Portfolio X", abbreviation: "XYZ" },
             budget_line_items: [],
             active_period: 2
         },
         {
             id: 3,
             obligate_by: "2023-10-31",
-            portfolio: { division_id: 1, abbreviation: "ABC" },
+            portfolio: { division_id: 1, name: "Portfolio A", abbreviation: "ABC" },
             budget_line_items: [{ team_members: [{ id: 2 }] }],
             active_period: 1
         }
     ];
 
     it("should filter CANs by portfolio", () => {
         const filtersWithPortfolio = {
-            portfolio: [{ id: 1, title: "ABC" }]
+            portfolio: [{ id: 1, title: "Portfolio A (ABC)" }]
         };
         const result = sortAndFilterCANs(mockCANsWithPortfolios, false, mockUser, filtersWithPortfolio);
         expect(result.length).toBe(2);
-        expect(result.every((can) => can.portfolio.abbreviation === "ABC")).toBe(true);
+        expect(
+            result.every((can) => can.portfolio.name === "Portfolio A" && can.portfolio.abbreviation === "ABC")
+        ).toBe(true);
     });
 
     it("should return unique portfolio options", () => {
         const portfolioOptions = getPortfolioOptions(mockCANsWithPortfolios);
         expect(portfolioOptions).toEqual([
-            { id: 0, title: "ABC" },
-            { id: 1, title: "XYZ" }
+            { id: 0, title: "Portfolio A (ABC)" },
+            { id: 1, title: "Portfolio X (XYZ)" }
         ]);
     });
 
@@ -184,8 +186,8 @@ describe("Portfolio filtering and options", () => {
     it("should handle multiple portfolios in filter", () => {
         const filtersWithMultiplePortfolios = {
             portfolio: [
-                { id: 1, title: "ABC" },
-                { id: 2, title: "XYZ" }
+                { id: 1, title: "Portfolio A (ABC)" },
+                { id: 2, title: "Portfolio X (XYZ)" }
             ]
         };
         const result = sortAndFilterCANs(mockCANsWithPortfolios, false, mockUser, filtersWithMultiplePortfolios);