diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterDropdownFilterInput.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterDropdownFilterInput.tsx index 1708fa1c62..28ef8b6472 100644 --- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterDropdownFilterInput.tsx +++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterDropdownFilterInput.tsx @@ -49,12 +49,8 @@ export const AdvancedFilterDropdownFilterInput = ({ ))} {filterType === 'RATING' && } - {filterType === 'DATE_TIME' && ( - - )} - {filterType === 'DATE' && ( - - )} + {filterType === 'DATE_TIME' && } + {filterType === 'DATE' && } {filterType === 'RELATION' && ( @@ -69,7 +65,7 @@ export const AdvancedFilterDropdownFilterInput = ({ (isActorSourceCompositeFilter ? ( ) : ( - + ))} {['SELECT', 'MULTI_SELECT'].includes(filterType) && ( diff --git a/packages/twenty-front/src/modules/views/constants/ViewFieldConstants.ts b/packages/twenty-front/src/modules/object-record/constants/SearchVectorFieldName.ts similarity index 100% rename from packages/twenty-front/src/modules/views/constants/ViewFieldConstants.ts rename to packages/twenty-front/src/modules/object-record/constants/SearchVectorFieldName.ts diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownDateInput.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownDateInput.tsx index 8935e9d7bc..ba3badc423 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownDateInput.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownDateInput.tsx @@ -21,13 +21,7 @@ import { import { dateLocaleState } from '~/localization/states/dateLocaleState'; import { formatDateString } from '~/utils/string/formatDateString'; -type ObjectFilterDropdownDateInputProps = { - instanceId: string; -}; - -export const ObjectFilterDropdownDateInput = ({ - instanceId, -}: ObjectFilterDropdownDateInputProps) => { +export const ObjectFilterDropdownDateInput = () => { const { dateFormat, timeZone } = useContext(UserContext); const dateLocale = useRecoilValue(dateLocaleState); const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState); @@ -112,7 +106,7 @@ export const ObjectFilterDropdownDateInput = ({ return ( { +export const ObjectFilterDropdownDateTimeInput = () => { const { dateFormat, timeFormat, timeZone } = useContext(UserContext); const dateLocale = useRecoilValue(dateLocaleState); const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState); @@ -115,7 +109,7 @@ export const ObjectFilterDropdownDateTimeInput = ({ return ( { const fieldMetadataItemUsedInDropdown = useRecoilComponentValue( fieldMetadataItemUsedInDropdownComponentSelector, - filterDropdownId, ); const selectedOperandInDropdown = useRecoilComponentValue( selectedOperandInDropdownComponentState, - filterDropdownId, ); const isOperandWithFilterValue = @@ -54,13 +51,6 @@ export const ObjectFilterDropdownFilterInput = ({ ViewFilterOperand.IS_RELATIVE, ].includes(selectedOperandInDropdown); - const isVectorSearchFilter = - selectedOperandInDropdown === ViewFilterOperand.VECTOR_SEARCH; - - if (isVectorSearchFilter && isDefined(filterDropdownId)) { - return ; - } - if (!isDefined(fieldMetadataItemUsedInDropdown)) { return null; } @@ -82,7 +72,7 @@ export const ObjectFilterDropdownFilterInput = ({ <> - + ); } else if (filterType === 'DATE_TIME') { @@ -90,7 +80,7 @@ export const ObjectFilterDropdownFilterInput = ({ <> - + ); } else { @@ -99,10 +89,12 @@ export const ObjectFilterDropdownFilterInput = ({ {TEXT_FILTER_TYPES.includes(filterType) && ( - + )} {NUMBER_FILTER_TYPES.includes(filterType) && ( - + )} {filterType === 'RATING' && } {filterType === 'RELATION' && ( @@ -115,9 +107,17 @@ export const ObjectFilterDropdownFilterInput = ({ /> )} - {filterType === 'ACTOR' && } - {filterType === 'ADDRESS' && } - {filterType === 'CURRENCY' && } + {filterType === 'ACTOR' && ( + + )} + {filterType === 'ADDRESS' && ( + + )} + {filterType === 'CURRENCY' && ( + + )} {['SELECT', 'MULTI_SELECT'].includes(filterType) && ( <> diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterInputHeader.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterInputHeader.tsx index 9e07838fad..b51ac789b8 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterInputHeader.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterInputHeader.tsx @@ -1,28 +1,20 @@ import { fieldMetadataItemUsedInDropdownComponentSelector } from '@/object-record/object-filter-dropdown/states/fieldMetadataItemUsedInDropdownComponentSelector'; -import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState'; import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader'; import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent'; import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponentInstanceContext'; import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown'; import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue'; import { ViewBarFilterDropdownFilterInputMenuHeader } from '@/views/components/ViewBarFilterDropdownFilterInputMenuHeader'; -import { VIEW_BAR_FILTER_DROPDOWN_ID } from '@/views/constants/ViewBarFilterDropdownId'; -import { useLingui } from '@lingui/react/macro'; +import { ViewBarFilterDropdownIds } from '@/views/constants/ViewBarFilterDropdownIds'; import { useContext } from 'react'; -import { ViewFilterOperand } from 'twenty-shared/types'; import { IconX } from 'twenty-ui/display'; +// TODO: we shouldn't guess in which parent we are, this should be splitted in two components, one for each case export const ObjectFilterDropdownFilterInputHeader = () => { - const { t } = useLingui(); - const fieldMetadataItemUsedInDropdown = useRecoilComponentValue( fieldMetadataItemUsedInDropdownComponentSelector, ); - const selectedOperandInDropdown = useRecoilComponentValue( - selectedOperandInDropdownComponentState, - ); - const { closeDropdown } = useCloseDropdown(); const dropdownInstanceId = useContext( @@ -30,10 +22,7 @@ export const ObjectFilterDropdownFilterInputHeader = () => { )?.instanceId; const isInViewBarFilterDropdown = - dropdownInstanceId === VIEW_BAR_FILTER_DROPDOWN_ID; - - const isVectorSearchFilter = - selectedOperandInDropdown === ViewFilterOperand.VECTOR_SEARCH; + dropdownInstanceId === ViewBarFilterDropdownIds.MAIN; if (isInViewBarFilterDropdown) { return ; @@ -47,9 +36,7 @@ export const ObjectFilterDropdownFilterInputHeader = () => { /> } > - {isVectorSearchFilter - ? t`Search` - : fieldMetadataItemUsedInDropdown?.label} + {fieldMetadataItemUsedInDropdown?.label} ); } diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownNumberInput.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownNumberInput.tsx index 28d9232073..51ecc51633 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownNumberInput.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownNumberInput.tsx @@ -5,9 +5,16 @@ import { useObjectFilterDropdownFilterValue } from '@/object-record/object-filte import { fieldMetadataItemUsedInDropdownComponentSelector } from '@/object-record/object-filter-dropdown/states/fieldMetadataItemUsedInDropdownComponentSelector'; import { DropdownMenuInput } from '@/ui/layout/dropdown/components/DropdownMenuInput'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; +import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown'; import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue'; -export const ObjectFilterDropdownNumberInput = () => { +type ObjectFilterDropdownNumberInputProps = { + filterDropdownId: string; +}; + +export const ObjectFilterDropdownNumberInput = ({ + filterDropdownId, +}: ObjectFilterDropdownNumberInputProps) => { const fieldMetadataItemUsedInDropdown = useRecoilComponentValue( fieldMetadataItemUsedInDropdownComponentSelector, ); @@ -18,6 +25,8 @@ export const ObjectFilterDropdownNumberInput = () => { const { applyObjectFilterDropdownFilterValue } = useApplyObjectFilterDropdownFilterValue(); + const { closeDropdown } = useCloseDropdown(); + const [hasFocused, setHasFocused] = useState(false); const handleInputRef = useCallback( @@ -40,13 +49,14 @@ export const ObjectFilterDropdownNumberInput = () => { return ( closeDropdown(filterDropdownId)} /> ); diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownTextInput.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownTextInput.tsx index 266ee1ce0c..522d188413 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownTextInput.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownTextInput.tsx @@ -5,9 +5,16 @@ import { useObjectFilterDropdownFilterValue } from '@/object-record/object-filte import { fieldMetadataItemUsedInDropdownComponentSelector } from '@/object-record/object-filter-dropdown/states/fieldMetadataItemUsedInDropdownComponentSelector'; import { DropdownMenuInput } from '@/ui/layout/dropdown/components/DropdownMenuInput'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; +import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown'; import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue'; -export const ObjectFilterDropdownTextInput = () => { +type ObjectFilterDropdownTextInputProps = { + filterDropdownId: string; +}; + +export const ObjectFilterDropdownTextInput = ({ + filterDropdownId, +}: ObjectFilterDropdownTextInputProps) => { const fieldMetadataItemUsedInDropdown = useRecoilComponentValue( fieldMetadataItemUsedInDropdownComponentSelector, ); @@ -18,6 +25,8 @@ export const ObjectFilterDropdownTextInput = () => { const { applyObjectFilterDropdownFilterValue } = useApplyObjectFilterDropdownFilterValue(); + const { closeDropdown } = useCloseDropdown(); + const [hasFocused, setHasFocused] = useState(false); const handleInputRef = useCallback( @@ -40,13 +49,16 @@ export const ObjectFilterDropdownTextInput = () => { return ( { + closeDropdown(filterDropdownId); + }} /> ); diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownVectorSearchInput.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownVectorSearchInput.tsx deleted file mode 100644 index 5d6349eadc..0000000000 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownVectorSearchInput.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput'; -import { useRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentState'; -import { useVectorSearchFilterActions } from '@/views/hooks/useVectorSearchFilterActions'; -import { vectorSearchInputComponentState } from '@/views/states/vectorSearchInputComponentState'; -import { useLingui } from '@lingui/react/macro'; -import { useDebouncedCallback } from 'use-debounce'; - -export const ObjectFilterDropdownVectorSearchInput = () => { - const { t } = useLingui(); - - const [vectorSearchInputValue, setVectorSearchInputValue] = - useRecoilComponentState(vectorSearchInputComponentState); - - const { applyVectorSearchFilter } = useVectorSearchFilterActions(); - - const debouncedApplyVectorSearchFilter = useDebouncedCallback( - (value: string) => { - applyVectorSearchFilter(value); - }, - 500, - ); - - const handleSearchChange = (e: React.ChangeEvent) => { - const inputValue = e.target.value; - setVectorSearchInputValue(inputValue); - debouncedApplyVectorSearchFilter(inputValue); - }; - - return ( - - ); -}; diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/month/components/__stories__/RecordCalendarMonth.stories.tsx b/packages/twenty-front/src/modules/object-record/record-calendar/month/components/__stories__/RecordCalendarMonth.stories.tsx index e40635a134..68fa44b808 100644 --- a/packages/twenty-front/src/modules/object-record/record-calendar/month/components/__stories__/RecordCalendarMonth.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-calendar/month/components/__stories__/RecordCalendarMonth.stories.tsx @@ -17,7 +17,7 @@ import { RecordCalendarMonth } from '@/object-record/record-calendar/month/compo import { currentRecordFieldsComponentState } from '@/object-record/record-field/states/currentRecordFieldsComponentState'; import { type RecordField } from '@/object-record/record-field/types/RecordField'; import { useRecordIndexFieldMetadataDerivedStates } from '@/object-record/record-index/hooks/useRecordIndexFieldMetadataDerivedStates'; -import { VIEW_BAR_FILTER_DROPDOWN_ID } from '@/views/constants/ViewBarFilterDropdownId'; +import { ViewBarFilterDropdownIds } from '@/views/constants/ViewBarFilterDropdownIds'; import { coreViewsState } from '@/views/states/coreViewState'; import { useSetRecoilState } from 'recoil'; import { ComponentDecorator, RouterDecorator } from 'twenty-ui/testing'; @@ -101,7 +101,7 @@ const meta: Meta = { componentInstanceId={instanceId} > ({ RecordFieldComponentInstanceContext, ); - const activeDropdownFocusId = useRecoilValue(activeDropdownFocusIdState); + const currentFocusedItem = useRecoilValue(currentFocusedItemSelector); useListenClickOutside({ refs: [containerRef], callback: (event) => { if ( - (isDefined(activeDropdownFocusId) && - activeDropdownFocusId.startsWith( - MULTI_ITEM_FIELD_INPUT_DROPDOWN_ID_PREFIX, - )) || - activeDropdownFocusId === PHONE_COUNTRY_CODE_PICKER_DROPDOWN_ID + currentFocusedItem?.componentInstance.componentType !== + FocusComponentType.OPENED_FIELD_INPUT ) { return; } diff --git a/packages/twenty-front/src/modules/object-record/record-filter/hooks/useRemoveRecordFilter.ts b/packages/twenty-front/src/modules/object-record/record-filter/hooks/useRemoveRecordFilter.ts index a32ef07ed1..9c9e006554 100644 --- a/packages/twenty-front/src/modules/object-record/record-filter/hooks/useRemoveRecordFilter.ts +++ b/packages/twenty-front/src/modules/object-record/record-filter/hooks/useRemoveRecordFilter.ts @@ -2,9 +2,6 @@ import { AdvancedFilterContext } from '@/object-record/advanced-filter/states/co import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState'; import { useRecoilComponentCallbackState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackState'; import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue'; -import { VIEW_BAR_FILTER_DROPDOWN_ID } from '@/views/constants/ViewBarFilterDropdownId'; -import { vectorSearchInputComponentState } from '@/views/states/vectorSearchInputComponentState'; -import { isVectorSearchFilter } from '@/views/utils/isVectorSearchFilter'; import { useContext } from 'react'; import { useRecoilCallback } from 'recoil'; import { isDefined } from 'twenty-shared/utils'; @@ -32,15 +29,6 @@ export const useRemoveRecordFilter = () => { return; } - if (isVectorSearchFilter(filterToRemove)) { - set( - vectorSearchInputComponentState.atomFamily({ - instanceId: VIEW_BAR_FILTER_DROPDOWN_ID, - }), - '', - ); - } - set(currentRecordFiltersCallbackState, (currentRecordFilters) => { const newCurrentRecordFilters = [...currentRecordFilters]; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/hooks/useOpenRecordFilterChipFromTableHeader.ts b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/hooks/useOpenRecordFilterChipFromTableHeader.ts index 464645c59f..1eac209e08 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/hooks/useOpenRecordFilterChipFromTableHeader.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/hooks/useOpenRecordFilterChipFromTableHeader.ts @@ -4,6 +4,7 @@ import { useUpsertRecordFilter } from '@/object-record/record-filter/hooks/useUp import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState'; import { useOpenDropdown } from '@/ui/layout/dropdown/hooks/useOpenDropdown'; import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue'; +import { getEditableChipDropdownId } from '@/views/editable-chip/utils/getEditableChipDropdownId'; import { useSetEditableFilterChipDropdownStates } from '@/views/hooks/useSetEditableFilterChipDropdownStates'; import { isDefined } from 'twenty-shared/utils'; @@ -46,8 +47,9 @@ export const useOpenRecordFilterChipFromTableHeader = () => { if (isDefined(existingNonAdvancedRecordFilter)) { setEditableFilterChipDropdownStates(existingNonAdvancedRecordFilter); openDropdown({ - dropdownComponentInstanceIdFromProps: - existingNonAdvancedRecordFilter.id, + dropdownComponentInstanceIdFromProps: getEditableChipDropdownId({ + recordFilterId: existingNonAdvancedRecordFilter.id, + }), }); return; } @@ -59,7 +61,11 @@ export const useOpenRecordFilterChipFromTableHeader = () => { upsertRecordFilter(newRecordFilter); setEditableFilterChipDropdownStates(newRecordFilter); - openDropdown({ dropdownComponentInstanceIdFromProps: newRecordFilter.id }); + openDropdown({ + dropdownComponentInstanceIdFromProps: getEditableChipDropdownId({ + recordFilterId: newRecordFilter.id, + }), + }); }; return { openRecordFilterChipFromTableHeader }; diff --git a/packages/twenty-front/src/modules/object-record/utils/isSystemSearchVectorField.ts b/packages/twenty-front/src/modules/object-record/utils/isSystemSearchVectorField.ts index 48c58f987e..62d3ce1f64 100644 --- a/packages/twenty-front/src/modules/object-record/utils/isSystemSearchVectorField.ts +++ b/packages/twenty-front/src/modules/object-record/utils/isSystemSearchVectorField.ts @@ -1,4 +1,4 @@ -import { SEARCH_VECTOR_FIELD_NAME } from '@/views/constants/ViewFieldConstants'; +import { SEARCH_VECTOR_FIELD_NAME } from '@/object-record/constants/SearchVectorFieldName'; export const isSystemSearchVectorField = (fieldName: string): boolean => { return fieldName === SEARCH_VECTOR_FIELD_NAME; diff --git a/packages/twenty-front/src/modules/views/components/AdvancedFilterChip.tsx b/packages/twenty-front/src/modules/views/advanced-filter-chip/components/AdvancedFilterChip.tsx similarity index 96% rename from packages/twenty-front/src/modules/views/components/AdvancedFilterChip.tsx rename to packages/twenty-front/src/modules/views/advanced-filter-chip/components/AdvancedFilterChip.tsx index a882f8c99c..1608521ded 100644 --- a/packages/twenty-front/src/modules/views/components/AdvancedFilterChip.tsx +++ b/packages/twenty-front/src/modules/views/advanced-filter-chip/components/AdvancedFilterChip.tsx @@ -12,7 +12,7 @@ import { getAllRecordFilterDescendantsOfRecordFilterGroup } from '@/object-recor import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown'; import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue'; import { SortOrFilterChip } from '@/views/components/SortOrFilterChip'; -import { ADVANCED_FILTER_DROPDOWN_ID } from '@/views/constants/AdvancedFilterDropdownId'; +import { ViewBarFilterDropdownIds } from '@/views/constants/ViewBarFilterDropdownIds'; import { plural } from '@lingui/core/macro'; import { useMemo } from 'react'; import { isDefined } from 'twenty-shared/utils'; @@ -49,7 +49,7 @@ export const AdvancedFilterChip = () => { }); const handleRemoveClick = () => { - closeDropdown(ADVANCED_FILTER_DROPDOWN_ID); + closeDropdown(ViewBarFilterDropdownIds.ADVANCED); const viewFilterGroupIds = currentRecordFilterGroups.map( (recordFilterGroup) => recordFilterGroup.id, @@ -109,7 +109,7 @@ export const AdvancedFilterChip = () => { return ( { @@ -26,7 +26,7 @@ export const AdvancedFilterDropdownButton = () => { return ( } dropdownComponents={} dropdownOffset={{ y: 8, x: 0 }} diff --git a/packages/twenty-front/src/modules/views/components/AnyFieldSearchChip.tsx b/packages/twenty-front/src/modules/views/components/AnyFieldSearchChip.tsx index 5ba48ee22f..8cbeca28a3 100644 --- a/packages/twenty-front/src/modules/views/components/AnyFieldSearchChip.tsx +++ b/packages/twenty-front/src/modules/views/components/AnyFieldSearchChip.tsx @@ -2,7 +2,7 @@ import { anyFieldFilterValueComponentState } from '@/object-record/record-filter import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown'; import { useRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentState'; import { SortOrFilterChip } from '@/views/components/SortOrFilterChip'; -import { ADVANCED_FILTER_DROPDOWN_ID } from '@/views/constants/AdvancedFilterDropdownId'; +import { ViewBarFilterDropdownIds } from '@/views/constants/ViewBarFilterDropdownIds'; import { useLingui } from '@lingui/react/macro'; import { IconFilter } from 'twenty-ui/display'; @@ -22,7 +22,7 @@ export const AnyFieldSearchChip = () => { return ( diff --git a/packages/twenty-front/src/modules/views/components/ViewBarDetails.tsx b/packages/twenty-front/src/modules/views/components/ViewBarDetails.tsx index cd613af345..932d80a3e9 100644 --- a/packages/twenty-front/src/modules/views/components/ViewBarDetails.tsx +++ b/packages/twenty-front/src/modules/views/components/ViewBarDetails.tsx @@ -5,10 +5,9 @@ import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObje import { ObjectFilterDropdownComponentInstanceContext } from '@/object-record/object-filter-dropdown/states/contexts/ObjectFilterDropdownComponentInstanceContext'; import { useHandleToggleTrashColumnFilter } from '@/object-record/record-index/hooks/useHandleToggleTrashColumnFilter'; import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue'; -import { AdvancedFilterDropdownButton } from '@/views/components/AdvancedFilterDropdownButton'; -import { EditableFilterDropdownButton } from '@/views/components/EditableFilterDropdownButton'; -import { EditableSortChip } from '@/views/components/EditableSortChip'; +import { AdvancedFilterDropdownButton } from '@/views/advanced-filter-chip/components/AdvancedFilterDropdownButton'; import { ViewBarDetailsAddFilterButton } from '@/views/components/ViewBarDetailsAddFilterButton'; +import { EditableSortChip } from '@/views/editable-chip/components/EditableSortChip'; import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState'; import { currentRecordSortsComponentState } from '@/object-record/record-sort/states/currentRecordSortsComponentState'; @@ -25,6 +24,8 @@ import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDrop import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper'; import { AnyFieldSearchDropdownButton } from '@/views/components/AnyFieldSearchDropdownButton'; import { ANY_FIELD_SEARCH_DROPDOWN_ID } from '@/views/constants/AnyFieldSearchDropdownId'; +import { EditableFilterDropdownButton } from '@/views/editable-chip/components/EditableFilterDropdownButton'; +import { getEditableChipObjectFilterDropdownComponentInstanceId } from '@/views/editable-chip/utils/getEditableChipObjectFilterDropdownComponentInstanceId'; import { useHasFiltersInQueryParams } from '@/views/hooks/internal/useHasFiltersInQueryParams'; import { useApplyCurrentViewAnyFieldFilterToAnyFieldFilter } from '@/views/hooks/useApplyCurrentViewAnyFieldFilterToAnyFieldFilter'; import { useApplyCurrentViewFilterGroupsToCurrentRecordFilterGroups } from '@/views/hooks/useApplyCurrentViewFilterGroupsToCurrentRecordFilterGroups'; @@ -253,7 +254,12 @@ export const ViewBarDetails = ({ {recordFilters.map((recordFilter) => ( diff --git a/packages/twenty-front/src/modules/views/components/ViewBarDetailsAddFilterButton.tsx b/packages/twenty-front/src/modules/views/components/ViewBarDetailsAddFilterButton.tsx index c3de683750..2ca5849f4f 100644 --- a/packages/twenty-front/src/modules/views/components/ViewBarDetailsAddFilterButton.tsx +++ b/packages/twenty-front/src/modules/views/components/ViewBarDetailsAddFilterButton.tsx @@ -1,4 +1,4 @@ -import { VIEW_BAR_FILTER_DROPDOWN_ID } from '@/views/constants/ViewBarFilterDropdownId'; +import { ViewBarFilterDropdownIds } from '@/views/constants/ViewBarFilterDropdownIds'; import { useResetFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useResetFilterDropdown'; import { useToggleDropdown } from '@/ui/layout/dropdown/hooks/useToggleDropdown'; @@ -10,13 +10,13 @@ export const ViewBarDetailsAddFilterButton = () => { const { toggleDropdown } = useToggleDropdown(); const { resetFilterDropdown } = useResetFilterDropdown( - VIEW_BAR_FILTER_DROPDOWN_ID, + ViewBarFilterDropdownIds.MAIN, ); const handleClick = () => { resetFilterDropdown(); toggleDropdown({ - dropdownComponentInstanceIdFromProps: VIEW_BAR_FILTER_DROPDOWN_ID, + dropdownComponentInstanceIdFromProps: ViewBarFilterDropdownIds.MAIN, }); }; diff --git a/packages/twenty-front/src/modules/views/components/ViewBarFilterButton.tsx b/packages/twenty-front/src/modules/views/components/ViewBarFilterButton.tsx index e528545d69..f0e6eade2b 100644 --- a/packages/twenty-front/src/modules/views/components/ViewBarFilterButton.tsx +++ b/packages/twenty-front/src/modules/views/components/ViewBarFilterButton.tsx @@ -1,13 +1,13 @@ import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/StyledHeaderDropdownButton'; import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState'; import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue'; -import { VIEW_BAR_FILTER_DROPDOWN_ID } from '@/views/constants/ViewBarFilterDropdownId'; +import { ViewBarFilterDropdownIds } from '@/views/constants/ViewBarFilterDropdownIds'; import { Trans } from '@lingui/react/macro'; export const ViewBarFilterButton = () => { const isDropdownOpen = useRecoilComponentValue( isDropdownOpenComponentState, - VIEW_BAR_FILTER_DROPDOWN_ID, + ViewBarFilterDropdownIds.MAIN, ); return ( diff --git a/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdown.tsx b/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdown.tsx index 8228b3dc5d..cc83249f36 100644 --- a/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdown.tsx +++ b/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdown.tsx @@ -1,28 +1,23 @@ import { useResetFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useResetFilterDropdown'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; -import { VIEW_BAR_FILTER_DROPDOWN_ID } from '@/views/constants/ViewBarFilterDropdownId'; -import { useVectorSearchFilterActions } from '@/views/hooks/useVectorSearchFilterActions'; +import { ViewBarFilterDropdownIds } from '@/views/constants/ViewBarFilterDropdownIds'; import { objectFilterDropdownCurrentRecordFilterComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownCurrentRecordFilterComponentState'; import { useRemoveRecordFilter } from '@/object-record/record-filter/hooks/useRemoveRecordFilter'; import { isRecordFilterConsideredEmpty } from '@/object-record/record-filter/utils/isRecordFilterConsideredEmpty'; import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue'; import { ViewBarFilterDropdownContent } from '@/views/components/ViewBarFilterDropdownContent'; -import { useClearVectorSearchInput } from '@/views/hooks/useClearVectorSearchInput'; import { isDefined } from 'twenty-shared/utils'; import { ViewBarFilterButton } from './ViewBarFilterButton'; export const ViewBarFilterDropdown = () => { const { resetFilterDropdown } = useResetFilterDropdown(); - const { removeEmptyVectorSearchFilter } = useVectorSearchFilterActions(); const { removeRecordFilter } = useRemoveRecordFilter(); const objectFilterDropdownCurrentRecordFilter = useRecoilComponentValue( objectFilterDropdownCurrentRecordFilterComponentState, ); - const { clearVectorSearchInput } = useClearVectorSearchInput(); - const handleDropdownClickOutside = () => { const recordFilterIsEmpty = isDefined(objectFilterDropdownCurrentRecordFilter) && @@ -33,14 +28,10 @@ export const ViewBarFilterDropdown = () => { recordFilterId: objectFilterDropdownCurrentRecordFilter.id, }); } - - removeEmptyVectorSearchFilter(); }; const handleDropdownClose = () => { resetFilterDropdown(); - removeEmptyVectorSearchFilter(); - clearVectorSearchInput(); }; const handleDropdownOpen = () => { @@ -49,7 +40,7 @@ export const ViewBarFilterDropdown = () => { return ( } diff --git a/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownAdvancedFilterButton.tsx b/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownAdvancedFilterButton.tsx index a9a4de42a2..12b82a01c4 100644 --- a/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownAdvancedFilterButton.tsx +++ b/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownAdvancedFilterButton.tsx @@ -7,14 +7,13 @@ import { SelectableListItem } from '@/ui/layout/selectable-list/components/Selec import { isSelectedItemIdComponentFamilySelector } from '@/ui/layout/selectable-list/states/selectors/isSelectedItemIdComponentFamilySelector'; import { useRecoilComponentFamilyValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValue'; import { VIEW_BAR_FILTER_BOTTOM_MENU_ITEM_IDS } from '@/views/constants/ViewBarFilterBottomMenuItemIds'; -import { VIEW_BAR_FILTER_DROPDOWN_ID } from '@/views/constants/ViewBarFilterDropdownId'; import { useSetRecordFilterUsedInAdvancedFilterDropdownRow } from '@/object-record/advanced-filter/hooks/useSetRecordFilterUsedInAdvancedFilterDropdownRow'; import { useCreateEmptyRecordFilterFromFieldMetadataItem } from '@/object-record/record-filter/hooks/useCreateEmptyRecordFilterFromFieldMetadataItem'; import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown'; import { useOpenDropdown } from '@/ui/layout/dropdown/hooks/useOpenDropdown'; import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue'; -import { ADVANCED_FILTER_DROPDOWN_ID } from '@/views/constants/AdvancedFilterDropdownId'; +import { ViewBarFilterDropdownIds } from '@/views/constants/ViewBarFilterDropdownIds'; import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly'; import styled from '@emotion/styled'; import { useLingui } from '@lingui/react/macro'; @@ -115,9 +114,9 @@ export const ViewBarFilterDropdownAdvancedFilterButton = () => { setRecordFilterUsedInAdvancedFilterDropdownRow(newRecordFilter); } - closeObjectFilterDropdown(VIEW_BAR_FILTER_DROPDOWN_ID); + closeObjectFilterDropdown(ViewBarFilterDropdownIds.MAIN); openAdvancedFilterDropdown({ - dropdownComponentInstanceIdFromProps: ADVANCED_FILTER_DROPDOWN_ID, + dropdownComponentInstanceIdFromProps: ViewBarFilterDropdownIds.ADVANCED, }); }; diff --git a/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownContent.tsx b/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownContent.tsx index 5fc0d0245b..f867f8b555 100644 --- a/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownContent.tsx +++ b/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownContent.tsx @@ -1,42 +1,28 @@ import { objectFilterDropdownAnyFieldSearchIsSelectedComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownAnyFieldSearchIsSelectedComponentState'; import { objectFilterDropdownFilterIsSelectedComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownFilterIsSelectedComponentState'; -import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState'; import { useRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentState'; import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue'; import { ViewBarFilterDropdownAnyFieldSearchInput } from '@/views/components/ViewBarFilterDropdownAnyFieldSearchInput'; import { ViewBarFilterDropdownFieldSelectMenu } from '@/views/components/ViewBarFilterDropdownFieldSelectMenu'; import { ViewBarFilterDropdownFilterInput } from '@/views/components/ViewBarFilterDropdownFilterInput'; -import { ViewBarFilterDropdownVectorSearchInput } from '@/views/components/ViewBarFilterDropdownVectorSearchInput'; -import { VIEW_BAR_FILTER_DROPDOWN_ID } from '@/views/constants/ViewBarFilterDropdownId'; -import { ViewFilterOperand } from 'twenty-shared/types'; +import { ViewBarFilterDropdownIds } from '@/views/constants/ViewBarFilterDropdownIds'; export const ViewBarFilterDropdownContent = () => { const [objectFilterDropdownFilterIsSelected] = useRecoilComponentState( objectFilterDropdownFilterIsSelectedComponentState, - VIEW_BAR_FILTER_DROPDOWN_ID, + ViewBarFilterDropdownIds.MAIN, ); const objectFilterDropdownAnyFieldSearchIsSelected = useRecoilComponentValue( objectFilterDropdownAnyFieldSearchIsSelectedComponentState, ); - const selectedOperandInDropdown = useRecoilComponentValue( - selectedOperandInDropdownComponentState, - ); - - const isVectorSearchFilter = - selectedOperandInDropdown === ViewFilterOperand.VECTOR_SEARCH; - const isAnyFieldSearchFilter = objectFilterDropdownAnyFieldSearchIsSelected; if (isAnyFieldSearchFilter) { return ; } - if (isVectorSearchFilter) { - return ; - } - const shouldShowFilterInput = objectFilterDropdownFilterIsSelected; return ( diff --git a/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownFieldSelectMenu.tsx b/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownFieldSelectMenu.tsx index 480c220a72..9b95fe4515 100644 --- a/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownFieldSelectMenu.tsx +++ b/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownFieldSelectMenu.tsx @@ -21,7 +21,7 @@ import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth'; import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown'; import { VIEW_BAR_FILTER_BOTTOM_MENU_ITEM_IDS } from '@/views/constants/ViewBarFilterBottomMenuItemIds'; -import { VIEW_BAR_FILTER_DROPDOWN_ID } from '@/views/constants/ViewBarFilterDropdownId'; +import { ViewBarFilterDropdownIds } from '@/views/constants/ViewBarFilterDropdownIds'; import { useLingui } from '@lingui/react/macro'; import { IconX } from 'twenty-ui/display'; @@ -110,7 +110,7 @@ export const ViewBarFilterDropdownFieldSelectMenu = () => { {shouldShowVisibleFields && ( <> diff --git a/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownFilterInput.tsx b/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownFilterInput.tsx index 45238be8d2..1d2da88469 100644 --- a/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownFilterInput.tsx +++ b/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownFilterInput.tsx @@ -1,7 +1,7 @@ import { ObjectFilterDropdownContentWrapper } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownContentWrapper'; import { ObjectFilterDropdownFilterInput } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterInput'; import { ViewBarFilterDropdownFilterInputMenuHeader } from '@/views/components/ViewBarFilterDropdownFilterInputMenuHeader'; -import { VIEW_BAR_FILTER_DROPDOWN_ID } from '@/views/constants/ViewBarFilterDropdownId'; +import { ViewBarFilterDropdownIds } from '@/views/constants/ViewBarFilterDropdownIds'; type ViewBarFilterDropdownFilterInputProps = { recordFilterId?: string; @@ -14,7 +14,7 @@ export const ViewBarFilterDropdownFilterInput = ({ diff --git a/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownFilterInputMenuHeader.tsx b/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownFilterInputMenuHeader.tsx index 2b12a675e4..56a6efa158 100644 --- a/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownFilterInputMenuHeader.tsx +++ b/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownFilterInputMenuHeader.tsx @@ -1,35 +1,19 @@ import { useResetFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useResetFilterDropdown'; import { fieldMetadataItemUsedInDropdownComponentSelector } from '@/object-record/object-filter-dropdown/states/fieldMetadataItemUsedInDropdownComponentSelector'; -import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState'; import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader'; import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent'; import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue'; -import { useClearVectorSearchInput } from '@/views/hooks/useClearVectorSearchInput'; -import { useLingui } from '@lingui/react/macro'; -import { ViewFilterOperand } from 'twenty-shared/types'; import { IconChevronLeft } from 'twenty-ui/display'; export const ViewBarFilterDropdownFilterInputMenuHeader = () => { - const { t } = useLingui(); - const fieldMetadataItemUsedInDropdown = useRecoilComponentValue( fieldMetadataItemUsedInDropdownComponentSelector, ); - const selectedOperandInDropdown = useRecoilComponentValue( - selectedOperandInDropdownComponentState, - ); - - const isVectorSearchFilter = - selectedOperandInDropdown === ViewFilterOperand.VECTOR_SEARCH; - - const { clearVectorSearchInput } = useClearVectorSearchInput(); - const { resetFilterDropdown } = useResetFilterDropdown(); const handleBackButtonClick = () => { resetFilterDropdown(); - clearVectorSearchInput(); }; return ( @@ -41,9 +25,7 @@ export const ViewBarFilterDropdownFilterInputMenuHeader = () => { /> } > - {isVectorSearchFilter - ? t`Search` - : fieldMetadataItemUsedInDropdown?.label} + {fieldMetadataItemUsedInDropdown?.label} ); }; diff --git a/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownVectorSearchButton.tsx b/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownVectorSearchButton.tsx deleted file mode 100644 index 423e01bfc7..0000000000 --- a/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownVectorSearchButton.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem'; -import { isSelectedItemIdComponentFamilySelector } from '@/ui/layout/selectable-list/states/selectors/isSelectedItemIdComponentFamilySelector'; -import { useRecoilComponentFamilyValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValue'; -import { useRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentState'; -import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue'; -import styled from '@emotion/styled'; -import { useLingui } from '@lingui/react/macro'; -import { IconSearch } from 'twenty-ui/display'; -import { MenuItem } from 'twenty-ui/navigation'; - -import { VIEW_BAR_FILTER_BOTTOM_MENU_ITEM_IDS } from '@/views/constants/ViewBarFilterBottomMenuItemIds'; - -import { objectFilterDropdownSearchInputComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSearchInputComponentState'; -import { useOpenVectorSearchFilter } from '@/views/hooks/useOpenVectorSearchFilter'; -import { useSetVectorSearchInputValueFromExistingFilter } from '@/views/hooks/useSetVectorSearchInputValueFromExistingFilter'; -import { useVectorSearchFilterActions } from '@/views/hooks/useVectorSearchFilterActions'; -import { vectorSearchInputComponentState } from '@/views/states/vectorSearchInputComponentState'; - -const StyledSearchText = styled.span` - color: ${({ theme }) => theme.font.color.light}; - margin-left: ${({ theme }) => theme.spacing(1)}; -`; - -export const ViewBarFilterDropdownVectorSearchButton = () => { - const { t } = useLingui(); - const [, setVectorSearchInputValue] = useRecoilComponentState( - vectorSearchInputComponentState, - ); - const { setVectorSearchInputValueFromExistingFilter } = - useSetVectorSearchInputValueFromExistingFilter(); - - const objectFilterDropdownSearchInput = useRecoilComponentValue( - objectFilterDropdownSearchInputComponentState, - ); - - const { applyVectorSearchFilter } = useVectorSearchFilterActions(); - const { openVectorSearchFilter } = useOpenVectorSearchFilter(); - - const isSelected = useRecoilComponentFamilyValue( - isSelectedItemIdComponentFamilySelector, - VIEW_BAR_FILTER_BOTTOM_MENU_ITEM_IDS.SEARCH, - ); - - const handleSearchClick = () => { - openVectorSearchFilter(); - - if (objectFilterDropdownSearchInput.length > 0) { - setVectorSearchInputValue(objectFilterDropdownSearchInput); - applyVectorSearchFilter(objectFilterDropdownSearchInput); - } else { - setVectorSearchInputValueFromExistingFilter(); - } - }; - - return ( - - - {t`Search`} - {objectFilterDropdownSearchInput && ( - {t`ยท ${objectFilterDropdownSearchInput}`} - )} - - } - /> - - ); -}; diff --git a/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownVectorSearchInput.tsx b/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownVectorSearchInput.tsx deleted file mode 100644 index f41aae84d3..0000000000 --- a/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownVectorSearchInput.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { ObjectFilterDropdownVectorSearchInput } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownVectorSearchInput'; -import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent'; -import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth'; -import { ViewBarFilterDropdownFilterInputMenuHeader } from '@/views/components/ViewBarFilterDropdownFilterInputMenuHeader'; - -export const ViewBarFilterDropdownVectorSearchInput = () => { - return ( - - - - - ); -}; diff --git a/packages/twenty-front/src/modules/views/components/__stories__/ViewBarFilterDropdown.stories.tsx b/packages/twenty-front/src/modules/views/components/__stories__/ViewBarFilterDropdown.stories.tsx index 151931e3e9..742b05703d 100644 --- a/packages/twenty-front/src/modules/views/components/__stories__/ViewBarFilterDropdown.stories.tsx +++ b/packages/twenty-front/src/modules/views/components/__stories__/ViewBarFilterDropdown.stories.tsx @@ -16,7 +16,7 @@ import { RecordComponentInstanceContextsWrapper } from '@/object-record/componen import { currentRecordFieldsComponentState } from '@/object-record/record-field/states/currentRecordFieldsComponentState'; import { type RecordField } from '@/object-record/record-field/types/RecordField'; import { useRecordIndexFieldMetadataDerivedStates } from '@/object-record/record-index/hooks/useRecordIndexFieldMetadataDerivedStates'; -import { VIEW_BAR_FILTER_DROPDOWN_ID } from '@/views/constants/ViewBarFilterDropdownId'; +import { ViewBarFilterDropdownIds } from '@/views/constants/ViewBarFilterDropdownIds'; import { coreViewsState } from '@/views/states/coreViewState'; import { within } from '@storybook/test'; import { useSetRecoilState } from 'recoil'; @@ -104,7 +104,7 @@ const meta: Meta = { componentInstanceId={instanceId} > diff --git a/packages/twenty-front/src/modules/views/components/EditableFilterChipDropdownMenuHeader.tsx b/packages/twenty-front/src/modules/views/editable-chip/components/EditableFilterChipDropdownMenuHeader.tsx similarity index 66% rename from packages/twenty-front/src/modules/views/components/EditableFilterChipDropdownMenuHeader.tsx rename to packages/twenty-front/src/modules/views/editable-chip/components/EditableFilterChipDropdownMenuHeader.tsx index 58c98872e6..42594094fe 100644 --- a/packages/twenty-front/src/modules/views/components/EditableFilterChipDropdownMenuHeader.tsx +++ b/packages/twenty-front/src/modules/views/editable-chip/components/EditableFilterChipDropdownMenuHeader.tsx @@ -1,27 +1,15 @@ import { fieldMetadataItemUsedInDropdownComponentSelector } from '@/object-record/object-filter-dropdown/states/fieldMetadataItemUsedInDropdownComponentSelector'; -import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState'; import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader'; import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent'; import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown'; import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue'; -import { useLingui } from '@lingui/react/macro'; -import { ViewFilterOperand } from 'twenty-shared/types'; import { IconX } from 'twenty-ui/display'; export const EditableFilterChipDropdownMenuHeader = () => { - const { t } = useLingui(); - const fieldMetadataItemUsedInDropdown = useRecoilComponentValue( fieldMetadataItemUsedInDropdownComponentSelector, ); - const selectedOperandInDropdown = useRecoilComponentValue( - selectedOperandInDropdownComponentState, - ); - - const isVectorSearchFilter = - selectedOperandInDropdown === ViewFilterOperand.VECTOR_SEARCH; - const { closeDropdown } = useCloseDropdown(); const handleBackButtonClick = () => { @@ -37,9 +25,7 @@ export const EditableFilterChipDropdownMenuHeader = () => { /> } > - {isVectorSearchFilter - ? t`Search` - : fieldMetadataItemUsedInDropdown?.label} + {fieldMetadataItemUsedInDropdown?.label} ); }; diff --git a/packages/twenty-front/src/modules/views/components/EditableFilterDropdownButton.tsx b/packages/twenty-front/src/modules/views/editable-chip/components/EditableFilterDropdownButton.tsx similarity index 76% rename from packages/twenty-front/src/modules/views/components/EditableFilterDropdownButton.tsx rename to packages/twenty-front/src/modules/views/editable-chip/components/EditableFilterDropdownButton.tsx index d71ba52777..7d3b5c8fb5 100644 --- a/packages/twenty-front/src/modules/views/components/EditableFilterDropdownButton.tsx +++ b/packages/twenty-front/src/modules/views/editable-chip/components/EditableFilterDropdownButton.tsx @@ -2,14 +2,14 @@ import { useCallback } from 'react'; import { type RecordFilter } from '@/object-record/record-filter/types/RecordFilter'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; -import { EditableFilterChip } from '@/views/components/EditableFilterChip'; +import { EditableFilterChip } from '@/views/editable-chip/components/EditableFilterChip'; import { useRemoveRecordFilter } from '@/object-record/record-filter/hooks/useRemoveRecordFilter'; import { isRecordFilterConsideredEmpty } from '@/object-record/record-filter/utils/isRecordFilterConsideredEmpty'; import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown'; -import { EditableFilterChipDropdownContent } from '@/views/components/EditableFilterChipDropdownContent'; -import { EditableRelationFilterChip } from '@/views/components/EditableRelationFilterChip'; -import { useClearVectorSearchInput } from '@/views/hooks/useClearVectorSearchInput'; +import { EditableFilterChipDropdownContent } from '@/views/editable-chip/components/EditableFilterChipDropdownContent'; +import { EditableRelationFilterChip } from '@/views/editable-chip/components/EditableRelationFilterChip'; +import { getEditableChipDropdownId } from '@/views/editable-chip/utils/getEditableChipDropdownId'; import { useSetEditableFilterChipDropdownStates } from '@/views/hooks/useSetEditableFilterChipDropdownStates'; type EditableFilterDropdownButtonProps = { @@ -19,29 +19,25 @@ type EditableFilterDropdownButtonProps = { export const EditableFilterDropdownButton = ({ recordFilter, }: EditableFilterDropdownButtonProps) => { - const dropdownId = recordFilter.id; - const { closeDropdown } = useCloseDropdown(); const { removeRecordFilter } = useRemoveRecordFilter(); const handleRemove = () => { - closeDropdown(dropdownId); + closeDropdown( + getEditableChipDropdownId({ recordFilterId: recordFilter.id }), + ); removeRecordFilter({ recordFilterId: recordFilter.id }); }; - const { clearVectorSearchInput } = useClearVectorSearchInput(); - const onFilterDropdownClose = useCallback(() => { const recordFilterIsEmpty = isRecordFilterConsideredEmpty(recordFilter); if (recordFilterIsEmpty) { removeRecordFilter({ recordFilterId: recordFilter.id }); } - - clearVectorSearchInput(); - }, [recordFilter, removeRecordFilter, clearVectorSearchInput]); + }, [recordFilter, removeRecordFilter]); const { setEditableFilterChipDropdownStates } = useSetEditableFilterChipDropdownStates(); @@ -53,7 +49,9 @@ export const EditableFilterDropdownButton = ({ return ( <> { + return `editable-chip-dropdown-${recordFilterId}`; +}; diff --git a/packages/twenty-front/src/modules/views/editable-chip/utils/getEditableChipObjectFilterDropdownComponentInstanceId.ts b/packages/twenty-front/src/modules/views/editable-chip/utils/getEditableChipObjectFilterDropdownComponentInstanceId.ts new file mode 100644 index 0000000000..87fa1499ce --- /dev/null +++ b/packages/twenty-front/src/modules/views/editable-chip/utils/getEditableChipObjectFilterDropdownComponentInstanceId.ts @@ -0,0 +1,9 @@ +type GetEditableChipObjectFilterDropdownComponentInstanceIdProps = { + recordFilterId: string; +}; + +export const getEditableChipObjectFilterDropdownComponentInstanceId = ({ + recordFilterId, +}: GetEditableChipObjectFilterDropdownComponentInstanceIdProps) => { + return `editable-filter-${recordFilterId}`; +}; diff --git a/packages/twenty-front/src/modules/views/hooks/__tests__/useInitializeFilterOnFieldMetadataItemFromViewBarFilterDropdown.test.tsx b/packages/twenty-front/src/modules/views/hooks/__tests__/useInitializeFilterOnFieldMetadataItemFromViewBarFilterDropdown.test.tsx index e2146f630a..b82483b8de 100644 --- a/packages/twenty-front/src/modules/views/hooks/__tests__/useInitializeFilterOnFieldMetadataItemFromViewBarFilterDropdown.test.tsx +++ b/packages/twenty-front/src/modules/views/hooks/__tests__/useInitializeFilterOnFieldMetadataItemFromViewBarFilterDropdown.test.tsx @@ -17,7 +17,7 @@ import { getRecordFilterOperands } from '@/object-record/record-filter/utils/get import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType'; import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue'; import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState'; -import { VIEW_BAR_FILTER_DROPDOWN_ID } from '@/views/constants/ViewBarFilterDropdownId'; +import { ViewBarFilterDropdownIds } from '@/views/constants/ViewBarFilterDropdownIds'; import { getFilterTypeFromFieldType } from 'twenty-shared/utils'; import { getMockPersonObjectMetadataItem } from '~/testing/mock-data/people'; import { generatedMockObjectMetadataItems } from '~/testing/utils/generatedMockObjectMetadataItems'; @@ -165,7 +165,7 @@ describe('useInitializeFilterOnFieldMetadataItemFromViewBarFilterDropdown', () = expect(result.current.objectFilterDropdownFilterIsSelected).toBe(true); expect(result.current.selectedOperandInDropdown).toBe(defaultOperand); expect(mockPushFocusItemToFocusStack).toHaveBeenCalledWith({ - focusId: VIEW_BAR_FILTER_DROPDOWN_ID, + focusId: ViewBarFilterDropdownIds.MAIN, component: { type: FocusComponentType.DROPDOWN, instanceId: personCompanyFieldMetadataItemMock.id, diff --git a/packages/twenty-front/src/modules/views/hooks/useClearVectorSearchInput.ts b/packages/twenty-front/src/modules/views/hooks/useClearVectorSearchInput.ts deleted file mode 100644 index a72aaa2a92..0000000000 --- a/packages/twenty-front/src/modules/views/hooks/useClearVectorSearchInput.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState'; -import { vectorSearchInputComponentState } from '@/views/states/vectorSearchInputComponentState'; - -export const useClearVectorSearchInput = () => { - const setVectorSearchInputValue = useSetRecoilComponentState( - vectorSearchInputComponentState, - ); - - const clearVectorSearchInput = () => { - setVectorSearchInputValue(''); - }; - - return { - clearVectorSearchInput, - }; -}; diff --git a/packages/twenty-front/src/modules/views/hooks/useInitializeFilterOnFieldMetadataItemFromViewBarFilterDropdown.ts b/packages/twenty-front/src/modules/views/hooks/useInitializeFilterOnFieldMetadataItemFromViewBarFilterDropdown.ts index 69fcd094f5..35725b2313 100644 --- a/packages/twenty-front/src/modules/views/hooks/useInitializeFilterOnFieldMetadataItemFromViewBarFilterDropdown.ts +++ b/packages/twenty-front/src/modules/views/hooks/useInitializeFilterOnFieldMetadataItemFromViewBarFilterDropdown.ts @@ -13,7 +13,7 @@ import { getRecordFilterOperands } from '@/object-record/record-filter/utils/get import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack'; import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType'; import { useRecoilComponentCallbackState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackState'; -import { VIEW_BAR_FILTER_DROPDOWN_ID } from '@/views/constants/ViewBarFilterDropdownId'; +import { ViewBarFilterDropdownIds } from '@/views/constants/ViewBarFilterDropdownIds'; import { useRecoilCallback } from 'recoil'; import { getFilterTypeFromFieldType, isDefined } from 'twenty-shared/utils'; @@ -68,7 +68,7 @@ export const useInitializeFilterOnFieldMetadataItemFromViewBarFilterDropdown = if (filterType === 'RELATION' || filterType === 'SELECT') { pushFocusItemToFocusStack({ - focusId: VIEW_BAR_FILTER_DROPDOWN_ID, + focusId: ViewBarFilterDropdownIds.MAIN, component: { type: FocusComponentType.DROPDOWN, instanceId: fieldMetadataItem.id, diff --git a/packages/twenty-front/src/modules/views/hooks/useMapViewFiltersToFilters.ts b/packages/twenty-front/src/modules/views/hooks/useMapViewFiltersToFilters.ts index 836b9594ed..5202b8d050 100644 --- a/packages/twenty-front/src/modules/views/hooks/useMapViewFiltersToFilters.ts +++ b/packages/twenty-front/src/modules/views/hooks/useMapViewFiltersToFilters.ts @@ -1,7 +1,7 @@ import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext'; import { type CoreViewFilter } from '~/generated/graphql'; import { type ViewFilter } from '../types/ViewFilter'; -import { getFilterableFieldsWithVectorSearch } from '../utils/getFilterableFieldsWithVectorSearch'; +import { getFilterableFields } from '../utils/getFilterableFields'; import { mapViewFiltersToFilters } from '../utils/mapViewFiltersToFilters'; export const useMapViewFiltersToFilters = () => { @@ -11,7 +11,7 @@ export const useMapViewFiltersToFilters = () => { viewFilters: ViewFilter[] | CoreViewFilter[], ) => { const filterableFieldMetadataItems = - getFilterableFieldsWithVectorSearch(objectMetadataItem); + getFilterableFields(objectMetadataItem); return mapViewFiltersToFilters(viewFilters, filterableFieldMetadataItems); }; diff --git a/packages/twenty-front/src/modules/views/hooks/useOpenVectorSearchFilter.ts b/packages/twenty-front/src/modules/views/hooks/useOpenVectorSearchFilter.ts deleted file mode 100644 index 89157e0673..0000000000 --- a/packages/twenty-front/src/modules/views/hooks/useOpenVectorSearchFilter.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { objectFilterDropdownFilterIsSelectedComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownFilterIsSelectedComponentState'; -import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState'; -import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState'; -import { ViewFilterOperand } from 'twenty-shared/types'; - -export const useOpenVectorSearchFilter = (filterDropdownId?: string) => { - const setSelectedOperandInDropdown = useSetRecoilComponentState( - selectedOperandInDropdownComponentState, - filterDropdownId, - ); - - const setObjectFilterDropdownFilterIsSelected = useSetRecoilComponentState( - objectFilterDropdownFilterIsSelectedComponentState, - filterDropdownId, - ); - - const openVectorSearchFilter = () => { - setObjectFilterDropdownFilterIsSelected(true); - setSelectedOperandInDropdown(ViewFilterOperand.VECTOR_SEARCH); - }; - - return { - openVectorSearchFilter, - }; -}; diff --git a/packages/twenty-front/src/modules/views/hooks/useRefreshCoreViewsByObjectMetadataId.ts b/packages/twenty-front/src/modules/views/hooks/useRefreshCoreViewsByObjectMetadataId.ts index 2dfbc9e95d..9c334fbe63 100644 --- a/packages/twenty-front/src/modules/views/hooks/useRefreshCoreViewsByObjectMetadataId.ts +++ b/packages/twenty-front/src/modules/views/hooks/useRefreshCoreViewsByObjectMetadataId.ts @@ -6,7 +6,7 @@ import { currentRecordSortsComponentState } from '@/object-record/record-sort/st import { getRecordIndexIdFromObjectNamePluralAndViewId } from '@/object-record/utils/getRecordIndexIdFromObjectNamePluralAndViewId'; import { coreViewsByObjectMetadataIdFamilySelector } from '@/views/states/selectors/coreViewsByObjectMetadataIdFamilySelector'; import { convertCoreViewToView } from '@/views/utils/convertCoreViewToView'; -import { getFilterableFieldsWithVectorSearch } from '@/views/utils/getFilterableFieldsWithVectorSearch'; +import { getFilterableFields } from '@/views/utils/getFilterableFields'; import { mapViewFieldToRecordField } from '@/views/utils/mapViewFieldToRecordField'; import { mapViewFiltersToFilters } from '@/views/utils/mapViewFiltersToFilters'; @@ -117,7 +117,7 @@ export const useRefreshCoreViewsByObjectMetadataId = () => { }), mapViewFiltersToFilters( view.viewFilters, - getFilterableFieldsWithVectorSearch(objectMetadataItem), + getFilterableFields(objectMetadataItem), ), ); } diff --git a/packages/twenty-front/src/modules/views/hooks/useSetEditableFilterChipDropdownStates.ts b/packages/twenty-front/src/modules/views/hooks/useSetEditableFilterChipDropdownStates.ts index ab92e31310..fb017a8804 100644 --- a/packages/twenty-front/src/modules/views/hooks/useSetEditableFilterChipDropdownStates.ts +++ b/packages/twenty-front/src/modules/views/hooks/useSetEditableFilterChipDropdownStates.ts @@ -4,9 +4,7 @@ import { selectedOperandInDropdownComponentState } from '@/object-record/object- import { subFieldNameUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/subFieldNameUsedInDropdownComponentState'; import { useFilterableFieldMetadataItemsInRecordIndexContext } from '@/object-record/record-filter/hooks/useFilterableFieldMetadataItemsInRecordIndexContext'; import { type RecordFilter } from '@/object-record/record-filter/types/RecordFilter'; -import { useVectorSearchFieldInRecordIndexContextOrThrow } from '@/views/hooks/useVectorSearchFieldInRecordIndexContextOrThrow'; -import { vectorSearchInputComponentState } from '@/views/states/vectorSearchInputComponentState'; -import { isVectorSearchFilter } from '@/views/utils/isVectorSearchFilter'; +import { getEditableChipObjectFilterDropdownComponentInstanceId } from '@/views/editable-chip/utils/getEditableChipObjectFilterDropdownComponentInstanceId'; import { useRecoilCallback } from 'recoil'; import { isDefined } from 'twenty-shared/utils'; @@ -14,26 +12,10 @@ export const useSetEditableFilterChipDropdownStates = () => { const { filterableFieldMetadataItems } = useFilterableFieldMetadataItemsInRecordIndexContext(); - const { vectorSearchField } = - useVectorSearchFieldInRecordIndexContextOrThrow(); - const setEditableFilterChipDropdownStates = useRecoilCallback( ({ set }) => (recordFilter: RecordFilter) => { - const filterableFieldsWithVector = vectorSearchField - ? filterableFieldMetadataItems.concat(vectorSearchField) - : filterableFieldMetadataItems; - - if (isVectorSearchFilter(recordFilter)) { - set( - vectorSearchInputComponentState.atomFamily({ - instanceId: recordFilter.id, - }), - recordFilter.value, - ); - } - - const fieldMetadataItem = filterableFieldsWithVector.find( + const fieldMetadataItem = filterableFieldMetadataItems.find( (fieldMetadataItem) => fieldMetadataItem.id === recordFilter.fieldMetadataId, ); @@ -41,7 +23,10 @@ export const useSetEditableFilterChipDropdownStates = () => { if (isDefined(fieldMetadataItem)) { set( fieldMetadataItemIdUsedInDropdownComponentState.atomFamily({ - instanceId: recordFilter.id, + instanceId: + getEditableChipObjectFilterDropdownComponentInstanceId({ + recordFilterId: recordFilter.id, + }), }), fieldMetadataItem.id, ); @@ -49,26 +34,32 @@ export const useSetEditableFilterChipDropdownStates = () => { set( selectedOperandInDropdownComponentState.atomFamily({ - instanceId: recordFilter.id, + instanceId: getEditableChipObjectFilterDropdownComponentInstanceId({ + recordFilterId: recordFilter.id, + }), }), recordFilter.operand, ); set( objectFilterDropdownCurrentRecordFilterComponentState.atomFamily({ - instanceId: recordFilter.id, + instanceId: getEditableChipObjectFilterDropdownComponentInstanceId({ + recordFilterId: recordFilter.id, + }), }), recordFilter, ); set( subFieldNameUsedInDropdownComponentState.atomFamily({ - instanceId: recordFilter.id, + instanceId: getEditableChipObjectFilterDropdownComponentInstanceId({ + recordFilterId: recordFilter.id, + }), }), recordFilter.subFieldName, ); }, - [filterableFieldMetadataItems, vectorSearchField], + [filterableFieldMetadataItems], ); return { diff --git a/packages/twenty-front/src/modules/views/hooks/useSetVectorSearchInputValueFromExistingFilter.ts b/packages/twenty-front/src/modules/views/hooks/useSetVectorSearchInputValueFromExistingFilter.ts deleted file mode 100644 index 513f5bef80..0000000000 --- a/packages/twenty-front/src/modules/views/hooks/useSetVectorSearchInputValueFromExistingFilter.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { useRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentState'; -import { vectorSearchInputComponentState } from '@/views/states/vectorSearchInputComponentState'; -import { isDefined } from 'twenty-shared/utils'; -import { useVectorSearchFilterState } from './useVectorSearchFilterState'; - -export const useSetVectorSearchInputValueFromExistingFilter = () => { - const [, setVectorSearchInputValue] = useRecoilComponentState( - vectorSearchInputComponentState, - ); - const { getExistingVectorSearchFilter } = useVectorSearchFilterState(); - - const setVectorSearchInputValueFromExistingFilter = () => { - const existingVectorSearchFilter = getExistingVectorSearchFilter(); - - if (isDefined(existingVectorSearchFilter)) { - setVectorSearchInputValue(existingVectorSearchFilter.value); - } - }; - - return { setVectorSearchInputValueFromExistingFilter }; -}; diff --git a/packages/twenty-front/src/modules/views/hooks/useVectorSearchFieldInRecordIndexContextOrThrow.ts b/packages/twenty-front/src/modules/views/hooks/useVectorSearchFieldInRecordIndexContextOrThrow.ts deleted file mode 100644 index 7101c8d3c7..0000000000 --- a/packages/twenty-front/src/modules/views/hooks/useVectorSearchFieldInRecordIndexContextOrThrow.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext'; -import { SEARCH_VECTOR_FIELD_NAME } from '../constants/ViewFieldConstants'; - -export const useVectorSearchFieldInRecordIndexContextOrThrow = () => { - const { objectMetadataItem } = useRecordIndexContextOrThrow(); - - const vectorSearchField = objectMetadataItem.fields.find( - (field) => - field.type === 'TS_VECTOR' && field.name === SEARCH_VECTOR_FIELD_NAME, - ); - - return { vectorSearchField }; -}; diff --git a/packages/twenty-front/src/modules/views/hooks/useVectorSearchFilterActions.ts b/packages/twenty-front/src/modules/views/hooks/useVectorSearchFilterActions.ts deleted file mode 100644 index a170f8a1e4..0000000000 --- a/packages/twenty-front/src/modules/views/hooks/useVectorSearchFilterActions.ts +++ /dev/null @@ -1,55 +0,0 @@ -import { useRemoveRecordFilter } from '@/object-record/record-filter/hooks/useRemoveRecordFilter'; -import { useUpsertRecordFilter } from '@/object-record/record-filter/hooks/useUpsertRecordFilter'; -import { isRecordFilterConsideredEmpty } from '@/object-record/record-filter/utils/isRecordFilterConsideredEmpty'; -import { useVectorSearchFieldInRecordIndexContextOrThrow } from '@/views/hooks/useVectorSearchFieldInRecordIndexContextOrThrow'; -import { t } from '@lingui/core/macro'; -import { ViewFilterOperand } from 'twenty-shared/types'; -import { getFilterTypeFromFieldType, isDefined } from 'twenty-shared/utils'; -import { v4 } from 'uuid'; -import { useVectorSearchFilterState } from './useVectorSearchFilterState'; - -export const useVectorSearchFilterActions = () => { - const { vectorSearchField } = - useVectorSearchFieldInRecordIndexContextOrThrow(); - const { getExistingVectorSearchFilter } = useVectorSearchFilterState(); - const { upsertRecordFilter } = useUpsertRecordFilter(); - const { removeRecordFilter } = useRemoveRecordFilter(); - - const applyVectorSearchFilter = (value: string) => { - if (!vectorSearchField) { - return; - } - - const existingVectorSearchFilter = getExistingVectorSearchFilter(); - - const vectorSearchRecordFilter = { - id: existingVectorSearchFilter?.id ?? v4(), - fieldMetadataId: vectorSearchField.id, - value: value, - displayValue: value, - operand: ViewFilterOperand.VECTOR_SEARCH, - type: getFilterTypeFromFieldType(vectorSearchField.type), - label: t`Search`, - }; - - upsertRecordFilter(vectorSearchRecordFilter); - }; - - const removeEmptyVectorSearchFilter = () => { - const vectorSearchFilter = getExistingVectorSearchFilter(); - - if ( - isDefined(vectorSearchFilter) && - isRecordFilterConsideredEmpty(vectorSearchFilter) - ) { - removeRecordFilter({ - recordFilterId: vectorSearchFilter.id, - }); - } - }; - - return { - applyVectorSearchFilter, - removeEmptyVectorSearchFilter, - }; -}; diff --git a/packages/twenty-front/src/modules/views/hooks/useVectorSearchFilterState.ts b/packages/twenty-front/src/modules/views/hooks/useVectorSearchFilterState.ts deleted file mode 100644 index c875e4de4e..0000000000 --- a/packages/twenty-front/src/modules/views/hooks/useVectorSearchFilterState.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState'; -import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue'; -import { isVectorSearchFilter } from '@/views/utils/isVectorSearchFilter'; - -export const useVectorSearchFilterState = () => { - const currentRecordFilters = useRecoilComponentValue( - currentRecordFiltersComponentState, - ); - - const getExistingVectorSearchFilter = () => { - return currentRecordFilters.find(isVectorSearchFilter); - }; - - return { - getExistingVectorSearchFilter, - }; -}; diff --git a/packages/twenty-front/src/modules/views/states/vectorSearchInputComponentState.ts b/packages/twenty-front/src/modules/views/states/vectorSearchInputComponentState.ts deleted file mode 100644 index 9b8046805a..0000000000 --- a/packages/twenty-front/src/modules/views/states/vectorSearchInputComponentState.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { ObjectFilterDropdownComponentInstanceContext } from '@/object-record/object-filter-dropdown/states/contexts/ObjectFilterDropdownComponentInstanceContext'; -import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; - -export const vectorSearchInputComponentState = createComponentState({ - key: 'vectorSearchInputComponentState', - defaultValue: '', - componentInstanceContext: ObjectFilterDropdownComponentInstanceContext, -}); diff --git a/packages/twenty-front/src/modules/views/utils/getFilterableFields.ts b/packages/twenty-front/src/modules/views/utils/getFilterableFields.ts new file mode 100644 index 0000000000..e45a374786 --- /dev/null +++ b/packages/twenty-front/src/modules/views/utils/getFilterableFields.ts @@ -0,0 +1,10 @@ +import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; +import { getFilterFilterableFieldMetadataItems } from '@/object-metadata/utils/getFilterFilterableFieldMetadataItems'; + +export const getFilterableFields = (objectMetadataItem: ObjectMetadataItem) => { + return [ + ...objectMetadataItem.fields.filter( + getFilterFilterableFieldMetadataItems({ isJsonFilterEnabled: true }), + ), + ]; +}; diff --git a/packages/twenty-front/src/modules/views/utils/getFilterableFieldsWithVectorSearch.ts b/packages/twenty-front/src/modules/views/utils/getFilterableFieldsWithVectorSearch.ts deleted file mode 100644 index e5493a8004..0000000000 --- a/packages/twenty-front/src/modules/views/utils/getFilterableFieldsWithVectorSearch.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; -import { getFilterFilterableFieldMetadataItems } from '@/object-metadata/utils/getFilterFilterableFieldMetadataItems'; -import { SEARCH_VECTOR_FIELD_NAME } from '../constants/ViewFieldConstants'; - -export const getFilterableFieldsWithVectorSearch = ( - objectMetadataItem: ObjectMetadataItem, -) => { - const vectorSearchField = objectMetadataItem.fields.find( - (field) => - field.type === 'TS_VECTOR' && field.name === SEARCH_VECTOR_FIELD_NAME, - ); - - return [ - ...objectMetadataItem.fields.filter( - getFilterFilterableFieldMetadataItems({ isJsonFilterEnabled: true }), - ), - ...(vectorSearchField ? [vectorSearchField] : []), - ]; -}; diff --git a/packages/twenty-front/src/modules/views/utils/isVectorSearchFilter.ts b/packages/twenty-front/src/modules/views/utils/isVectorSearchFilter.ts deleted file mode 100644 index 350bfd7f4b..0000000000 --- a/packages/twenty-front/src/modules/views/utils/isVectorSearchFilter.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { type RecordFilter } from '@/object-record/record-filter/types/RecordFilter'; -import { ViewFilterOperand } from 'twenty-shared/types'; - -export const isVectorSearchFilter = (filter: RecordFilter) => { - return filter.operand === ViewFilterOperand.VECTOR_SEARCH; -}; diff --git a/packages/twenty-shared/src/types/ViewFilterOperandDeprecated.ts b/packages/twenty-shared/src/types/ViewFilterOperandDeprecated.ts index dea35cfa8f..df58f44142 100644 --- a/packages/twenty-shared/src/types/ViewFilterOperandDeprecated.ts +++ b/packages/twenty-shared/src/types/ViewFilterOperandDeprecated.ts @@ -14,5 +14,4 @@ export enum ViewFilterOperandDeprecated { IsInPast = 'isInPast', IsInFuture = 'isInFuture', IsToday = 'isToday', - VectorSearch = 'search', } diff --git a/packages/twenty-shared/src/utils/filter/utils/convert-view-filter-operand-to-core-operand.util.ts b/packages/twenty-shared/src/utils/filter/utils/convert-view-filter-operand-to-core-operand.util.ts index 7fb6b2d927..a91202714f 100644 --- a/packages/twenty-shared/src/utils/filter/utils/convert-view-filter-operand-to-core-operand.util.ts +++ b/packages/twenty-shared/src/utils/filter/utils/convert-view-filter-operand-to-core-operand.util.ts @@ -19,7 +19,6 @@ const operandMapping: Record = { [ViewFilterOperandDeprecated.IsInPast]: ViewFilterOperand.IS_IN_PAST, [ViewFilterOperandDeprecated.IsInFuture]: ViewFilterOperand.IS_IN_FUTURE, [ViewFilterOperandDeprecated.IsToday]: ViewFilterOperand.IS_TODAY, - [ViewFilterOperandDeprecated.VectorSearch]: ViewFilterOperand.VECTOR_SEARCH, [ViewFilterOperand.IS]: ViewFilterOperand.IS, [ViewFilterOperand.IS_NOT_NULL]: ViewFilterOperand.IS_NOT_NULL, [ViewFilterOperand.IS_NOT]: ViewFilterOperand.IS_NOT,