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

Removed availableFilterDefinitions as a state but kept its usage as a derived state of objectMetadataItems (#9972)

Browse Source 
The global record filter refactor will derive everything at runtime from
objectMetadataItemsState, thus removing the need for a filter definition
concept.

Here we don't yet remove available filter definition usage but we
replace the available filter definitions states, we now derive the same
value from objectMetadataItemsState.

This will allow us to progressively remove the usage of the concept of
filter definition, at the end it will then be easy to just remove from
the codebase because nothing will use it anymore.
This commit is contained in:
Lucas Bordeau
2025-02-03 17:29:57 +01:00
committed by GitHub
parent c8af90dc01
commit b29ff9b4e6
32 changed files with 566 additions and 423 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,17 +1,18 @@
import { useObjectMetadataItemById } from '@/object-metadata/hooks/useObjectMetadataItemById';
import { availableFieldMetadataItemsForFilterFamilySelector } from '@/object-metadata/states/availableFieldMetadataItemsForFilterFamilySelector';
import { formatFieldMetadataItemAsFilterDefinition } from '@/object-metadata/utils/formatFieldMetadataItemsAsFilterDefinitions';
import { useUpsertCombinedViewFilterGroup } from '@/object-record/advanced-filter/hooks/useUpsertCombinedViewFilterGroup';
import { getRecordFilterOperandsForRecordFilterDefinition } from '@/object-record/record-filter/utils/getRecordFilterOperandsForRecordFilterDefinition';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { ADVANCED_FILTER_DROPDOWN_ID } from '@/views/constants/AdvancedFilterDropdownId';
import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
import { useUpsertCombinedViewFilters } from '@/views/hooks/useUpsertCombinedViewFilters';
import { availableFilterDefinitionsComponentState } from '@/views/states/availableFilterDefinitionsComponentState';
import { ViewFilterGroup } from '@/views/types/ViewFilterGroup';
import { ViewFilterGroupLogicalOperator } from '@/views/types/ViewFilterGroupLogicalOperator';
import { useCallback } from 'react';
import { useRecoilValue } from 'recoil';
import { isDefined } from 'twenty-shared';
import { IconLibraryPlus, IconPlus, LightButton, MenuItem } from 'twenty-ui';
import { v4 } from 'uuid';
@ -41,7 +42,7 @@ export const AdvancedFilterAddFilterRuleSelect = ({
const objectMetadataId =
currentViewWithCombinedFiltersAndSorts?.objectMetadataId;
if (!objectMetadataId) {
if (!isDefined(objectMetadataId)) {
throw new Error('Object metadata id is missing from current view');
}
@ -49,33 +50,45 @@ export const AdvancedFilterAddFilterRuleSelect = ({
objectId: objectMetadataId,
});
const availableFilterDefinitions = useRecoilComponentValueV2(
availableFilterDefinitionsComponentState,
const availableFieldMetadataItemsForFilter = useRecoilValue(
availableFieldMetadataItemsForFilterFamilySelector({
objectMetadataItemId: objectMetadataId,
}),
);
const getDefaultFilterDefinition = useCallback(() => {
const defaultFilterDefinition =
availableFilterDefinitions.find(
(filterDefinition) =>
filterDefinition.fieldMetadataId ===
const getDefaultFieldMetadataItem = useCallback(() => {
const defaultFieldMetadataItem =
availableFieldMetadataItemsForFilter.find(
(fieldMetadataItem) =>
fieldMetadataItem.id ===
objectMetadataItem?.labelIdentifierFieldMetadataId,
) ?? availableFilterDefinitions?.[0];
) ?? availableFieldMetadataItemsForFilter[0];
if (!defaultFilterDefinition) {
throw new Error('Missing default filter definition');
if (!isDefined(defaultFieldMetadataItem)) {
throw new Error(
`Could not find default field metadata item for object ${objectMetadataId}`,
);
}
return defaultFilterDefinition;
}, [availableFilterDefinitions, objectMetadataItem]);
return defaultFieldMetadataItem;
}, [
availableFieldMetadataItemsForFilter,
objectMetadataItem,
objectMetadataId,
]);
const handleAddFilter = () => {
closeDropdown();
const defaultFilterDefinition = getDefaultFilterDefinition();
const defaultFieldMetadataItem = getDefaultFieldMetadataItem();
const defaultFilterDefinition = formatFieldMetadataItemAsFilterDefinition({
field: defaultFieldMetadataItem,
});
upsertCombinedViewFilter({
id: v4(),
fieldMetadataId: defaultFilterDefinition.fieldMetadataId,
fieldMetadataId: defaultFieldMetadataItem.id,
operand: getRecordFilterOperandsForRecordFilterDefinition(
defaultFilterDefinition,
)[0],
@ -104,11 +117,15 @@ export const AdvancedFilterAddFilterRuleSelect = ({
upsertCombinedViewFilterGroup(newViewFilterGroup);
const defaultFilterDefinition = getDefaultFilterDefinition();
const defaultFieldMetadataItem = getDefaultFieldMetadataItem();
const defaultFilterDefinition = formatFieldMetadataItemAsFilterDefinition({
field: defaultFieldMetadataItem,
});
upsertCombinedViewFilter({
id: v4(),
fieldMetadataId: defaultFilterDefinition.fieldMetadataId,
fieldMetadataId: defaultFieldMetadataItem.id,
operand: getRecordFilterOperandsForRecordFilterDefinition(
defaultFilterDefinition,
)[0],

13
packages/twenty-front/src/modules/object-record/advanced-filter/hooks/useCurrentViewFilter.ts
View File

@ -1,6 +1,5 @@
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { useFilterDefinitionsFromFilterableFieldMetadataItems } from '@/object-record/record-filter/hooks/useFilterDefinitionsFromFilterableFieldMetadataItems';
import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
import { availableFilterDefinitionsComponentState } from '@/views/states/availableFilterDefinitionsComponentState';
import { mapViewFiltersToFilters } from '@/views/utils/mapViewFiltersToFilters';
export const useCurrentViewFilter = ({
@ -8,9 +7,8 @@ export const useCurrentViewFilter = ({
}: {
viewFilterId?: string;
}) => {
const availableFilterDefinitions = useRecoilComponentValueV2(
availableFilterDefinitionsComponentState,
);
const { filterDefinitions } =
useFilterDefinitionsFromFilterableFieldMetadataItems();
const { currentViewWithCombinedFiltersAndSorts } = useGetCurrentView();
@ -22,10 +20,7 @@ export const useCurrentViewFilter = ({
return undefined;
}
const [filter] = mapViewFiltersToFilters(
[viewFilter],
availableFilterDefinitions,
);
const [filter] = mapViewFiltersToFilters([viewFilter], filterDefinitions);
return filter;
};

37
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/AdvancedFilterButton.tsx
View File

@ -1,15 +1,17 @@
import { useObjectMetadataItemById } from '@/object-metadata/hooks/useObjectMetadataItemById';
import { availableFieldMetadataItemsForFilterFamilySelector } from '@/object-metadata/states/availableFieldMetadataItemsForFilterFamilySelector';
import { formatFieldMetadataItemAsFilterDefinition } from '@/object-metadata/utils/formatFieldMetadataItemsAsFilterDefinitions';
import { useUpsertCombinedViewFilterGroup } from '@/object-record/advanced-filter/hooks/useUpsertCombinedViewFilterGroup';
import { OBJECT_FILTER_DROPDOWN_ID } from '@/object-record/object-filter-dropdown/constants/ObjectFilterDropdownId';
import { getRecordFilterOperandsForRecordFilterDefinition } from '@/object-record/record-filter/utils/getRecordFilterOperandsForRecordFilterDefinition';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { ADVANCED_FILTER_DROPDOWN_ID } from '@/views/constants/AdvancedFilterDropdownId';
import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
import { useUpsertCombinedViewFilters } from '@/views/hooks/useUpsertCombinedViewFilters';
import { availableFilterDefinitionsComponentState } from '@/views/states/availableFilterDefinitionsComponentState';
import { ViewFilterGroupLogicalOperator } from '@/views/types/ViewFilterGroupLogicalOperator';
import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
import { isDefined } from 'twenty-shared';
import {
IconFilter,
MenuItemLeftContent,
@ -66,8 +68,10 @@ export const AdvancedFilterButton = () => {
objectId: objectMetadataId ?? null,
});
const availableFilterDefinitions = useRecoilComponentValueV2(
availableFilterDefinitionsComponentState,
const availableFieldMetadataItemsForFilter = useRecoilValue(
availableFieldMetadataItemsForFilterFamilySelector({
objectMetadataItemId: objectMetadataItem.id,
}),
);
const handleClick = () => {
@ -88,24 +92,27 @@ export const AdvancedFilterButton = () => {
upsertCombinedViewFilterGroup(newViewFilterGroup);
const defaultFilterDefinition =
availableFilterDefinitions.find(
(filterDefinition) =>
filterDefinition.fieldMetadataId ===
const defaultFieldMetadataItem =
availableFieldMetadataItemsForFilter.find(
(fieldMetadataItem) =>
fieldMetadataItem.id ===
objectMetadataItem?.labelIdentifierFieldMetadataId,
) ?? availableFilterDefinitions?.[0];
) ?? availableFieldMetadataItemsForFilter[0];
if (!defaultFilterDefinition) {
if (!isDefined(defaultFieldMetadataItem)) {
throw new Error('Missing default filter definition');
}
const filterDefinition = formatFieldMetadataItemAsFilterDefinition({
field: defaultFieldMetadataItem,
});
upsertCombinedViewFilter({
id: v4(),
fieldMetadataId: defaultFilterDefinition.fieldMetadataId,
operand: getRecordFilterOperandsForRecordFilterDefinition(
defaultFilterDefinition,
)[0],
definition: defaultFilterDefinition,
fieldMetadataId: defaultFieldMetadataItem.id,
operand:
getRecordFilterOperandsForRecordFilterDefinition(filterDefinition)[0],
definition: filterDefinition,
value: '',
displayValue: '',
viewFilterGroupId: newViewFilterGroup.id,

14
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownButton.tsx
View File

@ -1,8 +1,7 @@
import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
import { ObjectFilterDropdownComponentInstanceContext } from '@/object-record/object-filter-dropdown/states/contexts/ObjectFilterDropdownComponentInstanceContext';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { availableFilterDefinitionsComponentState } from '@/views/states/availableFilterDefinitionsComponentState';
import { useFilterableFieldMetadataItems } from '@/object-record/record-filter/hooks/useFilterableFieldMetadataItems';
import { MultipleFiltersDropdownButton } from './MultipleFiltersDropdownButton';
import { SingleEntityObjectFilterDropdownButton } from './SingleEntityObjectFilterDropdownButton';
@ -15,16 +14,13 @@ export const ObjectFilterDropdownButton = ({
filterDropdownId,
hotkeyScope,
}: ObjectFilterDropdownButtonProps) => {
const availableFilterDefinitions = useRecoilComponentValueV2(
availableFilterDefinitionsComponentState,
filterDropdownId,
);
const { filterableFieldMetadataItems } = useFilterableFieldMetadataItems();
const hasOnlyOneEntityFilter =
availableFilterDefinitions.length === 1 &&
availableFilterDefinitions[0].type === 'RELATION';
filterableFieldMetadataItems.length === 1 &&
filterableFieldMetadataItems[0].type === 'RELATION';
if (!availableFilterDefinitions.length) {
if (!filterableFieldMetadataItems.length) {
return <></>;
}

67
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect.tsx
View File

@ -19,14 +19,15 @@ import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectab
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
import { availableFilterDefinitionsComponentState } from '@/views/states/availableFilterDefinitionsComponentState';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
import { isDefined } from 'twenty-shared';
import { FeatureFlagKey } from '~/generated/graphql';
import { formatFieldMetadataItemAsFilterDefinition } from '@/object-metadata/utils/formatFieldMetadataItemsAsFilterDefinitions';
import { advancedFilterViewFilterIdComponentState } from '@/object-record/object-filter-dropdown/states/advancedFilterViewFilterIdComponentState';
import { fieldMetadataItemIdUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/fieldMetadataItemIdUsedInDropdownComponentState';
import { FiltersHotkeyScope } from '@/object-record/object-filter-dropdown/types/FiltersHotkeyScope';
import { useFilterableFieldMetadataItems } from '@/object-record/record-filter/hooks/useFilterableFieldMetadataItems';
import { useLingui } from '@lingui/react/macro';
export const StyledInput = styled.input`
@ -80,9 +81,7 @@ export const ObjectFilterDropdownFilterSelect = ({
advancedFilterViewFilterId,
);
const availableFilterDefinitions = useRecoilComponentValueV2(
availableFilterDefinitionsComponentState,
);
const { filterableFieldMetadataItems } = useFilterableFieldMetadataItems();
const visibleTableColumns = useRecoilComponentValueV2(
visibleTableColumnsComponentSelector,
@ -99,29 +98,29 @@ export const ObjectFilterDropdownFilterSelect = ({
(column) => column.fieldMetadataId,
);
const filteredSearchInputFilterDefinitions =
availableFilterDefinitions.filter((item) =>
item.label
const filteredSearchInputFieldMetadataItems =
filterableFieldMetadataItems.filter((fieldMetadataItem) =>
fieldMetadataItem.label
.toLocaleLowerCase()
.includes(objectFilterDropdownSearchInput.toLocaleLowerCase()),
);
const visibleColumnsFilterDefinitions = filteredSearchInputFilterDefinitions
const visibleColumnsFieldMetadataItems = filteredSearchInputFieldMetadataItems
.sort((a, b) => {
return (
visibleColumnsIds.indexOf(a.fieldMetadataId) -
visibleColumnsIds.indexOf(b.fieldMetadataId)
);
return visibleColumnsIds.indexOf(a.id) - visibleColumnsIds.indexOf(b.id);
})
.filter((item) => visibleColumnsIds.includes(item.fieldMetadataId));
.filter((fieldMetadataItem) =>
visibleColumnsIds.includes(fieldMetadataItem.id),
);
const hiddenColumnsFilterDefinitions = filteredSearchInputFilterDefinitions
const hiddenColumnsFieldMetadataItems = filteredSearchInputFieldMetadataItems
.sort((a, b) => a.label.localeCompare(b.label))
.filter((item) => hiddenColumnIds.includes(item.fieldMetadataId));
.filter((fieldMetadataItem) =>
hiddenColumnIds.includes(fieldMetadataItem.id),
);
const selectableListItemIds = availableFilterDefinitions.map(
(item) => item.fieldMetadataId,
const selectableFieldMetadataItemIds = filterableFieldMetadataItems.map(
(fieldMetadataItem) => fieldMetadataItem.id,
);
const { selectFilterDefinitionUsedInDropdown } =
@ -134,16 +133,20 @@ export const ObjectFilterDropdownFilterSelect = ({
const { resetSelectedItem } = useSelectableList(OBJECT_FILTER_DROPDOWN_ID);
const handleEnter = (fieldMetadataItemId: string) => {
const selectedFilterDefinition = availableFilterDefinitions.find(
(item) => item.fieldMetadataId === fieldMetadataItemId,
const selectedFieldMetadataItem = filterableFieldMetadataItems.find(
(fieldMetadataItem) => fieldMetadataItem.id === fieldMetadataItemId,
);
if (!isDefined(selectedFilterDefinition)) {
if (!isDefined(selectedFieldMetadataItem)) {
return;
}
resetSelectedItem();
const selectedFilterDefinition = formatFieldMetadataItemAsFilterDefinition({
field: selectedFieldMetadataItem,
});
selectFilterDefinitionUsedInDropdown({
filterDefinition: selectedFilterDefinition,
});
@ -156,8 +159,8 @@ export const ObjectFilterDropdownFilterSelect = ({
};
const shoudShowSeparator =
visibleColumnsFilterDefinitions.length > 0 &&
hiddenColumnsFilterDefinitions.length > 0;
visibleColumnsFieldMetadataItems.length > 0 &&
hiddenColumnsFieldMetadataItems.length > 0;
const { currentViewId, currentViewWithCombinedFiltersAndSorts } =
useGetCurrentView();
@ -186,32 +189,32 @@ export const ObjectFilterDropdownFilterSelect = ({
/>
<SelectableList
hotkeyScope={FiltersHotkeyScope.ObjectFilterDropdownButton}
selectableItemIdArray={selectableListItemIds}
selectableItemIdArray={selectableFieldMetadataItemIds}
selectableListId={OBJECT_FILTER_DROPDOWN_ID}
onEnter={handleEnter}
>
<DropdownMenuItemsContainer>
{visibleColumnsFilterDefinitions.map(
(visibleFilterDefinition, index) => (
{visibleColumnsFieldMetadataItems.map(
(visibleFieldMetadataItem, index) => (
<SelectableItem
itemId={visibleFilterDefinition.fieldMetadataId}
itemId={visibleFieldMetadataItem.id}
key={`visible-select-filter-${index}`}
>
<ObjectFilterDropdownFilterSelectMenuItem
filterDefinition={visibleFilterDefinition}
fieldMetadataItemToSelect={visibleFieldMetadataItem}
/>
</SelectableItem>
),
)}
{shoudShowSeparator && <DropdownMenuSeparator />}
{hiddenColumnsFilterDefinitions.map(
(hiddenFilterDefinition, index) => (
{hiddenColumnsFieldMetadataItems.map(
(hiddenFieldMetadataItem, index) => (
<SelectableItem
itemId={hiddenFilterDefinition.fieldMetadataId}
itemId={hiddenFieldMetadataItem.id}
key={`hidden-select-filter-${index}`}
>
<ObjectFilterDropdownFilterSelectMenuItem
filterDefinition={hiddenFilterDefinition}
fieldMetadataItemToSelect={hiddenFieldMetadataItem}
/>
</SelectableItem>
),

44
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectMenuItem.tsx
View File

@ -1,7 +1,5 @@
import { useAdvancedFilterDropdown } from '@/object-record/advanced-filter/hooks/useAdvancedFilterDropdown';
import { OBJECT_FILTER_DROPDOWN_ID } from '@/object-record/object-filter-dropdown/constants/ObjectFilterDropdownId';
import { useSelectFilterDefinitionUsedInDropdown } from '@/object-record/object-filter-dropdown/hooks/useSelectFilterDefinitionUsedInDropdown';
import { advancedFilterViewFilterIdComponentState } from '@/object-record/object-filter-dropdown/states/advancedFilterViewFilterIdComponentState';
import { fieldMetadataItemIdUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/fieldMetadataItemIdUsedInDropdownComponentState';
import { objectFilterDropdownFilterIsSelectedComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownFilterIsSelectedComponentState';
@ -9,8 +7,12 @@ import { objectFilterDropdownFirstLevelFilterDefinitionComponentState } from '@/
import { objectFilterDropdownIsSelectingCompositeFieldComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownIsSelectingCompositeFieldComponentState';
import { objectFilterDropdownSubMenuFieldTypeComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSubMenuFieldTypeComponentState';
import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState';
import { isCompositeField } from '@/object-record/object-filter-dropdown/utils/isCompositeField';
import { CompositeFilterableFieldType } from '@/object-record/record-filter/types/CompositeFilterableFieldType';
import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { formatFieldMetadataItemAsFilterDefinition } from '@/object-metadata/utils/formatFieldMetadataItemsAsFilterDefinitions';
import { filterDefinitionUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/filterDefinitionUsedInDropdownComponentState';
import { isCompositeField } from '@/object-record/object-filter-dropdown/utils/isCompositeField';
import { RecordFilterDefinition } from '@/object-record/record-filter/types/RecordFilterDefinition';
import { getRecordFilterOperandsForRecordFilterDefinition } from '@/object-record/record-filter/utils/getRecordFilterOperandsForRecordFilterDefinition';
import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope';
@ -23,15 +25,12 @@ import { useRecoilValue } from 'recoil';
import { MenuItemSelect, useIcons } from 'twenty-ui';
export type ObjectFilterDropdownFilterSelectMenuItemProps = {
filterDefinition: RecordFilterDefinition;
fieldMetadataItemToSelect: FieldMetadataItem;
};
export const ObjectFilterDropdownFilterSelectMenuItem = ({
filterDefinition,
fieldMetadataItemToSelect,
}: ObjectFilterDropdownFilterSelectMenuItemProps) => {
const { selectFilterDefinitionUsedInDropdown } =
useSelectFilterDefinitionUsedInDropdown();
const setFieldMetadataItemIdUsedInDropdown = useSetRecoilComponentStateV2(
fieldMetadataItemIdUsedInDropdownComponentState,
);
@ -58,16 +57,24 @@ export const ObjectFilterDropdownFilterSelectMenuItem = ({
OBJECT_FILTER_DROPDOWN_ID,
);
const filterDefinitionToSelect = formatFieldMetadataItemAsFilterDefinition({
field: fieldMetadataItemToSelect,
});
const isSelectedItem = useRecoilValue(
isSelectedItemIdSelector(filterDefinition.fieldMetadataId),
isSelectedItemIdSelector(fieldMetadataItemToSelect.id),
);
const isACompositeField = isCompositeField(filterDefinition.type);
const isACompositeField = isCompositeField(fieldMetadataItemToSelect.type);
const setSelectedOperandInDropdown = useSetRecoilComponentStateV2(
selectedOperandInDropdownComponentState,
);
const setFilterDefinitionUsedInDropdown = useSetRecoilComponentStateV2(
filterDefinitionUsedInDropdownComponentState,
);
const advancedFilterViewFilterId = useRecoilComponentValueV2(
advancedFilterViewFilterIdComponentState,
);
@ -83,13 +90,10 @@ export const ObjectFilterDropdownFilterSelectMenuItem = ({
) => {
closeAdvancedFilterDropdown();
selectFilterDefinitionUsedInDropdown({
filterDefinition: availableFilterDefinition,
});
setFieldMetadataItemIdUsedInDropdown(
availableFilterDefinition.fieldMetadataId,
);
setFilterDefinitionUsedInDropdown(availableFilterDefinition);
if (
availableFilterDefinition.type === 'RELATION' ||
@ -115,12 +119,14 @@ export const ObjectFilterDropdownFilterSelectMenuItem = ({
if (isACompositeField) {
// TODO: create isCompositeFilterableFieldType type guard
setObjectFilterDropdownSubMenuFieldType(
filterDefinition.type as CompositeFilterableFieldType,
filterDefinitionToSelect.type as CompositeFilterableFieldType,
);
setObjectFilterDropdownFirstLevelFilterDefinition(
filterDefinitionToSelect,
);
setObjectFilterDropdownFirstLevelFilterDefinition(filterDefinition);
setObjectFilterDropdownIsSelectingCompositeField(true);
} else {
handleSelectFilterDefinition(filterDefinition);
handleSelectFilterDefinition(filterDefinitionToSelect);
}
};
@ -129,8 +135,8 @@ export const ObjectFilterDropdownFilterSelectMenuItem = ({
selected={false}
hovered={isSelectedItem}
onClick={handleClick}
LeftIcon={getIcon(filterDefinition.iconName)}
text={filterDefinition.label}
LeftIcon={getIcon(filterDefinitionToSelect.iconName)}
text={filterDefinitionToSelect.label}
hasSubMenu={isACompositeField}
/>
);

95
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/SingleEntityObjectFilterDropdownButton.tsx
View File

@ -1,5 +1,4 @@
import { useTheme } from '@emotion/react';
import React from 'react';
import { IconChevronDown } from 'twenty-ui';
import { ObjectFilterDropdownRecordRemoveFilterMenuItem } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownRecordRemoveFilterMenuItem';
@ -8,15 +7,10 @@ import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownM
import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/StyledHeaderDropdownButton';
import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
import { fieldMetadataItemIdUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/fieldMetadataItemIdUsedInDropdownComponentState';
import { filterDefinitionUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/filterDefinitionUsedInDropdownComponentState';
import { SingleEntityObjectFilterDropdownButtonEffect } from '@/object-record/object-filter-dropdown/components/SingleEntityObjectFilterDropdownButtonEffect';
import { selectedFilterComponentState } from '@/object-record/object-filter-dropdown/states/selectedFilterComponentState';
import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
import { availableFilterDefinitionsComponentState } from '@/views/states/availableFilterDefinitionsComponentState';
import { useLingui } from '@lingui/react/macro';
import { getRecordFilterOperandsForRecordFilterDefinition } from '../../record-filter/utils/getRecordFilterOperandsForRecordFilterDefinition';
import { GenericEntityFilterChip } from './GenericEntityFilterChip';
import { ObjectFilterDropdownRecordSelect } from './ObjectFilterDropdownRecordSelect';
import { ObjectFilterDropdownSearchInput } from './ObjectFilterDropdownSearchInput';
@ -32,68 +26,37 @@ export const SingleEntityObjectFilterDropdownButton = ({
selectedFilterComponentState,
);
const setFilterDefinitionUsedInDropdown = useSetRecoilComponentStateV2(
filterDefinitionUsedInDropdownComponentState,
);
const setFieldMetadataItemIdUsedInDropdown = useSetRecoilComponentStateV2(
fieldMetadataItemIdUsedInDropdownComponentState,
);
const setSelectedOperandInDropdown = useSetRecoilComponentStateV2(
selectedOperandInDropdownComponentState,
);
const availableFilterDefinitions = useRecoilComponentValueV2(
availableFilterDefinitionsComponentState,
);
const availableFilterDefinition = availableFilterDefinitions[0];
React.useEffect(() => {
setFieldMetadataItemIdUsedInDropdown(
availableFilterDefinition.fieldMetadataId,
);
setFilterDefinitionUsedInDropdown(availableFilterDefinition);
const defaultOperand = getRecordFilterOperandsForRecordFilterDefinition(
availableFilterDefinition,
)[0];
setSelectedOperandInDropdown(defaultOperand);
}, [
availableFilterDefinition,
setFilterDefinitionUsedInDropdown,
setSelectedOperandInDropdown,
setFieldMetadataItemIdUsedInDropdown,
]);
const theme = useTheme();
const { t } = useLingui();
return (
<Dropdown
dropdownId={SINGLE_ENTITY_FILTER_DROPDOWN_ID}
dropdownHotkeyScope={hotkeyScope}
dropdownOffset={{ x: 0, y: -28 }}
clickableComponent={
<StyledHeaderDropdownButton>
{selectedFilter ? (
<GenericEntityFilterChip filter={selectedFilter} />
) : (
t`Filter`
)}
<IconChevronDown size={theme.icon.size.md} />
</StyledHeaderDropdownButton>
}
dropdownComponents={
<>
<ObjectFilterDropdownSearchInput />
<DropdownMenuSeparator />
<ObjectFilterDropdownRecordRemoveFilterMenuItem />
<ObjectFilterDropdownRecordSelect
viewComponentId={SINGLE_ENTITY_FILTER_DROPDOWN_ID}
/>
</>
}
/>
<>
<SingleEntityObjectFilterDropdownButtonEffect />
<Dropdown
dropdownId={SINGLE_ENTITY_FILTER_DROPDOWN_ID}
dropdownHotkeyScope={hotkeyScope}
dropdownOffset={{ x: 0, y: -28 }}
clickableComponent={
<StyledHeaderDropdownButton>
{selectedFilter ? (
<GenericEntityFilterChip filter={selectedFilter} />
) : (
t`Filter`
)}
<IconChevronDown size={theme.icon.size.md} />
</StyledHeaderDropdownButton>
}
dropdownComponents={
<>
<ObjectFilterDropdownSearchInput />
<DropdownMenuSeparator />
<ObjectFilterDropdownRecordRemoveFilterMenuItem />
<ObjectFilterDropdownRecordSelect
viewComponentId={SINGLE_ENTITY_FILTER_DROPDOWN_ID}
/>
</>
}
/>
</>
);
};

47
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/SingleEntityObjectFilterDropdownButtonEffect.tsx Normal file
View File

@ -0,0 +1,47 @@
import { formatFieldMetadataItemAsFilterDefinition } from '@/object-metadata/utils/formatFieldMetadataItemsAsFilterDefinitions';
import { fieldMetadataItemIdUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/fieldMetadataItemIdUsedInDropdownComponentState';
import { filterDefinitionUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/filterDefinitionUsedInDropdownComponentState';
import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState';
import { useFilterableFieldMetadataItems } from '@/object-record/record-filter/hooks/useFilterableFieldMetadataItems';
import { getRecordFilterOperandsForRecordFilterDefinition } from '@/object-record/record-filter/utils/getRecordFilterOperandsForRecordFilterDefinition';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
import { useEffect } from 'react';
export const SingleEntityObjectFilterDropdownButtonEffect = () => {
const setFilterDefinitionUsedInDropdown = useSetRecoilComponentStateV2(
filterDefinitionUsedInDropdownComponentState,
);
const setFieldMetadataItemIdUsedInDropdown = useSetRecoilComponentStateV2(
fieldMetadataItemIdUsedInDropdownComponentState,
);
const setSelectedOperandInDropdown = useSetRecoilComponentStateV2(
selectedOperandInDropdownComponentState,
);
const { filterableFieldMetadataItems } = useFilterableFieldMetadataItems();
const firstFieldMetadataItem = filterableFieldMetadataItems[0];
const firstFieldDefinition = formatFieldMetadataItemAsFilterDefinition({
field: firstFieldMetadataItem,
});
useEffect(() => {
setFieldMetadataItemIdUsedInDropdown(firstFieldDefinition.fieldMetadataId);
setFilterDefinitionUsedInDropdown(firstFieldDefinition);
const defaultOperand =
getRecordFilterOperandsForRecordFilterDefinition(firstFieldDefinition)[0];
setSelectedOperandInDropdown(defaultOperand);
}, [
firstFieldDefinition,
setFilterDefinitionUsedInDropdown,
setSelectedOperandInDropdown,
setFieldMetadataItemIdUsedInDropdown,
]);
return null;
};

15
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/__stories__/MultipleFiltersDropdownButton.stories.tsx
View File

@ -4,7 +4,6 @@ import { TaskGroups } from '@/activities/tasks/components/TaskGroups';
import { CoreObjectNamePlural } from '@/object-metadata/types/CoreObjectNamePlural';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { formatFieldMetadataItemAsColumnDefinition } from '@/object-metadata/utils/formatFieldMetadataItemAsColumnDefinition';
import { formatFieldMetadataItemAsFilterDefinition } from '@/object-metadata/utils/formatFieldMetadataItemsAsFilterDefinitions';
import { MultipleFiltersDropdownButton } from '@/object-record/object-filter-dropdown/components/MultipleFiltersDropdownButton';
import { ObjectFilterDropdownComponentInstanceContext } from '@/object-record/object-filter-dropdown/states/contexts/ObjectFilterDropdownComponentInstanceContext';
import { RecordFiltersComponentInstanceContext } from '@/object-record/record-filter/states/context/RecordFiltersComponentInstanceContext';
@ -12,7 +11,6 @@ import { RecordIndexContextProvider } from '@/object-record/record-index/context
import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
import { tableColumnsComponentState } from '@/object-record/record-table/states/tableColumnsComponentState';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
import { availableFilterDefinitionsComponentState } from '@/views/states/availableFilterDefinitionsComponentState';
import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext';
import { within } from '@storybook/test';
import {
@ -35,10 +33,6 @@ const meta: Meta<typeof MultipleFiltersDropdownButton> = {
(item) => item.nameSingular === CoreObjectNameSingular.Company,
)!;
const instanceId = 'entity-tasks-filter-scope';
const setAvailableFilterDefinitions = useSetRecoilComponentStateV2(
availableFilterDefinitionsComponentState,
instanceId,
);
const setTableColumns = useSetRecoilComponentStateV2(
tableColumnsComponentState,
@ -54,17 +48,8 @@ const meta: Meta<typeof MultipleFiltersDropdownButton> = {
}),
);
const filterDefinitions = companyObjectMetadataItem.fields.map(
(fieldMetadataItem) =>
formatFieldMetadataItemAsFilterDefinition({
field: fieldMetadataItem,
}),
);
setTableColumns(columns);
setAvailableFilterDefinitions(filterDefinitions);
return (
<RecordIndexContextProvider
value={{

7
packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/useSelectFilterDefinitionUsedInDropdown.ts
View File

@ -1,6 +1,5 @@
import { advancedFilterViewFilterGroupIdComponentState } from '@/object-record/object-filter-dropdown/states/advancedFilterViewFilterGroupIdComponentState';
import { advancedFilterViewFilterIdComponentState } from '@/object-record/object-filter-dropdown/states/advancedFilterViewFilterIdComponentState';
import { fieldMetadataItemIdUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/fieldMetadataItemIdUsedInDropdownComponentState';
import { filterDefinitionUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/filterDefinitionUsedInDropdownComponentState';
import { objectFilterDropdownSearchInputComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSearchInputComponentState';
import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState';
@ -27,11 +26,6 @@ export const useSelectFilterDefinitionUsedInDropdown = (
componentInstanceId,
);
const setFieldMetadataItemIdUsedInDropdown = useSetRecoilComponentStateV2(
fieldMetadataItemIdUsedInDropdownComponentState,
componentInstanceId,
);
const setSelectedOperandInDropdown = useSetRecoilComponentStateV2(
selectedOperandInDropdownComponentState,
componentInstanceId,
@ -60,7 +54,6 @@ export const useSelectFilterDefinitionUsedInDropdown = (
filterDefinition,
}: SelectFilterParams) => {
setFilterDefinitionUsedInDropdown(filterDefinition);
setFieldMetadataItemIdUsedInDropdown(filterDefinition.fieldMetadataId);
if (
filterDefinition.type === 'RELATION' ||

12
packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/availableFilterDefinitionsComponentState.ts
View File

@ -1,12 +0,0 @@
import { ObjectFilterDropdownComponentInstanceContext } from '@/object-record/object-filter-dropdown/states/contexts/ObjectFilterDropdownComponentInstanceContext';
import { RecordFilterDefinition } from '@/object-record/record-filter/types/RecordFilterDefinition';
import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
export const availableFilterDefinitionsComponentState = createComponentStateV2<
RecordFilterDefinition[]
>({
key: 'availableFilterDefinitionsComponentState',
defaultValue: [],
componentInstanceContext: ObjectFilterDropdownComponentInstanceContext,
});

23
packages/twenty-front/src/modules/object-record/record-filter/hooks/useFilterDefinitionsFromFilterableFieldMetadataItems.ts Normal file
View File

@ -0,0 +1,23 @@
import { availableFieldMetadataItemsForFilterFamilySelector } from '@/object-metadata/states/availableFieldMetadataItemsForFilterFamilySelector';
import { formatFieldMetadataItemAsFilterDefinition } from '@/object-metadata/utils/formatFieldMetadataItemsAsFilterDefinitions';
import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
import { useRecoilValue } from 'recoil';
export const useFilterDefinitionsFromFilterableFieldMetadataItems = () => {
const { objectMetadataItem } = useRecordIndexContextOrThrow();
const availableFieldMetadataItemsForFilter = useRecoilValue(
availableFieldMetadataItemsForFilterFamilySelector({
objectMetadataItemId: objectMetadataItem.id,
}),
);
const filterDefinitions = availableFieldMetadataItemsForFilter.map(
(fieldMetadataItem) =>
formatFieldMetadataItemAsFilterDefinition({
field: fieldMetadataItem,
}),
);
return { filterDefinitions };
};

15
packages/twenty-front/src/modules/object-record/record-filter/hooks/useFilterableFieldMetadataItems.ts Normal file
View File

@ -0,0 +1,15 @@
import { availableFieldMetadataItemsForFilterFamilySelector } from '@/object-metadata/states/availableFieldMetadataItemsForFilterFamilySelector';
import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
import { useRecoilValue } from 'recoil';
export const useFilterableFieldMetadataItems = () => {
const { objectMetadataItem } = useRecordIndexContextOrThrow();
const filterableFieldMetadataItems = useRecoilValue(
availableFieldMetadataItemsForFilterFamilySelector({
objectMetadataItemId: objectMetadataItem.id,
}),
);
return { filterableFieldMetadataItems };
};

6
packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx
View File

@ -26,6 +26,7 @@ import { RecordIndexActionMenu } from '@/action-menu/components/RecordIndexActio
import { ContextStoreCurrentViewTypeEffect } from '@/context-store/components/ContextStoreCurrentViewTypeEffect';
import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
import { ContextStoreViewType } from '@/context-store/types/ContextStoreViewType';
import { useFilterDefinitionsFromFilterableFieldMetadataItems } from '@/object-record/record-filter/hooks/useFilterDefinitionsFromFilterableFieldMetadataItems';
import { useSetRecordGroup } from '@/object-record/record-group/hooks/useSetRecordGroup';
import { RecordIndexFiltersToContextStoreEffect } from '@/object-record/record-index/components/RecordIndexFiltersToContextStoreEffect';
import { RecordIndexTableContainerEffect } from '@/object-record/record-index/components/RecordIndexTableContainerEffect';
@ -76,7 +77,7 @@ export const RecordIndexContainer = () => {
const setRecordGroup = useSetRecordGroup(recordIndexId);
const { columnDefinitions, filterDefinitions, sortDefinitions } =
const { columnDefinitions, sortDefinitions } =
useColumnDefinitionsFromFieldMetadata(objectMetadataItem);
const setRecordIndexViewFilterGroups = useSetRecoilState(
@ -179,6 +180,9 @@ export const RecordIndexContainer = () => {
contextStoreTargetedRecordsRuleComponentState,
);
const { filterDefinitions } =
useFilterDefinitionsFromFilterableFieldMetadataItems();
const isCommandMenuV2Enabled = useIsFeatureEnabled(
FeatureFlagKey.IsCommandMenuV2Enabled,
);

6
packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexViewBarEffect.tsx
View File

@ -23,13 +23,12 @@ export const RecordIndexViewBarEffect = ({
objectNameSingular,
});
const { columnDefinitions, filterDefinitions, sortDefinitions } =
const { columnDefinitions, sortDefinitions } =
useColumnDefinitionsFromFieldMetadata(objectMetadataItem);
const {
setViewObjectMetadataId,
setAvailableSortDefinitions,
setAvailableFilterDefinitions,
setAvailableFieldDefinitions,
} = useInitViewBar(viewBarId);
@ -39,15 +38,12 @@ export const RecordIndexViewBarEffect = ({
}
setViewObjectMetadataId?.(objectMetadataItem.id);
setAvailableSortDefinitions?.(sortDefinitions);
setAvailableFilterDefinitions?.(filterDefinitions);
setAvailableFieldDefinitions?.(columnDefinitions);
}, [
setViewObjectMetadataId,
objectMetadataItem,
setAvailableSortDefinitions,
sortDefinitions,
setAvailableFilterDefinitions,
filterDefinitions,
setAvailableFieldDefinitions,
columnDefinitions,
]);

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

@ -4,19 +4,19 @@ import { v4 } from 'uuid';
import { useColumnDefinitionsFromFieldMetadata } from '@/object-metadata/hooks/useColumnDefinitionsFromFieldMetadata';
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { availableFieldMetadataItemsForFilterFamilySelector } from '@/object-metadata/states/availableFieldMetadataItemsForFilterFamilySelector';
import { formatFieldMetadataItemAsFilterDefinition } from '@/object-metadata/utils/formatFieldMetadataItemsAsFilterDefinitions';
import { useSelectFilterDefinitionUsedInDropdown } from '@/object-record/object-filter-dropdown/hooks/useSelectFilterDefinitionUsedInDropdown';
import { fieldMetadataItemIdUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/fieldMetadataItemIdUsedInDropdownComponentState';
import { useUpsertRecordFilter } from '@/object-record/record-filter/hooks/useUpsertRecordFilter';
import { RecordFilter } from '@/object-record/record-filter/types/RecordFilter';
import { getRecordFilterOperandsForRecordFilterDefinition } from '@/object-record/record-filter/utils/getRecordFilterOperandsForRecordFilterDefinition';
import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
import { useUpsertCombinedViewFilters } from '@/views/hooks/useUpsertCombinedViewFilters';
import { availableFilterDefinitionsComponentState } from '@/views/states/availableFilterDefinitionsComponentState';
import { useRecoilCallback } from 'recoil';
import { useRecoilCallback, useRecoilValue } from 'recoil';
import { isDefined } from 'twenty-shared';
type UseHandleToggleColumnFilterProps = {
@ -49,8 +49,10 @@ export const useHandleToggleColumnFilter = ({
};
}, []);
const availableFilterDefinitions = useRecoilComponentValueV2(
availableFilterDefinitionsComponentState,
const availableFieldMetadataItemsForFilter = useRecoilValue(
availableFieldMetadataItemsForFilterFamilySelector({
objectMetadataItemId: objectMetadataItem.id,
}),
);
const { currentViewWithCombinedFiltersAndSorts } = useGetCurrentView();
@ -80,10 +82,19 @@ export const useHandleToggleColumnFilter = ({
);
if (!existingViewFilter) {
const filterDefinition = availableFilterDefinitions.find(
(fd) => fd.fieldMetadataId === fieldMetadataId,
const fieldMetadataItem = availableFieldMetadataItemsForFilter.find(
(fieldMetadataItemToFind) =>
fieldMetadataItemToFind.id === fieldMetadataId,
);
if (!isDefined(fieldMetadataItem)) {
throw new Error('Field metadata item not found');
}
const filterDefinition = formatFieldMetadataItemAsFilterDefinition({
field: fieldMetadataItem,
});
if (!isDefined(filterDefinition)) {
throw new Error('Filter definition not found');
}
@ -118,7 +129,7 @@ export const useHandleToggleColumnFilter = ({
upsertCombinedViewFilter,
selectFilterDefinitionUsedInDropdown,
currentViewWithCombinedFiltersAndSorts,
availableFilterDefinitions,
availableFieldMetadataItemsForFilter,
upsertRecordFilter,
setFieldMetadataItemIdUsedInDropdown,
],