From 0bd55c3a2f04842732c733fc20de7d3070ba4cd5 Mon Sep 17 00:00:00 2001 From: R Ranathunga Date: Thu, 6 Feb 2025 13:12:34 -0800 Subject: [PATCH 1/4] chore: enable global filter modes --- .../AnalystDashboard/AllDashboard.tsx | 61 +++++++++++++++-- app/tests/pages/analyst/dashboard.test.tsx | 68 +++++++++++++++++++ 2 files changed, 124 insertions(+), 5 deletions(-) diff --git a/app/components/AnalystDashboard/AllDashboard.tsx b/app/components/AnalystDashboard/AllDashboard.tsx index 8ca491a25b..baee4cbea3 100644 --- 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 = ({ query }) => { isCcbc: boolean; rowId: any; } | null>(null); + const globalFilterMode = useRef('fuzzy'); const expandedRowsRef = useRef({}); @@ -561,8 +562,26 @@ const AllDashboardTable: React.FC = ({ query }) => { globalFilter, }; - const customGlobalFilter = (row, id, filterValue, filterMeta) => { - const defaultMatch = MRT_FilterFns.fuzzy(row, id, filterValue, filterMeta); + const customGlobalFilter = ( + row, + id, + filterValue, + filterMeta, + columnVisibility + ) => { + // exclude hidden columns from global filter + const visibility = columnVisibility?.[id]; + if (visibility === false) return false; + 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(',') @@ -610,6 +629,7 @@ const AllDashboardTable: React.FC = ({ query }) => { externalStatusOrder: statusOrderMap[application.node.externalStatus], internalStatusOrder: statusOrderMap[application.node.analystStatus], communities: getCommunities(application.node), + organizationName: application.node.organizationName || '', })); const allCbcApplications = showCbcProjects @@ -822,17 +842,29 @@ const AllDashboardTable: React.FC = ({ query }) => { onSortingChange: handleOnSortChange, onColumnFiltersChange: setColumnFilters, autoResetAll: false, - onColumnVisibilityChange: setVisibilityPreference, + onColumnVisibilityChange: (columnVisibility) => { + setVisibilityPreference(columnVisibility); + table.setGlobalFilter(null); + }, onDensityChange: setDensity, onShowColumnFiltersChange: setShowColumnFilters, onColumnSizingChange: setColumnSizing, enablePagination: false, enableGlobalFilter, + enableGlobalFilterModes: true, + globalFilterModeOptions: ['fuzzy', 'startsWith', 'contains'], enableBottomToolbar: false, filterFns: { filterNumber, statusFilter, - customGlobalFilter, + customGlobalFilter: (row, id, filterValue, filterMeta) => + customGlobalFilter( + row, + id, + filterValue, + filterMeta, + table.getState()?.columnVisibility + ), }, renderDetailPanel: ({ row }) => ( @@ -842,6 +874,25 @@ const AllDashboardTable: React.FC = ({ query }) => { onExpandedChange: (expanded) => { setExpanded(expanded); }, + renderGlobalFilterModeMenuItems: ({ + internalFilterOptions, + onSelectFilterMode, + }) => { + return internalFilterOptions.map((option) => ( + { + onSelectFilterMode(option?.option); + // setting up for custom global filter + table.setGlobalFilterFn('customGlobalFilter'); + globalFilterMode.current = option?.option; + }} + > + {option.label} + + )); + }, renderToolbarInternalActions: ({ table }) => ( diff --git a/app/tests/pages/analyst/dashboard.test.tsx b/app/tests/pages/analyst/dashboard.test.tsx index bb45d74d2c..1a318a2994 100644 --- 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') From cf8493cc7d4f9dea3740f2060b2df999d70513ef Mon Sep 17 00:00:00 2001 From: R Ranathunga Date: Mon, 10 Feb 2025 07:22:06 -0800 Subject: [PATCH 2/4] chore: remove link custom cell from alldashboard --- .../AnalystDashboard/AllDashboard.tsx | 30 ------------------- 1 file changed, 30 deletions(-) diff --git a/app/components/AnalystDashboard/AllDashboard.tsx b/app/components/AnalystDashboard/AllDashboard.tsx index baee4cbea3..e26b298b8f 100644 --- a/app/components/AnalystDashboard/AllDashboard.tsx +++ b/app/components/AnalystDashboard/AllDashboard.tsx @@ -26,7 +26,6 @@ import RowCount from 'components/Table/RowCount'; import AssignLead from 'components/Analyst/AssignLead'; import StatusPill from 'components/StatusPill'; import statusStyles from 'data/statusStyles'; -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'; @@ -86,15 +85,6 @@ const cbcProjectStatusConverter = (status) => { return status; }; -const StyledLink = styled(Link)` - color: ${(props) => props.theme.color.links}; - text-decoration: none; - - &:hover { - text-decoration: underline; - } -`; - const StyledTableHeader = styled.div` display: flex; justify-content: space-between; @@ -132,25 +122,6 @@ const muiTableHeadCellProps = { }, }; -const CcbcIdCell = ({ cell }) => { - const applicationId = cell.row.original?.rowId; - const isCbcProject = cell.row.original?.isCbcProject; - const linkCbc = cell.row.original?.showLink; - return ( - <> - {linkCbc ? ( - - {cell.getValue()} - - ) : ( - cell.getValue() - )} - - ); -}; - const AnalystStatusCell = ({ cell }) => { const analystStatus = cell.row.original?.analystStatus; return ; @@ -733,7 +704,6 @@ const AllDashboardTable: React.FC = ({ query }) => { { accessorKey: 'projectId', header: 'Project ID', - Cell: CcbcIdCell, }, { accessorKey: 'zones', From b0e3dd95bc80c6765ddc290859153d3d792a7fdd Mon Sep 17 00:00:00 2001 From: R Ranathunga Date: Mon, 10 Feb 2025 09:48:58 -0800 Subject: [PATCH 3/4] chore: set contains as the default global filter mode --- app/components/AnalystDashboard/AllDashboard.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/components/AnalystDashboard/AllDashboard.tsx b/app/components/AnalystDashboard/AllDashboard.tsx index e26b298b8f..14403f3a5a 100644 --- a/app/components/AnalystDashboard/AllDashboard.tsx +++ b/app/components/AnalystDashboard/AllDashboard.tsx @@ -293,7 +293,7 @@ const AllDashboardTable: React.FC = ({ query }) => { isCcbc: boolean; rowId: any; } | null>(null); - const globalFilterMode = useRef('fuzzy'); + const globalFilterMode = useRef('contains'); const expandedRowsRef = useRef({}); @@ -545,7 +545,7 @@ const AllDashboardTable: React.FC = ({ query }) => { if (visibility === false) return false; if (!filterValue) return true; if (row.getValue(id) === null) return false; - const filterMode = globalFilterMode.current || 'fuzzy'; + const filterMode = globalFilterMode.current || 'contains'; let defaultMatch = false; if (filterMode === 'fuzzy') { defaultMatch = MRT_FilterFns.fuzzy(row, id, filterValue, filterMeta); From afc71f4ef6c5a77aa9e5ba259fa0ce1d630d5c67 Mon Sep 17 00:00:00 2001 From: CCBC Service Account <116113628+ccbc-service-account@users.noreply.github.com> Date: Wed, 12 Feb 2025 16:04:30 +0000 Subject: [PATCH 4/4] chore: release v1.243.2 --- CHANGELOG.md | 2 ++ package.json | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e31fa73ff0..ac5cfed2c3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,5 @@ +## [1.243.2](https://github.com/bcgov/CONN-CCBC-portal/compare/v1.243.1...v1.243.2) (2025-02-12) + ## [1.243.1](https://github.com/bcgov/CONN-CCBC-portal/compare/v1.243.0...v1.243.1) (2025-02-12) ### Bug Fixes diff --git a/package.json b/package.json index e0b621bc52..d769ad3fbc 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "CONN-CCBC-portal", - "version": "1.243.1", + "version": "1.243.2", "main": "index.js", "repository": "https://github.com/bcgov/CONN-CCBC-portal.git", "author": "Romer, Meherzad CITZ:EX ",