Fix row selection on paginated pages (#5706)

frontend/src/component/project/Project/PaginatedProjectFeatureToggles/PaginatedProjectFeatureToggles.tsx

@@ -50,6 +50,7 @@ import { TableEmptyState } from './TableEmptyState/TableEmptyState';
 import { useRowActions } from './hooks/useRowActions';
 import { useUiFlag } from 'hooks/useUiFlag';
 import { FeatureTagCell } from 'component/common/Table/cells/FeatureTagCell/FeatureTagCell';
+import { useSelectedData } from './hooks/useSelectedData';
 
 interface IPaginatedProjectFeatureTogglesProps {
     environments: IProject['environments'];
@@ -372,6 +373,8 @@ export const PaginatedProjectFeatureToggles = ({
         [columnVisibility, setTableState],
     );
 
+    const selectedData = useSelectedData(features, rowSelection);
+
     return (
         <>
             <PageContent
@@ -482,10 +485,10 @@ export const PaginatedProjectFeatureToggles = ({
                     {featureToggleModals}
                 </div>
             </PageContent>
-            <BatchSelectionActionsBar count={Object.keys(rowSelection).length}>
+            <BatchSelectionActionsBar count={selectedData.length}>
                 <ProjectFeaturesBatchActions
                     selectedIds={Object.keys(rowSelection)}
-                    data={features}
+                    data={selectedData}
                     projectId={projectId}
                     onResetSelection={table.resetRowSelection}
                     onChange={refetch}

frontend/src/component/project/Project/PaginatedProjectFeatureToggles/hooks/useSelectedData.ts

@@ -0,0 +1,27 @@
+import { useState, useEffect } from 'react';
+
+export const useSelectedData = <T extends { name: string }>(
+    data: T[],
+    selection: Record<string, boolean>,
+): T[] => {
+    const [selectedData, setSelectedData] = useState<T[]>([]);
+
+    useEffect(() => {
+        setSelectedData((prevSelectedData) => {
+            const combinedData = [...data];
+            prevSelectedData.forEach((item) => {
+                if (
+                    !combinedData.find(
+                        (dataItem) => dataItem.name === item.name,
+                    )
+                ) {
+                    combinedData.push(item);
+                }
+            });
+
+            return combinedData.filter((item) => selection[item.name]);
+        });
+    }, [data, selection]);
+
+    return selectedData;
+};