Implemented filter on FULL_NAME sub-fields (#11628)

This PR implements what's missing to have sub-field filtering.

There is a backend modification to save subFieldName, we just add this
field on view filter workspace entity.

This PR adds subFieldName where missing in frontend, notably in
applyFilter calls, that will be refactored soon.

Also fixes a bug in ViewBar where Add Filter button was at the right
side of the ViewBar, while it should be right after the chips section.

Another bug fixed where we wouldn't delete an empty record filter on
dropdown click outside from the view bar, which was already the case
where using the filter chip dropdown.

<img width="512" alt="image"
src="https://github.com/user-attachments/assets/e9a2f8d2-a66f-4800-853a-4df5c6b627a9"
/>

<img width="495" alt="image"
src="https://github.com/user-attachments/assets/7542697b-0689-4095-9c3c-b5e47875355f"
/>

---------

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

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

@@ -1,37 +1,56 @@
 import { useFieldMetadataItemById } from '@/object-metadata/hooks/useFieldMetadataItemById';
+import { getCompositeSubFieldLabel } from '@/object-record/object-filter-dropdown/utils/getCompositeSubFieldLabel';
 import { getOperandLabelShort } from '@/object-record/object-filter-dropdown/utils/getOperandLabel';
+import { isCompositeField } from '@/object-record/object-filter-dropdown/utils/isCompositeField';
 import { RecordFilter } from '@/object-record/record-filter/types/RecordFilter';
+import { isValidSubFieldName } from '@/settings/data-model/utils/isValidSubFieldName';
 import { SortOrFilterChip } from '@/views/components/SortOrFilterChip';
 import { isNonEmptyString } from '@sniptt/guards';
 import { useIcons } from 'twenty-ui/display';
 
 type EditableFilterChipProps = {
-  viewFilter: RecordFilter;
+  recordFilter: RecordFilter;
   onRemove: () => void;
 };
 
 export const EditableFilterChip = ({
-  viewFilter,
+  recordFilter,
   onRemove,
 }: EditableFilterChipProps) => {
   const { getIcon } = useIcons();
 
   const { fieldMetadataItem } = useFieldMetadataItemById(
-    viewFilter.fieldMetadataId,
+    recordFilter.fieldMetadataId,
   );
 
   const FieldMetadataItemIcon = getIcon(fieldMetadataItem.icon);
 
-  const operandLabelShort = getOperandLabelShort(viewFilter.operand);
+  const operandLabelShort = getOperandLabelShort(recordFilter.operand);
 
-  const labelKey = `${viewFilter.label}${isNonEmptyString(viewFilter.value) ? operandLabelShort : ''}`;
+  const recordFilterSubFieldName = recordFilter.subFieldName;
+
+  const subFieldLabel =
+    isCompositeField(fieldMetadataItem.type) &&
+    isNonEmptyString(recordFilterSubFieldName) &&
+    isValidSubFieldName(recordFilterSubFieldName)
+      ? getCompositeSubFieldLabel(
+          fieldMetadataItem.type,
+          recordFilterSubFieldName,
+        )
+      : '';
+
+  const fieldNameLabel = isNonEmptyString(subFieldLabel)
+    ? `${recordFilter.label} / ${subFieldLabel}`
+    : recordFilter.label;
+
+  const labelKey = `${fieldNameLabel}${isNonEmptyString(recordFilter.value) ? operandLabelShort : ''}`;
 
   return (
     <SortOrFilterChip
-      key={viewFilter.id}
-      testId={viewFilter.id}
+      key={recordFilter.id}
+      testId={recordFilter.id}
       labelKey={labelKey}
-      labelValue={viewFilter.displayValue}
+      labelValue={recordFilter.displayValue}
       Icon={FieldMetadataItemIcon}
       onRemove={onRemove}
     />

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

@@ -8,7 +8,7 @@ import { EditableFilterChip } from '@/views/components/EditableFilterChip';
 
 import { ObjectFilterOperandSelectAndInput } from '@/object-record/object-filter-dropdown/components/ObjectFilterOperandSelectAndInput';
 import { useRemoveRecordFilter } from '@/object-record/record-filter/hooks/useRemoveRecordFilter';
-import { RecordFilterOperand } from '@/object-record/record-filter/types/RecordFilterOperand';
+import { isRecordFilterConsideredEmpty } from '@/object-record/record-filter/utils/isRecordFilterConsideredEmpty';
 import { EditableFilterDropdownButtonEffect } from '@/views/components/EditableFilterDropdownButtonEffect';
 
 type EditableFilterDropdownButtonProps = {
@@ -31,17 +31,9 @@ export const EditableFilterDropdownButton = ({
   };
 
   const handleDropdownClickOutside = useCallback(() => {
-    const { value, operand } = recordFilter;
-    if (
-      !value &&
-      ![
-        RecordFilterOperand.IsEmpty,
-        RecordFilterOperand.IsNotEmpty,
-        RecordFilterOperand.IsInPast,
-        RecordFilterOperand.IsInFuture,
-        RecordFilterOperand.IsToday,
-      ].includes(operand)
-    ) {
+    const recordFilterIsEmpty = isRecordFilterConsideredEmpty(recordFilter);
+
+    if (recordFilterIsEmpty) {
       removeRecordFilter({ recordFilterId: recordFilter.id });
     }
   }, [recordFilter, removeRecordFilter]);
@@ -53,7 +45,7 @@ export const EditableFilterDropdownButton = ({
         dropdownId={recordFilter.id}
         clickableComponent={
           <EditableFilterChip
-            viewFilter={recordFilter}
+            recordFilter={recordFilter}
             onRemove={handleRemove}
           />
         }

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

@@ -70,12 +70,11 @@ const StyledActionButtonContainer = styled.div`
 `;
 
 const StyledFilterContainer = styled.div`
-  display: flex;
   align-items: center;
-  flex: 1;
-  overflow-x: hidden;
-
+  display: flex;
   gap: ${({ theme }) => theme.spacing(1)};
+
+  overflow-x: hidden;
 `;
 
 const StyledSeperatorContainer = styled.div`

packages/twenty-front/src/modules/views/hooks/internal/usePersistViewFilterRecords.ts

@@ -58,6 +58,7 @@ export const usePersistViewFilterRecords = () => {
                 operand: viewFilter.operand,
                 viewFilterGroupId: viewFilter.viewFilterGroupId,
                 positionInViewFilterGroup: viewFilter.positionInViewFilterGroup,
+                subFieldName: viewFilter.subFieldName ?? null,
               } satisfies Partial<ViewFilter>,
             },
             update: (cache, { data }) => {
@@ -98,6 +99,7 @@ export const usePersistViewFilterRecords = () => {
                 operand: viewFilter.operand,
                 positionInViewFilterGroup: viewFilter.positionInViewFilterGroup,
                 viewFilterGroupId: viewFilter.viewFilterGroupId,
+                subFieldName: viewFilter.subFieldName ?? null,
               } satisfies Partial<ViewFilter>,
             },
             update: (cache, { data }) => {

packages/twenty-front/src/modules/views/types/ViewFilter.ts

@@ -13,4 +13,5 @@ export type ViewFilter = {
   viewId?: string;
   viewFilterGroupId?: string;
   positionInViewFilterGroup?: number | null;
+  subFieldName?: string | null;
 };

packages/twenty-front/src/modules/views/utils/areViewFiltersEqual.ts

@@ -12,6 +12,7 @@ export const areViewFiltersEqual = (
     'value',
     'displayValue',
     'operand',
+    'subFieldName',
   ];
 
   return propertiesToCompare.every((property) =>

packages/twenty-front/src/modules/views/utils/mapRecordFilterToViewFilter.ts

@@ -13,5 +13,6 @@ export const mapRecordFilterToViewFilter = (
     value: recordFilter.value,
     positionInViewFilterGroup: recordFilter.positionInRecordFilterGroup,
     viewFilterGroupId: recordFilter.recordFilterGroupId,
+    subFieldName: recordFilter.subFieldName,
   };
 };

packages/twenty-front/src/modules/views/utils/mapViewFiltersToFilters.ts

@@ -3,8 +3,8 @@ import { RecordFilter } from '@/object-record/record-filter/types/RecordFilter';
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 
 import { getFilterTypeFromFieldType } from '@/object-metadata/utils/formatFieldMetadataItemsAsFilterDefinitions';
-import { ViewFilter } from '../types/ViewFilter';
 import { isDefined } from 'twenty-shared/utils';
+import { ViewFilter } from '../types/ViewFilter';
 
 export const mapViewFiltersToFilters = (
   viewFilters: ViewFilter[],
@@ -36,6 +36,7 @@ export const mapViewFiltersToFilters = (
         positionInRecordFilterGroup: viewFilter.positionInViewFilterGroup,
         label: availableFieldMetadataItem.label,
         type: filterType,
+        subFieldName: viewFilter.subFieldName,
       } satisfies RecordFilter;
     })
     .filter(isDefined);