Merge pull request #1353 from cisagov/Refactor-Filter-Reset-Button-CRASM-3428

Refactor Filter Reset Button (CRASM-3428)

Author: cduhn17

.pre-commit-config.yaml

@@ -50,7 +50,11 @@ repos:
     hooks:
       - id: eslint
         name: ESLint
-        entry: bash -c 'cd frontend && npx eslint . --cache'
+        entry: >
+          bash -c 'export NVM_DIR="$HOME/.nvm";
+          [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" --no-use
+          && nvm use || true;
+          cd frontend && npx eslint . --cache'
         language: system
         files: ^frontend/src/.*\.(js|jsx|ts|tsx)$
 

frontend/package-lock.json

@@ -13,6 +13,7 @@ import { ContextType } from 'context';
 import { DrawerInterior } from './DrawerInterior';
 import { RegionAndOrganizationFilters } from './RegionAndOrganizationFilters';
 import { matchPath } from 'utils/matchPath';
+import { useAreFiltersDefault } from '@/hooks/useAreFiltersDefault';
 import { VSDashRegionAndOrgFilters } from './VSDashRegionAndOrgFilters';
 import { ROUTES } from '@/constants/routes';
 
@@ -55,6 +56,8 @@ export const FilterDrawer: FC<
     }
   };
 
+  const defaultFilters = useAreFiltersDefault(filters, initialFilters);
+
   const clearFiltersAndSearch = () => {
     setSearchTerm('', {
       shouldClearFilters: true,
@@ -140,27 +143,27 @@ export const FilterDrawer: FC<
       </Box>
       {matchPath([ROUTES.INVENTORY], pathname) && (
         <Box>
-          {filters.length > 0 && (
-            <Box
-              paddingBottom={5}
-              display="flex"
-              width="100%"
-              justifyContent="center"
+          <Box
+            paddingBottom={5}
+            display="flex"
+            width="100%"
+            justifyContent="center"
+          >
+            <Button
+              onClick={clearFiltersAndSearch}
+              disabled={defaultFilters}
+              sx={{
+                color: 'primary.dark',
+                fontSize: '14px',
+                fontWeight: 'bold',
+                lineHeight: '20px',
+                letterSpacing: '0.1em'
+              }}
+              aria-label="Reset Filters"
             >
-              <Button
-                onClick={clearFiltersAndSearch}
-                sx={{
-                  color: 'primary.dark',
-                  fontSize: '14px',
-                  fontWeight: 'bold',
-                  lineHeight: '20px',
-                  letterSpacing: '0.1em'
-                }}
-              >
-                Reset
-              </Button>
-            </Box>
-          )}
+              Reset
+            </Button>
+          </Box>
         </Box>
       )}
     </Stack>

frontend/src/components/FilterDrawer/FilterDrawerV2.tsx

@@ -0,0 +1,37 @@
+import { ContextType } from 'context';
+import { useMemo } from 'react';
+
+type UseAreFiltersDefault = (
+  filters: ContextType['filters'],
+  initialFilters: ContextType['filters']
+) => boolean;
+
+export const useAreFiltersDefault: UseAreFiltersDefault = (
+  filters: ContextType['filters'],
+  initialFilters: ContextType['filters']
+): boolean => {
+  return useMemo(() => {
+    return filters.every((filter) => {
+      const initialFilter = initialFilters.find(
+        (initFilter) => initFilter.field === filter.field
+      );
+      if (!initialFilter) return false;
+
+      const current = filter.values || [];
+      const initial = initialFilter.values || [];
+
+      if (current.length !== initial.length) return false;
+
+      const currentIds = current.map((val: any) =>
+        typeof val === 'object' && val !== null ? (val.id ?? val.name) : val
+      );
+      const initialIds = initial.map((val: any) =>
+        typeof val === 'object' && val !== null ? (val.id ?? val.name) : val
+      );
+
+      return (
+        JSON.stringify(currentIds.sort()) === JSON.stringify(initialIds.sort())
+      );
+    });
+  }, [filters, initialFilters]);
+};

frontend/src/hooks/useAreFiltersDefault.ts

@@ -5,7 +5,6 @@ import {
   REGIONAL_ADMIN,
   STANDARD_USER
 } from './useUserLevel';
-// import { GLOBAL_VIEW } from 'context/userStateUtils';
 import { OrganizationShallow } from 'components/FilterDrawer/RegionAndOrganizationFilters';
 
 export const REGIONAL_USER_CAN_SEARCH_OTHER_REGIONS = true;
@@ -48,7 +47,8 @@ export const useUserTypeFilters: UseUserTypeFilters = (
               name: role?.organization?.name ?? '',
               id: role?.organization?.id ?? '',
               region_id: role?.organization?.region_id ?? '',
-              root_domains: role?.organization?.root_domains ?? []
+              root_domains: role?.organization?.root_domains ?? [],
+              acronym: role?.organization?.acronym ?? ''
             };
           })
       : [];

frontend/src/hooks/useUserTypeFilters.ts

@@ -0,0 +1,48 @@
+import { describe, it, expect } from 'vitest';
+import { renderHook } from '@testing-library/react';
+import { useAreFiltersDefault } from '../../hooks/useAreFiltersDefault';
+
+// -------------------- Test Suite --------------------
+
+describe('useAreFiltersDefault hook determines if current filters match initial filters', () => {
+  it('should return true when filters match initial filters', () => {
+    const { result } = renderHook(() =>
+      useAreFiltersDefault(
+        [{ field: 'organization.region_id', values: ['1'], type: 'any' }],
+        [{ field: 'organization.region_id', values: ['1'], type: 'any' }]
+      )
+    );
+
+    expect(result.current).toBe(true);
+  });
+
+  it('should return false when filters differ', () => {
+    const { result } = renderHook(() =>
+      useAreFiltersDefault(
+        [
+          { field: 'organization.region_id', values: ['1'], type: 'any' },
+          { field: 'organization_id', values: ['org-123'], type: 'any' }
+        ],
+        [{ field: 'organization.region_id', values: ['1'], type: 'any' }]
+      )
+    );
+
+    expect(result.current).toBe(false);
+  });
+
+  it('should return false when values differ', () => {
+    const { result } = renderHook(() =>
+      useAreFiltersDefault(
+        [{ field: 'organization.region_id', values: ['2'], type: 'any' }],
+        [{ field: 'organization.region_id', values: ['1'], type: 'any' }]
+      )
+    );
+
+    expect(result.current).toBe(false);
+  });
+
+  it('should return true for empty filters', () => {
+    const { result } = renderHook(() => useAreFiltersDefault([], []));
+    expect(result.current).toBe(true);
+  });
+});