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

Refactor RecordPicker part 2 (#10502)

Browse Source 
Keep clarifying folders:
- record-picker is now clean
- record-picker-morph-legacy contains activityTarget logic that will be
abstracted later
This commit is contained in:
Charles Bochet
2025-02-26 13:54:16 +01:00
committed by GitHub
parent ec87218b9c
commit 64938d5a05
44 changed files with 126 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/twenty-front/index.html
View File

@ -1,5 +1,5 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en" translate="no">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />

4
packages/twenty-front/src/modules/activities/inline-cell/components/ActivityTargetInlineCellEditMode.tsx
View File

@ -24,9 +24,9 @@ import {
objectRecordMultiSelectComponentFamilyState, objectRecordMultiSelectComponentFamilyState,
} from '@/object-record/record-field/states/objectRecordMultiSelectComponentFamilyState'; } from '@/object-record/record-field/states/objectRecordMultiSelectComponentFamilyState';
import { useInlineCell } from '@/object-record/record-inline-cell/hooks/useInlineCell'; import { useInlineCell } from '@/object-record/record-inline-cell/hooks/useInlineCell';
import { ActivityTargetInlineCellEditModeMultiRecordsEffect } from '@/object-record/record-picker-morph-legacy/components/ActivityTargetInlineCellEditModeMultiRecordsEffect';
import { ActivityTargetInlineCellEditModeMultiRecordsSearchFilterEffect } from '@/object-record/record-picker-morph-legacy/components/ActivityTargetInlineCellEditModeMultiRecordsSearchFilterEffect';
import { MultipleRecordPicker } from '@/object-record/record-picker/components/MultipleRecordPicker'; import { MultipleRecordPicker } from '@/object-record/record-picker/components/MultipleRecordPicker';
import { ActivityTargetInlineCellEditModeMultiRecordsEffect } from '@/object-record/record-picker/legacy/components/ActivityTargetInlineCellEditModeMultiRecordsEffect';
import { ActivityTargetInlineCellEditModeMultiRecordsSearchFilterEffect } from '@/object-record/record-picker/legacy/components/ActivityTargetInlineCellEditModeMultiRecordsSearchFilterEffect';
import { RecordPickerComponentInstanceContext } from '@/object-record/record-picker/states/contexts/RecordPickerComponentInstanceContext'; import { RecordPickerComponentInstanceContext } from '@/object-record/record-picker/states/contexts/RecordPickerComponentInstanceContext';
import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
import { prefillRecord } from '@/object-record/utils/prefillRecord'; import { prefillRecord } from '@/object-record/utils/prefillRecord';

8
packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataItemsProvider.tsx
View File

