clear saved filters

vish9812 · Dec 6, 2024 · bb952e7 · bb952e7
1 parent e99c8e5
commit bb952e7
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 19 deletions.
diff --git a/ui/src/components/filters/index.tsx b/ui/src/components/filters/index.tsx
@@ -12,7 +12,8 @@ import useViewModel, {
   SearchTerm,
   FiltersProps,
   GridsRefs,
-  savedFilterKeys,
+  savedFiltersNames,
+  deleteAllSavedFilters,
 } from "./useViewModel";
 import { AgGridSolidRef } from "ag-grid-solid";
 import { GridOptions } from "ag-grid-community";
@@ -268,13 +269,16 @@ function Filters(props: FiltersProps) {
             control={
               <Select
                 class="app-select"
-                options={savedFilterKeys()}
+                options={savedFiltersNames()}
                 onChange={(val) => handleLoadFilter(val)}
               />
             }
             label="Load Filter"
             labelPlacement="start"
           />
+          <Button variant="contained" onClick={deleteAllSavedFilters}>
+            Delete Filters
+          </Button>
         </Stack>
       </Grid>
       <Grid item xs={12} container spacing={2}>

diff --git a/ui/src/components/filters/useViewModel.test.tsx b/ui/src/components/filters/useViewModel.test.tsx
@@ -3,7 +3,8 @@ import useViewModel, {
   FiltersData,
   GridsRefs,
   defaultFilters,
-  savedFilterKeyName,
+  deleteAllSavedFilters,
+  savedFilterKey,
 } from "./useViewModel";
 import { FiltersProps } from "./useViewModel";
 import comparer from "@al/services/comparer";
@@ -159,7 +160,7 @@ describe("useViewModel", () => {
         expect(vm.savedFilterName(), "savedFilterName").toEqual(filterName);
         expect(localStorage.length, "localStorage.length").toEqual(1);
         const loadedFilterStr = localStorage.getItem(
-          savedFilterKeyName(filterName)
+          savedFilterKey(filterName)
         );
         expect(loadedFilterStr, "loadedFilterStr").toBeTruthy();
         const loadedFilterJSON = JSON.parse(loadedFilterStr!);
@@ -171,6 +172,26 @@ describe("useViewModel", () => {
       });
     });
 
+    test("deleteAllSavedFilters", () => {
+      createRoot((dispose) => {
+        const vm = useViewModel(props);
+
+        vm.setFilters(filterToSave);
+        vm.setSavedFilterName(filterName);
+
+        expect(localStorage.length, "localStorage.length-pre-save").toEqual(0);
+        vm.handleSaveFilter();
+
+        expect(localStorage.length, "localStorage.length-pre-clear").toEqual(1);
+        deleteAllSavedFilters();
+        expect(localStorage.length, "localStorage.length-post-clear").toEqual(
+          0
+        );
+
+        dispose();
+      });
+    });
+
     describe("handleLoadFilter", () => {
       test("whenNoFilterIsAvailableToLoad", () => {
         createRoot((dispose) => {
@@ -193,7 +214,7 @@ describe("useViewModel", () => {
           const vm = useViewModel(props);
 
           localStorage.setItem(
-            savedFilterKeyName(filterName),
+            savedFilterKey(filterName),
             JSON.stringify(expectedSavedFilter)
           );
           vm.handleLoadFilter(filterName);

diff --git a/ui/src/components/filters/useViewModel.tsx b/ui/src/components/filters/useViewModel.tsx
@@ -56,26 +56,24 @@ function defaultFilters(): FiltersData {
   };
 }
 
-const savedFiltersKeyPrefix = "saved_filters";
+const savedFiltersKeyPrefix = "saved_filters|";
 
-function savedFilterKeyName(filterName: string): string {
-  return `${savedFiltersKeyPrefix}|${filterName}`;
+function savedFilterKey(filterName: string): string {
+  return savedFiltersKeyPrefix + filterName;
 }
 
-function savedFilterKeys(): string[] {
-  const savedKeys = Object.keys(localStorage).filter((key) =>
+function savedFiltersKeys(): string[] {
+  return Object.keys(localStorage).filter((key) =>
     key.startsWith(savedFiltersKeyPrefix)
   );
+}
 
-  if (!savedKeys || savedKeys.length === 0) {
-    return [];
-  }
-
-  return savedKeys.map((key) => key.split("|")[1]);
+function savedFiltersNames(): string[] {
+  return savedFiltersKeys().map((key) => key.split("|")[1]);
 }
 
 function deleteAllSavedFilters(): void {
-  savedFilterKeys().forEach((key) => localStorage.removeItem(key));
+  savedFiltersKeys().forEach((key) => localStorage.removeItem(key));
 }
 
 function useViewModel(props: FiltersProps) {
@@ -94,11 +92,11 @@ function useViewModel(props: FiltersProps) {
   function handleSaveFilter() {
     // save filters except the logs key
     const filterStr = JSON.stringify({ ...filters, logs: [] });
-    localStorage.setItem(savedFilterKeyName(savedFilterName()), filterStr);
+    localStorage.setItem(savedFilterKey(savedFilterName()), filterStr);
   }
 
   function handleLoadFilter(filterName: string) {
-    const filtersStr = localStorage.getItem(savedFilterKeyName(filterName));
+    const filtersStr = localStorage.getItem(savedFilterKey(filterName));
     setSavedFilterName(filterName);
     setFilters(filtersStr ? JSON.parse(filtersStr) : defaultFilters());
     handleFiltersChange();
@@ -231,5 +229,10 @@ function useViewModel(props: FiltersProps) {
 }
 
 export default useViewModel;
-export { defaultFilters, savedFilterKeys, savedFilterKeyName };
+export {
+  defaultFilters,
+  savedFiltersNames,
+  savedFilterKey,
+  deleteAllSavedFilters,
+};
 export type { SearchTerm, FiltersData, FiltersProps, GridsRefs };