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 ( <> - + ( + data: T[], + selection: Record, +): T[] => { + const [selectedData, setSelectedData] = useState([]); + + 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; +};