Fix filter sub-field icons (#12456)

This PR fixes filter sub-field icons, with more relevant icons.

Fixes https://github.com/twentyhq/core-team-issues/issues/1006

packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterSubFieldSelectMenu.tsx

@@ -11,6 +11,8 @@ import { objectFilterDropdownIsSelectingCompositeFieldComponentState } from '@/o
 import { objectFilterDropdownSubMenuFieldTypeComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSubMenuFieldTypeComponentState';
 import { getCompositeSubFieldLabel } from '@/object-record/object-filter-dropdown/utils/getCompositeSubFieldLabel';
 import { getFilterableFieldTypeLabel } from '@/object-record/object-filter-dropdown/utils/getFilterableFieldTypeLabel';
+import { DEFAULT_ANY_SUB_FIELD_ICON_NAME } from '@/object-record/record-filter/constants/DefaultAnySubFieldIconName';
+import { ICON_NAME_BY_ANY_SUB_FIELD } from '@/object-record/record-filter/constants/IconNameByAnySubField';
 import { ICON_NAME_BY_SUB_FIELD } from '@/object-record/record-filter/constants/IconNameBySubField';
 import { areCompositeTypeSubFieldsFilterable } from '@/object-record/record-filter/utils/areCompositeTypeSubFieldsFilterable';
 import { isCompositeTypeFilterableByAnySubField } from '@/object-record/record-filter/utils/isCompositeTypeFilterableByAnySubField';
@@ -23,7 +25,7 @@ import { SelectableList } from '@/ui/layout/selectable-list/components/Selectabl
 import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
 import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState';
 import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
-import { IconApps, IconChevronLeft, useIcons } from 'twenty-ui/display';
+import { IconChevronLeft, useIcons } from 'twenty-ui/display';
 import { MenuItem } from 'twenty-ui/navigation';
 
 type AdvancedFilterSubFieldSelectMenuProps = {
@@ -110,6 +112,16 @@ export const AdvancedFilterSubFieldSelectMenu = ({
     ...subFieldNames.map((subFieldName) => subFieldName),
   ];
 
+  const iconNameForAnySubField = isDefined(fieldMetadataItemUsedInDropdown)
+    ? ICON_NAME_BY_ANY_SUB_FIELD[fieldMetadataItemUsedInDropdown?.type]
+    : (null ?? null);
+
+  const anySubFieldIcon = getIcon(
+    iconNameForAnySubField ??
+      fieldMetadataItemUsedInDropdown?.icon ??
+      DEFAULT_ANY_SUB_FIELD_ICON_NAME,
+  );
+
   return (
     <DropdownContent>
       <DropdownMenuHeader
@@ -143,8 +155,8 @@ export const AdvancedFilterSubFieldSelectMenu = ({
                 onClick={() => {
                   handleSelectFilter(fieldMetadataItemUsedInDropdown);
                 }}
-                LeftIcon={IconApps}
+                LeftIcon={anySubFieldIcon}
-                text={`Any ${getFilterableFieldTypeLabel(objectFilterDropdownSubMenuFieldType)} field`}
+                text={`Any ${fieldMetadataItemUsedInDropdown.label} field`}
               />
             </SelectableListItem>
           )}

packages/twenty-front/src/modules/object-record/record-filter/constants/DefaultAnySubFieldIconName.ts

@@ -0,0 +1 @@
+export const DEFAULT_ANY_SUB_FIELD_ICON_NAME = 'IconApps';

packages/twenty-front/src/modules/object-record/record-filter/constants/IconNameByAnySubField.ts

@@ -0,0 +1,13 @@
+import { FieldMetadataType } from 'twenty-shared/types';
+
+export const ICON_NAME_BY_ANY_SUB_FIELD: Partial<
+  Record<FieldMetadataType, string>
+> = {
+  [FieldMetadataType.LINKS]: 'IconLink',
+  [FieldMetadataType.EMAILS]: 'IconMail',
+  [FieldMetadataType.PHONES]: 'IconPhone',
+  [FieldMetadataType.ADDRESS]: 'IconMap',
+  [FieldMetadataType.ACTOR]: 'IconCreativeCommonsSa',
+  [FieldMetadataType.FULL_NAME]: 'IconUser',
+  [FieldMetadataType.POSITION]: 'IconBriefcase',
+};

packages/twenty-front/src/modules/object-record/record-filter/constants/IconNameBySubField.ts

@@ -5,13 +5,22 @@ export const ICON_NAME_BY_SUB_FIELD: Partial<
 > = {
   currencyCode: 'IconCurrencyDollar',
   amountMicros: 'IconNumber95Small',
-  name: 'IconAlignJustified',
+  name: 'IconTextSize',
-  source: 'IconFileArrowLeft',
+  source: 'IconTransferIn',
   primaryEmail: 'IconMail',
-  additionalEmails: 'IconList',
+  additionalEmails: 'IconMailPlus',
-  primaryLinkLabel: 'IconLabel',
+  primaryLinkLabel: 'IconTextSize',
   primaryLinkUrl: 'IconLink',
-  secondaryLinks: 'IconList',
+  secondaryLinks: 'IconLinkPlus',
-  primaryPhoneCallingCode: 'IconPlus',
+  primaryPhoneNumber: 'IconPhoneCall',
-  additionalPhones: 'IconList',
+  primaryPhoneCallingCode: 'IconFlag',
+  additionalPhones: 'IconPhonePlus',
+  addressCity: 'IconMapPin',
+  addressCountry: 'IconMapPin',
+  addressPostcode: 'IconMapPin',
+  addressStreet1: 'IconMapPin',
+  addressStreet2: 'IconMapPin',
+  addressState: 'IconMapPin',
+  firstName: 'IconTextSize',
+  lastName: 'IconTextSize',
 };

packages/twenty-ui/src/display/icon/components/TablerIcons.ts

@@ -4,18 +4,18 @@ export {
   IconAlertCircle,
   IconAlertTriangle,
   IconApi,
-  IconApps,
   IconAppWindow,
+  IconApps,
   IconArchive,
   IconArchiveOff,
   IconArrowBackUp,
   IconArrowDown,
   IconArrowLeft,
   IconArrowRight,
-  IconArrowsDiagonal,
-  IconArrowsVertical,
   IconArrowUp,
   IconArrowUpRight,
+  IconArrowsDiagonal,
+  IconArrowsVertical,
   IconAt,
   IconBaselineDensitySmall,
   IconBell,
@@ -47,8 +47,8 @@ export {
   IconChevronDown,
   IconChevronLeft,
   IconChevronRight,
-  IconChevronsRight,
   IconChevronUp,
+  IconChevronsRight,
   IconCircleDot,
   IconCircleOff,
   IconCirclePlus,
@@ -190,6 +190,7 @@ export {
   IconLifebuoy,
   IconLink,
   IconLinkOff,
+  IconLinkPlus,
   IconList,
   IconListCheck,
   IconListDetails,

packages/twenty-ui/src/display/icon/providers/internal/AllIcons.ts

@@ -2530,6 +2530,7 @@ import {
   IconLineHeight,
   IconLink,
   IconLinkOff,
+  IconLinkPlus,
   IconList,
   IconListCheck,
   IconListDetails,
@@ -6714,6 +6715,7 @@ export const ALL_ICONS = {
   IconLineDotted,
   IconLineHeight,
   IconLink,
+  IconLinkPlus,
   IconLinkOff,
   IconList,
   IconListCheck,

packages/twenty-ui/src/display/index.ts

@@ -65,18 +65,18 @@ export {
   IconAlertCircle,
   IconAlertTriangle,
   IconApi,
-  IconApps,
   IconAppWindow,
+  IconApps,
   IconArchive,
   IconArchiveOff,
   IconArrowBackUp,
   IconArrowDown,
   IconArrowLeft,
   IconArrowRight,
-  IconArrowsDiagonal,
-  IconArrowsVertical,
   IconArrowUp,
   IconArrowUpRight,
+  IconArrowsDiagonal,
+  IconArrowsVertical,
   IconAt,
   IconBaselineDensitySmall,
   IconBell,
@@ -108,8 +108,8 @@ export {
   IconChevronDown,
   IconChevronLeft,
   IconChevronRight,
-  IconChevronsRight,
   IconChevronUp,
+  IconChevronsRight,
   IconCircleDot,
   IconCircleOff,
   IconCirclePlus,
@@ -251,6 +251,7 @@ export {
   IconLifebuoy,
   IconLink,
   IconLinkOff,
+  IconLinkPlus,
   IconList,
   IconListCheck,
   IconListDetails,