admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix filter sub-field icons (#12456)

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

Fixes https://github.com/twentyhq/core-team-issues/issues/1006
This commit is contained in:
Lucas Bordeau
2025-06-05 20:54:49 +02:00
committed by GitHub
parent 7c898cd008
commit c75f10bc33
7 changed files with 57 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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}
text={`Any ${getFilterableFieldTypeLabel(objectFilterDropdownSubMenuFieldType)} field`}
LeftIcon={anySubFieldIcon}
text={`Any ${fieldMetadataItemUsedInDropdown.label} field`}
/>
</SelectableListItem>
)}

1
packages/twenty-front/src/modules/object-record/record-filter/constants/DefaultAnySubFieldIconName.ts Normal file
View File

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

13
packages/twenty-front/src/modules/object-record/record-filter/constants/IconNameByAnySubField.ts Normal file
View File

@ -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',
};

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

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