From 9b7981047d1cf877f78ed368f5292725f4d5ca85 Mon Sep 17 00:00:00 2001
From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>
Date: Thu, 21 Dec 2023 10:01:10 +0100
Subject: [PATCH] Fix row selection on paginated pages (#5706)

---
 .../PaginatedProjectFeatureToggles.tsx        |  7 +++--
 .../hooks/useSelectedData.ts                  | 27 +++++++++++++++++++
 2 files changed, 32 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/component/project/Project/PaginatedProjectFeatureToggles/hooks/useSelectedData.ts

diff --git a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/PaginatedProjectFeatureToggles.tsx b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/PaginatedProjectFeatureToggles.tsx
index 0b7d63041bb0..8ce636f7d0d9 100644
--- a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/PaginatedProjectFeatureToggles.tsx
+++ b/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}
diff --git a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/hooks/useSelectedData.ts b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/hooks/useSelectedData.ts
new file mode 100644
index 000000000000..62954902742a
--- /dev/null
+++ b/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;
+};