chore: enable global filter modes

bcgov · Feb 6, 2025 · 742b08b · 742b08b
1 parent a4754ab
commit 742b08b
Show file tree

Hide file tree

Showing 2 changed files with 101 additions and 2 deletions.
diff --git a/app/components/AnalystDashboard/AllDashboard.tsx b/app/components/AnalystDashboard/AllDashboard.tsx
@@ -30,7 +30,7 @@ import Link from 'next/link';
 import StatusInformationIcon from 'components/Analyst/StatusInformationIcon';
 import ClearFilters from 'components/Table/ClearFilters';
 import type { AllDashboardTable_query$key } from '__generated__/AllDashboardTable_query.graphql';
-import { Box, IconButton, TableCellProps } from '@mui/material';
+import { Box, IconButton, MenuItem, TableCellProps } from '@mui/material';
 import { useFeature } from '@growthbook/growthbook-react';
 import getConfig from 'next/config';
 import { DateTime } from 'luxon';
@@ -322,6 +322,7 @@ const AllDashboardTable: React.FC<Props> = ({ query }) => {
     isCcbc: boolean;
     rowId: any;
   } | null>(null);
+  const globalFilterMode = useRef('fuzzy');
 
   const expandedRowsRef = useRef({});
 
@@ -562,7 +563,16 @@ const AllDashboardTable: React.FC<Props> = ({ query }) => {
   };
 
   const customGlobalFilter = (row, id, filterValue, filterMeta) => {
-    const defaultMatch = MRT_FilterFns.fuzzy(row, id, filterValue, filterMeta);
+    if (!filterValue) return true;
+    if (row.getValue(id) === null) return false;
+    const filterMode = globalFilterMode.current || 'fuzzy';
+    let defaultMatch = false;
+    if (filterMode === 'fuzzy') {
+      defaultMatch = MRT_FilterFns.fuzzy(row, id, filterValue, filterMeta);
+    } else {
+      defaultMatch = MRT_FilterFns[filterMode](row, id, filterValue);
+    }
+
     const communitiesString = row.original.communities
       ?.map((item) => item.geoName)
       .join(',')
@@ -828,6 +838,8 @@ const AllDashboardTable: React.FC<Props> = ({ query }) => {
     onColumnSizingChange: setColumnSizing,
     enablePagination: false,
     enableGlobalFilter,
+    enableGlobalFilterModes: true,
+    globalFilterModeOptions: ['fuzzy', 'startsWith', 'contains'],
     enableBottomToolbar: false,
     filterFns: {
       filterNumber,
@@ -842,6 +854,25 @@ const AllDashboardTable: React.FC<Props> = ({ query }) => {
     onExpandedChange: (expanded) => {
       setExpanded(expanded);
     },
+    renderGlobalFilterModeMenuItems: ({
+      internalFilterOptions,
+      onSelectFilterMode,
+    }) => {
+      return internalFilterOptions.map((option) => (
+        <MenuItem
+          key={option.toString()}
+          selected={option?.option === globalFilterMode.current}
+          onClick={() => {
+            onSelectFilterMode(option?.option);
+            // setting up for custom global filter
+            table.setGlobalFilterFn('customGlobalFilter');
+            globalFilterMode.current = option?.option;
+          }}
+        >
+          {option.label}
+        </MenuItem>
+      ));
+    },
     renderToolbarInternalActions: ({ table }) => (
       <Box>
         <IconButton size="small">

diff --git a/app/tests/pages/analyst/dashboard.test.tsx b/app/tests/pages/analyst/dashboard.test.tsx
@@ -899,6 +899,74 @@ describe('The index page', () => {
     });
   });
 
+  it('renders global filter modes', async () => {
+    jest
+      .spyOn(moduleApi, 'useFeature')
+      .mockReturnValue(mockShowCbcProjects(true));
+
+    pageTestingHelper.loadQuery();
+    pageTestingHelper.renderPage();
+
+    expect(screen.getByText('CCBC-010001')).toBeInTheDocument();
+    expect(screen.getByText('CCBC-010002')).toBeInTheDocument();
+
+    const globalSearch = screen.getByPlaceholderText('Search');
+    expect(globalSearch).toBeInTheDocument();
+
+    const searchButton = screen.getByTestId('SearchIcon');
+    expect(searchButton).toBeInTheDocument();
+
+    fireEvent.click(searchButton);
+
+    const menuItems = screen.getAllByRole('menuitem');
+    expect(menuItems).toHaveLength(3);
+    expect(menuItems[0]).toHaveTextContent('Fuzzy');
+    expect(menuItems[1]).toHaveTextContent('Contains');
+    expect(menuItems[2]).toHaveTextContent('Starts With');
+  });
+
+  it('global filter filters based on selected mode', async () => {
+    jest
+      .spyOn(moduleApi, 'useFeature')
+      .mockReturnValue(mockShowCbcProjects(true));
+
+    pageTestingHelper.loadQuery();
+    pageTestingHelper.renderPage();
+
+    expect(screen.getByText('CCBC-010001')).toBeInTheDocument();
+    expect(screen.getByText('CCBC-010002')).toBeInTheDocument();
+
+    const globalSearch = screen.getByPlaceholderText('Search');
+    expect(globalSearch).toBeInTheDocument();
+
+    const searchButton = screen.getByTestId('SearchIcon');
+    expect(searchButton).toBeInTheDocument();
+
+    fireEvent.click(searchButton);
+
+    const menuItems = screen.getAllByRole('menuitem');
+
+    fireEvent.change(globalSearch, {
+      target: { value: 'oae' },
+    });
+
+    await waitFor(() => {
+      expect(screen.queryByText('CCBC-010001')).toBeInTheDocument();
+      expect(screen.getByText('CCBC-010002')).toBeInTheDocument();
+    });
+
+    fireEvent.click(menuItems[1]);
+
+    fireEvent.change(globalSearch, {
+      target: { value: 'oae' },
+    });
+
+    await waitFor(() => {
+      expect(screen.queryByText('CCBC-010001')).not.toBeInTheDocument();
+      expect(screen.queryByText('CCBC-010002')).not.toBeInTheDocument();
+    });
+  });
+
   it('clear filters correctly clears global filter and restore data', async () => {
     jest
       .spyOn(moduleApi, 'useFeature')