Fix : ensure table selections respect applied filters

Signed-off-by: Ayoub LABIDI <[email protected]>

Author: ayolab

src/pages/groups/groups-table.tsx

@@ -10,11 +10,12 @@ import { useIntl } from 'react-intl';
 import { GroupAdd } from '@mui/icons-material';
 import { GridButton, GridButtonDelete, GridTable, GridTableRef } from '../../components/Grid';
 import { GroupInfos, UserAdminSrv, UserInfos } from '../../services';
-import { ColDef, GetRowIdParams, RowClickedEvent, SelectionChangedEvent, TextFilterParams } from 'ag-grid-community';
+import { ColDef, GetRowIdParams, RowClickedEvent, TextFilterParams } from 'ag-grid-community';
 import { useSnackMessage } from '@gridsuite/commons-ui';
 import DeleteConfirmationDialog from '../common/delete-confirmation-dialog';
 import { defaultColDef, defaultRowSelection } from '../common/table-config';
 import MultiChipCellRenderer from '../common/multi-chip-cell-renderer';
+import { useTableSelection } from 'utils/hooks';
 
 export interface GroupsTableProps {
     gridRef: RefObject<GridTableRef<GroupInfos>>;
@@ -26,18 +27,13 @@ const GroupsTable: FunctionComponent<GroupsTableProps> = (props) => {
     const intl = useIntl();
     const { snackError } = useSnackMessage();
 
-    const [rowsSelection, setRowsSelection] = useState<GroupInfos[]>([]);
+    const { rowsSelection, onSelectionChanged } = useTableSelection<GroupInfos>();
     const [showDeletionDialog, setShowDeletionDialog] = useState(false);
 
     function getRowId(params: GetRowIdParams<GroupInfos>): string {
         return params.data.name;
     }
 
-    const onSelectionChanged = useCallback(
-        (event: SelectionChangedEvent<GroupInfos, {}>) => setRowsSelection(event.api.getSelectedRows() ?? []),
-        [setRowsSelection]
-    );
-
     const onAddButton = useCallback(() => props.setOpenAddGroupDialog(true), [props]);
 
     const deleteGroups = useCallback((): Promise<void> | undefined => {

src/pages/profiles/profiles-table.tsx

@@ -10,18 +10,12 @@ import { useIntl } from 'react-intl';
 import { ManageAccounts } from '@mui/icons-material';
 import { GridButton, GridButtonDelete, GridTable, GridTableRef } from '../../components/Grid';
 import { UserAdminSrv, UserProfile } from '../../services';
-import {
-    ColDef,
-    GetRowIdParams,
-    ITooltipParams,
-    RowClickedEvent,
-    SelectionChangedEvent,
-    TextFilterParams,
-} from 'ag-grid-community';
+import { ColDef, GetRowIdParams, ITooltipParams, RowClickedEvent, TextFilterParams } from 'ag-grid-community';
 import { useSnackMessage } from '@gridsuite/commons-ui';
 import DeleteConfirmationDialog from '../common/delete-confirmation-dialog';
 import { defaultColDef, defaultRowSelection } from '../common/table-config';
 import ValidityCellRenderer from './validity-cell-renderer';
+import { useTableSelection } from 'utils/hooks';
 
 export interface ProfilesTableProps {
     gridRef: RefObject<GridTableRef<UserProfile>>;
@@ -33,18 +27,13 @@ const ProfilesTable: FunctionComponent<ProfilesTableProps> = (props) => {
     const intl = useIntl();
     const { snackError } = useSnackMessage();
 
-    const [rowsSelection, setRowsSelection] = useState<UserProfile[]>([]);
+    const { rowsSelection, onSelectionChanged } = useTableSelection<UserProfile>();
     const [showDeletionDialog, setShowDeletionDialog] = useState(false);
 
     function getRowId(params: GetRowIdParams<UserProfile>): string {
         return params.data.id ?? '';
     }
 
-    const onSelectionChanged = useCallback(
-        (event: SelectionChangedEvent<UserProfile, {}>) => setRowsSelection(event.api.getSelectedRows() ?? []),
-        [setRowsSelection]
-    );
-
     const onAddButton = useCallback(() => props.setOpenAddProfileDialog(true), [props]);
 
     const deleteProfiles = useCallback(() => {

src/pages/users/users-table.tsx

@@ -15,13 +15,13 @@ import {
     GetRowIdParams,
     ICheckboxCellRendererParams,
     RowClickedEvent,
-    SelectionChangedEvent,
     TextFilterParams,
 } from 'ag-grid-community';
 import { useSnackMessage } from '@gridsuite/commons-ui';
 import DeleteConfirmationDialog from '../common/delete-confirmation-dialog';
 import { defaultColDef, defaultRowSelection } from '../common/table-config';
 import MultiChipCellRenderer from '../common/multi-chip-cell-renderer';
+import { useTableSelection } from 'utils/hooks';
 
 export interface UsersTableProps {
     gridRef: RefObject<GridTableRef<UserInfos>>;
@@ -33,18 +33,13 @@ const UsersTable: FunctionComponent<UsersTableProps> = (props) => {
     const intl = useIntl();
     const { snackError } = useSnackMessage();
 
-    const [rowsSelection, setRowsSelection] = useState<UserInfos[]>([]);
+    const { rowsSelection, onSelectionChanged } = useTableSelection<UserInfos>();
     const [showDeletionDialog, setShowDeletionDialog] = useState(false);
 
     function getRowId(params: GetRowIdParams<UserInfos>): string {
         return params.data.sub ?? '';
     }
 
-    const onSelectionChanged = useCallback(
-        (event: SelectionChangedEvent<UserInfos, {}>) => setRowsSelection(event.api.getSelectedRows() ?? []),
-        [setRowsSelection]
-    );
-
     const onAddButton = useCallback(() => props.setOpenAddUserDialog(true), [props]);
 
     const deleteUsers = useCallback(() => {

src/utils/hooks.ts

@@ -5,6 +5,9 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
+import { SelectionChangedEvent } from "ag-grid-community";
+import { useCallback, useState } from "react";
+
 export function useDebugRender(label: string) {
     // uncomment when you want the output in the console
     /*if (import.meta.env.DEV) {
@@ -13,3 +16,24 @@ export function useDebugRender(label: string) {
         console.timeStamp?.(label);
     }*/
 }
+
+/**
+ * Custom hook to handle table row selection with proper filtering support
+ * @returns Selection state and handler for AG Grid's onSelectionChanged
+ */
+export function useTableSelection<T>() {
+    const [rowsSelection, setRowsSelection] = useState<T[]>([]);
+
+    const onSelectionChanged = useCallback((event: SelectionChangedEvent<T, {}>) => {
+        // Get only selected rows that are currently visible (after filtering)
+        const visibleSelectedRows: T[] = [];
+        event.api.forEachNodeAfterFilterAndSort((node) => {
+            if (node.isSelected() && node.data) {
+                visibleSelectedRows.push(node.data);
+            }
+        });
+        setRowsSelection(visibleSelectedRows);
+    }, []);
+
+    return { rowsSelection, setRowsSelection, onSelectionChanged };
+}