feat: reset filters button (#3085)

* first pass, back-end

* first pass, front-end

* simplify date range query, dont need subquery

* update and add tests

* make filtersService file, abstract components

* add test for convertDateOptionToDateRange

* update date helpers, modify tests

* wip, Filters

* update local dev default to last year

* udpate tests to reflect local dev default

* else if nit

* refactor: moar abstraction (#3078)

* refactor: moar abstraction

* tiny nits, update tests

* fix test

---------

Co-authored-by: angelathe <[email protected]>

* refactor Filters file to add BaseFilter file

* add BaseFilter

* fix todays date for test

* move FiltersService to utils as date-utils

* add test to check reading query will result in correct date range

* Update dateRangelabels

Co-authored-by: Mary McGrath <[email protected]>

* [pre-commit.ci] auto fixes from pre-commit hooks

* reverting change temporarily, causing test failures

* update default nits

* update default nits

* hardcode expected start dates in tests

* Flexible widths

Co-authored-by: [email protected]

* fix small nit, tag disappeared when no conditions were selected

* update snapshot test for tag, turn btnClass to functional prop isActive

* refactor dateRangeLabels

* move default date range const to date-utils because forgot to import in page

* update docstrings

* refactor updateQueryParam

* update today test fixture to add time

* feat: only allow one filter open at a time, easy closing

* Update containers/ecr-viewer/src/app/components/BaseFilter.tsx

* fix: reset trigger

* fix: cleanup

* fix: only listen when a filter is open

* fix: consolidate trigger logic, add tests

* docs: comment

* fix: comments, cleanup

* fix: moar =

* test: focus handling

* feat: wip - reset filters button

* test: cajole mocks

* test: better check

* fix: merge cleanup

* test: make reset button test more robust

* fix: reset button gap

* test: update snapshot

* fix: gap naming convention

* refactor: readability

---------

Co-authored-by: angelathe <[email protected]>
Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

containers/ecr-viewer/src/app/components/BaseFilter.tsx

@@ -44,6 +44,12 @@ export const useQueryParam = () => {
     [searchParams],
   );
 
+  const pushQueryUpdate = (params: URLSearchParams, keys: string[]) => {
+    if (keys.some((key) => searchParams.get(key) !== params.get(key))) {
+      router.push(pathname + "?" + params.toString());
+    }
+  };
+
   // Update a specific query param (set or delete if default)
   const updateQueryParam = (
     key: string,
@@ -60,12 +66,10 @@ export const useQueryParam = () => {
       : setQueryParam(key, value);
 
     // Update query params
-    if (searchParams.get(key) !== updatedParams.get(key)) {
-      router.push(pathname + "?" + updatedParams.toString());
-    }
+    pushQueryUpdate(updatedParams, [key]);
   };
 
-  return { searchParams, updateQueryParam };
+  return { searchParams, updateQueryParam, pushQueryUpdate };
 };
 
 /**
@@ -105,6 +109,7 @@ export const Filter = ({
   const { filterBoxOpen, setFilterBoxOpen, lastOpenButtonRef } =
     useContext(FilterOpenContext);
   const openBtnRef = useRef<HTMLElement | null>(null);
+  const searchParams = useSearchParams();
 
   const isFilterBoxOpen = filterBoxOpen === type;
   const setIsFilterBoxOpen = useCallback((open: boolean) => {
@@ -127,6 +132,9 @@ export const Filter = ({
     }
   }, [filterBoxOpen]);
 
+  // Force a reset if the search params update
+  useEffect(resetHandler, [searchParams]);
+
   return (
     <div onClick={(e) => e.stopPropagation()}>
       <div className="position-relative display-flex flex-column">

containers/ecr-viewer/src/app/components/Filters.tsx

@@ -7,7 +7,7 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { Icon } from "@trussworks/react-uswds";
+import { Button, Icon } from "@trussworks/react-uswds";
 import { useQueryParam, Filter } from "./BaseFilter";
 import {
   DEFAULT_DATE_RANGE,
@@ -42,6 +42,7 @@ export const FilterOpenContext = createContext<FilterOpenContextValue>({
 const Filters = () => {
   const [filterBoxOpen, setFilterBoxOpen] = useState<string>(FILTER_CLOSED);
   const lastOpenButtonRef = useRef<HTMLElement | null>(null);
+  const { searchParams, pushQueryUpdate } = useQueryParam();
 
   const filterOpenContextValue = {
     filterBoxOpen,
@@ -76,6 +77,16 @@ const Filters = () => {
     }
   }, [filterBoxOpen]);
 
+  const paramKeys = ["condition", "dateRange"];
+  const resetToDefault = () => {
+    const params = new URLSearchParams(searchParams.toString());
+    params.set("page", "1");
+    for (const key of paramKeys) {
+      params.delete(key);
+    }
+    pushQueryUpdate(params, paramKeys);
+  };
+
   return (
     <div>
       <div className="border-top border-base-lighter"></div>
@@ -85,6 +96,21 @@ const Filters = () => {
           <FilterByDate />
           <FilterReportableConditions />
         </FilterOpenContext.Provider>
+
+        {paramKeys.some((k) => searchParams.get(k) !== null) && (
+          <Button
+            type="button"
+            unstyled
+            onClick={resetToDefault}
+            aria-label="Reset Filters to Defaults"
+            className="gap-05"
+          >
+            <span className="square-205 usa-icon">
+              <Icon.Autorenew aria-hidden className="square-205" />
+            </span>
+            Reset
+          </Button>
+        )}
       </div>
     </div>
   );
@@ -158,14 +184,20 @@ const FilterReportableConditions = () => {
         return conditionsToTrue.has(c);
       }
     };
+    let changed = false;
     const prevFilterConditions = conditions.reduce(
       (dict: { [key: string]: boolean }, condition: string) => {
         dict[condition] = conditionValue(condition);
+        if (dict[condition] != filterConditions[condition]) {
+          changed = true;
+        }
         return dict;
       },
       {} as { [key: string]: boolean },
     );
-    setFilterConditions(prevFilterConditions);
+    if (changed) {
+      setFilterConditions(prevFilterConditions);
+    }
   };
 
   return (
@@ -241,21 +273,10 @@ const FilterReportableConditions = () => {
 const FilterByDate = () => {
   const { searchParams, updateQueryParam } = useQueryParam();
 
-  const [filterDateOption, setFilterDateOption] = useState("");
+  const [filterDateOption, setFilterDateOption] =
+    useState<string>(DEFAULT_DATE_RANGE);
   const isFilterDateDefault = filterDateOption === DEFAULT_DATE_RANGE;
 
-  useEffect(() => {
-    const fetchDateRange = async () => {
-      try {
-        resetFilterDate();
-      } catch (error) {
-        console.error("Error fetching date range:", error);
-      }
-    };
-
-    fetchDateRange();
-  }, []);
-
   const handleDateOptionChange = (
     event: React.ChangeEvent<HTMLInputElement>,
   ) => {
@@ -273,6 +294,9 @@ const FilterByDate = () => {
     }
   };
 
+  // on mount, make sure the filters match the search params
+  useEffect(resetFilterDate, []);
+
   return (
     <Filter
       type="Received Date"

containers/ecr-viewer/src/app/tests/HomePage.test.tsx

@@ -8,6 +8,7 @@ import { convertDateOptionToDateRange } from "@/app/view-data/utils/date-utils";
 
 jest.mock("../services/listEcrDataService");
 jest.mock("../components/EcrPaginationWrapper");
+jest.mock("../components/Filters");
 jest.mock("../components/LibrarySearch");
 jest.mock("../view-data/utils/date-utils.ts");