Merge pull request #2934 from HHS/OPS-347/ux_feedback

style: 💅 UX Review fixes
HHS · Oct 16, 2024 · 7f7fbb9 · 7f7fbb9
2 parents 717d33a + 1ad8bfb
commit 7f7fbb9
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 42 deletions.
diff --git a/frontend/cypress/e2e/canList.cy.js b/frontend/cypress/e2e/canList.cy.js
@@ -73,13 +73,11 @@ describe("CAN List", () => {
 
         cy.get("span").contains("1 Year").should("exist");
         cy.get("span").contains("Direct").should("exist");
-        cy.get("span").contains("HMRF").should("exist");
-
-        // check that the table is filtered correctly
-        // table should contain 6 rows
-
-        cy.get("tbody").find("tr").should("have.length", 3);
+        cy.get("span").contains("Child Care (CC)").should("exist");
 
+        // No CANs found
+        cy.get("tbody").should("not.exist");
+        cy.get("p.text-center").contains("No CANs found").should("exist");
         // reset
         cy.get("button").contains("Filter").click();
         cy.get("button").contains("Reset").click();

diff --git a/frontend/src/components/UI/FilterTags/FilterTags.jsx b/frontend/src/components/UI/FilterTags/FilterTags.jsx
@@ -2,26 +2,42 @@ import icons from "../../../uswds/img/sprite.svg";
 import Tag from "../Tag";
 
 /**
- * A filter tags.
+ * @typedef {Object} Tag
+ * @property {string} filter - The filter associated with the tag
+ * @property {string} tagText - The text displayed on the tag
+ */
+
+/**
+ * @description - A component to display a filter tag.
+ * @component
+ * @param {Object} props - The component props.
+ * @param {Tag} props.tag - The tag to display.
+ * @param {Function} props.removeFilter - A function to call to remove the 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 text-brand-primary-dark display-flex flex-align-center">
+        {tag.tagText}
+        <svg
+            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>
+    </Tag>
+);
+
+/**
+ * @description -  A component to display filter tags.
+ * @component
  * @param {Object} props - The component props.
  * @param {Function} props.removeFilter - A function to call to remove a filter/tag.
- * @param {string[]} props.tagsList - An array of tags to display.
+ * @param {Tag[]} props.tagsList - An array of tags to display.
  * @returns {JSX.Element} - The filter tags component. (Pills with an 'x' to remove them)
  */
-export const FilterTags = ({ removeFilter, tagsList }) => {
-    const FilterTag = ({ tag }) => (
-        <Tag className="bg-brand-primary-light display-flex flex-align-center">
-            {tag.tagText}
-            <svg
-                className="height-2 width-2 text-primary-dark margin-left-05 cursor-pointer"
-                onClick={() => removeFilter(tag)}
-                id={`filter-tag-${tag.filter}`}
-            >
-                <use xlinkHref={`${icons}#cancel`}></use>
-            </svg>
-        </Tag>
-    );
-
+const FilterTags = ({ tagsList, removeFilter }) => {
     return (
         <div className="display-flex flex-align-center flex-wrap">
             {tagsList.map((tag, index) => {
@@ -30,7 +46,10 @@ export const FilterTags = ({ removeFilter, tagsList }) => {
                         key={index}
                         className="padding-right-205 padding-top-05"
                     >
-                        <FilterTag tag={tag} />
+                        <FilterTag
+                            tag={tag}
+                            removeFilter={removeFilter}
+                        />
                     </span>
                 );
             })}

diff --git a/frontend/src/constants.js b/frontend/src/constants.js
@@ -6,7 +6,7 @@ const constants = {
         const currentYear = currentDate.getFullYear();
         const currentFiscalYear = currentMonth >= 9 ? currentYear + 1 : currentYear;
         const years = [];
-        for (let i = currentFiscalYear - 5; i <= currentFiscalYear + 5; i++) {
+        for (let i = currentFiscalYear + 5; i >= currentFiscalYear - 5; i--) {
             years.push(i);
         }
         return years;

diff --git a/frontend/src/pages/cans/list/CANFilterButton/CANFiilterButton.jsx b/frontend/src/pages/cans/list/CANFilterButton/CANFiilterButton.jsx
@@ -31,7 +31,7 @@ export const CANFilterButton = ({ filters, setFilters, portfolioOptions }) => {
                 activePeriod={activePeriod}
                 setActivePeriod={setActivePeriod}
                 legendClassname={legendStyles}
-                overrideStyles={{ width: "187px" }}
+                overrideStyles={{ width: "22.7rem" }}
             />
         </fieldset>,
         <fieldset
@@ -42,7 +42,7 @@ export const CANFilterButton = ({ filters, setFilters, portfolioOptions }) => {
                 transfer={transfer}
                 setTransfer={setTransfer}
                 legendClassname={legendStyles}
-                overrideStyles={{ width: "187px" }}
+                overrideStyles={{ width: "22.7rem" }}
             />
         </fieldset>,
         <fieldset
@@ -54,7 +54,7 @@ export const CANFilterButton = ({ filters, setFilters, portfolioOptions }) => {
                 setPortfolio={setPortfolio}
                 portfolioOptions={portfolioOptions}
                 legendClassname={legendStyles}
-                overrideStyles={{ width: "187px" }}
+                overrideStyles={{ width: "22.7rem" }}
             />
         </fieldset>
     ];

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.abbreviation)
+            filters.portfolio?.some(
+                (portfolio) => portfolio.title == `${can.portfolio.name} (${can.portfolio.abbreviation})`
+            )
         );
     }
     // TODO: Add other filters here
@@ -113,12 +115,14 @@ export const getPortfolioOptions = (cans) => {
         return [];
     }
     const portfolios = cans.reduce((acc, can) => {
-        acc.add(can.portfolio.abbreviation);
+        acc.add(`${can.portfolio.name} (${can.portfolio.abbreviation})`);
         return acc;
     }, new Set());
 
-    return Array.from(portfolios).map((portfolio, index) => ({
-        id: index,
-        title: portfolio
-    }));
+    return Array.from(portfolios)
+        .sort((a, b) => a.localeCompare(b))
+        .map((portfolio, index) => ({
+            id: index,
+            title: portfolio
+        }));
 };
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);