Fix missing positionInRecordFilterGroup in applyFilter legacy logic (#11230)

This PR fixes a bug where modifying a filter in the advanced filter
dropdown was making it change its position in the filter list.

This is due to the legacy logic of applyFilter(), which outlines the
importance of the needed refactor to remove this logic which requires
duplicating code modification in nearly every component that can modify
a record filter.

This refactor will be addressed over the next sprints, because there are
underlying sub-refactors to tackle first, as outlined by
https://github.com/twentyhq/core-team-issues/issues/559

packages/twenty-front/src/modules/object-record/advanced-filter/hooks/useSelectFieldUsedInAdvancedFilterDropdown.ts

@@ -93,6 +93,8 @@ export const useSelectFieldUsedInAdvancedFilterDropdown = () => {
       operand: firstOperand,
       value,
       recordFilterGroupId: existingRecordFilter?.recordFilterGroupId,
+      positionInRecordFilterGroup:
+        existingRecordFilter?.positionInRecordFilterGroup,
       type: filterType,
       label: fieldMetadataItem.label,
       subFieldName,

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

@@ -14,8 +14,8 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
-import { IconCheck } from 'twenty-ui';
 import { isDefined } from 'twenty-shared/utils';
+import { IconCheck } from 'twenty-ui';
 
 const StyledBooleanSelectContainer = styled.div<{ selected?: boolean }>`
   align-items: center;
@@ -79,6 +79,7 @@ export const ObjectFilterDropdownBooleanSelect = () => {
       fieldMetadataId: fieldMetadataItemUsedInDropdown.id,
       value: value.toString(),
       recordFilterGroupId: selectedFilter?.recordFilterGroupId,
+      positionInRecordFilterGroup: selectedFilter?.positionInRecordFilterGroup,
       type: getFilterTypeFromFieldType(fieldMetadataItemUsedInDropdown.type),
       label: fieldMetadataItemUsedInDropdown.label,
     });

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

@@ -60,6 +60,7 @@ export const ObjectFilterDropdownDateInput = () => {
           : newDate.toLocaleDateString()
         : '',
       recordFilterGroupId: selectedFilter?.recordFilterGroupId,
+      positionInRecordFilterGroup: selectedFilter?.positionInRecordFilterGroup,
       type: getFilterTypeFromFieldType(fieldMetadataItemUsedInDropdown.type),
       label: fieldMetadataItemUsedInDropdown.label,
     });
@@ -89,6 +90,7 @@ export const ObjectFilterDropdownDateInput = () => {
       operand: selectedOperandInDropdown,
       displayValue: getRelativeDateDisplayValue(relativeDate),
       recordFilterGroupId: selectedFilter?.recordFilterGroupId,
+      positionInRecordFilterGroup: selectedFilter?.positionInRecordFilterGroup,
       type: getFilterTypeFromFieldType(fieldMetadataItemUsedInDropdown.type),
       label: fieldMetadataItemUsedInDropdown.label,
     });

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

@@ -68,6 +68,8 @@ export const ObjectFilterDropdownNumberInput = () => {
               ),
               label: fieldMetadataItemUsedInDropdown.label,
               recordFilterGroupId: selectedFilter?.recordFilterGroupId,
+              positionInRecordFilterGroup:
+                selectedFilter?.positionInRecordFilterGroup,
             });
           }}
         />

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

@@ -23,8 +23,8 @@ import { SingleRecordPickerHotkeyScope } from '@/object-record/record-picker/sin
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
-import { MenuItem, MenuItemMultiSelect } from 'twenty-ui';
 import { isDefined } from 'twenty-shared/utils';
+import { MenuItem, MenuItemMultiSelect } from 'twenty-ui';
 
 export const EMPTY_FILTER_VALUE = '';
 export const MAX_OPTIONS_TO_DISPLAY = 3;
@@ -146,6 +146,8 @@ export const ObjectFilterDropdownOptionSelect = () => {
         fieldMetadataId: fieldMetadataItemUsedInDropdown.id,
         value: newFilterValue,
         recordFilterGroupId: selectedFilter?.recordFilterGroupId,
+        positionInRecordFilterGroup:
+          selectedFilter?.positionInRecordFilterGroup,
       });
     }
     resetSelectedItem();

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

@@ -71,6 +71,8 @@ export const ObjectFilterDropdownRatingInput = () => {
               operand: selectedOperandInDropdown,
               displayValue: convertFieldRatingValueToNumber(newValue),
               recordFilterGroupId: selectedFilter?.recordFilterGroupId,
+              positionInRecordFilterGroup:
+                selectedFilter?.positionInRecordFilterGroup,
               type: getFilterTypeFromFieldType(
                 fieldMetadataItemUsedInDropdown.type,
               ),

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

@@ -233,6 +233,8 @@ export const ObjectFilterDropdownRecordSelect = ({
           value: newFilterValue,
           recordFilterGroupId:
             duplicateFilterInCurrentRecordFilters.recordFilterGroupId,
+          positionInRecordFilterGroup:
+            duplicateFilterInCurrentRecordFilters.positionInRecordFilterGroup,
         });
       } else {
         applyRecordFilter({
@@ -246,6 +248,8 @@ export const ObjectFilterDropdownRecordSelect = ({
           fieldMetadataId: fieldMetadataItemUsedInFilterDropdown.id,
           value: newFilterValue,
           recordFilterGroupId: selectedFilter?.recordFilterGroupId,
+          positionInRecordFilterGroup:
+            selectedFilter?.positionInRecordFilterGroup,
         });
       }
     }

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

@@ -128,6 +128,8 @@ export const ObjectFilterDropdownSourceSelect = ({
         value: newFilterValue,
         recordFilterGroupId: selectedFilter?.recordFilterGroupId,
         subFieldName: 'source',
+        positionInRecordFilterGroup:
+          selectedFilter?.positionInRecordFilterGroup,
       });
     }
   };

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

@@ -68,6 +68,8 @@ export const ObjectFilterDropdownTextInput = () => {
               ),
               label: fieldMetadataItemUsedInDropdown.label,
               recordFilterGroupId: selectedFilter?.recordFilterGroupId,
+              positionInRecordFilterGroup:
+                selectedFilter?.positionInRecordFilterGroup,
             });
           }}
         />