add multiple filters of same FieldMetadataType

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownDateInput.tsx

@@ -1,4 +1,5 @@
 import { useRecoilValue } from 'recoil';
+import { v4 } from 'uuid';
 
 import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
 import { InternalDatePicker } from '@/ui/input/components/internal/date/components/InternalDatePicker';
@@ -8,6 +9,7 @@ export const ObjectFilterDropdownDateInput = () => {
   const {
     filterDefinitionUsedInDropdownState,
     selectedOperandInDropdownState,
+    selectedFilterState,
     setIsObjectFilterDropdownUnfolded,
     selectFilter,
   } = useFilterDropdown();
@@ -19,10 +21,13 @@ export const ObjectFilterDropdownDateInput = () => {
     selectedOperandInDropdownState,
   );
 
+  const selectedFilter = useRecoilValue(selectedFilterState);
+
   const handleChange = (date: Date | null) => {
     if (!filterDefinitionUsedInDropdown || !selectedOperandInDropdown) return;
 
     selectFilter?.({
+      id: selectedFilter?.id ? selectedFilter.id : v4(),
       fieldMetadataId: filterDefinitionUsedInDropdown.fieldMetadataId,
       value: isDefined(date) ? date.toISOString() : '',
       operand: selectedOperandInDropdown,

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownNumberInput.tsx

@@ -1,5 +1,6 @@
 import { ChangeEvent } from 'react';
 import { useRecoilValue } from 'recoil';
+import { v4 } from 'uuid';
 
 import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
 import { DropdownMenuInput } from '@/ui/layout/dropdown/components/DropdownMenuInput';
@@ -8,6 +9,7 @@ export const ObjectFilterDropdownNumberInput = () => {
   const {
     selectedOperandInDropdownState,
     filterDefinitionUsedInDropdownState,
+    selectedFilterState,
     selectFilter,
   } = useFilterDropdown();
 
@@ -18,6 +20,8 @@ export const ObjectFilterDropdownNumberInput = () => {
     selectedOperandInDropdownState,
   );
 
+  const selectedFilter = useRecoilValue(selectedFilterState);
+
   return (
     filterDefinitionUsedInDropdown &&
     selectedOperandInDropdown && (
@@ -27,6 +31,7 @@ export const ObjectFilterDropdownNumberInput = () => {
         placeholder={filterDefinitionUsedInDropdown.label}
         onChange={(event: ChangeEvent<HTMLInputElement>) => {
           selectFilter?.({
+            id: selectedFilter?.id ? selectedFilter.id : v4(),
             fieldMetadataId: filterDefinitionUsedInDropdown.fieldMetadataId,
             value: event.target.value,
             operand: selectedOperandInDropdown,

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandSelect.tsx

@@ -1,4 +1,5 @@
 import { useRecoilValue } from 'recoil';
+import { v4 } from 'uuid';
 
 import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
@@ -42,6 +43,7 @@ export const ObjectFilterDropdownOperandSelect = () => {
       isDefined(selectedFilter)
     ) {
       selectFilter?.({
+        id: selectedFilter.id ? selectedFilter.id : v4(),
         fieldMetadataId: selectedFilter.fieldMetadataId,
         displayValue: selectedFilter.displayValue,
         operand: newOperand,

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOptionSelect.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useRecoilValue } from 'recoil';
+import { v4 } from 'uuid';
 
 import { FieldMetadataItemOption } from '@/object-metadata/types/FieldMetadataItem';
 import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
@@ -22,6 +23,7 @@ export const ObjectFilterDropdownOptionSelect = () => {
     objectFilterDropdownSearchInputState,
     selectedOperandInDropdownState,
     objectFilterDropdownSelectedOptionValuesState,
+    selectedFilterState,
     selectFilter,
   } = useFilterDropdown();
 
@@ -38,6 +40,8 @@ export const ObjectFilterDropdownOptionSelect = () => {
     objectFilterDropdownSelectedOptionValuesState,
   );
 
+  const selectedFilter = useRecoilValue(selectedFilterState);
+
   const fieldMetaDataId = filterDefinitionUsedInDropdown?.fieldMetadataId ?? '';
 
   const { selectOptions } = useOptionsForSelect(fieldMetaDataId);
@@ -96,6 +100,7 @@ export const ObjectFilterDropdownOptionSelect = () => {
           : EMPTY_FILTER_VALUE;
 
       selectFilter({
+        id: selectedFilter?.id ? selectedFilter.id : v4(),
         definition: filterDefinitionUsedInDropdown,
         operand: selectedOperandInDropdown,
         displayValue: filterDisplayValue,

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownRecordSelect.tsx

@@ -1,9 +1,13 @@
+import { useState } from 'react';
 import { useRecoilValue } from 'recoil';
+import { v4 } from 'uuid';
 
 import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
 import { MultipleRecordSelectDropdown } from '@/object-record/select/components/MultipleRecordSelectDropdown';
 import { useRecordsForSelect } from '@/object-record/select/hooks/useRecordsForSelect';
 import { SelectableRecord } from '@/object-record/select/types/SelectableRecord';
+import { useCombinedViewFilters } from '@/views/hooks/useCombinedViewFilters';
+import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
 import { isDefined } from '~/utils/isDefined';
 
 export const EMPTY_FILTER_VALUE = '[]';
@@ -14,12 +18,16 @@ export const ObjectFilterDropdownRecordSelect = () => {
     filterDefinitionUsedInDropdownState,
     objectFilterDropdownSearchInputState,
     selectedOperandInDropdownState,
+    selectedFilterState,
     setObjectFilterDropdownSelectedRecordIds,
     objectFilterDropdownSelectedRecordIdsState,
     selectFilter,
     emptyFilterButKeepDefinition,
   } = useFilterDropdown();
 
+  const { removeCombinedViewFilter } = useCombinedViewFilters();
+  const { currentViewWithCombinedFiltersAndSorts } = useGetCurrentView();
+
   const filterDefinitionUsedInDropdown = useRecoilValue(
     filterDefinitionUsedInDropdownState,
   );
@@ -32,6 +40,9 @@ export const ObjectFilterDropdownRecordSelect = () => {
   const objectFilterDropdownSelectedRecordIds = useRecoilValue(
     objectFilterDropdownSelectedRecordIdsState,
   );
+  const [fieldId] = useState(v4());
+
+  const selectedFilter = useRecoilValue(selectedFilterState);
 
   const objectNameSingular =
     filterDefinitionUsedInDropdown?.relationObjectMetadataNameSingular ?? '';
@@ -60,6 +71,7 @@ export const ObjectFilterDropdownRecordSelect = () => {
 
     if (newSelectedRecordIds.length === 0) {
       emptyFilterButKeepDefinition();
+      removeCombinedViewFilter(fieldId);
       return;
     }
 
@@ -91,7 +103,17 @@ export const ObjectFilterDropdownRecordSelect = () => {
           ? JSON.stringify(newSelectedRecordIds)
           : EMPTY_FILTER_VALUE;
 
+      const viewFilter =
+        currentViewWithCombinedFiltersAndSorts?.viewFilters.find(
+          (viewFilter) =>
+            viewFilter.fieldMetadataId ===
+            filterDefinitionUsedInDropdown.fieldMetadataId,
+        );
+
+      const filterId = viewFilter?.id ?? fieldId;
+
       selectFilter({
+        id: selectedFilter?.id ? selectedFilter.id : filterId,
         definition: filterDefinitionUsedInDropdown,
         operand: selectedOperandInDropdown,
         displayValue: filterDisplayValue,

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownTextSearchInput.tsx

@@ -1,5 +1,6 @@
-import { ChangeEvent } from 'react';
+import { ChangeEvent, useState } from 'react';
 import { useRecoilValue } from 'recoil';
+import { v4 } from 'uuid';
 
 import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
 import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
@@ -14,6 +15,8 @@ export const ObjectFilterDropdownTextSearchInput = () => {
     selectFilter,
   } = useFilterDropdown();
 
+  const [filterId] = useState(v4());
+
   const filterDefinitionUsedInDropdown = useRecoilValue(
     filterDefinitionUsedInDropdownState,
   );
@@ -37,6 +40,7 @@ export const ObjectFilterDropdownTextSearchInput = () => {
           setObjectFilterDropdownSearchInput(event.target.value);
 
           selectFilter?.({
+            id: selectedFilter?.id ? selectedFilter.id : filterId,
             fieldMetadataId: filterDefinitionUsedInDropdown.fieldMetadataId,
             value: event.target.value,
             operand: selectedOperandInDropdown,

packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/__tests__/useFilterDropdown.test.tsx

@@ -23,6 +23,7 @@ const filterDefinitions: FilterDefinition[] = [
 ];
 
 const mockFilter: Filter = {
+  id: 'id',
   definition: filterDefinitions[0],
   displayValue: '',
   fieldMetadataId: '',

packages/twenty-front/src/modules/object-record/object-filter-dropdown/types/Filter.ts

@@ -3,6 +3,7 @@ import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
 import { FilterDefinition } from './FilterDefinition';
 
 export type Filter = {
+  id: string;
   fieldMetadataId: string;
   value: string;
   displayValue: string;

packages/twenty-front/src/modules/object-record/record-index/hooks/useHandleToggleColumnFilter.ts

@@ -1,4 +1,5 @@
 import { useCallback } from 'react';
+import { v4 } from 'uuid';
 
 import { useColumnDefinitionsFromFieldMetadata } from '@/object-metadata/hooks/useColumnDefinitionsFromFieldMetadata';
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
@@ -46,6 +47,7 @@ export const useHandleToggleColumnFilter = ({
       const defaultOperand = availableOperandsForFilter[0];
 
       const newFilter: Filter = {
+        id: v4(),
         fieldMetadataId,
         operand: defaultOperand,
         displayValue: '',

packages/twenty-front/src/modules/views/components/EditableFilterChip.tsx

@@ -16,8 +16,8 @@ export const EditableFilterChip = ({
   const { getIcon } = useIcons();
   return (
     <SortOrFilterChip
-      key={viewFilter.fieldMetadataId}
-      testId={viewFilter.fieldMetadataId}
+      key={viewFilter.id}
+      testId={viewFilter.id}
       labelKey={viewFilter.definition.label}
       labelValue={`${getOperandLabelShort(viewFilter.operand)} ${
         viewFilter.displayValue

packages/twenty-front/src/modules/views/components/EditableFilterDropdownButton.tsx

@@ -62,13 +62,13 @@ export const EditableFilterDropdownButton = ({
   const handleRemove = () => {
     closeDropdown();
 
-    removeCombinedViewFilter(viewFilter.fieldMetadataId);
+    removeCombinedViewFilter(viewFilter.id);
   };
 
   const handleDropdownClickOutside = useCallback(() => {
-    const { value, fieldMetadataId } = viewFilter;
+    const { id: fieldId, value } = viewFilter;
     if (!value) {
-      removeCombinedViewFilter(fieldMetadataId);
+      removeCombinedViewFilter(fieldId);
     }
   }, [viewFilter, removeCombinedViewFilter]);