style: 💅 UX Review fixes

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("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();

frontend/src/components/UI/FilterTags/FilterTags.jsx

@@ -2,26 +2,41 @@ 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 display-flex flex-align-center">
+        {tag.tagText}
+        <svg
+            className="height-2 width-2 text-brand-primary-dark margin-left-05 cursor-pointer"
+            onClick={() => removeFilter(tag)}
+            id={`filter-tag-${tag.filter}`}
+        >
+            <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 +45,10 @@ export const FilterTags = ({ removeFilter, tagsList }) => {
                         key={index}
                         className="padding-right-205 padding-top-05"
                     >
-                        <FilterTag tag={tag} />
+                        <FilterTag
+                            tag={tag}
+                            removeFilter={removeFilter}
+                        />
                     </span>
                 );
             })}

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;

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>
     ];

frontend/src/pages/cans/list/CanList.helpers.js

@@ -117,8 +117,10 @@ export const getPortfolioOptions = (cans) => {
         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
+        }));
 };