From 0766e73fc4743287b9dcb60fa306de733da42a4e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Bosi?=
 <71827178+bosiraphael@users.noreply.github.com>
Date: Wed, 14 May 2025 13:30:37 +0200
Subject: [PATCH] Fix filtering on grouped table view (#12029)

# Fix filtering on grouped table view

Fixes #11776
This PR fixes the filtering issue on the grouped by column in the table.
State filters were overwritten by group filters.

- Implemented a new `combineFilters` utility function that properly
merges multiple filter objects using AND logic
- Added tests
- Modified `useFindManyRecordIndexTableParams` to use the new utility
instead of directly merging filter objects

## Before


https://github.com/user-attachments/assets/45d51535-ecbc-4cfd-b523-37e72aafc723


## After


https://github.com/user-attachments/assets/70416779-9a9c-4972-82ed-73ad98b0234f
---
 .../utils/__tests__/combineFilters.test.ts    | 29 +++++++++++++++++++
 .../record-filter/utils/combineFilters.ts     | 21 ++++++++++++++
 .../useFindManyRecordIndexTableParams.ts      |  6 ++--
 3 files changed, 52 insertions(+), 4 deletions(-)
 create mode 100644 packages/twenty-front/src/modules/object-record/record-filter/utils/__tests__/combineFilters.test.ts
 create mode 100644 packages/twenty-front/src/modules/object-record/record-filter/utils/combineFilters.ts

diff --git a/packages/twenty-front/src/modules/object-record/record-filter/utils/__tests__/combineFilters.test.ts b/packages/twenty-front/src/modules/object-record/record-filter/utils/__tests__/combineFilters.test.ts
new file mode 100644
index 000000000..8547e2d46
--- /dev/null
+++ b/packages/twenty-front/src/modules/object-record/record-filter/utils/__tests__/combineFilters.test.ts
@@ -0,0 +1,29 @@
+import { RecordGqlOperationFilter } from '@/object-record/graphql/types/RecordGqlOperationFilter';
+import { combineFilters } from '../combineFilters';
+
+describe('combineFilters', () => {
+  it('should return empty object when all filters are empty', () => {
+    const result = combineFilters([{}, {}, {}]);
+    expect(result).toEqual({});
+  });
+
+  it('should return the single non-empty filter directly', () => {
+    const filter: RecordGqlOperationFilter = { field1: { eq: 'Test' } };
+    const result = combineFilters([{}, filter, {}]);
+    expect(result).toEqual(filter);
+  });
+
+  it('should combine multiple non-empty filters with AND logic', () => {
+    const filter1: RecordGqlOperationFilter = { field1: { eq: 'Test' } };
+    const filter2: RecordGqlOperationFilter = { field2: { eq: 'Active' } };
+    const result = combineFilters([filter1, filter2]);
+    expect(result).toEqual({
+      and: [filter1, filter2],
+    });
+  });
+
+  it('should handle an empty array by returning an empty object', () => {
+    const result = combineFilters([]);
+    expect(result).toEqual({});
+  });
+});
diff --git a/packages/twenty-front/src/modules/object-record/record-filter/utils/combineFilters.ts b/packages/twenty-front/src/modules/object-record/record-filter/utils/combineFilters.ts
new file mode 100644
index 000000000..2c18df716
--- /dev/null
+++ b/packages/twenty-front/src/modules/object-record/record-filter/utils/combineFilters.ts
@@ -0,0 +1,21 @@
+import { RecordGqlOperationFilter } from '@/object-record/graphql/types/RecordGqlOperationFilter';
+
+export const combineFilters = (
+  filters: RecordGqlOperationFilter[],
+): RecordGqlOperationFilter => {
+  const nonEmptyFilters = filters.filter(
+    (filter) => Object.keys(filter).length > 0,
+  );
+
+  if (nonEmptyFilters.length === 0) {
+    return {};
+  }
+
+  if (nonEmptyFilters.length === 1) {
+    return nonEmptyFilters[0];
+  }
+
+  return {
+    and: nonEmptyFilters,
+  };
+};
diff --git a/packages/twenty-front/src/modules/object-record/record-index/hooks/useFindManyRecordIndexTableParams.ts b/packages/twenty-front/src/modules/object-record/record-index/hooks/useFindManyRecordIndexTableParams.ts
index c8a88ee13..f0b60f091 100644
--- a/packages/twenty-front/src/modules/object-record/record-index/hooks/useFindManyRecordIndexTableParams.ts
+++ b/packages/twenty-front/src/modules/object-record/record-index/hooks/useFindManyRecordIndexTableParams.ts
@@ -3,6 +3,7 @@ import { turnSortsIntoOrderBy } from '@/object-record/object-sort-dropdown/utils
 import { currentRecordFilterGroupsComponentState } from '@/object-record/record-filter-group/states/currentRecordFilterGroupsComponentState';
 import { useFilterValueDependencies } from '@/object-record/record-filter/hooks/useFilterValueDependencies';
 import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
+import { combineFilters } from '@/object-record/record-filter/utils/combineFilters';
 import { computeRecordGqlOperationFilter } from '@/object-record/record-filter/utils/computeRecordGqlOperationFilter';
 import { useCurrentRecordGroupDefinition } from '@/object-record/record-group/hooks/useCurrentRecordGroupDefinition';
 import { useRecordGroupFilter } from '@/object-record/record-group/hooks/useRecordGroupFilter';
@@ -47,10 +48,7 @@ export const useFindManyRecordIndexTableParams = (
 
   return {
     objectNameSingular,
-    filter: {
-      ...stateFilter,
-      ...recordGroupFilter,
-    },
+    filter: combineFilters([stateFilter, recordGroupFilter]),
     orderBy,
     // If we have a current record group definition, we only want to fetch 8 records by page
     ...(currentRecordGroupDefinition ? { limit: 8 } : {}),