@ -4,8 +4,6 @@ import { useRecoilValue } from 'recoil';
import { ObjectMetadataItemsLoadEffect } from '@/object-metadata/components/ObjectMetadataItemsLoadEffect'; import { ObjectMetadataItemsLoadEffect } from '@/object-metadata/components/ObjectMetadataItemsLoadEffect';
import { PreComputedChipGeneratorsProvider } from '@/object-metadata/components/PreComputedChipGeneratorsProvider'; import { PreComputedChipGeneratorsProvider } from '@/object-metadata/components/PreComputedChipGeneratorsProvider';
import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState'; import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
import { RelationPickerHotkeyScope } from '@/object-record/record-picker/legacy/types/RelationPickerHotkeyScope';
import { RecordPickerComponentInstanceContext } from '@/object-record/record-picker/states/contexts/RecordPickerComponentInstanceContext';
import { UserOrMetadataLoader } from '~/loading/components/UserOrMetadataLoader'; import { UserOrMetadataLoader } from '~/loading/components/UserOrMetadataLoader';
export const ObjectMetadataItemsProvider = ({ export const ObjectMetadataItemsProvider = ({
@ -20,11 +18,7 @@ export const ObjectMetadataItemsProvider = ({
<ObjectMetadataItemsLoadEffect /> <ObjectMetadataItemsLoadEffect />
{shouldDisplayChildren ? ( {shouldDisplayChildren ? (
<PreComputedChipGeneratorsProvider> <PreComputedChipGeneratorsProvider>
<RecordPickerComponentInstanceContext.Provider {children}
value={{ instanceId: RelationPickerHotkeyScope.RelationPicker }}
>
{children}
</RecordPickerComponentInstanceContext.Provider>
</PreComputedChipGeneratorsProvider> </PreComputedChipGeneratorsProvider>
) : ( ) : (
<UserOrMetadataLoader /> <UserOrMetadataLoader />

0
packages/twenty-front/src/modules/object-record/record-picker/hooks/__tests__/useLimitPerMetadataItem.test.tsx → packages/twenty-front/src/modules/object-metadata/hooks/__tests__/useLimitPerMetadataItem.test.tsx
View File

0
packages/twenty-front/src/modules/object-record/record-picker/hooks/useOrderByFieldPerMetadataItem.ts → packages/twenty-front/src/modules/object-metadata/hooks/useOrderByFieldPerMetadataItem.ts
View File

2
packages/twenty-front/src/modules/object-record/multiple-objects/hooks/useCombinedFindManyRecords.ts
View File

@ -5,7 +5,7 @@ import { EMPTY_QUERY } from '@/object-record/constants/EmptyQuery';
import { RecordGqlOperationSignature } from '@/object-record/graphql/types/RecordGqlOperationSignature'; import { RecordGqlOperationSignature } from '@/object-record/graphql/types/RecordGqlOperationSignature';
import { useCombinedFindManyRecordsQueryVariables } from '@/object-record/multiple-objects/hooks/useCombinedFindManyRecordsQueryVariables'; import { useCombinedFindManyRecordsQueryVariables } from '@/object-record/multiple-objects/hooks/useCombinedFindManyRecordsQueryVariables';
import { useGenerateCombinedFindManyRecordsQuery } from '@/object-record/multiple-objects/hooks/useGenerateCombinedFindManyRecordsQuery'; import { useGenerateCombinedFindManyRecordsQuery } from '@/object-record/multiple-objects/hooks/useGenerateCombinedFindManyRecordsQuery';
import { MultiObjectRecordQueryResult } from '@/object-record/record-picker/hooks/useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray'; import { MultiObjectRecordQueryResult } from '@/object-record/record-picker-morph-legacy/hooks/useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray';
export const useCombinedFindManyRecords = ({ export const useCombinedFindManyRecords = ({
operationSignatures, operationSignatures,

2
packages/twenty-front/src/modules/object-record/multiple-objects/hooks/useCombinedGetTotalCount.ts
View File

@ -4,7 +4,7 @@ import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { EMPTY_QUERY } from '@/object-record/constants/EmptyQuery'; import { EMPTY_QUERY } from '@/object-record/constants/EmptyQuery';
import { RecordGqlOperationSignature } from '@/object-record/graphql/types/RecordGqlOperationSignature'; import { RecordGqlOperationSignature } from '@/object-record/graphql/types/RecordGqlOperationSignature';
import { useGenerateCombinedFindManyRecordsQuery } from '@/object-record/multiple-objects/hooks/useGenerateCombinedFindManyRecordsQuery'; import { useGenerateCombinedFindManyRecordsQuery } from '@/object-record/multiple-objects/hooks/useGenerateCombinedFindManyRecordsQuery';
import { MultiObjectRecordQueryResult } from '@/object-record/record-picker/hooks/useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray'; import { MultiObjectRecordQueryResult } from '@/object-record/record-picker-morph-legacy/hooks/useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray';
export const useCombinedGetTotalCount = ({ export const useCombinedGetTotalCount = ({
objectMetadataItems, objectMetadataItems,

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

@ -7,8 +7,8 @@ import { getFilterTypeFromFieldType } from '@/object-metadata/utils/formatFieldM
import { fieldMetadataItemUsedInDropdownComponentSelector } from '@/object-record/object-filter-dropdown/states/fieldMetadataItemUsedInDropdownComponentSelector'; import { fieldMetadataItemUsedInDropdownComponentSelector } from '@/object-record/object-filter-dropdown/states/fieldMetadataItemUsedInDropdownComponentSelector';
import { selectedFilterComponentState } from '@/object-record/object-filter-dropdown/states/selectedFilterComponentState'; import { selectedFilterComponentState } from '@/object-record/object-filter-dropdown/states/selectedFilterComponentState';
import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState'; import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState';
import { RelationPickerHotkeyScope } from '@/object-record/record-field/meta-types/input/types/RelationPickerHotkeyScope';
import { useApplyRecordFilter } from '@/object-record/record-filter/hooks/useApplyRecordFilter'; import { useApplyRecordFilter } from '@/object-record/record-filter/hooks/useApplyRecordFilter';
import { RelationPickerHotkeyScope } from '@/object-record/record-picker/legacy/types/RelationPickerHotkeyScope';
import { BooleanDisplay } from '@/ui/field/display/components/BooleanDisplay'; import { BooleanDisplay } from '@/ui/field/display/components/BooleanDisplay';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';

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

@ -12,7 +12,7 @@ import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { getFilterTypeFromFieldType } from '@/object-metadata/utils/formatFieldMetadataItemsAsFilterDefinitions'; import { getFilterTypeFromFieldType } from '@/object-metadata/utils/formatFieldMetadataItemsAsFilterDefinitions';
import { isCompositeField } from '@/object-record/object-filter-dropdown/utils/isCompositeField'; import { isCompositeField } from '@/object-record/object-filter-dropdown/utils/isCompositeField';
import { getRecordFilterOperands } from '@/object-record/record-filter/utils/getRecordFilterOperands'; import { getRecordFilterOperands } from '@/object-record/record-filter/utils/getRecordFilterOperands';
import { RelationPickerHotkeyScope } from '@/object-record/record-picker/legacy/types/RelationPickerHotkeyScope'; import { RecordPickerHotkeyScope } from '@/object-record/record-picker/types/RecordPickerHotkeyScope';
import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList'; import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope'; import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2'; import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
@ -75,7 +75,7 @@ export const ObjectFilterDropdownFilterSelectMenuItem = ({
const filterType = getFilterTypeFromFieldType(fieldMetadataItem.type); const filterType = getFilterTypeFromFieldType(fieldMetadataItem.type);
if (filterType === 'RELATION' || filterType === 'SELECT') { if (filterType === 'RELATION' || filterType === 'SELECT') {
setHotkeyScope(RelationPickerHotkeyScope.RelationPicker); setHotkeyScope(RecordPickerHotkeyScope.RecordPicker);
} }
setSelectedOperandInDropdown( setSelectedOperandInDropdown(

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

@ -18,8 +18,9 @@ import { objectFilterDropdownSearchInputComponentState } from '@/object-record/o
import { objectFilterDropdownSelectedOptionValuesComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSelectedOptionValuesComponentState'; import { objectFilterDropdownSelectedOptionValuesComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSelectedOptionValuesComponentState';
import { selectedFilterComponentState } from '@/object-record/object-filter-dropdown/states/selectedFilterComponentState'; import { selectedFilterComponentState } from '@/object-record/object-filter-dropdown/states/selectedFilterComponentState';
import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState'; import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState';
import { RelationPickerHotkeyScope } from '@/object-record/record-field/meta-types/input/types/RelationPickerHotkeyScope';
import { useApplyRecordFilter } from '@/object-record/record-filter/hooks/useApplyRecordFilter'; import { useApplyRecordFilter } from '@/object-record/record-filter/hooks/useApplyRecordFilter';
import { RelationPickerHotkeyScope } from '@/object-record/record-picker/legacy/types/RelationPickerHotkeyScope'; import { RecordPickerHotkeyScope } from '@/object-record/record-picker/types/RecordPickerHotkeyScope';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow'; import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
@ -164,7 +165,7 @@ export const ObjectFilterDropdownOptionSelect = () => {
<SelectableList <SelectableList
selectableListId={componentInstanceId} selectableListId={componentInstanceId}
selectableItemIdArray={objectRecordsIds} selectableItemIdArray={objectRecordsIds}
hotkeyScope={RelationPickerHotkeyScope.RelationPicker} hotkeyScope={RecordPickerHotkeyScope.RecordPicker}
onEnter={(itemId) => { onEnter={(itemId) => {
const option = optionsInDropdown.find((option) => option.id === itemId); const option = optionsInDropdown.find((option) => option.id === itemId);
if (isDefined(option)) { if (isDefined(option)) {

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

@ -12,7 +12,7 @@ import { selectedFilterComponentState } from '@/object-record/object-filter-drop
import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState'; import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState';
import { useApplyRecordFilter } from '@/object-record/record-filter/hooks/useApplyRecordFilter'; import { useApplyRecordFilter } from '@/object-record/record-filter/hooks/useApplyRecordFilter';
import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState'; import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
import { RelationPickerHotkeyScope } from '@/object-record/record-picker/legacy/types/RelationPickerHotkeyScope'; import { RecordPickerHotkeyScope } from '@/object-record/record-picker/types/RecordPickerHotkeyScope';
import { MultipleSelectDropdown } from '@/object-record/select/components/MultipleSelectDropdown'; import { MultipleSelectDropdown } from '@/object-record/select/components/MultipleSelectDropdown';
import { useRecordsForSelect } from '@/object-record/select/hooks/useRecordsForSelect'; import { useRecordsForSelect } from '@/object-record/select/hooks/useRecordsForSelect';
import { SelectableItem } from '@/object-record/select/types/SelectableItem'; import { SelectableItem } from '@/object-record/select/types/SelectableItem';
@ -232,7 +232,7 @@ export const ObjectFilterDropdownRecordSelect = ({
)} )}
<MultipleSelectDropdown <MultipleSelectDropdown
selectableListId="object-filter-record-select-id" selectableListId="object-filter-record-select-id"
hotkeyScope={RelationPickerHotkeyScope.RelationPicker} hotkeyScope={RecordPickerHotkeyScope.RecordPicker}
itemsToSelect={recordsToSelect} itemsToSelect={recordsToSelect}
filteredSelectedItems={filteredSelectedRecords} filteredSelectedItems={filteredSelectedRecords}
selectedItems={selectedRecords} selectedItems={selectedRecords}

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

@ -12,7 +12,7 @@ import { getActorSourceMultiSelectOptions } from '@/object-record/object-filter-
import { useApplyRecordFilter } from '@/object-record/record-filter/hooks/useApplyRecordFilter'; import { useApplyRecordFilter } from '@/object-record/record-filter/hooks/useApplyRecordFilter';
import { useRemoveRecordFilter } from '@/object-record/record-filter/hooks/useRemoveRecordFilter'; import { useRemoveRecordFilter } from '@/object-record/record-filter/hooks/useRemoveRecordFilter';
import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState'; import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
import { RelationPickerHotkeyScope } from '@/object-record/record-picker/legacy/types/RelationPickerHotkeyScope'; import { RecordPickerHotkeyScope } from '@/object-record/record-picker/types/RecordPickerHotkeyScope';
import { MultipleSelectDropdown } from '@/object-record/select/components/MultipleSelectDropdown'; import { MultipleSelectDropdown } from '@/object-record/select/components/MultipleSelectDropdown';
import { SelectableItem } from '@/object-record/select/types/SelectableItem'; import { SelectableItem } from '@/object-record/select/types/SelectableItem';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
@ -144,7 +144,7 @@ export const ObjectFilterDropdownSourceSelect = ({
return ( return (
<MultipleSelectDropdown <MultipleSelectDropdown
selectableListId="object-filter-source-select-id" selectableListId="object-filter-source-select-id"
hotkeyScope={RelationPickerHotkeyScope.RelationPicker} hotkeyScope={RecordPickerHotkeyScope.RecordPicker}
itemsToSelect={sourceTypes.filter( itemsToSelect={sourceTypes.filter(
(item) => (item) =>
!filteredSelectedItems.some((selected) => selected.id === item.id), !filteredSelectedItems.some((selected) => selected.id === item.id),

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

@ -8,7 +8,7 @@ import { selectedOperandInDropdownComponentState } from '@/object-record/object-
import { getInitialFilterValue } from '@/object-record/object-filter-dropdown/utils/getInitialFilterValue'; import { getInitialFilterValue } from '@/object-record/object-filter-dropdown/utils/getInitialFilterValue';
import { useApplyRecordFilter } from '@/object-record/record-filter/hooks/useApplyRecordFilter'; import { useApplyRecordFilter } from '@/object-record/record-filter/hooks/useApplyRecordFilter';
import { getRecordFilterOperands } from '@/object-record/record-filter/utils/getRecordFilterOperands'; import { getRecordFilterOperands } from '@/object-record/record-filter/utils/getRecordFilterOperands';
import { RelationPickerHotkeyScope } from '@/object-record/record-picker/legacy/types/RelationPickerHotkeyScope'; import { RecordPickerHotkeyScope } from '@/object-record/record-picker/types/RecordPickerHotkeyScope';
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope'; import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
@ -67,7 +67,7 @@ export const useSelectFilterUsedInDropdown = (componentInstanceId?: string) => {
fieldMetadataItem.type === 'RELATION' || fieldMetadataItem.type === 'RELATION' ||
fieldMetadataItem.type === 'SELECT' fieldMetadataItem.type === 'SELECT'
) { ) {
setHotkeyScope(RelationPickerHotkeyScope.RelationPicker); setHotkeyScope(RecordPickerHotkeyScope.RecordPicker);
} }
const filterType = getFilterTypeFromFieldType(fieldMetadataItem.type); const filterType = getFilterTypeFromFieldType(fieldMetadataItem.type);

7
packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCardHeader.tsx
View File

@ -4,6 +4,7 @@ import { useRecordBoardSelection } from '@/object-record/record-board/hooks/useR
import { RecordBoardCardHeaderContainer } from '@/object-record/record-board/record-board-card/components/RecordBoardCardHeaderContainer'; import { RecordBoardCardHeaderContainer } from '@/object-record/record-board/record-board-card/components/RecordBoardCardHeaderContainer';
import { StopPropagationContainer } from '@/object-record/record-board/record-board-card/components/StopPropagationContainer'; import { StopPropagationContainer } from '@/object-record/record-board/record-board-card/components/StopPropagationContainer';
import { RecordBoardCardContext } from '@/object-record/record-board/record-board-card/contexts/RecordBoardCardContext'; import { RecordBoardCardContext } from '@/object-record/record-board/record-board-card/contexts/RecordBoardCardContext';
import { RecordBoardColumnContext } from '@/object-record/record-board/record-board-column/contexts/RecordBoardColumnContext';
import { useAddNewCard } from '@/object-record/record-board/record-board-column/hooks/useAddNewCard'; import { useAddNewCard } from '@/object-record/record-board/record-board-column/hooks/useAddNewCard';
import { RecordBoardScopeInternalContext } from '@/object-record/record-board/scopes/scope-internal-context/RecordBoardScopeInternalContext'; import { RecordBoardScopeInternalContext } from '@/object-record/record-board/scopes/scope-internal-context/RecordBoardScopeInternalContext';
import { isRecordBoardCardSelectedComponentFamilyState } from '@/object-record/record-board/states/isRecordBoardCardSelectedComponentFamilyState'; import { isRecordBoardCardSelectedComponentFamilyState } from '@/object-record/record-board/states/isRecordBoardCardSelectedComponentFamilyState';
@ -75,7 +76,11 @@ export const RecordBoardCardHeader = ({
}: RecordBoardCardHeaderProps) => { }: RecordBoardCardHeaderProps) => {
const [newLabelValue, setNewLabelValue] = useState(''); const [newLabelValue, setNewLabelValue] = useState('');
const { handleBlur, handleInputEnter } = useAddNewCard(); const columnId = useContext(RecordBoardColumnContext)?.columnId;
const { handleBlur, handleInputEnter } = useAddNewCard({
recordPickerComponentInstanceId: `add-new-card-record-picker-column-${columnId}`,
});
const { recordId } = useContext(RecordBoardCardContext); const { recordId } = useContext(RecordBoardCardContext);

10
packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnNewOpportunity.tsx
View File

@ -3,7 +3,6 @@ import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
import { useAddNewCard } from '@/object-record/record-board/record-board-column/hooks/useAddNewCard'; import { useAddNewCard } from '@/object-record/record-board/record-board-column/hooks/useAddNewCard';
import { recordBoardNewRecordByColumnIdSelector } from '@/object-record/record-board/states/selectors/recordBoardNewRecordByColumnIdSelector'; import { recordBoardNewRecordByColumnIdSelector } from '@/object-record/record-board/states/selectors/recordBoardNewRecordByColumnIdSelector';
import { SingleRecordPicker } from '@/object-record/record-picker/components/SingleRecordPicker'; import { SingleRecordPicker } from '@/object-record/record-picker/components/SingleRecordPicker';
import { RelationPickerHotkeyScope } from '@/object-record/record-picker/legacy/types/RelationPickerHotkeyScope';
import { RecordPickerComponentInstanceContext } from '@/object-record/record-picker/states/contexts/RecordPickerComponentInstanceContext'; import { RecordPickerComponentInstanceContext } from '@/object-record/record-picker/states/contexts/RecordPickerComponentInstanceContext';
import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState'; import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState';
import { viewableRecordNameSingularState } from '@/object-record/record-right-drawer/states/viewableRecordNameSingularState'; import { viewableRecordNameSingularState } from '@/object-record/record-right-drawer/states/viewableRecordNameSingularState';
@ -29,7 +28,9 @@ export const RecordBoardColumnNewOpportunity = ({
}), }),
); );
const { handleCreateSuccess, handleEntitySelect } = useAddNewCard(); const { handleCreateSuccess, handleEntitySelect } = useAddNewCard({
recordPickerComponentInstanceId: `add-new-card-record-picker-column-${columnId}`,
});
const { createOneRecord: createCompany } = useCreateOneRecord({ const { createOneRecord: createCompany } = useCreateOneRecord({
objectNameSingular: CoreObjectNameSingular.Company, objectNameSingular: CoreObjectNameSingular.Company,
@ -68,9 +69,12 @@ export const RecordBoardColumnNewOpportunity = ({
{newRecord.isCreating && newRecord.position === position && ( {newRecord.isCreating && newRecord.position === position && (
<OverlayContainer> <OverlayContainer>
<RecordPickerComponentInstanceContext.Provider <RecordPickerComponentInstanceContext.Provider
value={{ instanceId: RelationPickerHotkeyScope.RelationPicker }} value={{
instanceId: `add-new-card-record-picker-column-${columnId}`,
}}
> >
<SingleRecordPicker <SingleRecordPicker
componentInstanceId={`add-new-card-record-picker-column-${columnId}`}
onCancel={() => handleCreateSuccess(position, columnId, false)} onCancel={() => handleCreateSuccess(position, columnId, false)}
onRecordSelected={(company) => onRecordSelected={(company) =>
company ? handleEntitySelect(position, company) : null company ? handleEntitySelect(position, company) : null

4
packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnNewRecord.tsx
View File

@ -18,7 +18,9 @@ export const RecordBoardColumnNewRecord = ({
}), }),
); );
const { handleCreateSuccess } = useAddNewCard(); const { handleCreateSuccess } = useAddNewCard({
recordPickerComponentInstanceId: `add-new-card-record-picker-column-${columnId}`,
});
const hasObjectReadOnlyPermission = useHasObjectReadOnlyPermission(); const hasObjectReadOnlyPermission = useHasObjectReadOnlyPermission();

17
packages/twenty-front/src/modules/object-record/record-board/record-board-column/hooks/useAddNewCard.ts
View File

@ -1,8 +1,8 @@
import { RecordBoardContext } from '@/object-record/record-board/contexts/RecordBoardContext'; import { RecordBoardContext } from '@/object-record/record-board/contexts/RecordBoardContext';
import { RecordBoardColumnContext } from '@/object-record/record-board/record-board-column/contexts/RecordBoardColumnContext'; import { RecordBoardColumnContext } from '@/object-record/record-board/record-board-column/contexts/RecordBoardColumnContext';
import { recordBoardNewRecordByColumnIdSelector } from '@/object-record/record-board/states/selectors/recordBoardNewRecordByColumnIdSelector'; import { recordBoardNewRecordByColumnIdSelector } from '@/object-record/record-board/states/selectors/recordBoardNewRecordByColumnIdSelector';
import { RelationPickerHotkeyScope } from '@/object-record/record-field/meta-types/input/types/RelationPickerHotkeyScope';
import { useRecordSelectSearch } from '@/object-record/record-picker/hooks/useRecordSelectSearch'; import { useRecordSelectSearch } from '@/object-record/record-picker/hooks/useRecordSelectSearch';
import { RelationPickerHotkeyScope } from '@/object-record/record-picker/legacy/types/RelationPickerHotkeyScope';
import { SingleRecordPickerRecord } from '@/object-record/record-picker/types/SingleRecordPickerRecord'; import { SingleRecordPickerRecord } from '@/object-record/record-picker/types/SingleRecordPickerRecord';
import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope'; import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
import { useCallback, useContext } from 'react'; import { useCallback, useContext } from 'react';
@ -16,13 +16,19 @@ type SetFunction = <T>(
valOrUpdater: T | ((currVal: T) => T), valOrUpdater: T | ((currVal: T) => T),
) => void; ) => void;
export const useAddNewCard = () => { type UseAddNewCardProps = {
recordPickerComponentInstanceId: string;
};
export const useAddNewCard = ({
recordPickerComponentInstanceId,
}: UseAddNewCardProps) => {
const columnContext = useContext(RecordBoardColumnContext); const columnContext = useContext(RecordBoardColumnContext);
const { createOneRecord, selectFieldMetadataItem, objectMetadataItem } = const { createOneRecord, selectFieldMetadataItem, objectMetadataItem } =
useContext(RecordBoardContext); useContext(RecordBoardContext);
const { resetSearchFilter } = useRecordSelectSearch({ const { resetSearchFilter } = useRecordSelectSearch(
recordPickerInstanceId: RelationPickerHotkeyScope.RelationPicker, recordPickerComponentInstanceId,
}); );
const { const {
goBackToPreviousHotkeyScope, goBackToPreviousHotkeyScope,
@ -233,7 +239,6 @@ export const useAddNewCard = () => {
return { return {
handleAddNewCardClick, handleAddNewCardClick,
handleCreateSuccess, handleCreateSuccess,
handleCreate,
handleBlur, handleBlur,
handleInputEnter, handleInputEnter,
handleEntitySelect, handleEntitySelect,

4
packages/twenty-front/src/modules/object-record/record-board/record-board-column/hooks/useColumnNewCardActions.ts
View File

@ -11,7 +11,9 @@ export const useColumnNewCardActions = (columnId: string) => {
(field) => field.isLabelIdentifier, (field) => field.isLabelIdentifier,
); );
const { handleAddNewCardClick } = useAddNewCard(); const { handleAddNewCardClick } = useAddNewCard({
recordPickerComponentInstanceId: `add-new-card-record-picker-column-${columnId}`,
});
const handleNewButtonClick = ( const handleNewButtonClick = (
position: 'first' | 'last', position: 'first' | 'last',

2
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/RelationFromManyFieldInput.tsx
View File

@ -3,12 +3,12 @@ import { useContext } from 'react';
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem'; import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { FieldContext } from '@/object-record/record-field/contexts/FieldContext'; import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
import { RelationFromManyFieldInputMultiRecordsEffect } from '@/object-record/record-field/meta-types/input/components/RelationFromManyFieldInputMultiRecordsEffect'; import { RelationFromManyFieldInputMultiRecordsEffect } from '@/object-record/record-field/meta-types/input/components/RelationFromManyFieldInputMultiRecordsEffect';
import { useAddNewRecordAndOpenRightDrawer } from '@/object-record/record-field/meta-types/input/hooks/useAddNewRecordAndOpenRightDrawer';
import { useUpdateRelationFromManyFieldInput } from '@/object-record/record-field/meta-types/input/hooks/useUpdateRelationFromManyFieldInput'; import { useUpdateRelationFromManyFieldInput } from '@/object-record/record-field/meta-types/input/hooks/useUpdateRelationFromManyFieldInput';
import { FieldDefinition } from '@/object-record/record-field/types/FieldDefinition'; import { FieldDefinition } from '@/object-record/record-field/types/FieldDefinition';
import { FieldInputEvent } from '@/object-record/record-field/types/FieldInputEvent'; import { FieldInputEvent } from '@/object-record/record-field/types/FieldInputEvent';
import { FieldRelationMetadata } from '@/object-record/record-field/types/FieldMetadata'; import { FieldRelationMetadata } from '@/object-record/record-field/types/FieldMetadata';
import { MultipleRecordPicker } from '@/object-record/record-picker/components/MultipleRecordPicker'; import { MultipleRecordPicker } from '@/object-record/record-picker/components/MultipleRecordPicker';
import { useAddNewRecordAndOpenRightDrawer } from '@/object-record/record-picker/hooks/useAddNewRecordAndOpenRightDrawer';
import { RecordPickerComponentInstanceContext } from '@/object-record/record-picker/states/contexts/RecordPickerComponentInstanceContext'; import { RecordPickerComponentInstanceContext } from '@/object-record/record-picker/states/contexts/RecordPickerComponentInstanceContext';
type RelationFromManyFieldInputProps = { type RelationFromManyFieldInputProps = {

7
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/RelationPicker.tsx
View File

@ -3,12 +3,12 @@ import { IconForbid } from 'twenty-ui';
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem'; import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { FieldContext } from '@/object-record/record-field/contexts/FieldContext'; import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
import { useAddNewRecordAndOpenRightDrawer } from '@/object-record/record-field/meta-types/input/hooks/useAddNewRecordAndOpenRightDrawer';
import { RelationPickerHotkeyScope } from '@/object-record/record-field/meta-types/input/types/RelationPickerHotkeyScope';
import { FieldDefinition } from '@/object-record/record-field/types/FieldDefinition'; import { FieldDefinition } from '@/object-record/record-field/types/FieldDefinition';
import { FieldRelationMetadata } from '@/object-record/record-field/types/FieldMetadata'; import { FieldRelationMetadata } from '@/object-record/record-field/types/FieldMetadata';
import { SearchPickerInitialValueEffect } from '@/object-record/record-picker-morph-legacy/components/SearchPickerInitialValueEffect';
import { SingleRecordPicker } from '@/object-record/record-picker/components/SingleRecordPicker'; import { SingleRecordPicker } from '@/object-record/record-picker/components/SingleRecordPicker';
import { useAddNewRecordAndOpenRightDrawer } from '@/object-record/record-picker/hooks/useAddNewRecordAndOpenRightDrawer';
import { SearchPickerInitialValueEffect } from '@/object-record/record-picker/legacy/components/SearchPickerInitialValueEffect';
import { RelationPickerHotkeyScope } from '@/object-record/record-picker/legacy/types/RelationPickerHotkeyScope';
import { SingleRecordPickerRecord } from '@/object-record/record-picker/types/SingleRecordPickerRecord'; import { SingleRecordPickerRecord } from '@/object-record/record-picker/types/SingleRecordPickerRecord';
export type RelationPickerProps = { export type RelationPickerProps = {
@ -64,6 +64,7 @@ export const RelationPicker = ({
recordPickerInstanceId={recordPickerInstanceId} recordPickerInstanceId={recordPickerInstanceId}
/> />
<SingleRecordPicker <SingleRecordPicker
componentInstanceId={recordPickerInstanceId}
EmptyIcon={IconForbid} EmptyIcon={IconForbid}
emptyLabel={'No ' + fieldDefinition.label} emptyLabel={'No ' + fieldDefinition.label}
onCancel={onCancel} onCancel={onCancel}

0
packages/twenty-front/src/modules/object-record/record-picker/hooks/useAddNewRecordAndOpenRightDrawer.ts → packages/twenty-front/src/modules/object-record/record-field/meta-types/input/hooks/useAddNewRecordAndOpenRightDrawer.ts
View File

0
packages/twenty-front/src/modules/object-record/record-picker/legacy/types/RelationPickerHotkeyScope.ts → packages/twenty-front/src/modules/object-record/record-field/meta-types/input/types/RelationPickerHotkeyScope.ts
View File

4
packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageKanbanAddButton.tsx
View File

@ -49,7 +49,9 @@ export const RecordIndexPageKanbanAddButton = () => {
const { closeDropdown } = useDropdown(dropdownId); const { closeDropdown } = useDropdown(dropdownId);
const { isOpportunitiesCompanyFieldDisabled } = const { isOpportunitiesCompanyFieldDisabled } =
useIsOpportunitiesCompanyFieldDisabled(); useIsOpportunitiesCompanyFieldDisabled();
const { handleAddNewCardClick } = useAddNewCard(); const { handleAddNewCardClick } = useAddNewCard({
recordPickerComponentInstanceId: `add-new-card-record-picker`,
});
const handleItemClick = useCallback( const handleItemClick = useCallback(
(columnDefinition: RecordGroupDefinition) => { (columnDefinition: RecordGroupDefinition) => {

2
packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCell.tsx
View File

@ -14,7 +14,7 @@ import { useInlineCell } from '../hooks/useInlineCell';
import { useIsFieldValueReadOnly } from '@/object-record/record-field/hooks/useIsFieldValueReadOnly'; import { useIsFieldValueReadOnly } from '@/object-record/record-field/hooks/useIsFieldValueReadOnly';
import { FieldInputClickOutsideEvent } from '@/object-record/record-field/meta-types/input/components/DateTimeFieldInput'; import { FieldInputClickOutsideEvent } from '@/object-record/record-field/meta-types/input/components/DateTimeFieldInput';
import { RelationPickerHotkeyScope } from '@/object-record/record-picker/legacy/types/RelationPickerHotkeyScope'; import { RelationPickerHotkeyScope } from '@/object-record/record-field/meta-types/input/types/RelationPickerHotkeyScope';
import { getDropdownFocusIdForRecordField } from '@/object-record/utils/getDropdownFocusIdForRecordField'; import { getDropdownFocusIdForRecordField } from '@/object-record/utils/getDropdownFocusIdForRecordField';
import { getRecordFieldInputId } from '@/object-record/utils/getRecordFieldInputId'; import { getRecordFieldInputId } from '@/object-record/utils/getRecordFieldInputId';
import { activeDropdownFocusIdState } from '@/ui/layout/dropdown/states/activeDropdownFocusIdState'; import { activeDropdownFocusIdState } from '@/ui/layout/dropdown/states/activeDropdownFocusIdState';

0
packages/twenty-front/src/modules/object-record/record-picker/legacy/components/ActivityTargetInlineCellEditModeMultiRecordsEffect.tsx → packages/twenty-front/src/modules/object-record/record-picker-morph-legacy/components/ActivityTargetInlineCellEditModeMultiRecordsEffect.tsx
View File

4
packages/twenty-front/src/modules/object-record/record-picker/legacy/components/ActivityTargetInlineCellEditModeMultiRecordsSearchFilterEffect.tsx → packages/twenty-front/src/modules/object-record/record-picker-morph-legacy/components/ActivityTargetInlineCellEditModeMultiRecordsSearchFilterEffect.tsx
View File

@ -3,8 +3,8 @@ import { useSetRecoilState } from 'recoil';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { objectRecordMultiSelectMatchesFilterRecordsIdsComponentState } from '@/object-record/record-field/states/objectRecordMultiSelectMatchesFilterRecordsIdsComponentState'; import { objectRecordMultiSelectMatchesFilterRecordsIdsComponentState } from '@/object-record/record-field/states/objectRecordMultiSelectMatchesFilterRecordsIdsComponentState';
import { useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray } from '@/object-record/record-picker/hooks/useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray'; import { useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray } from '@/object-record/record-picker-morph-legacy/hooks/useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray';
import { useMultiObjectSearch } from '@/object-record/record-picker/hooks/useMultiObjectSearch'; import { useMultiObjectSearch } from '@/object-record/record-picker-morph-legacy/hooks/useMultiObjectSearch';
import { RecordPickerComponentInstanceContext } from '@/object-record/record-picker/states/contexts/RecordPickerComponentInstanceContext'; import { RecordPickerComponentInstanceContext } from '@/object-record/record-picker/states/contexts/RecordPickerComponentInstanceContext';
import { recordPickerSearchFilterComponentState } from '@/object-record/record-picker/states/recordPickerSearchFilterComponentState'; import { recordPickerSearchFilterComponentState } from '@/object-record/record-picker/states/recordPickerSearchFilterComponentState';
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow'; import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';

0
packages/twenty-front/src/modules/object-record/record-picker/legacy/components/MultipleObjectRecordOnClickOutsideEffect.tsx → packages/twenty-front/src/modules/object-record/record-picker-morph-legacy/components/MultipleObjectRecordOnClickOutsideEffect.tsx
View File

0
packages/twenty-front/src/modules/object-record/record-picker/legacy/components/SearchPickerInitialValueEffect.tsx → packages/twenty-front/src/modules/object-record/record-picker-morph-legacy/components/SearchPickerInitialValueEffect.tsx
View File

2
packages/twenty-front/src/modules/object-record/record-picker/hooks/__tests__/useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray.test.tsx → packages/twenty-front/src/modules/object-record/record-picker-morph-legacy/hooks/__tests__/useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray.test.tsx
View File

@ -2,7 +2,7 @@ import { act, renderHook } from '@testing-library/react';
import { RecoilRoot, useSetRecoilState } from 'recoil'; import { RecoilRoot, useSetRecoilState } from 'recoil';
import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState'; import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
import { useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray } from '@/object-record/record-picker/hooks/useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray'; import { useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray } from '@/object-record/record-picker-morph-legacy/hooks/useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray';
import { RecordPickerComponentInstanceContext } from '@/object-record/record-picker/states/contexts/RecordPickerComponentInstanceContext'; import { RecordPickerComponentInstanceContext } from '@/object-record/record-picker/states/contexts/RecordPickerComponentInstanceContext';
import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems'; import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';

2
packages/twenty-front/src/modules/object-record/record-picker/hooks/__tests__/useMultiObjectSearchQueryResultFormattedAsObjectRecordsMap.test.tsx → packages/twenty-front/src/modules/object-record/record-picker-morph-legacy/hooks/__tests__/useMultiObjectSearchQueryResultFormattedAsObjectRecordsMap.test.tsx
View File

@ -2,7 +2,7 @@ import { act, renderHook } from '@testing-library/react';
import { RecoilRoot, useSetRecoilState } from 'recoil'; import { RecoilRoot, useSetRecoilState } from 'recoil';
import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState'; import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
import { useMultiObjectSearchQueryResultFormattedAsObjectRecordsMap } from '@/object-record/record-picker/hooks/useMultiObjectSearchQueryResultFormattedAsObjectRecordsMap'; import { useMultiObjectSearchQueryResultFormattedAsObjectRecordsMap } from '@/object-record/record-picker-morph-legacy/hooks/useMultiObjectSearchQueryResultFormattedAsObjectRecordsMap';
import { RecordPickerComponentInstanceContext } from '@/object-record/record-picker/states/contexts/RecordPickerComponentInstanceContext'; import { RecordPickerComponentInstanceContext } from '@/object-record/record-picker/states/contexts/RecordPickerComponentInstanceContext';
import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems'; import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';

2
packages/twenty-front/src/modules/object-record/record-picker/hooks/useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray.ts → packages/twenty-front/src/modules/object-record/record-picker-morph-legacy/hooks/useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray.ts
View File

@ -4,7 +4,7 @@ import { useRecoilValue } from 'recoil';
import { objectMetadataItemsByNamePluralMapSelector } from '@/object-metadata/states/objectMetadataItemsByNamePluralMapSelector'; import { objectMetadataItemsByNamePluralMapSelector } from '@/object-metadata/states/objectMetadataItemsByNamePluralMapSelector';
import { getObjectRecordIdentifier } from '@/object-metadata/utils/getObjectRecordIdentifier'; import { getObjectRecordIdentifier } from '@/object-metadata/utils/getObjectRecordIdentifier';
import { RecordGqlConnection } from '@/object-record/graphql/types/RecordGqlConnection'; import { RecordGqlConnection } from '@/object-record/graphql/types/RecordGqlConnection';
import { formatMultiObjectRecordSearchResults } from '@/object-record/record-picker/utils/formatMultiObjectRecordSearchResults'; import { formatMultiObjectRecordSearchResults } from '@/object-record/record-picker-morph-legacy/utils/formatMultiObjectRecordSearchResults';
import { ObjectRecordForSelect } from '@/object-record/types/ObjectRecordForSelect'; import { ObjectRecordForSelect } from '@/object-record/types/ObjectRecordForSelect';
import { isDefined } from 'twenty-shared'; import { isDefined } from 'twenty-shared';

2
packages/twenty-front/src/modules/object-record/record-picker/hooks/useMultiObjectSearch.ts → packages/twenty-front/src/modules/object-record/record-picker-morph-legacy/hooks/useMultiObjectSearch.ts
View File

@ -6,7 +6,7 @@ import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadat
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { EMPTY_QUERY } from '@/object-record/constants/EmptyQuery'; import { EMPTY_QUERY } from '@/object-record/constants/EmptyQuery';
import { useGenerateCombinedSearchRecordsQuery } from '@/object-record/multiple-objects/hooks/useGenerateCombinedSearchRecordsQuery'; import { useGenerateCombinedSearchRecordsQuery } from '@/object-record/multiple-objects/hooks/useGenerateCombinedSearchRecordsQuery';
import { MultiObjectRecordQueryResult } from '@/object-record/record-picker/hooks/useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray'; import { MultiObjectRecordQueryResult } from '@/object-record/record-picker-morph-legacy/hooks/useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray';
import { isObjectMetadataItemSearchableInCombinedRequest } from '@/object-record/utils/isObjectMetadataItemSearchableInCombinedRequest'; import { isObjectMetadataItemSearchableInCombinedRequest } from '@/object-record/utils/isObjectMetadataItemSearchableInCombinedRequest';
import { isDefined } from 'twenty-shared'; import { isDefined } from 'twenty-shared';

4
packages/twenty-front/src/modules/object-record/record-picker/hooks/useMultiObjectSearchQueryResultFormattedAsObjectRecordsMap.ts → packages/twenty-front/src/modules/object-record/record-picker-morph-legacy/hooks/useMultiObjectSearchQueryResultFormattedAsObjectRecordsMap.ts
View File

@ -3,8 +3,8 @@ import { useRecoilValue } from 'recoil';
import { objectMetadataItemsByNamePluralMapSelector } from '@/object-metadata/states/objectMetadataItemsByNamePluralMapSelector'; import { objectMetadataItemsByNamePluralMapSelector } from '@/object-metadata/states/objectMetadataItemsByNamePluralMapSelector';
import { getObjectRecordIdentifier } from '@/object-metadata/utils/getObjectRecordIdentifier'; import { getObjectRecordIdentifier } from '@/object-metadata/utils/getObjectRecordIdentifier';
import { MultiObjectRecordQueryResult } from '@/object-record/record-picker/hooks/useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray'; import { MultiObjectRecordQueryResult } from '@/object-record/record-picker-morph-legacy/hooks/useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray';
import { formatMultiObjectRecordSearchResults } from '@/object-record/record-picker/utils/formatMultiObjectRecordSearchResults'; import { formatMultiObjectRecordSearchResults } from '@/object-record/record-picker-morph-legacy/utils/formatMultiObjectRecordSearchResults';
import { ObjectRecordForSelect } from '@/object-record/types/ObjectRecordForSelect'; import { ObjectRecordForSelect } from '@/object-record/types/ObjectRecordForSelect';
import { isDefined } from 'twenty-shared'; import { isDefined } from 'twenty-shared';

4
packages/twenty-front/src/modules/object-record/record-picker/hooks/useMultiObjectSearchSelectedItemsQuery.ts → packages/twenty-front/src/modules/object-record/record-picker-morph-legacy/hooks/useMultiObjectSearchSelectedItemsQuery.ts
View File

@ -3,13 +3,13 @@ import { isNonEmptyArray } from '@sniptt/guards';
import { useRecoilValue } from 'recoil'; import { useRecoilValue } from 'recoil';
import { useLimitPerMetadataItem } from '@/object-metadata/hooks/useLimitPerMetadataItem'; import { useLimitPerMetadataItem } from '@/object-metadata/hooks/useLimitPerMetadataItem';
import { useOrderByFieldPerMetadataItem } from '@/object-metadata/hooks/useOrderByFieldPerMetadataItem';
import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState'; import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
import { useGenerateCombinedFindManyRecordsQuery } from '@/object-record/multiple-objects/hooks/useGenerateCombinedFindManyRecordsQuery'; import { useGenerateCombinedFindManyRecordsQuery } from '@/object-record/multiple-objects/hooks/useGenerateCombinedFindManyRecordsQuery';
import { import {
MultiObjectRecordQueryResult, MultiObjectRecordQueryResult,
useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray, useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray,
} from '@/object-record/record-picker/hooks/useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray'; } from '@/object-record/record-picker-morph-legacy/hooks/useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray';
import { useOrderByFieldPerMetadataItem } from '@/object-record/record-picker/hooks/useOrderByFieldPerMetadataItem';
import { SelectedObjectRecordId } from '@/object-record/types/SelectedObjectRecordId'; import { SelectedObjectRecordId } from '@/object-record/types/SelectedObjectRecordId';
import { capitalize, isDefined } from 'twenty-shared'; import { capitalize, isDefined } from 'twenty-shared';

2
packages/twenty-front/src/modules/object-record/record-picker/utils/formatMultiObjectRecordSearchResults.ts → packages/twenty-front/src/modules/object-record/record-picker-morph-legacy/utils/formatMultiObjectRecordSearchResults.ts
View File

@ -1,4 +1,4 @@
import { MultiObjectRecordQueryResult } from '@/object-record/record-picker/hooks/useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray'; import { MultiObjectRecordQueryResult } from '@/object-record/record-picker-morph-legacy/hooks/useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray';
export const formatMultiObjectRecordSearchResults = ( export const formatMultiObjectRecordSearchResults = (
searchResults: MultiObjectRecordQueryResult | undefined | null, searchResults: MultiObjectRecordQueryResult | undefined | null,

35
packages/twenty-front/src/modules/object-record/record-picker/components/SingleRecordPicker.tsx
View File

@ -4,12 +4,14 @@ import {
SingleRecordPickerMenuItemsWithSearch, SingleRecordPickerMenuItemsWithSearch,
SingleRecordPickerMenuItemsWithSearchProps, SingleRecordPickerMenuItemsWithSearchProps,
} from '@/object-record/record-picker/components/SingleRecordPickerMenuItemsWithSearch'; } from '@/object-record/record-picker/components/SingleRecordPickerMenuItemsWithSearch';
import { RecordPickerComponentInstanceContext } from '@/object-record/record-picker/states/contexts/RecordPickerComponentInstanceContext';
import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu'; import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside'; import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
import { isDefined } from 'twenty-shared'; import { isDefined } from 'twenty-shared';
export type SingleRecordPickerProps = { export type SingleRecordPickerProps = {
width?: number; width?: number;
componentInstanceId: string;
} & SingleRecordPickerMenuItemsWithSearchProps; } & SingleRecordPickerMenuItemsWithSearchProps;
export const SingleRecordPicker = ({ export const SingleRecordPicker = ({
@ -22,6 +24,7 @@ export const SingleRecordPicker = ({
objectNameSingular, objectNameSingular,
selectedRecordIds, selectedRecordIds,
width = 200, width = 200,
componentInstanceId,
}: SingleRecordPickerProps) => { }: SingleRecordPickerProps) => {
const containerRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);
@ -42,19 +45,23 @@ export const SingleRecordPicker = ({
}); });
return ( return (
<DropdownMenu ref={containerRef} width={width} data-select-disable> <RecordPickerComponentInstanceContext.Provider
<SingleRecordPickerMenuItemsWithSearch value={{ instanceId: componentInstanceId }}
{...{ >
EmptyIcon, <DropdownMenu ref={containerRef} width={width} data-select-disable>
emptyLabel, <SingleRecordPickerMenuItemsWithSearch
excludedRecordIds, {...{
onCancel, EmptyIcon,
onCreate, emptyLabel,
onRecordSelected, excludedRecordIds,
objectNameSingular, onCancel,
selectedRecordIds, onCreate,
}} onRecordSelected,
/> objectNameSingular,
</DropdownMenu> selectedRecordIds,
}}
/>
</DropdownMenu>
</RecordPickerComponentInstanceContext.Provider>
); );
}; };

4
packages/twenty-front/src/modules/object-record/record-picker/components/SingleRecordPickerMenuItems.tsx
View File

@ -13,8 +13,8 @@ import { isDefined } from 'twenty-shared';
import { SingleRecordPickerMenuItem } from '@/object-record/record-picker/components/SingleRecordPickerMenuItem'; import { SingleRecordPickerMenuItem } from '@/object-record/record-picker/components/SingleRecordPickerMenuItem';
import { RECORD_PICKER_SELECTABLE_LIST_COMPONENT_INSTANCE_ID } from '@/object-record/record-picker/constants/RecordPickerSelectableListComponentInstanceId'; import { RECORD_PICKER_SELECTABLE_LIST_COMPONENT_INSTANCE_ID } from '@/object-record/record-picker/constants/RecordPickerSelectableListComponentInstanceId';
import { RecordPickerHotkeyScope } from '@/object-record/record-picker/types/RecordPickerHotkeyScope';
import { SingleRecordPickerRecord } from '@/object-record/record-picker/types/SingleRecordPickerRecord'; import { SingleRecordPickerRecord } from '@/object-record/record-picker/types/SingleRecordPickerRecord';
import { RelationPickerHotkeyScope } from '../legacy/types/RelationPickerHotkeyScope';
export type SingleRecordPickerMenuItemsProps = { export type SingleRecordPickerMenuItemsProps = {
EmptyIcon?: IconComponent; EmptyIcon?: IconComponent;
@ -37,7 +37,7 @@ export const SingleRecordPickerMenuItems = ({
onCancel, onCancel,
onRecordSelected, onRecordSelected,
selectedRecord, selectedRecord,
hotkeyScope = RelationPickerHotkeyScope.RelationPicker, hotkeyScope = RecordPickerHotkeyScope.RecordPicker,
isFiltered, isFiltered,
shouldSelectEmptyOption, shouldSelectEmptyOption,
}: SingleRecordPickerMenuItemsProps) => { }: SingleRecordPickerMenuItemsProps) => {

1
packages/twenty-front/src/modules/object-record/record-picker/components/__stories__/SingleRecordPicker.stories.tsx
View File

@ -37,6 +37,7 @@ const meta: Meta<typeof SingleRecordPicker> = {
args: { args: {
objectNameSingular: CoreObjectNameSingular.WorkspaceMember, objectNameSingular: CoreObjectNameSingular.WorkspaceMember,
selectedRecordIds: [], selectedRecordIds: [],
componentInstanceId: 'single-record-picker',
}, },
argTypes: { argTypes: {
selectedRecord: { selectedRecord: {

4
packages/twenty-front/src/modules/object-record/record-picker/hooks/__tests__/useRecordSelectSearch.test.tsx
View File

@ -18,9 +18,7 @@ describe('useRecordSelectSearch', () => {
it('should update searchFilter after change event', async () => { it('should update searchFilter after change event', async () => {
const { result } = renderHook( const { result } = renderHook(
() => { () => {
const recordSelectSearchHook = useRecordSelectSearch({ const recordSelectSearchHook = useRecordSelectSearch(instanceId);
recordPickerInstanceId: instanceId,
});
const internallyStoredFilter = useRecoilComponentValueV2( const internallyStoredFilter = useRecoilComponentValueV2(
recordPickerSearchFilterComponentState, recordPickerSearchFilterComponentState,
instanceId, instanceId,

20
packages/twenty-front/src/modules/object-record/record-picker/hooks/useRecordSelectSearch.ts
View File

@ -1,21 +1,27 @@
import { RecordPickerComponentInstanceContext } from '@/object-record/record-picker/states/contexts/RecordPickerComponentInstanceContext';
import { recordPickerPreselectedIdComponentState } from '@/object-record/record-picker/states/recordPickerPreselectedIdComponentState'; import { recordPickerPreselectedIdComponentState } from '@/object-record/record-picker/states/recordPickerPreselectedIdComponentState';
import { recordPickerSearchFilterComponentState } from '@/object-record/record-picker/states/recordPickerSearchFilterComponentState'; import { recordPickerSearchFilterComponentState } from '@/object-record/record-picker/states/recordPickerSearchFilterComponentState';
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2'; import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
import { useDebouncedCallback } from 'use-debounce'; import { useDebouncedCallback } from 'use-debounce';
export const useRecordSelectSearch = ({ export const useRecordSelectSearch = (
recordPickerInstanceId, recordPickerComponentInstanceIdFromProps?: string,
}: { ) => {
recordPickerInstanceId?: string; const recordPickerComponentInstanceId =
} = {}) => { useAvailableComponentInstanceIdOrThrow(
RecordPickerComponentInstanceContext,
recordPickerComponentInstanceIdFromProps,
);
const setRecordPickerSearchFilter = useSetRecoilComponentStateV2( const setRecordPickerSearchFilter = useSetRecoilComponentStateV2(
recordPickerSearchFilterComponentState, recordPickerSearchFilterComponentState,
recordPickerInstanceId, recordPickerComponentInstanceId,
); );
const setRecordPickerPreselectedId = useSetRecoilComponentStateV2( const setRecordPickerPreselectedId = useSetRecoilComponentStateV2(
recordPickerPreselectedIdComponentState, recordPickerPreselectedIdComponentState,
recordPickerInstanceId, recordPickerComponentInstanceId,
); );
const debouncedSetSearchFilter = useDebouncedCallback( const debouncedSetSearchFilter = useDebouncedCallback(
setRecordPickerSearchFilter, setRecordPickerSearchFilter,

3
packages/twenty-front/src/modules/object-record/record-picker/types/RecordPickerHotkeyScope.ts Normal file
View File

@ -0,0 +1,3 @@
export enum RecordPickerHotkeyScope {
RecordPicker = 'record-picker',
}

2
packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSection.tsx
View File

@ -9,11 +9,11 @@ import { FieldContext } from '@/object-record/record-field/contexts/FieldContext
import { useIsFieldValueReadOnly } from '@/object-record/record-field/hooks/useIsFieldValueReadOnly'; import { useIsFieldValueReadOnly } from '@/object-record/record-field/hooks/useIsFieldValueReadOnly';
import { usePersistField } from '@/object-record/record-field/hooks/usePersistField'; import { usePersistField } from '@/object-record/record-field/hooks/usePersistField';
import { RelationFromManyFieldInputMultiRecordsEffect } from '@/object-record/record-field/meta-types/input/components/RelationFromManyFieldInputMultiRecordsEffect'; import { RelationFromManyFieldInputMultiRecordsEffect } from '@/object-record/record-field/meta-types/input/components/RelationFromManyFieldInputMultiRecordsEffect';
import { useAddNewRecordAndOpenRightDrawer } from '@/object-record/record-field/meta-types/input/hooks/useAddNewRecordAndOpenRightDrawer';
import { useUpdateRelationFromManyFieldInput } from '@/object-record/record-field/meta-types/input/hooks/useUpdateRelationFromManyFieldInput'; import { useUpdateRelationFromManyFieldInput } from '@/object-record/record-field/meta-types/input/hooks/useUpdateRelationFromManyFieldInput';
import { FieldRelationMetadata } from '@/object-record/record-field/types/FieldMetadata'; import { FieldRelationMetadata } from '@/object-record/record-field/types/FieldMetadata';
import { MultipleRecordPicker } from '@/object-record/record-picker/components/MultipleRecordPicker'; import { MultipleRecordPicker } from '@/object-record/record-picker/components/MultipleRecordPicker';
import { SingleRecordPickerMenuItemsWithSearch } from '@/object-record/record-picker/components/SingleRecordPickerMenuItemsWithSearch'; import { SingleRecordPickerMenuItemsWithSearch } from '@/object-record/record-picker/components/SingleRecordPickerMenuItemsWithSearch';
import { useAddNewRecordAndOpenRightDrawer } from '@/object-record/record-picker/hooks/useAddNewRecordAndOpenRightDrawer';
import { RecordPickerComponentInstanceContext } from '@/object-record/record-picker/states/contexts/RecordPickerComponentInstanceContext'; import { RecordPickerComponentInstanceContext } from '@/object-record/record-picker/states/contexts/RecordPickerComponentInstanceContext';
import { recordPickerSearchFilterComponentState } from '@/object-record/record-picker/states/recordPickerSearchFilterComponentState'; import { recordPickerSearchFilterComponentState } from '@/object-record/record-picker/states/recordPickerSearchFilterComponentState';
import { SingleRecordPickerRecord } from '@/object-record/record-picker/types/SingleRecordPickerRecord'; import { SingleRecordPickerRecord } from '@/object-record/record-picker/types/SingleRecordPickerRecord';

2
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFieldContextWrapper.tsx
View File

@ -2,10 +2,10 @@ import { ReactNode, useContext } from 'react';
import { isLabelIdentifierField } from '@/object-metadata/utils/isLabelIdentifierField'; import { isLabelIdentifierField } from '@/object-metadata/utils/isLabelIdentifierField';
import { FieldContext } from '@/object-record/record-field/contexts/FieldContext'; import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
import { RelationPickerHotkeyScope } from '@/object-record/record-field/meta-types/input/types/RelationPickerHotkeyScope';
import { isFieldRelation } from '@/object-record/record-field/types/guards/isFieldRelation'; import { isFieldRelation } from '@/object-record/record-field/types/guards/isFieldRelation';
import { isFieldSelect } from '@/object-record/record-field/types/guards/isFieldSelect'; import { isFieldSelect } from '@/object-record/record-field/types/guards/isFieldSelect';
import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext'; import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
import { RelationPickerHotkeyScope } from '@/object-record/record-picker/legacy/types/RelationPickerHotkeyScope';
import { RecordUpdateContext } from '@/object-record/record-table/contexts/EntityUpdateMutationHookContext'; import { RecordUpdateContext } from '@/object-record/record-table/contexts/EntityUpdateMutationHookContext';
import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext'; import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext';
import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext'; import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';

34
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowSingleRecordPicker.tsx
View File

@ -3,7 +3,6 @@ import { FormFieldInputContainer } from '@/object-record/record-field/form-types
import { FormFieldInputInputContainer } from '@/object-record/record-field/form-types/components/FormFieldInputInputContainer'; import { FormFieldInputInputContainer } from '@/object-record/record-field/form-types/components/FormFieldInputInputContainer';
import { FormFieldInputRowContainer } from '@/object-record/record-field/form-types/components/FormFieldInputRowContainer'; import { FormFieldInputRowContainer } from '@/object-record/record-field/form-types/components/FormFieldInputRowContainer';
import { SingleRecordPicker } from '@/object-record/record-picker/components/SingleRecordPicker'; import { SingleRecordPicker } from '@/object-record/record-picker/components/SingleRecordPicker';
import { RecordPickerComponentInstanceContext } from '@/object-record/record-picker/states/contexts/RecordPickerComponentInstanceContext';
import { recordPickerSearchFilterComponentState } from '@/object-record/record-picker/states/recordPickerSearchFilterComponentState'; import { recordPickerSearchFilterComponentState } from '@/object-record/record-picker/states/recordPickerSearchFilterComponentState';
import { SingleRecordPickerRecord } from '@/object-record/record-picker/types/SingleRecordPickerRecord'; import { SingleRecordPickerRecord } from '@/object-record/record-picker/types/SingleRecordPickerRecord';
import { InputLabel } from '@/ui/input/components/InputLabel'; import { InputLabel } from '@/ui/input/components/InputLabel';
@ -152,24 +151,21 @@ export const WorkflowSingleRecordPicker = ({
/> />
} }
dropdownComponents={ dropdownComponents={
<RecordPickerComponentInstanceContext.Provider <SingleRecordPicker
value={{ instanceId: dropdownId }} componentInstanceId={dropdownId}
> EmptyIcon={IconForbid}
<SingleRecordPicker emptyLabel={'No ' + objectNameSingular}
EmptyIcon={IconForbid} onCancel={() => closeDropdown()}
emptyLabel={'No ' + objectNameSingular} onRecordSelected={handleRecordSelected}
onCancel={() => closeDropdown()} objectNameSingular={objectNameSingular}
onRecordSelected={handleRecordSelected} recordPickerInstanceId={dropdownId}
objectNameSingular={objectNameSingular} selectedRecordIds={
recordPickerInstanceId={dropdownId} draftValue?.value &&
selectedRecordIds={ !isStandaloneVariableString(draftValue.value)
draftValue?.value && ? [draftValue.value]
!isStandaloneVariableString(draftValue.value) : []
? [draftValue.value] }
: [] />
}
/>
</RecordPickerComponentInstanceContext.Provider>
} }
dropdownHotkeyScope={{ scope: dropdownId }} dropdownHotkeyScope={{ scope: dropdownId }}
/> />