fix(ui): add local storage to filters

react-app/src/components/Layout/index.tsx

@@ -13,6 +13,7 @@ import { ScrollToTop, SimplePageContainer, UserPrompt, Banner } from "@/componen
 import { isFaqPage, isProd } from "@/utils";
 import MMDLAlertBanner from "@/components/Banner/MMDLSpaBanner";
 import { UserRoles } from "shared-types";
+import { FILTER_STORAGE_KEY } from "../Opensearch/main/Filtering/Drawer";
 /**
  * Custom hook that generates a list of navigation links based on the user's status and whether the current page is the FAQ page.
  *
@@ -81,6 +82,8 @@ const UserDropdownMenu = () => {
   };
 
   const handleLogout = async () => {
+    // removing any filtering user may have on the dashboard
+    localStorage.removeItem(FILTER_STORAGE_KEY);
     await Auth.signOut();
   };
 

react-app/src/components/Opensearch/main/Filtering/Chipbar/index.tsx

@@ -6,6 +6,7 @@ import { useFilterDrawerContext } from "../FilterProvider";
 import { useLabelMapping } from "@/hooks";
 import { UTCDate } from "@date-fns/utc";
 import { format } from "date-fns";
+import { FILTER_STORAGE_KEY } from "../Drawer";
 
 export const DATE_FORMAT = "M/d/yyyy";
 export interface RenderProp {
@@ -94,6 +95,11 @@ export const FilterChips: FC = () => {
         filters = filters.filter((f) => f.field !== filter.field);
       }
 
+      localStorage.setItem(
+        FILTER_STORAGE_KEY,
+        JSON.stringify({ filters: filters, tab: url.state.tab }),
+      );
+
       return {
         ...s,
         filters: filters,
@@ -102,12 +108,14 @@ export const FilterChips: FC = () => {
     });
   };
 
-  const handleChipClick = () =>
+  const handleChipClick = () => {
+    localStorage.removeItem(FILTER_STORAGE_KEY);
     url.onSet((s) => ({
       ...s,
       filters: [],
       pagination: { ...s.pagination, number: 0 },
     }));
+  };
 
   return (
     <div

react-app/src/components/Opensearch/main/Filtering/Drawer/Filterable/DateRange.tsx

@@ -125,17 +125,19 @@ export function FilterableDateRange({ value, onChange, ...props }: Props) {
           side="left"
           sideOffset={1}
         >
-          <Calendar
-            disabled={disableDates}
-            initialFocus
-            mode="range"
-            defaultMonth={selectedDate?.from}
-            selected={selectedDate}
-            numberOfMonths={2}
-            className="bg-white"
-            onSelect={onSelect}
-            {...props}
-          />
+          <div className="hidden lg:block">
+            <Calendar
+              disabled={disableDates}
+              initialFocus
+              mode="range"
+              defaultMonth={selectedDate?.from}
+              selected={selectedDate}
+              numberOfMonths={2}
+              className="bg-white"
+              onSelect={onSelect}
+              {...props}
+            />
+          </div>
           <div className="lg:hidden flex align-center">
             <Calendar
               disabled={disableDates}

react-app/src/components/Opensearch/main/Filtering/Drawer/hooks.ts

@@ -9,6 +9,8 @@
 
 type FilterGroup = Partial<Record<opensearch.main.Field, C.DrawerFilterableGroup>>;
 
+export const FILTER_STORAGE_KEY = "osFilter";
+
 export const useFilterState = () => {
   const { data: user } = useGetUser();
   const url = useOsUrl();
@@ -74,6 +76,7 @@
     return (value: opensearch.FilterValue) => {
       setFilters((state) => {
         const updateState = { ...state, [field]: { ...state[field], value } };
+        // find all filter values to update
         const updateFilters = Object.values(updateState).filter((FIL) => {
           if (FIL.type === "terms") {
             const value = FIL.value as string[];
@@ -91,7 +94,12 @@
 
           return true;
         });
+        localStorage.setItem(
+          FILTER_STORAGE_KEY,
+          JSON.stringify({ filters: updateFilters, tab: url.state.tab }),
+        );
 
+        // this changes the tanstack query; which is used to query the data
         url.onSet((state) => ({
           ...state,
           filters: updateFilters,
@@ -107,24 +115,53 @@
     setAccordionValues(updateAccordion);
   };
 
-  const onFilterReset = () =>
+  const onFilterReset = () => {
     url.onSet((s) => ({
       ...s,
       filters: [],
       pagination: { ...s.pagination, number: 0 },
     }));
+    localStorage.removeItem(FILTER_STORAGE_KEY);
+  };
 
   const filtersApplied = checkMultiFilter(url.state.filters, 1);
 
-  // update initial filter state + accordion default open items
+  // on filter initialization
+  useEffect(() => {
+    // check if any filters where saved in storage
+    const filterStorage: string | null = localStorage.getItem(FILTER_STORAGE_KEY);
+    if (!filterStorage) return;
+
+    const filterState: { filters: C.DrawerFilterableGroup[]; tab: string } =
+      JSON.parse(filterStorage);
+
+    // we should delete the local storage if it doesn't match current tab
+    if (filterState.tab !== url.state.tab) {
+      localStorage.removeItem(FILTER_STORAGE_KEY);
+      return;
+    }
+
+    // this changes the tanstack query; which is used to query the data
+    url.onSet((state) => ({
+      ...state,
+      filters: filterState.filters,
+      pagination: { ...state.pagination, number: 0 },
+    }));
+
+    // eslint-disable-next-line
+  }, []);
+
+  // update filter display based on url query
   useEffect(() => {
     if (!drawer.drawerOpen) return;
-    const updateAccordions = [...accordionValues] as any[];
 
-    setFilters((s) => {
-      return Object.entries(s).reduce((STATE, [KEY, VAL]) => {
+    const updateAccordions = [...accordionValues] as any[];
+    setFilters((currentFilters) => {
+      // Set the new filters state based on the current filter data
+      return Object.entries(currentFilters).reduce((STATE, [KEY, VAL]) => {
         const updateFilter = url.state.filters.find((FIL) => FIL.field === KEY);
 
+        // Determine the new value for the filter based on the URL state
         const value = (() => {
           if (updateFilter) {
             updateAccordions.push(KEY);
@@ -135,12 +172,14 @@
           return { gte: undefined, lte: undefined } as opensearch.RangeValue;
         })();
 
+        // Update the state with the new value for this filter
         STATE[KEY] = { ...VAL, value };
+
         return STATE;
       }, {} as any);
     });
     setAccordionValues(updateAccordions);
   }, [url.state.filters, drawer.drawerOpen]);
 
   const aggs = useMemo(() => {
     return Object.entries(_aggs || {}).reduce(
@@ -157,7 +196,7 @@
       },
       {} as Record<opensearch.main.Field, { label: string; value: string }[]>,
     );
-  }, [_aggs]);
+  }, [_aggs, labelMap]);
 
   return {
     aggs,

react-app/src/components/Opensearch/main/Filtering/Drawer/index.test.tsx

@@ -1,9 +1,10 @@
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi, beforeEach, afterEach } from "vitest";
 import { screen, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { OsFilterDrawer } from "./index";
 import { opensearch } from "shared-types";
 import { renderFilterDrawer, getDashboardQueryString } from "@/utils/test-helpers";
+import { FILTER_STORAGE_KEY } from "./index";
 
 const setup = (
   filters: opensearch.Filterable<opensearch.main.Field>[],
@@ -21,6 +22,23 @@ const setup = (
 };
 
 describe("OsFilterDrawer", () => {
+  beforeEach(() => {
+    global.localStorage = {
+      setItem: vi.fn(),
+      getItem: vi.fn(),
+      removeItem: vi.fn(),
+      key: vi.fn(),
+      clear: vi.fn(),
+      length: 0,
+    };
+
+    vi.spyOn(global.localStorage, "getItem").mockReturnValue(null);
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
   describe("SPA Filters", () => {
     it("should display the drawer closed initially", () => {
       setup([], "spas");
@@ -279,6 +297,7 @@ describe("OsFilterDrawer", () => {
 
         const chip = screen.queryByLabelText("CHIP SPA");
         expect(chip).toBeInTheDocument();
+
         expect(chip.getAttribute("data-state")).toEqual("unchecked");
 
         const med = screen.queryByLabelText("Medicaid SPA");
@@ -417,4 +436,69 @@ describe("OsFilterDrawer", () => {
     expect(screen.getByRole("button", { name: "Reset" })).toBeInTheDocument();
     expect(screen.getByRole("button", { name: "Close" })).toBeInTheDocument();
   });
+  describe("localStorage", () => {
+    it("should load filters from localStorage", async () => {
+      const storedFilterState = [
+        {
+          label: "State",
+          field: "state.keyword",
+          component: "multiSelect",
+          prefix: "must",
+          type: "terms",
+          value: ["MD"],
+        },
+      ];
+      vi.spyOn(global.localStorage, "getItem").mockReturnValue(
+        JSON.stringify({
+          filters: storedFilterState,
+          tab: "spas",
+        }),
+      );
+      const { user } = setup([], "spas");
+
+      await user.click(screen.getByRole("button", { name: "Filters" }));
+
+      const state = screen.getByRole("heading", {
+        name: "State",
+        level: 3,
+      }).parentElement;
+      expect(state.getAttribute("data-state")).toEqual("open");
+
+      const combo = screen.getByRole("combobox");
+      expect(combo).toBeInTheDocument();
+      expect(screen.queryByLabelText("Remove MD")).toBeInTheDocument();
+    });
+
+    it("should not set filters if the tab does not match", async () => {
+      const storedFilterState = [
+        {
+          label: "State",
+          field: "state.keyword",
+          component: "multiSelect",
+          prefix: "must",
+          type: "terms",
+          value: ["MD"],
+        },
+      ];
+
+      vi.spyOn(global.localStorage, "getItem").mockReturnValue(
+        JSON.stringify({
+          filters: storedFilterState,
+          tab: "spas",
+        }),
+      );
+
+      const { user } = setup([], "waivers");
+      await user.click(screen.getByRole("button", { name: "Filters" }));
+
+      expect(global.localStorage.removeItem).toHaveBeenCalledWith(FILTER_STORAGE_KEY);
+    });
+
+    it("should do nothing if no filters are stored locally", async () => {
+      vi.spyOn(global.localStorage, "getItem").mockReturnValue(null);
+      const { user } = setup([], "spas");
+      await user.click(screen.getByRole("button", { name: "Filters" }));
+      expect(global.localStorage.getItem).toHaveBeenCalledWith(FILTER_STORAGE_KEY);
+    });
+  });
 });

react-app/src/components/Opensearch/main/Filtering/Drawer/index.tsx

@@ -17,10 +17,16 @@ import * as F from "./Filterable";
 import { useFilterDrawer } from "./hooks";
 
 export const OsFilterDrawer = () => {
-  const hook = useFilterDrawer();
+  // how filterDrawerHook looks
+  // filterDrawerHook: {accordionValues: {}, aggs: filter opts, drawer: drawer state, fitlers: name of filters & status's, filtersApplied: boolean,
+  //                    onFilterChange, onFilterReset}
+  const filterDrawerHook = useFilterDrawer();
 
   return (
-    <Sheet open={hook.drawer.drawerOpen} onOpenChange={hook.drawer.setDrawerState}>
+    <Sheet
+      open={filterDrawerHook.drawer.drawerOpen}
+      onOpenChange={filterDrawerHook.drawer.setDrawerState}
+    >
       <SheetTrigger asChild>
         <Button
           variant="outline"
@@ -37,44 +43,44 @@ export const OsFilterDrawer = () => {
         <Button
           className="w-full my-2"
           variant="outline"
-          disabled={!hook.filtersApplied}
-          onClick={hook.onFilterReset}
+          disabled={!filterDrawerHook.filtersApplied}
+          onClick={filterDrawerHook.onFilterReset}
         >
           Reset
         </Button>
         <Accordion
-          value={hook.accordionValues}
-          onValueChange={hook.onAccordionChange}
+          value={filterDrawerHook.accordionValues}
+          onValueChange={filterDrawerHook.onAccordionChange}
           type="multiple"
         >
-          {Object.values(hook.filters).map((PK) => (
-            <AccordionItem key={`filter-${PK.field}`} value={PK.field}>
-              <AccordionTrigger className="underline">{PK.label}</AccordionTrigger>
+          {Object.values(filterDrawerHook.filters).map((filter) => (
+            <AccordionItem key={`filter-${filter.field}`} value={filter.field}>
+              <AccordionTrigger className="underline">{filter.label}</AccordionTrigger>
               <AccordionContent className="px-0">
-                {PK.component === "multiSelect" && (
+                {filter.component === "multiSelect" && (
                   <F.FilterableSelect
-                    value={hook.filters[PK.field]?.value as string[]}
-                    onChange={hook.onFilterChange(PK.field)}
-                    options={hook.aggs?.[PK.field]}
+                    value={filterDrawerHook.filters[filter.field]?.value as string[]}
+                    onChange={filterDrawerHook.onFilterChange(filter.field)}
+                    options={filterDrawerHook.aggs?.[filter.field]}
                   />
                 )}
-                {PK.component === "multiCheck" && (
+                {filter.component === "multiCheck" && (
                   <F.FilterableMultiCheck
-                    value={hook.filters[PK.field]?.value as string[]}
-                    onChange={hook.onFilterChange(PK.field)}
-                    options={hook.aggs?.[PK.field]}
+                    value={filterDrawerHook.filters[filter.field]?.value as string[]}
+                    onChange={filterDrawerHook.onFilterChange(filter.field)}
+                    options={filterDrawerHook.aggs?.[filter.field]}
                   />
                 )}
-                {PK.component === "dateRange" && (
+                {filter.component === "dateRange" && (
                   <F.FilterableDateRange
-                    value={hook.filters[PK.field]?.value as opensearch.RangeValue}
-                    onChange={hook.onFilterChange(PK.field)}
+                    value={filterDrawerHook.filters[filter.field]?.value as opensearch.RangeValue}
+                    onChange={filterDrawerHook.onFilterChange(filter.field)}
                   />
                 )}
-                {PK.component === "boolean" && (
+                {filter.component === "boolean" && (
                   <F.FilterableBoolean
-                    value={hook.filters[PK.field]?.value as boolean}
-                    onChange={hook.onFilterChange(PK.field)}
+                    value={filterDrawerHook.filters[filter.field]?.value as boolean}
+                    onChange={filterDrawerHook.onFilterChange(filter.field)}
                   />
                 )}
               </AccordionContent>