diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/MultipleFiltersDropdownContent.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/MultipleFiltersDropdownContent.tsx index 81ee172b3545..1e019b6c77e5 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/MultipleFiltersDropdownContent.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/MultipleFiltersDropdownContent.tsx @@ -1,38 +1,19 @@ -import { ObjectFilterDropdownRatingInput } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownRatingInput'; -import { ObjectFilterDropdownSearchInput } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownSearchInput'; import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown'; -import { ViewFilterOperand } from '@/views/types/ViewFilterOperand'; -import { ObjectFilterDropdownRecordSelect } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownRecordSelect'; -import { ObjectFilterDropdownSourceSelect } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownSourceSelect'; -import { ObjectFilterDropdownTextSearchInput } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownTextSearchInput'; -import { isActorSourceCompositeFilter } from '@/object-record/object-filter-dropdown/utils/isActorSourceCompositeFilter'; -import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator'; +import { ObjectFilterDropdownFilterInput } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterInput'; +import { ObjectFilterDropdownFilterSelectCompositeFieldSubMenu } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectCompositeFieldSubMenu'; +import { objectFilterDropdownFilterIsSelectedComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownFilterIsSelectedComponentState'; +import { objectFilterDropdownIsSelectingCompositeFieldComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownIsSelectingCompositeFieldComponentState'; +import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2'; import styled from '@emotion/styled'; import { useRecoilValue } from 'recoil'; import { MultipleFiltersDropdownFilterOnFilterChangedEffect } from './MultipleFiltersDropdownFilterOnFilterChangedEffect'; -import { ObjectFilterDropdownDateInput } from './ObjectFilterDropdownDateInput'; import { ObjectFilterDropdownFilterSelect } from './ObjectFilterDropdownFilterSelect'; -import { ObjectFilterDropdownNumberInput } from './ObjectFilterDropdownNumberInput'; -import { ObjectFilterDropdownOperandButton } from './ObjectFilterDropdownOperandButton'; -import { ObjectFilterDropdownOperandSelect } from './ObjectFilterDropdownOperandSelect'; -import { ObjectFilterDropdownOptionSelect } from './ObjectFilterDropdownOptionSelect'; const StyledContainer = styled.div` position: relative; `; -const StyledOperandSelectContainer = styled.div` - background: ${({ theme }) => theme.background.secondary}; - box-shadow: ${({ theme }) => theme.boxShadow.light}; - border-radius: ${({ theme }) => theme.border.radius.md}; - left: 10px; - position: absolute; - top: 10px; - width: 100%; - z-index: 1000; -`; - type MultipleFiltersDropdownContentProps = { filterDropdownId?: string; }; @@ -40,99 +21,38 @@ type MultipleFiltersDropdownContentProps = { export const MultipleFiltersDropdownContent = ({ filterDropdownId, }: MultipleFiltersDropdownContentProps) => { - const { - filterDefinitionUsedInDropdownState, - selectedOperandInDropdownState, - isObjectFilterDropdownOperandSelectUnfoldedState, - } = useFilterDropdown({ filterDropdownId }); + const { filterDefinitionUsedInDropdownState } = useFilterDropdown({ + filterDropdownId, + }); + + const [objectFilterDropdownIsSelectingCompositeField] = + useRecoilComponentStateV2( + objectFilterDropdownIsSelectingCompositeFieldComponentState, + filterDropdownId, + ); - const isObjectFilterDropdownOperandSelectUnfolded = useRecoilValue( - isObjectFilterDropdownOperandSelectUnfoldedState, + const [objectFilterDropdownFilterIsSelected] = useRecoilComponentStateV2( + objectFilterDropdownFilterIsSelectedComponentState, + filterDropdownId, ); const filterDefinitionUsedInDropdown = useRecoilValue( filterDefinitionUsedInDropdownState, ); - const selectedOperandInDropdown = useRecoilValue( - selectedOperandInDropdownState, - ); + const shouldShowCompositeSelectionSubMenu = + objectFilterDropdownIsSelectingCompositeField; - const isConfigurable = - selectedOperandInDropdown && - [ - ViewFilterOperand.Is, - ViewFilterOperand.IsNotNull, - ViewFilterOperand.IsNot, - ViewFilterOperand.LessThan, - ViewFilterOperand.GreaterThan, - ViewFilterOperand.IsBefore, - ViewFilterOperand.IsAfter, - ViewFilterOperand.Contains, - ViewFilterOperand.DoesNotContain, - ViewFilterOperand.IsRelative, - ].includes(selectedOperandInDropdown); + const shoudShowFilterInput = objectFilterDropdownFilterIsSelected; return ( - {!filterDefinitionUsedInDropdown ? ( - + {shoudShowFilterInput ? ( + + ) : shouldShowCompositeSelectionSubMenu ? ( + ) : ( - <> - - {isObjectFilterDropdownOperandSelectUnfolded && ( - - - - )} - {isConfigurable && selectedOperandInDropdown && ( - <> - {[ - 'TEXT', - 'EMAIL', - 'EMAILS', - 'PHONE', - 'FULL_NAME', - 'LINK', - 'LINKS', - 'ADDRESS', - 'ACTOR', - 'ARRAY', - 'PHONES', - ].includes(filterDefinitionUsedInDropdown.type) && - !isActorSourceCompositeFilter( - filterDefinitionUsedInDropdown, - ) && } - {['NUMBER', 'CURRENCY'].includes( - filterDefinitionUsedInDropdown.type, - ) && } - {filterDefinitionUsedInDropdown.type === 'RATING' && ( - - )} - {['DATE_TIME', 'DATE'].includes( - filterDefinitionUsedInDropdown.type, - ) && } - {filterDefinitionUsedInDropdown.type === 'RELATION' && ( - <> - - - - )} - {isActorSourceCompositeFilter(filterDefinitionUsedInDropdown) && ( - <> - - - - )} - {filterDefinitionUsedInDropdown.type === 'SELECT' && ( - <> - - - - )} - - )} - + )} theme.background.secondary}; + box-shadow: ${({ theme }) => theme.boxShadow.light}; + border-radius: ${({ theme }) => theme.border.radius.md}; + left: 10px; + position: absolute; + top: 10px; + width: 100%; + z-index: 1000; +`; + +type ObjectFilterDropdownFilterInputProps = { + filterDropdownId?: string; +}; + +export const ObjectFilterDropdownFilterInput = ({ + filterDropdownId, +}: ObjectFilterDropdownFilterInputProps) => { + const { + filterDefinitionUsedInDropdownState, + selectedOperandInDropdownState, + isObjectFilterDropdownOperandSelectUnfoldedState, + } = useFilterDropdown({ filterDropdownId }); + + const isObjectFilterDropdownOperandSelectUnfolded = useRecoilValue( + isObjectFilterDropdownOperandSelectUnfoldedState, + ); + + const filterDefinitionUsedInDropdown = useRecoilValue( + filterDefinitionUsedInDropdownState, + ); + + const selectedOperandInDropdown = useRecoilValue( + selectedOperandInDropdownState, + ); + + const isConfigurable = + selectedOperandInDropdown && + [ + ViewFilterOperand.Is, + ViewFilterOperand.IsNotNull, + ViewFilterOperand.IsNot, + ViewFilterOperand.LessThan, + ViewFilterOperand.GreaterThan, + ViewFilterOperand.IsBefore, + ViewFilterOperand.IsAfter, + ViewFilterOperand.Contains, + ViewFilterOperand.DoesNotContain, + ViewFilterOperand.IsRelative, + ].includes(selectedOperandInDropdown); + + if (!isDefined(filterDefinitionUsedInDropdown)) { + return null; + } + + return ( + <> + + {isObjectFilterDropdownOperandSelectUnfolded && ( + + + + )} + {isConfigurable && selectedOperandInDropdown && ( + <> + {[ + 'TEXT', + 'EMAIL', + 'EMAILS', + 'PHONE', + 'FULL_NAME', + 'LINK', + 'LINKS', + 'ADDRESS', + 'ACTOR', + 'ARRAY', + 'PHONES', + ].includes(filterDefinitionUsedInDropdown.type) && + !isActorSourceCompositeFilter(filterDefinitionUsedInDropdown) && ( + + )} + {['NUMBER', 'CURRENCY'].includes( + filterDefinitionUsedInDropdown.type, + ) && } + {filterDefinitionUsedInDropdown.type === 'RATING' && ( + + )} + {['DATE_TIME', 'DATE'].includes( + filterDefinitionUsedInDropdown.type, + ) && } + {filterDefinitionUsedInDropdown.type === 'RELATION' && ( + <> + + + + )} + {isActorSourceCompositeFilter(filterDefinitionUsedInDropdown) && ( + <> + + + + )} + {filterDefinitionUsedInDropdown.type === 'SELECT' && ( + <> + + + + )} + + )} + + ); +}; diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect.tsx index bd099fda64d7..9c815948dc28 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect.tsx @@ -3,20 +3,17 @@ import { useContext } from 'react'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; -import { ObjectFilterDropdownFilterSelectCompositeFieldSubMenu } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectCompositeFieldSubMenu'; import { ObjectFilterDropdownFilterSelectMenuItem } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectMenuItem'; import { OBJECT_FILTER_DROPDOWN_ID } from '@/object-record/object-filter-dropdown/constants/ObjectFilterDropdownId'; import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown'; import { useSelectFilter } from '@/object-record/object-filter-dropdown/hooks/useSelectFilter'; -import { objectFilterDropdownSubMenuFieldTypeComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSubMenuFieldTypeComponentState'; import { FiltersHotkeyScope } from '@/object-record/object-filter-dropdown/types/FiltersHotkeyScope'; import { RecordIndexRootPropsContext } from '@/object-record/record-index/contexts/RecordIndexRootPropsContext'; import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates'; -import { SeparatorLineText } from '@/ui/display/text/components/SeparatorLineText'; +import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator'; import { SelectableItem } from '@/ui/layout/selectable-list/components/SelectableItem'; import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList'; import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList'; -import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { availableFilterDefinitionsComponentState } from '@/views/states/availableFilterDefinitionsComponentState'; import { useRecoilValue } from 'recoil'; @@ -49,10 +46,6 @@ export const StyledInput = styled.input` `; export const ObjectFilterDropdownFilterSelect = () => { - const [objectFilterDropdownSubMenuFieldType] = useRecoilComponentStateV2( - objectFilterDropdownSubMenuFieldTypeComponentState, - ); - const { setObjectFilterDropdownSearchInput, objectFilterDropdownSearchInputState, @@ -121,14 +114,11 @@ export const ObjectFilterDropdownFilterSelect = () => { selectFilter({ filterDefinition: selectedFilterDefinition }); }; - const shouldShowFirstLevelMenu = !isDefined( - objectFilterDropdownSubMenuFieldType, - ); const shoudShowSeparator = visibleColumnsFilterDefinitions.length > 0 && hiddenColumnsFilterDefinitions.length > 0; - return shouldShowFirstLevelMenu ? ( + return ( <> { ), )} - {shoudShowSeparator && } + + {shoudShowSeparator && } + {hiddenColumnsFilterDefinitions.map( (hiddenFilterDefinition, index) => ( { - ) : ( - ); }; diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectCompositeFieldSubMenu.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectCompositeFieldSubMenu.tsx index f0cbeb04ed2a..84442b51a812 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectCompositeFieldSubMenu.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectCompositeFieldSubMenu.tsx @@ -1,5 +1,6 @@ import { StyledInput } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect'; import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown'; +import { objectFilterDropdownFilterIsSelectedComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownFilterIsSelectedComponentState'; import { objectFilterDropdownFirstLevelFilterDefinitionComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownFirstLevelFilterDefinitionComponentState'; import { objectFilterDropdownSubMenuFieldTypeComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSubMenuFieldTypeComponentState'; import { FilterDefinition } from '@/object-record/object-filter-dropdown/types/FilterDefinition'; @@ -26,6 +27,10 @@ export const ObjectFilterDropdownFilterSelectCompositeFieldSubMenu = () => { objectFilterDropdownFirstLevelFilterDefinitionComponentState, ); + const [, setObjectFilterDropdownFilterIsSelected] = useRecoilComponentStateV2( + objectFilterDropdownFilterIsSelectedComponentState, + ); + const [ objectFilterDropdownSubMenuFieldType, setObjectFilterDropdownSubMenuFieldType, @@ -48,10 +53,13 @@ export const ObjectFilterDropdownFilterSelectCompositeFieldSubMenu = () => { ); setObjectFilterDropdownSearchInput(''); + + setObjectFilterDropdownFilterIsSelected(true); } }; const handleSubMenuBack = () => { + setFilterDefinitionUsedInDropdown(null); setObjectFilterDropdownSubMenuFieldType(null); setObjectFilterDropdownFirstLevelFilterDefinition(null); }; @@ -101,17 +109,18 @@ export const ObjectFilterDropdownFilterSelectCompositeFieldSubMenu = () => { - objectFilterDropdownFirstLevelFilterDefinition && - handleSelectFilter({ - ...objectFilterDropdownFirstLevelFilterDefinition, - label: getCompositeSubFieldLabel( - objectFilterDropdownSubMenuFieldType, - subFieldName, - ), - compositeFieldName: subFieldName, - }) - } + onClick={() => { + if (isDefined(objectFilterDropdownFirstLevelFilterDefinition)) { + handleSelectFilter({ + ...objectFilterDropdownFirstLevelFilterDefinition, + label: getCompositeSubFieldLabel( + objectFilterDropdownSubMenuFieldType, + subFieldName, + ), + compositeFieldName: subFieldName, + }); + } + }} text={getCompositeSubFieldLabel( objectFilterDropdownSubMenuFieldType, subFieldName, diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectMenuItem.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectMenuItem.tsx index d67ee05c7861..7d94eaaf0e35 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectMenuItem.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectMenuItem.tsx @@ -1,7 +1,9 @@ import { OBJECT_FILTER_DROPDOWN_ID } from '@/object-record/object-filter-dropdown/constants/ObjectFilterDropdownId'; import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown'; import { useSelectFilter } from '@/object-record/object-filter-dropdown/hooks/useSelectFilter'; +import { objectFilterDropdownFilterIsSelectedComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownFilterIsSelectedComponentState'; import { objectFilterDropdownFirstLevelFilterDefinitionComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownFirstLevelFilterDefinitionComponentState'; +import { objectFilterDropdownIsSelectingCompositeFieldComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownIsSelectingCompositeFieldComponentState'; import { objectFilterDropdownSubMenuFieldTypeComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSubMenuFieldTypeComponentState'; import { CompositeFilterableFieldType } from '@/object-record/object-filter-dropdown/types/CompositeFilterableFieldType'; @@ -34,6 +36,15 @@ export const ObjectFilterDropdownFilterSelectMenuItem = ({ objectFilterDropdownSubMenuFieldTypeComponentState, ); + const [, setObjectFilterDropdownIsSelectingCompositeField] = + useRecoilComponentStateV2( + objectFilterDropdownIsSelectingCompositeFieldComponentState, + ); + + const [, setObjectFilterDropdownFilterIsSelected] = useRecoilComponentStateV2( + objectFilterDropdownFilterIsSelectedComponentState, + ); + const { isSelectedItemIdSelector, resetSelectedItem } = useSelectableList( OBJECT_FILTER_DROPDOWN_ID, ); @@ -67,6 +78,8 @@ export const ObjectFilterDropdownFilterSelectMenuItem = ({ ); setObjectFilterDropdownSearchInput(''); + + setObjectFilterDropdownFilterIsSelected(true); }; const { getIcon } = useIcons(); @@ -82,6 +95,7 @@ export const ObjectFilterDropdownFilterSelectMenuItem = ({ filterDefinition.type as CompositeFilterableFieldType, ); setObjectFilterDropdownFirstLevelFilterDefinition(filterDefinition); + setObjectFilterDropdownIsSelectingCompositeField(true); } else { handleSelectFilter(filterDefinition); } diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/useFilterDropdown.ts b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/useFilterDropdown.ts index b09d33a38396..c8a801336647 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/useFilterDropdown.ts +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/useFilterDropdown.ts @@ -4,6 +4,9 @@ import { useFilterDropdownStates } from '@/object-record/object-filter-dropdown/ import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId'; import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue'; +import { objectFilterDropdownFilterIsSelectedComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownFilterIsSelectedComponentState'; +import { objectFilterDropdownIsSelectingCompositeFieldComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownIsSelectingCompositeFieldComponentState'; +import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2'; import { ObjectFilterDropdownScopeInternalContext } from '../scopes/scope-internal-context/ObjectFilterDropdownScopeInternalContext'; import { Filter } from '../types/Filter'; @@ -54,6 +57,18 @@ export const useFilterDropdown = (props?: UseFilterDropdownProps) => { ], ); + const setObjectFilterDropdownFilterIsSelectedCallbackState = + useRecoilComponentCallbackStateV2( + objectFilterDropdownFilterIsSelectedComponentState, + props?.filterDropdownId, + ); + + const setObjectFilterDropdownIsSelectingCompositeFieldCallbackState = + useRecoilComponentCallbackStateV2( + objectFilterDropdownIsSelectingCompositeFieldComponentState, + props?.filterDropdownId, + ); + const resetFilter = useRecoilCallback( ({ set }) => () => { @@ -62,6 +77,11 @@ export const useFilterDropdown = (props?: UseFilterDropdownProps) => { set(selectedFilterState, undefined); set(filterDefinitionUsedInDropdownState, null); set(selectedOperandInDropdownState, null); + set(setObjectFilterDropdownFilterIsSelectedCallbackState, false); + set( + setObjectFilterDropdownIsSelectingCompositeFieldCallbackState, + false, + ); }, [ filterDefinitionUsedInDropdownState, @@ -69,6 +89,8 @@ export const useFilterDropdown = (props?: UseFilterDropdownProps) => { objectFilterDropdownSelectedRecordIdsState, selectedFilterState, selectedOperandInDropdownState, + setObjectFilterDropdownFilterIsSelectedCallbackState, + setObjectFilterDropdownIsSelectingCompositeFieldCallbackState, ], ); diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/objectFilterDropdownFilterIsSelectedComponentState.ts b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/objectFilterDropdownFilterIsSelectedComponentState.ts new file mode 100644 index 000000000000..051f5b9e7b69 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/objectFilterDropdownFilterIsSelectedComponentState.ts @@ -0,0 +1,9 @@ +import { ObjectFilterDropdownComponentInstanceContext } from '@/object-record/object-filter-dropdown/states/contexts/ObjectFilterDropdownComponentInstanceContext'; +import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2'; + +export const objectFilterDropdownFilterIsSelectedComponentState = + createComponentStateV2({ + key: 'objectFilterDropdownFilterIsSelectedComponentState', + defaultValue: false, + componentInstanceContext: ObjectFilterDropdownComponentInstanceContext, + }); diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/objectFilterDropdownIsSelectingCompositeFieldComponentState.ts b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/objectFilterDropdownIsSelectingCompositeFieldComponentState.ts new file mode 100644 index 000000000000..68a141fd88ad --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/objectFilterDropdownIsSelectingCompositeFieldComponentState.ts @@ -0,0 +1,9 @@ +import { ObjectFilterDropdownComponentInstanceContext } from '@/object-record/object-filter-dropdown/states/contexts/ObjectFilterDropdownComponentInstanceContext'; +import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2'; + +export const objectFilterDropdownIsSelectingCompositeFieldComponentState = + createComponentStateV2({ + key: 'objectFilterDropdownIsSelectingCompositeFieldComponentState', + defaultValue: false, + componentInstanceContext: ObjectFilterDropdownComponentInstanceContext, + }); diff --git a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx index f42bd2f4fedc..f1e399c1a0b9 100644 --- a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx +++ b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx @@ -7,10 +7,10 @@ import { useObjectSortDropdown } from '@/object-record/object-sort-dropdown/hook import { ObjectSortDropdownScope } from '@/object-record/object-sort-dropdown/scopes/ObjectSortDropdownScope'; import { RecordIndexRootPropsContext } from '@/object-record/record-index/contexts/RecordIndexRootPropsContext'; import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates'; -import { SeparatorLineText } from '@/ui/display/text/components/SeparatorLineText'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; +import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator'; import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/StyledHeaderDropdownButton'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; @@ -130,6 +130,10 @@ export const ObjectSortDropdownButton = ({ .sort((a, b) => a.label.localeCompare(b.label)) .filter((item) => hiddenColumnIds.includes(item.fieldMetadataId)); + const shoudShowSeparator = + visibleColumnsSortDefinitions.length > 0 && + hiddenColumnsSortDefinitions.length > 0; + return ( ), )} - {visibleColumnsSortDefinitions.length > 0 && - hiddenColumnsSortDefinitions.length > 0 && ( - - )} + + {shoudShowSeparator && } + {hiddenColumnsSortDefinitions.map( (hiddenSortDefinition, index) => (