diff --git a/src/gitops/components/shared/ApplicationList.tsx b/src/gitops/components/shared/ApplicationList.tsx index 645cad4d..49874d82 100644 --- a/src/gitops/components/shared/ApplicationList.tsx +++ b/src/gitops/components/shared/ApplicationList.tsx @@ -129,21 +129,23 @@ const ApplicationList: React.FC = ({ return sortData(applications, sortBy, direction); }, [applications, sortBy, direction]); + // Filter applications by project or appset FIRST - before PatternFly filters + // This ensures PF filters work on the correct dataset (owned apps only) + const ownedApps = React.useMemo( + () => sortedApplications.filter(filterApp(project, appset)), + [sortedApplications, project, appset], + ); + // TODO: use alternate filter since it is deprecated. See DataTableView potentially + // PatternFly filters work on owned apps only (the dataset that will be displayed) const filters = getFilters(t); - const [data, filteredData, onFilterChange] = useListPageFilter(sortedApplications, filters); - - // Filter applications by project or appset before rendering rows - const filteredByOwner = React.useMemo( - () => filteredData.filter(filterApp(project, appset)), - [filteredData, project, appset], - ); + const [data, filteredData, onFilterChange] = useListPageFilter(ownedApps, filters); // Filter by search query if present (after other filters) const filteredBySearch = React.useMemo(() => { - if (!searchQuery) return filteredByOwner; + if (!searchQuery) return filteredData; - return filteredByOwner.filter((app) => { + return filteredData.filter((app) => { const labels = app.metadata?.labels || {}; // Check if any label matches the search query return Object.entries(labels).some(([key, value]) => { @@ -151,13 +153,11 @@ const ApplicationList: React.FC = ({ return labelSelector.includes(searchQuery) || key.includes(searchQuery); }); }); - }, [filteredByOwner, searchQuery]); + }, [filteredData, searchQuery]); const rows = useApplicationRowsDV(filteredBySearch, namespace); - // Check if there are applications owned by this ApplicationSet initially (before search) - const hasOwnedApplications = React.useMemo(() => { - return sortedApplications.some(filterApp(project, appset)); - }, [sortedApplications, project, appset]); + // Check if there are applications owned by this ApplicationSet initially (before filters/search) + const hasOwnedApplications = ownedApps.length > 0; const empty = (