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

Upgrade relation picker (#8795)

Browse Source 
- Rename all parts using the name "relation" to "record" when component
is only selecting record
- Remove the use of scope states in folder
- Rename entities to records

This PR prepares the use of the record picker in workflows
This commit is contained in:
Thomas Trompette
2024-11-28 18:08:39 +01:00
committed by GitHub
parent d73dc1a728
commit 83223eeae3
62 changed files with 585 additions and 687 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -29,7 +29,7 @@ import { recordStoreFamilyState } from '@/object-record/record-store/states/reco
import { ActivityTargetInlineCellEditModeMultiRecordsEffect } from '@/object-record/relation-picker/components/ActivityTargetInlineCellEditModeMultiRecordsEffect';
import { ActivityTargetInlineCellEditModeMultiRecordsSearchFilterEffect } from '@/object-record/relation-picker/components/ActivityTargetInlineCellEditModeMultiRecordsSearchFilterEffect';
import { MultiRecordSelect } from '@/object-record/relation-picker/components/MultiRecordSelect';
import { RelationPickerScope } from '@/object-record/relation-picker/scopes/RelationPickerScope';
import { RecordPickerComponentInstanceContext } from '@/object-record/relation-picker/states/contexts/RecordPickerComponentInstanceContext';
import { prefillRecord } from '@/object-record/utils/prefillRecord';
const StyledSelectContainer = styled.div`
@ -52,7 +52,7 @@ export const ActivityTargetInlineCellEditMode = ({
activityObjectNameSingular,
}: ActivityTargetInlineCellEditModeProps) => {
const [isActivityInCreateMode] = useRecoilState(isActivityInCreateModeState);
const relationPickerScopeId = `relation-picker-${activity.id}`;
const recordPickerInstanceId = `record-picker-${activity.id}`;
const selectedTargetObjectIds = activityTargetWithTargetRecords.map(
(activityTarget) => ({
@ -101,7 +101,7 @@ export const ActivityTargetInlineCellEditMode = ({
const record = snapshot
.getLoadable(
objectRecordMultiSelectComponentFamilyState({
scopeId: relationPickerScopeId,
scopeId: recordPickerInstanceId,
familyKey: activityTarget.targetObject.id,
}),
)
@ -124,7 +124,7 @@ export const ActivityTargetInlineCellEditMode = ({
[
activityTargetWithTargetRecords,
closeEditableField,
relationPickerScopeId,
recordPickerInstanceId,
setActivityFromStore,
],
);
@ -142,7 +142,7 @@ export const ActivityTargetInlineCellEditMode = ({
const previouslyCheckedRecordsIds = snapshot
.getLoadable(
objectRecordMultiSelectCheckedRecordsIdsComponentState({
scopeId: relationPickerScopeId,
scopeId: recordPickerInstanceId,
}),
)
.getValue();
@ -153,7 +153,7 @@ export const ActivityTargetInlineCellEditMode = ({
const record = snapshot
.getLoadable(
objectRecordMultiSelectComponentFamilyState({
scopeId: relationPickerScopeId,
scopeId: recordPickerInstanceId,
familyKey: recordId,
}),
)
@ -167,7 +167,7 @@ export const ActivityTargetInlineCellEditMode = ({
set(
objectRecordMultiSelectCheckedRecordsIdsComponentState({
scopeId: relationPickerScopeId,
scopeId: recordPickerInstanceId,
}),
(prev) => [...prev, recordId],
);
@ -237,7 +237,7 @@ export const ActivityTargetInlineCellEditMode = ({
set(
objectRecordMultiSelectCheckedRecordsIdsComponentState({
scopeId: relationPickerScopeId,
scopeId: recordPickerInstanceId,
}),
previouslyCheckedRecordsIds.filter((id) => id !== recordId),
);
@ -273,7 +273,7 @@ export const ActivityTargetInlineCellEditMode = ({
deleteManyActivityTargets,
isActivityInCreateMode,
objectMetadataItemActivityTarget,
relationPickerScopeId,
recordPickerInstanceId,
upsertActivity,
activityObjectNameSingular,
],
@ -281,7 +281,9 @@ export const ActivityTargetInlineCellEditMode = ({
return (
<StyledSelectContainer>
<RelationPickerScope relationPickerScopeId={relationPickerScopeId}>
<RecordPickerComponentInstanceContext.Provider
value={{ instanceId: recordPickerInstanceId }}
>
<ActivityTargetObjectRecordEffect
activityTargetWithTargetRecords={activityTargetWithTargetRecords}
/>
@ -290,7 +292,7 @@ export const ActivityTargetInlineCellEditMode = ({
/>
<ActivityTargetInlineCellEditModeMultiRecordsSearchFilterEffect />
<MultiRecordSelect onSubmit={handleSubmit} onChange={handleChange} />
</RelationPickerScope>
</RecordPickerComponentInstanceContext.Provider>
</StyledSelectContainer>
);
};

6
packages/twenty-front/src/modules/favorites/utils/sortFavorites.ts
View File

@ -52,14 +52,14 @@ export const sortFavorites = (
if (isDefined(favorite[relationField.name])) {
const relationObject = favorite[relationField.name];
const relationObjectNameSingular =
const objectNameSingular =
relationField.relationDefinition?.targetObjectMetadata
.nameSingular ?? '';
const objectRecordIdentifier =
getObjectRecordIdentifierByNameSingular(
relationObject,
relationObjectNameSingular,
objectNameSingular,
);
return {
@ -75,7 +75,7 @@ export const sortFavorites = (
: '',
workspaceMemberId: favorite.workspaceMemberId,
favoriteFolderId: favorite.favoriteFolderId,
objectNameSingular: relationObjectNameSingular,
objectNameSingular: objectNameSingular,
} as ProcessedFavorite;
}
}

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

@ -4,7 +4,7 @@ import { useRecoilValue } from 'recoil';
import { ObjectMetadataItemsLoadEffect } from '@/object-metadata/components/ObjectMetadataItemsLoadEffect';
import { PreComputedChipGeneratorsProvider } from '@/object-metadata/components/PreComputedChipGeneratorsProvider';
import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
import { RelationPickerScope } from '@/object-record/relation-picker/scopes/RelationPickerScope';
import { RecordPickerComponentInstanceContext } from '@/object-record/relation-picker/states/contexts/RecordPickerComponentInstanceContext';
import { UserOrMetadataLoader } from '~/loading/components/UserOrMetadataLoader';
export const ObjectMetadataItemsProvider = ({
@ -19,9 +19,11 @@ export const ObjectMetadataItemsProvider = ({
<ObjectMetadataItemsLoadEffect />
{shouldDisplayChildren ? (
<PreComputedChipGeneratorsProvider>
<RelationPickerScope relationPickerScopeId="relation-picker">
<RecordPickerComponentInstanceContext.Provider
value={{ instanceId: 'record-picker' }}
>
{children}
</RelationPickerScope>
</RecordPickerComponentInstanceContext.Provider>
</PreComputedChipGeneratorsProvider>
) : (
<UserOrMetadataLoader />

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

@ -3,7 +3,7 @@ import styled from '@emotion/styled';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { useAddNewCard } from '@/object-record/record-board/record-board-column/hooks/useAddNewCard';
import { recordBoardNewRecordByColumnIdSelector } from '@/object-record/record-board/states/selectors/recordBoardNewRecordByColumnIdSelector';
import { SingleEntitySelect } from '@/object-record/relation-picker/components/SingleEntitySelect';
import { SingleRecordSelect } from '@/object-record/relation-picker/components/SingleRecordSelect';
import { useRecoilValue } from 'recoil';
const StyledCompanyPickerContainer = styled.div`
@ -37,15 +37,15 @@ export const RecordBoardColumnNewOpportunity = ({
<>
{newRecord.isCreating && newRecord.position === position && (
<StyledCompanyPickerContainer>
<SingleEntitySelect
<SingleRecordSelect
disableBackgroundBlur
onCancel={() => handleCreateSuccess(position, columnId, false)}
onEntitySelected={(company) =>
onRecordSelected={(company) =>
company ? handleEntitySelect(position, company) : null
}
relationObjectNameSingular={CoreObjectNameSingular.Company}
relationPickerScopeId="relation-picker"
selectedRelationRecordIds={[]}
objectNameSingular={CoreObjectNameSingular.Company}
recordPickerInstanceId="relation-picker"
selectedRecordIds={[]}
/>
</StyledCompanyPickerContainer>
)}

12
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 { RecordBoardColumnContext } from '@/object-record/record-board/record-board-column/contexts/RecordBoardColumnContext';
import { recordBoardNewRecordByColumnIdSelector } from '@/object-record/record-board/states/selectors/recordBoardNewRecordByColumnIdSelector';
import { useEntitySelectSearch } from '@/object-record/relation-picker/hooks/useEntitySelectSearch';
import { EntityForSelect } from '@/object-record/relation-picker/types/EntityForSelect';
import { useRecordSelectSearch } from '@/object-record/relation-picker/hooks/useRecordSelectSearch';
import { RecordForSelect } from '@/object-record/relation-picker/types/RecordForSelect';
import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope';
import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
import { useCallback, useContext } from 'react';
@ -20,8 +20,8 @@ export const useAddNewCard = () => {
const columnContext = useContext(RecordBoardColumnContext);
const { createOneRecord, selectFieldMetadataItem, objectMetadataItem } =
useContext(RecordBoardContext);
const { resetSearchFilter } = useEntitySelectSearch({
relationPickerScopeId: 'relation-picker',
const { resetSearchFilter } = useRecordSelectSearch({
recordPickerInstanceId: 'record-picker',
});
const {
@ -71,7 +71,7 @@ export const useAddNewCard = () => {
labelValue: string,
position: 'first' | 'last',
isOpportunity: boolean,
company?: EntityForSelect,
company?: RecordForSelect,
) => {
if (
(isOpportunity && company !== null) ||
@ -220,7 +220,7 @@ export const useAddNewCard = () => {
const handleEntitySelect = useCallback(
(
position: 'first' | 'last',
company: EntityForSelect,
company: RecordForSelect,
columnId?: string,
) => {
const columnDefinitionId = getColumnDefinitionId(columnId);

4
packages/twenty-front/src/modules/object-record/record-board/states/recordBoardNewRecordByColumnIdComponentFamilyState.ts
View File

@ -1,4 +1,4 @@
import { EntityForSelect } from '@/object-record/relation-picker/types/EntityForSelect';
import { RecordForSelect } from '@/object-record/relation-picker/types/RecordForSelect';
import { createComponentFamilyState } from '@/ui/utilities/state/component-state/utils/createComponentFamilyState';
export type NewCard = {
@ -7,7 +7,7 @@ export type NewCard = {
isCreating: boolean;
position: 'first' | 'last';
isOpportunity: boolean;
company: EntityForSelect | null;
company: RecordForSelect | null;
};
export const recordBoardNewRecordByColumnIdComponentFamilyState =

4
packages/twenty-front/src/modules/object-record/record-field/hooks/usePersistField.ts
View File

@ -24,7 +24,7 @@ import { isFieldRelationToOneValue } from '@/object-record/record-field/types/gu
import { isFieldSelect } from '@/object-record/record-field/types/guards/isFieldSelect';
import { isFieldSelectValue } from '@/object-record/record-field/types/guards/isFieldSelectValue';
import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
import { EntityForSelect } from '@/object-record/relation-picker/types/EntityForSelect';
import { RecordForSelect } from '@/object-record/relation-picker/types/RecordForSelect';
import { isFieldArray } from '@/object-record/record-field/types/guards/isFieldArray';
import { isFieldArrayValue } from '@/object-record/record-field/types/guards/isFieldArrayValue';
@ -141,7 +141,7 @@ export const usePersistField = () => {
);
if (fieldIsRelationToOneObject) {
const value = valueToPersist as EntityForSelect;
const value = valueToPersist as RecordForSelect;
updateRecord?.({
variables: {
where: { id: recordId },

6
packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/RelationFromManyFieldDisplay.tsx
View File

@ -14,7 +14,7 @@ export const RelationFromManyFieldDisplay = () => {
const { fieldName, objectMetadataNameSingular } = fieldDefinition.metadata;
const relationObjectNameSingular =
const objectNameSingular =
fieldDefinition?.metadata.relationObjectMetadataNameSingular;
const { activityTargetObjectRecords } = useActivityTargetObjectRecords(
@ -22,7 +22,7 @@ export const RelationFromManyFieldDisplay = () => {
fieldValue as NoteTarget[] | TaskTarget[],
);
if (!fieldValue || !relationObjectNameSingular) {
if (!fieldValue || !objectNameSingular) {
return null;
}
@ -81,7 +81,7 @@ export const RelationFromManyFieldDisplay = () => {
.map((record) => (
<RecordChip
key={record.id}
objectNameSingular={relationObjectNameSingular}
objectNameSingular={objectNameSingular}
record={record}
/>
))}

4
packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useRelationField.ts
View File

@ -5,7 +5,7 @@ import { useGetButtonIcon } from '@/object-record/record-field/hooks/useGetButto
import { useRecordFieldInput } from '@/object-record/record-field/hooks/useRecordFieldInput';
import { FieldRelationValue } from '@/object-record/record-field/types/FieldMetadata';
import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
import { EntityForSelect } from '@/object-record/relation-picker/types/EntityForSelect';
import { RecordForSelect } from '@/object-record/relation-picker/types/RecordForSelect';
import { FieldMetadataType } from '~/generated-metadata/graphql';
import { FieldContext } from '../../contexts/FieldContext';
@ -13,7 +13,7 @@ import { assertFieldMetadata } from '../../types/guards/assertFieldMetadata';
import { isFieldRelation } from '../../types/guards/isFieldRelation';
export const useRelationField = <
T extends EntityForSelect | EntityForSelect[],
T extends RecordForSelect | RecordForSelect[],
>() => {
const { recordId, fieldDefinition, maxWidth } = useContext(FieldContext);
const button = useGetButtonIcon();

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

@ -9,7 +9,7 @@ import { FieldInputEvent } from '@/object-record/record-field/types/FieldInputEv
import { FieldRelationMetadata } from '@/object-record/record-field/types/FieldMetadata';
import { MultiRecordSelect } from '@/object-record/relation-picker/components/MultiRecordSelect';
import { useAddNewRecordAndOpenRightDrawer } from '@/object-record/relation-picker/hooks/useAddNewRecordAndOpenRightDrawer';
import { RelationPickerScope } from '@/object-record/relation-picker/scopes/RelationPickerScope';
import { RecordPickerComponentInstanceContext } from '@/object-record/relation-picker/states/contexts/RecordPickerComponentInstanceContext';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
type RelationFromManyFieldInputProps = {
@ -20,9 +20,9 @@ export const RelationFromManyFieldInput = ({
onSubmit,
}: RelationFromManyFieldInputProps) => {
const { fieldDefinition, recordId } = useContext(FieldContext);
const relationPickerScopeId = `relation-picker-${fieldDefinition.fieldMetadataId}`;
const recordPickerInstanceId = `record-picker-${fieldDefinition.fieldMetadataId}`;
const { updateRelation } = useUpdateRelationFromManyFieldInput({
scopeId: relationPickerScopeId,
scopeId: recordPickerInstanceId,
});
const handleSubmit = () => {
@ -51,11 +51,13 @@ export const RelationFromManyFieldInput = ({
recordId,
});
const { dropdownPlacement } = useDropdown(relationPickerScopeId);
const { dropdownPlacement } = useDropdown(recordPickerInstanceId);
return (
<>
<RelationPickerScope relationPickerScopeId={relationPickerScopeId}>
<RecordPickerComponentInstanceContext.Provider
value={{ instanceId: recordPickerInstanceId }}
>
<RelationFromManyFieldInputMultiRecordsEffect />
<MultiRecordSelect
onSubmit={handleSubmit}
@ -63,7 +65,7 @@ export const RelationFromManyFieldInput = ({
onCreate={createNewRecordAndOpenRightDrawer}
dropdownPlacement={dropdownPlacement}
/>
</RelationPickerScope>
</RecordPickerComponentInstanceContext.Provider>
</>
);
};

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

@ -5,28 +5,28 @@ import { useObjectRecordMultiSelectScopedStates } from '@/activities/hooks/useOb
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { useRelationField } from '@/object-record/record-field/meta-types/hooks/useRelationField';
import { objectRecordMultiSelectComponentFamilyState } from '@/object-record/record-field/states/objectRecordMultiSelectComponentFamilyState';
import { useRelationPickerEntitiesOptions } from '@/object-record/relation-picker/hooks/useRelationPickerEntitiesOptions';
import { RelationPickerScopeInternalContext } from '@/object-record/relation-picker/scopes/scope-internal-context/RelationPickerScopeInternalContext';
import { EntityForSelect } from '@/object-record/relation-picker/types/EntityForSelect';
import { useRecordPickerRecordsOptions } from '@/object-record/relation-picker/hooks/useRecordPickerRecordsOptions';
import { RecordPickerComponentInstanceContext } from '@/object-record/relation-picker/states/contexts/RecordPickerComponentInstanceContext';
import { RecordForSelect } from '@/object-record/relation-picker/types/RecordForSelect';
import { ObjectRecordForSelect } from '@/object-record/types/ObjectRecordForSelect';
import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
export const RelationFromManyFieldInputMultiRecordsEffect = () => {
const { fieldValue, fieldDefinition } = useRelationField<EntityForSelect[]>();
const scopeId = useAvailableScopeIdOrThrow(
RelationPickerScopeInternalContext,
const { fieldValue, fieldDefinition } = useRelationField<RecordForSelect[]>();
const instanceId = useAvailableComponentInstanceIdOrThrow(
RecordPickerComponentInstanceContext,
);
const {
objectRecordsIdsMultiSelectState,
objectRecordMultiSelectCheckedRecordsIdsState,
recordMultiSelectIsLoadingState,
} = useObjectRecordMultiSelectScopedStates(scopeId);
} = useObjectRecordMultiSelectScopedStates(instanceId);
const [objectRecordsIdsMultiSelect, setObjectRecordsIdsMultiSelect] =
useRecoilState(objectRecordsIdsMultiSelectState);
const { entities } = useRelationPickerEntitiesOptions({
relationObjectNameSingular:
const { records } = useRecordPickerRecordsOptions({
objectNameSingular:
fieldDefinition.metadata.relationObjectMetadataNameSingular,
});
@ -41,7 +41,7 @@ export const RelationFromManyFieldInputMultiRecordsEffect = () => {
const allRecords = useMemo(
() => [
...entities.entitiesToSelect.map((entity) => {
...records.recordsToSelect.map((entity) => {
const { record, ...recordIdentifier } = entity;
return {
objectMetadataItem: objectMetadataItem,
@ -50,7 +50,7 @@ export const RelationFromManyFieldInputMultiRecordsEffect = () => {
};
}),
],
[entities.entitiesToSelect, objectMetadataItem],
[records.recordsToSelect, objectMetadataItem],
);
const [
@ -65,7 +65,7 @@ export const RelationFromManyFieldInputMultiRecordsEffect = () => {
const currentRecord = snapshot
.getLoadable(
objectRecordMultiSelectComponentFamilyState({
scopeId: scopeId,
scopeId: instanceId,
familyKey: newRecord.record.id,
}),
)
@ -86,7 +86,7 @@ export const RelationFromManyFieldInputMultiRecordsEffect = () => {
) {
set(
objectRecordMultiSelectComponentFamilyState({
scopeId: scopeId,
scopeId: instanceId,
familyKey: newRecordWithSelected.record.id,
}),
newRecordWithSelected,
@ -94,7 +94,7 @@ export const RelationFromManyFieldInputMultiRecordsEffect = () => {
}
}
},
[objectRecordMultiSelectCheckedRecordsIds, scopeId],
[objectRecordMultiSelectCheckedRecordsIds, instanceId],
);
useEffect(() => {
@ -113,14 +113,14 @@ export const RelationFromManyFieldInputMultiRecordsEffect = () => {
useEffect(() => {
setObjectRecordMultiSelectCheckedRecordsIds(
fieldValue
? fieldValue.map((fieldValueItem: EntityForSelect) => fieldValueItem.id)
? fieldValue.map((fieldValueItem: RecordForSelect) => fieldValueItem.id)
: [],
);
}, [fieldValue, setObjectRecordMultiSelectCheckedRecordsIds]);
useEffect(() => {
setRecordMultiSelectIsLoading(entities.loading);
}, [entities.loading, setRecordMultiSelectIsLoading]);
setRecordMultiSelectIsLoading(records.loading);
}, [records.loading, setRecordMultiSelectIsLoading]);
return <></>;
};

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

@ -1,7 +1,7 @@
import styled from '@emotion/styled';
import { RelationPicker } from '@/object-record/relation-picker/components/RelationPicker';
import { EntityForSelect } from '@/object-record/relation-picker/types/EntityForSelect';
import { RecordForSelect } from '@/object-record/relation-picker/types/RecordForSelect';
import { usePersistField } from '../../../hooks/usePersistField';
import { useRelationField } from '../../hooks/useRelationField';
@ -24,11 +24,11 @@ export const RelationToOneFieldInput = ({
onCancel,
}: RelationToOneFieldInputProps) => {
const { fieldDefinition, initialSearchValue, fieldValue } =
useRelationField<EntityForSelect>();
useRelationField<RecordForSelect>();
const persistField = usePersistField();
const handleSubmit = (newEntity: EntityForSelect | null) => {
const handleSubmit = (newEntity: RecordForSelect | null) => {
onSubmit?.(() => persistField(newEntity?.record ?? null));
};

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

@ -1,7 +1,7 @@
import { useClearField } from '@/object-record/record-field/hooks/useClearField';
import { useSelectField } from '@/object-record/record-field/meta-types/hooks/useSelectField';
import { FieldInputEvent } from '@/object-record/record-field/types/FieldInputEvent';
import { SINGLE_ENTITY_SELECT_BASE_LIST } from '@/object-record/relation-picker/constants/SingleEntitySelectBaseList';
import { SINGLE_RECORD_SELECT_BASE_LIST } from '@/object-record/relation-picker/constants/SingleRecordSelectBaseList';
import { SelectOption } from '@/spreadsheet-import/types';
import { SelectInput } from '@/ui/input/components/SelectInput';
import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
@ -28,7 +28,7 @@ export const SelectFieldInput = ({
const [filteredOptions, setFilteredOptions] = useState<SelectOption[]>([]);
const { resetSelectedItem } = useSelectableList(
SINGLE_ENTITY_SELECT_BASE_LIST,
SINGLE_RECORD_SELECT_BASE_LIST,
);
const clearField = useClearField();
@ -65,7 +65,7 @@ export const SelectFieldInput = ({
return (
<div ref={setSelectWrapperRef}>
<SelectableList
selectableListId={SINGLE_ENTITY_SELECT_BASE_LIST}
selectableListId={SINGLE_RECORD_SELECT_BASE_LIST}
selectableItemIdArray={optionIds}
hotkeyScope={hotkeyScope}
onEnter={(itemId) => {

8
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RelationToOneFieldInput.stories.tsx
View File

@ -13,7 +13,6 @@ import { useSetRecoilState } from 'recoil';
import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { RelationPickerScope } from '@/object-record/relation-picker/scopes/RelationPickerScope';
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
import { FieldMetadataType } from '~/generated/graphql';
import { ComponentWithRecoilScopeDecorator } from '~/testing/decorators/ComponentWithRecoilScopeDecorator';
@ -26,6 +25,7 @@ import {
} from '~/testing/mock-data/users';
import { FieldContextProvider } from '@/object-record/record-field/meta-types/components/FieldContextProvider';
import { RecordPickerComponentInstanceContext } from '@/object-record/relation-picker/states/contexts/RecordPickerComponentInstanceContext';
import {
RelationToOneFieldInput,
RelationToOneFieldInputProps,
@ -80,12 +80,12 @@ const RelationToOneFieldInputWithContext = ({
}}
recordId={recordId}
>
<RelationPickerScope
relationPickerScopeId={'relation-to-one-field-input'}
<RecordPickerComponentInstanceContext.Provider
value={{ instanceId: 'relation-to-one-field-input' }}
>
<RelationWorkspaceSetterEffect />
<RelationToOneFieldInput onSubmit={onSubmit} onCancel={onCancel} />
</RelationPickerScope>
</RecordPickerComponentInstanceContext.Provider>
</FieldContextProvider>
<div data-testid="data-field-input-click-outside-div" />
</div>

6
packages/twenty-front/src/modules/object-record/record-field/types/FieldMetadata.ts
View File

@ -2,7 +2,7 @@ import { ThemeColor } from 'twenty-ui';
import { RATING_VALUES } from '@/object-record/record-field/meta-types/constants/RatingValues';
import { ZodHelperLiteral } from '@/object-record/record-field/types/ZodHelperLiteral';
import { EntityForSelect } from '@/object-record/relation-picker/types/EntityForSelect';
import { RecordForSelect } from '@/object-record/relation-picker/types/RecordForSelect';
import { RelationDefinitionType } from '~/generated-metadata/graphql';
import { CurrencyCode } from './CurrencyCode';
@ -244,9 +244,9 @@ export type FieldRatingValue = (typeof RATING_VALUES)[number] | null;
export type FieldSelectValue = string | null;
export type FieldMultiSelectValue = string[] | null;
export type FieldRelationToOneValue = EntityForSelect | null;
export type FieldRelationToOneValue = RecordForSelect | null;
export type FieldRelationFromManyValue = EntityForSelect[] | [];
export type FieldRelationFromManyValue = RecordForSelect[] | [];
export type FieldRelationValue<
T extends FieldRelationToOneValue | FieldRelationFromManyValue,

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

@ -18,11 +18,11 @@ import { RecordDetailSectionHeader } from '@/object-record/record-show/record-de
import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
import { MultiRecordSelect } from '@/object-record/relation-picker/components/MultiRecordSelect';
import { SingleEntitySelectMenuItemsWithSearch } from '@/object-record/relation-picker/components/SingleEntitySelectMenuItemsWithSearch';
import { SingleRecordSelectMenuItemsWithSearch } from '@/object-record/relation-picker/components/SingleRecordSelectMenuItemsWithSearch';
import { useAddNewRecordAndOpenRightDrawer } from '@/object-record/relation-picker/hooks/useAddNewRecordAndOpenRightDrawer';
import { useRelationPicker } from '@/object-record/relation-picker/hooks/useRelationPicker';
import { RelationPickerScope } from '@/object-record/relation-picker/scopes/RelationPickerScope';
import { EntityForSelect } from '@/object-record/relation-picker/types/EntityForSelect';
import { useRecordPicker } from '@/object-record/relation-picker/hooks/useRecordPicker';
import { RecordPickerComponentInstanceContext } from '@/object-record/relation-picker/states/contexts/RecordPickerComponentInstanceContext';
import { RecordForSelect } from '@/object-record/relation-picker/types/RecordForSelect';
import { ObjectRecord } from '@/object-record/types/ObjectRecord';
import { usePrefetchedData } from '@/prefetch/hooks/usePrefetchedData';
import { PrefetchKey } from '@/prefetch/types/PrefetchKey';
@ -84,13 +84,13 @@ export const RecordDetailRelationSection = ({
const { closeDropdown, isDropdownOpen, dropdownPlacement } =
useDropdown(dropdownId);
const { setRelationPickerSearchFilter } = useRelationPicker({
relationPickerScopeId: dropdownId,
const { setRecordPickerSearchFilter } = useRecordPicker({
recordPickerInstanceId: dropdownId,
});
const handleCloseRelationPickerDropdown = useCallback(() => {
setRelationPickerSearchFilter('');
}, [setRelationPickerSearchFilter]);
setRecordPickerSearchFilter('');
}, [setRecordPickerSearchFilter]);
const persistField = usePersistField();
const { updateOneRecord: updateOneRelationRecord } = useUpdateOneRecord({
@ -98,7 +98,7 @@ export const RecordDetailRelationSection = ({
});
const handleRelationPickerEntitySelected = (
selectedRelationEntity?: EntityForSelect,
selectedRelationEntity?: RecordForSelect,
) => {
closeDropdown();
@ -193,16 +193,16 @@ export const RecordDetailRelationSection = ({
/>
}
dropdownComponents={
<RelationPickerScope relationPickerScopeId={dropdownId}>
<RecordPickerComponentInstanceContext.Provider
value={{ instanceId: dropdownId }}
>
{isToOneObject ? (
<SingleEntitySelectMenuItemsWithSearch
<SingleRecordSelectMenuItemsWithSearch
EmptyIcon={IconForbid}
onEntitySelected={handleRelationPickerEntitySelected}
selectedRelationRecordIds={relationRecordIds}
relationObjectNameSingular={
relationObjectMetadataNameSingular
}
relationPickerScopeId={dropdownId}
onRecordSelected={handleRelationPickerEntitySelected}
selectedRecordIds={relationRecordIds}
objectNameSingular={relationObjectMetadataNameSingular}
recordPickerInstanceId={dropdownId}
onCreate={createNewRecordAndOpenRightDrawer}
dropdownPlacement={dropdownPlacement}
/>
@ -217,7 +217,7 @@ export const RecordDetailRelationSection = ({
/>
</>
)}
</RelationPickerScope>
</RecordPickerComponentInstanceContext.Provider>
}
dropdownHotkeyScope={{
scope: dropdownId,

18
packages/twenty-front/src/modules/object-record/relation-picker/components/ActivityTargetInlineCellEditModeMultiRecordsEffect.tsx
View File

@ -9,10 +9,10 @@ import {
import { useObjectRecordMultiSelectScopedStates } from '@/activities/hooks/useObjectRecordMultiSelectScopedStates';
import { objectRecordMultiSelectComponentFamilyState } from '@/object-record/record-field/states/objectRecordMultiSelectComponentFamilyState';
import { objectRecordMultiSelectMatchesFilterRecordsIdsComponentState } from '@/object-record/record-field/states/objectRecordMultiSelectMatchesFilterRecordsIdsComponentState';
import { RelationPickerScopeInternalContext } from '@/object-record/relation-picker/scopes/scope-internal-context/RelationPickerScopeInternalContext';
import { RecordPickerComponentInstanceContext } from '@/object-record/relation-picker/states/contexts/RecordPickerComponentInstanceContext';
import { ObjectRecordForSelect } from '@/object-record/types/ObjectRecordForSelect';
import { SelectedObjectRecordId } from '@/object-record/types/SelectedObjectRecordId';
import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
export const ActivityTargetInlineCellEditModeMultiRecordsEffect = ({
@ -20,13 +20,13 @@ export const ActivityTargetInlineCellEditModeMultiRecordsEffect = ({
}: {
selectedObjectRecordIds: SelectedObjectRecordId[];
}) => {
const scopeId = useAvailableScopeIdOrThrow(
RelationPickerScopeInternalContext,
const instanceId = useAvailableComponentInstanceIdOrThrow(
RecordPickerComponentInstanceContext,
);
const {
objectRecordsIdsMultiSelectState,
objectRecordMultiSelectCheckedRecordsIdsState,
} = useObjectRecordMultiSelectScopedStates(scopeId);
} = useObjectRecordMultiSelectScopedStates(instanceId);
const [objectRecordsIdsMultiSelect, setObjectRecordsIdsMultiSelect] =
useRecoilState(objectRecordsIdsMultiSelectState);
@ -41,7 +41,7 @@ export const ActivityTargetInlineCellEditModeMultiRecordsEffect = ({
const currentRecord = snapshot
.getLoadable(
objectRecordMultiSelectComponentFamilyState({
scopeId: scopeId,
scopeId: instanceId,
familyKey: newRecord.record.id,
}),
)
@ -66,7 +66,7 @@ export const ActivityTargetInlineCellEditModeMultiRecordsEffect = ({
) {
set(
objectRecordMultiSelectComponentFamilyState({
scopeId: scopeId,
scopeId: instanceId,
familyKey: newRecordWithSelected.record.id,
}),
newRecordWithSelected,
@ -74,12 +74,12 @@ export const ActivityTargetInlineCellEditModeMultiRecordsEffect = ({
}
}
},
[objectRecordMultiSelectCheckedRecordsIdsState, scopeId],
[objectRecordMultiSelectCheckedRecordsIdsState, instanceId],
);
const matchesSearchFilterObjectRecords = useRecoilValue(
objectRecordMultiSelectMatchesFilterRecordsIdsComponentState({
scopeId,
scopeId: instanceId,
}),
);

30
packages/twenty-front/src/modules/object-record/relation-picker/components/ActivityTargetInlineCellEditModeMultiRecordsSearchFilterEffect.tsx
View File

@ -1,35 +1,29 @@
import { useEffect } from 'react';
import { useRecoilValue, useSetRecoilState } from 'recoil';
import { useSetRecoilState } from 'recoil';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { objectRecordMultiSelectMatchesFilterRecordsIdsComponentState } from '@/object-record/record-field/states/objectRecordMultiSelectMatchesFilterRecordsIdsComponentState';
import { useRelationPickerScopedStates } from '@/object-record/relation-picker/hooks/internal/useRelationPickerScopedStates';
import { useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray } from '@/object-record/relation-picker/hooks/useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray';
import { useMultiObjectSearch } from '@/object-record/relation-picker/hooks/useMultiObjectSearch';
import { RelationPickerScopeInternalContext } from '@/object-record/relation-picker/scopes/scope-internal-context/RelationPickerScopeInternalContext';
import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
import { RecordPickerComponentInstanceContext } from '@/object-record/relation-picker/states/contexts/RecordPickerComponentInstanceContext';
import { recordPickerSearchFilterComponentState } from '@/object-record/relation-picker/states/recordPickerSearchFilterComponentState';
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
export const ActivityTargetInlineCellEditModeMultiRecordsSearchFilterEffect =
() => {
const scopeId = useAvailableScopeIdOrThrow(
RelationPickerScopeInternalContext,
const instanceId = useAvailableComponentInstanceIdOrThrow(
RecordPickerComponentInstanceContext,
);
const setRecordMultiSelectMatchesFilterRecords = useSetRecoilState(
objectRecordMultiSelectMatchesFilterRecordsIdsComponentState({
scopeId,
scopeId: instanceId,
}),
);
const relationPickerScopedId = useAvailableScopeIdOrThrow(
RelationPickerScopeInternalContext,
);
const { relationPickerSearchFilterState } = useRelationPickerScopedStates({
relationPickerScopedId,
});
const relationPickerSearchFilter = useRecoilValue(
relationPickerSearchFilterState,
const recordPickerSearchFilter = useRecoilComponentValueV2(
recordPickerSearchFilterComponentState,
instanceId,
);
const { matchesSearchFilterObjectRecordsQueryResult } =
@ -38,7 +32,7 @@ export const ActivityTargetInlineCellEditModeMultiRecordsSearchFilterEffect =
CoreObjectNameSingular.Task,
CoreObjectNameSingular.Note,
],
searchFilterValue: relationPickerSearchFilter,
searchFilterValue: recordPickerSearchFilter,
limit: 10,
});

46
packages/twenty-front/src/modules/object-record/relation-picker/components/MultiRecordSelect.tsx
View File

@ -2,8 +2,8 @@ import { useObjectRecordMultiSelectScopedStates } from '@/activities/hooks/useOb
import { MultipleObjectRecordOnClickOutsideEffect } from '@/object-record/relation-picker/components/MultipleObjectRecordOnClickOutsideEffect';
import { MultipleObjectRecordSelectItem } from '@/object-record/relation-picker/components/MultipleObjectRecordSelectItem';
import { MULTI_OBJECT_RECORD_SELECT_SELECTABLE_LIST_ID } from '@/object-record/relation-picker/constants/MultiObjectRecordSelectSelectableListId';
import { useRelationPickerScopedStates } from '@/object-record/relation-picker/hooks/internal/useRelationPickerScopedStates';
import { RelationPickerScopeInternalContext } from '@/object-record/relation-picker/scopes/scope-internal-context/RelationPickerScopeInternalContext';
import { RecordPickerComponentInstanceContext } from '@/object-record/relation-picker/states/contexts/RecordPickerComponentInstanceContext';
import { recordPickerSearchFilterComponentState } from '@/object-record/relation-picker/states/recordPickerSearchFilterComponentState';
import { CreateNewButton } from '@/ui/input/relation-picker/components/CreateNewButton';
import { DropdownMenuSkeletonItem } from '@/ui/input/relation-picker/components/skeletons/DropdownMenuSkeletonItem';
import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
@ -16,11 +16,13 @@ import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectab
import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
import styled from '@emotion/styled';
import { Placement } from '@floating-ui/react';
import { useCallback, useEffect, useRef } from 'react';
import { useRecoilValue, useSetRecoilState } from 'recoil';
import { useRecoilValue } from 'recoil';
import { Key } from 'ts-key-enum';
import { IconPlus, isDefined } from 'twenty-ui';
import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
@ -45,12 +47,12 @@ export const MultiRecordSelect = ({
const setHotkeyScope = useSetHotkeyScope();
const { goBackToPreviousHotkeyScope } = usePreviousHotkeyScope();
const relationPickerScopedId = useAvailableScopeIdOrThrow(
RelationPickerScopeInternalContext,
const instanceId = useAvailableComponentInstanceIdOrThrow(
RecordPickerComponentInstanceContext,
);
const { objectRecordsIdsMultiSelectState, recordMultiSelectIsLoadingState } =
useObjectRecordMultiSelectScopedStates(relationPickerScopedId);
useObjectRecordMultiSelectScopedStates(instanceId);
const { resetSelectedItem } = useSelectableList(
MULTI_OBJECT_RECORD_SELECT_SELECTABLE_LIST_ID,
@ -63,18 +65,18 @@ export const MultiRecordSelect = ({
objectRecordsIdsMultiSelectState,
);
const { relationPickerSearchFilterState } = useRelationPickerScopedStates({
relationPickerScopedId,
});
const setSearchFilter = useSetRecoilState(relationPickerSearchFilterState);
const relationPickerSearchFilter = useRecoilValue(
relationPickerSearchFilterState,
const setSearchFilter = useSetRecoilComponentStateV2(
recordPickerSearchFilterComponentState,
instanceId,
);
const recordPickerSearchFilter = useRecoilComponentValueV2(
recordPickerSearchFilterComponentState,
instanceId,
);
useEffect(() => {
setHotkeyScope(relationPickerScopedId);
}, [setHotkeyScope, relationPickerScopedId]);
setHotkeyScope(instanceId);
}, [setHotkeyScope, instanceId]);
useScopedHotkeys(
Key.Escape,
@ -83,7 +85,7 @@ export const MultiRecordSelect = ({
goBackToPreviousHotkeyScope();
resetSelectedItem();
},
relationPickerScopedId,
instanceId,
[onSubmit, goBackToPreviousHotkeyScope, resetSelectedItem],
);
@ -99,7 +101,7 @@ export const MultiRecordSelect = ({
<SelectableList
selectableListId={MULTI_OBJECT_RECORD_SELECT_SELECTABLE_LIST_ID}
selectableItemIdArray={objectRecordsIdsMultiSelect}
hotkeyScope={relationPickerScopedId}
hotkeyScope={instanceId}
onEnter={(selectedId) => {
onChange?.(selectedId);
resetSelectedItem();
@ -123,7 +125,7 @@ export const MultiRecordSelect = ({
const createNewButton = isDefined(onCreate) && (
<CreateNewButton
onClick={() => onCreate?.(relationPickerSearchFilter)}
onClick={() => onCreate?.(recordPickerSearchFilter)}
LeftIcon={IconPlus}
text="Add New"
/>
@ -147,7 +149,7 @@ export const MultiRecordSelect = ({
)}
<DropdownMenuSeparator />
{objectRecordsIdsMultiSelect?.length > 0 && results}
{recordMultiSelectIsLoading && !relationPickerSearchFilter && (
{recordMultiSelectIsLoading && !recordPickerSearchFilter && (
<>
<DropdownMenuSkeletonItem />
<DropdownMenuSeparator />
@ -159,7 +161,7 @@ export const MultiRecordSelect = ({
</>
)}
<DropdownMenuSearchInput
value={relationPickerSearchFilter}
value={recordPickerSearchFilter}
onChange={handleFilterChange}
autoFocus
/>
@ -167,7 +169,7 @@ export const MultiRecordSelect = ({
isUndefinedOrNull(dropdownPlacement)) && (
<>
<DropdownMenuSeparator />
{recordMultiSelectIsLoading && !relationPickerSearchFilter && (
{recordMultiSelectIsLoading && !recordPickerSearchFilter && (
<>
<DropdownMenuSkeletonItem />
<DropdownMenuSeparator />

10
packages/twenty-front/src/modules/object-record/relation-picker/components/MultipleObjectRecordSelectItem.tsx
View File

@ -4,10 +4,10 @@ import { Avatar, MenuItemMultiSelectAvatar } from 'twenty-ui';
import { useObjectRecordMultiSelectScopedStates } from '@/activities/hooks/useObjectRecordMultiSelectScopedStates';
import { MULTI_OBJECT_RECORD_SELECT_SELECTABLE_LIST_ID } from '@/object-record/relation-picker/constants/MultiObjectRecordSelectSelectableListId';
import { RelationPickerScopeInternalContext } from '@/object-record/relation-picker/scopes/scope-internal-context/RelationPickerScopeInternalContext';
import { RecordPickerComponentInstanceContext } from '@/object-record/relation-picker/states/contexts/RecordPickerComponentInstanceContext';
import { SelectableItem } from '@/ui/layout/selectable-list/components/SelectableItem';
import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
import { isDefined } from '~/utils/isDefined';
export const StyledSelectableItem = styled(SelectableItem)`
@ -29,14 +29,14 @@ export const MultipleObjectRecordSelectItem = ({
const isSelectedByKeyboard = useRecoilValue(
isSelectedItemIdSelector(objectRecordId),
);
const scopeId = useAvailableScopeIdOrThrow(
RelationPickerScopeInternalContext,
const instanceId = useAvailableComponentInstanceIdOrThrow(
RecordPickerComponentInstanceContext,
);
const {
objectRecordMultiSelectFamilyState,
objectRecordMultiSelectCheckedRecordsIdsState,
} = useObjectRecordMultiSelectScopedStates(scopeId);
} = useObjectRecordMultiSelectScopedStates(instanceId);
const record = useRecoilValue(
objectRecordMultiSelectFamilyState(objectRecordId),

32
packages/twenty-front/src/modules/object-record/relation-picker/components/RelationPicker.tsx
View File

@ -6,16 +6,16 @@ import { FieldContext } from '@/object-record/record-field/contexts/FieldContext
import { FieldDefinition } from '@/object-record/record-field/types/FieldDefinition';
import { FieldRelationMetadata } from '@/object-record/record-field/types/FieldMetadata';
import { SearchPickerInitialValueEffect } from '@/object-record/relation-picker/components/SearchPickerInitialValueEffect';
import { SingleEntitySelect } from '@/object-record/relation-picker/components/SingleEntitySelect';
import { SingleRecordSelect } from '@/object-record/relation-picker/components/SingleRecordSelect';
import { useAddNewRecordAndOpenRightDrawer } from '@/object-record/relation-picker/hooks/useAddNewRecordAndOpenRightDrawer';
import { EntityForSelect } from '@/object-record/relation-picker/types/EntityForSelect';
import { RecordForSelect } from '@/object-record/relation-picker/types/RecordForSelect';
export type RelationPickerProps = {
selectedRecordId?: string;
onSubmit: (selectedEntity: EntityForSelect | null) => void;
onSubmit: (selectedRecord: RecordForSelect | null) => void;
onCancel?: () => void;
width?: number;
excludeRecordIds?: string[];
excludedRecordIds?: string[];
initialSearchFilter?: string | null;
fieldDefinition: FieldDefinition<FieldRelationMetadata>;
};
@ -24,16 +24,16 @@ export const RelationPicker = ({
selectedRecordId,
onSubmit,
onCancel,
excludeRecordIds,
excludedRecordIds,
width,
initialSearchFilter,
fieldDefinition,
}: RelationPickerProps) => {
const relationPickerScopeId = 'relation-picker';
const recordPickerInstanceId = 'relation-picker';
const handleEntitySelected = (
selectedEntity: EntityForSelect | null | undefined,
) => onSubmit(selectedEntity ?? null);
const handleRecordSelected = (
selectedRecord: RecordForSelect | null | undefined,
) => onSubmit(selectedRecord ?? null);
const { objectMetadataItem: relationObjectMetadataItem } =
useObjectMetadataItem({
@ -60,21 +60,21 @@ export const RelationPicker = ({
<>
<SearchPickerInitialValueEffect
initialValueForSearchFilter={initialSearchFilter}
relationPickerScopeId={relationPickerScopeId}
recordPickerInstanceId={recordPickerInstanceId}
/>
<SingleEntitySelect
<SingleRecordSelect
EmptyIcon={IconForbid}
emptyLabel={'No ' + fieldDefinition.label}
onCancel={onCancel}
onCreate={createNewRecordAndOpenRightDrawer}
onEntitySelected={handleEntitySelected}
onRecordSelected={handleRecordSelected}
width={width}
relationObjectNameSingular={
objectNameSingular={
fieldDefinition.metadata.relationObjectMetadataNameSingular
}
relationPickerScopeId={relationPickerScopeId}
selectedRelationRecordIds={selectedRecordId ? [selectedRecordId] : []}
excludedRelationRecordIds={excludeRecordIds}
recordPickerInstanceId={recordPickerInstanceId}
selectedRecordIds={selectedRecordId ? [selectedRecordId] : []}
excludedRecordIds={excludedRecordIds}
/>
</>
);

21
packages/twenty-front/src/modules/object-record/relation-picker/components/SearchPickerInitialValueEffect.tsx
View File

@ -1,25 +1,22 @@
import { getRelationPickerScopedStates } from '@/object-record/relation-picker/utils/getRelationPickerScopedStates';
import { recordPickerSearchFilterComponentState } from '@/object-record/relation-picker/states/recordPickerSearchFilterComponentState';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
import { useEffect } from 'react';
import { useSetRecoilState } from 'recoil';
export const SearchPickerInitialValueEffect = ({
initialValueForSearchFilter,
relationPickerScopeId,
recordPickerInstanceId,
}: {
initialValueForSearchFilter?: string | null;
relationPickerScopeId: string;
recordPickerInstanceId: string;
}) => {
const { relationPickerSearchFilterState } = getRelationPickerScopedStates({
relationPickerScopeId: relationPickerScopeId,
});
const setRelationPickerSearchFilter = useSetRecoilState(
relationPickerSearchFilterState,
const setRecordPickerSearchFilter = useSetRecoilComponentStateV2(
recordPickerSearchFilterComponentState,
recordPickerInstanceId,
);
useEffect(() => {
setRelationPickerSearchFilter(initialValueForSearchFilter ?? '');
}, [initialValueForSearchFilter, setRelationPickerSearchFilter]);
setRecordPickerSearchFilter(initialValueForSearchFilter ?? '');
}, [initialValueForSearchFilter, setRecordPickerSearchFilter]);
return <></>;
};

37
packages/twenty-front/src/modules/object-record/relation-picker/components/SelectableMenuItemSelect.tsx
View File

@ -2,14 +2,15 @@ import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
import { Avatar, MenuItemSelectAvatar } from 'twenty-ui';
import { EntityForSelect } from '@/object-record/relation-picker/types/EntityForSelect';
import { SINGLE_RECORD_SELECT_BASE_LIST } from '@/object-record/relation-picker/constants/SingleRecordSelectBaseList';
import { RecordForSelect } from '@/object-record/relation-picker/types/RecordForSelect';
import { SelectableItem } from '@/ui/layout/selectable-list/components/SelectableItem';
import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
type SelectableMenuItemSelectProps = {
entity: EntityForSelect;
onEntitySelected: (entitySelected?: EntityForSelect) => void;
selectedEntity?: EntityForSelect;
record: RecordForSelect;
onRecordSelected: (recordSelected?: RecordForSelect) => void;
selectedRecord?: RecordForSelect;
};
const StyledSelectableItem = styled(SelectableItem)`
@ -17,31 +18,31 @@ const StyledSelectableItem = styled(SelectableItem)`
`;
export const SelectableMenuItemSelect = ({
entity,
onEntitySelected,
selectedEntity,
record,
onRecordSelected,
selectedRecord,
}: SelectableMenuItemSelectProps) => {
const { isSelectedItemIdSelector } = useSelectableList(
'single-entity-select-base-list',
SINGLE_RECORD_SELECT_BASE_LIST,
);
const isSelectedItemId = useRecoilValue(isSelectedItemIdSelector(entity.id));
const isSelectedItemId = useRecoilValue(isSelectedItemIdSelector(record.id));
return (
<StyledSelectableItem itemId={entity.id} key={entity.id}>
<StyledSelectableItem itemId={record.id} key={record.id}>
<MenuItemSelectAvatar
key={entity.id}
key={record.id}
testId="menu-item"
onClick={() => onEntitySelected(entity)}
text={entity.name}
selected={selectedEntity?.id === entity.id}
onClick={() => onRecordSelected(record)}
text={record.name}
selected={selectedRecord?.id === record.id}
hovered={isSelectedItemId}
avatar={
<Avatar
avatarUrl={entity.avatarUrl}
placeholderColorSeed={entity.id}
placeholder={entity.name}
avatarUrl={record.avatarUrl}
placeholderColorSeed={record.id}
placeholder={record.name}
size="md"
type={entity.avatarType ?? 'rounded'}
type={record.avatarType ?? 'rounded'}
/>
}
/>

114
packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelectMenuItemsWithSearch.tsx
View File

@ -1,114 +0,0 @@
import {
SingleEntitySelectMenuItems,
SingleEntitySelectMenuItemsProps,
} from '@/object-record/relation-picker/components/SingleEntitySelectMenuItems';
import { useEntitySelectSearch } from '@/object-record/relation-picker/hooks/useEntitySelectSearch';
import { useRelationPickerEntitiesOptions } from '@/object-record/relation-picker/hooks/useRelationPickerEntitiesOptions';
import { CreateNewButton } from '@/ui/input/relation-picker/components/CreateNewButton';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { Placement } from '@floating-ui/react';
import { IconPlus } from 'twenty-ui';
import { isDefined } from '~/utils/isDefined';
import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
export type SingleEntitySelectMenuItemsWithSearchProps = {
excludedRelationRecordIds?: string[];
onCreate?: ((searchInput?: string) => void) | (() => void);
relationObjectNameSingular: string;
relationPickerScopeId?: string;
selectedRelationRecordIds: string[];
dropdownPlacement?: Placement | null;
} & Pick<
SingleEntitySelectMenuItemsProps,
| 'EmptyIcon'
| 'emptyLabel'
| 'onCancel'
| 'onEntitySelected'
| 'selectedEntity'
>;
export const SingleEntitySelectMenuItemsWithSearch = ({
EmptyIcon,
emptyLabel,
excludedRelationRecordIds,
onCancel,
onCreate,
onEntitySelected,
relationObjectNameSingular,
relationPickerScopeId = 'relation-picker',
selectedRelationRecordIds,
dropdownPlacement,
}: SingleEntitySelectMenuItemsWithSearchProps) => {
const { handleSearchFilterChange } = useEntitySelectSearch({
relationPickerScopeId,
});
const { entities, relationPickerSearchFilter } =
useRelationPickerEntitiesOptions({
relationObjectNameSingular,
selectedRelationRecordIds,
excludedRelationRecordIds,
});
const createNewButton = isDefined(onCreate) && (
<CreateNewButton
onClick={() => onCreate?.(relationPickerSearchFilter)}
LeftIcon={IconPlus}
text="Add New"
/>
);
const results = (
<SingleEntitySelectMenuItems
entitiesToSelect={entities.entitiesToSelect}
loading={entities.loading}
selectedEntity={
entities.selectedEntities.length === 1
? entities.selectedEntities[0]
: undefined
}
shouldSelectEmptyOption={selectedRelationRecordIds?.length === 0}
hotkeyScope={relationPickerScopeId}
isFiltered={!!relationPickerSearchFilter}
{...{
EmptyIcon,
emptyLabel,
onCancel,
onEntitySelected,
}}
/>
);
return (
<>
{dropdownPlacement?.includes('end') && (
<>
<DropdownMenuItemsContainer>
{createNewButton}
</DropdownMenuItemsContainer>
{entities.entitiesToSelect.length > 0 && <DropdownMenuSeparator />}
{entities.entitiesToSelect.length > 0 && results}
<DropdownMenuSeparator />
</>
)}
<DropdownMenuSearchInput onChange={handleSearchFilterChange} autoFocus />
{(dropdownPlacement?.includes('start') ||
isUndefinedOrNull(dropdownPlacement)) && (
<>
<DropdownMenuSeparator />
{entities.entitiesToSelect.length > 0 && results}
{entities.entitiesToSelect.length > 0 && isDefined(onCreate) && (
<DropdownMenuSeparator />
)}
{isDefined(onCreate) && (
<DropdownMenuItemsContainer>
{createNewButton}
</DropdownMenuItemsContainer>
)}
</>
)}
</>
);
};

36
packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelect.tsx → packages/twenty-front/src/modules/object-record/relation-picker/components/SingleRecordSelect.tsx
View File

@ -1,31 +1,31 @@
import { useRef } from 'react';
import {
SingleEntitySelectMenuItemsWithSearch,
SingleEntitySelectMenuItemsWithSearchProps,
} from '@/object-record/relation-picker/components/SingleEntitySelectMenuItemsWithSearch';
SingleRecordSelectMenuItemsWithSearch,
SingleRecordSelectMenuItemsWithSearchProps,
} from '@/object-record/relation-picker/components/SingleRecordSelectMenuItemsWithSearch';
import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
import { isDefined } from '~/utils/isDefined';
export type SingleEntitySelectProps = {
export type SingleRecordSelectProps = {
disableBackgroundBlur?: boolean;
width?: number;
} & SingleEntitySelectMenuItemsWithSearchProps;
} & SingleRecordSelectMenuItemsWithSearchProps;
export const SingleEntitySelect = ({
export const SingleRecordSelect = ({
disableBackgroundBlur = false,
EmptyIcon,
emptyLabel,
excludedRelationRecordIds,
excludedRecordIds,
onCancel,
onCreate,
onEntitySelected,
relationObjectNameSingular,
relationPickerScopeId,
selectedRelationRecordIds,
onRecordSelected,
objectNameSingular,
recordPickerInstanceId,
selectedRecordIds,
width = 200,
}: SingleEntitySelectProps) => {
}: SingleRecordSelectProps) => {
const containerRef = useRef<HTMLDivElement>(null);
useListenClickOutside({
@ -50,17 +50,17 @@ export const SingleEntitySelect = ({
width={width}
data-select-disable
>
<SingleEntitySelectMenuItemsWithSearch
<SingleRecordSelectMenuItemsWithSearch
{...{
EmptyIcon,
emptyLabel,
excludedRelationRecordIds,
excludedRecordIds,
onCancel,
onCreate,
onEntitySelected,
relationObjectNameSingular,
relationPickerScopeId,
selectedRelationRecordIds,
onRecordSelected,
objectNameSingular,
recordPickerInstanceId,
selectedRecordIds,
}}
/>
</DropdownMenu>

86
packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelectMenuItems.tsx → packages/twenty-front/src/modules/object-record/relation-picker/components/SingleRecordSelectMenuItems.tsx
View File

@ -5,7 +5,7 @@ import { Key } from 'ts-key-enum';
import { IconComponent, MenuItemSelect } from 'twenty-ui';
import { SelectableMenuItemSelect } from '@/object-record/relation-picker/components/SelectableMenuItemSelect';
import { SINGLE_ENTITY_SELECT_BASE_LIST } from '@/object-record/relation-picker/constants/SingleEntitySelectBaseList';
import { SINGLE_RECORD_SELECT_BASE_LIST } from '@/object-record/relation-picker/constants/SingleRecordSelectBaseList';
import { DropdownMenuSkeletonItem } from '@/ui/input/relation-picker/components/skeletons/DropdownMenuSkeletonItem';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
@ -13,44 +13,44 @@ import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectab
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { isDefined } from '~/utils/isDefined';
import { EntityForSelect } from '../types/EntityForSelect';
import { RecordForSelect } from '../types/RecordForSelect';
import { RelationPickerHotkeyScope } from '../types/RelationPickerHotkeyScope';
export type SingleEntitySelectMenuItemsProps = {
export type SingleRecordSelectMenuItemsProps = {
EmptyIcon?: IconComponent;
emptyLabel?: string;
entitiesToSelect: EntityForSelect[];
recordsToSelect: RecordForSelect[];
loading?: boolean;
onCancel?: () => void;
onEntitySelected: (entity?: EntityForSelect) => void;
selectedEntity?: EntityForSelect;
onRecordSelected: (entity?: RecordForSelect) => void;
selectedRecord?: RecordForSelect;
SelectAllIcon?: IconComponent;
selectAllLabel?: string;
isAllEntitySelected?: boolean;
isAllEntitySelectShown?: boolean;
onAllEntitySelected?: () => void;
isAllRecordsSelected?: boolean;
isAllRecordsSelectShown?: boolean;
onAllRecordsSelected?: () => void;
hotkeyScope?: string;
isFiltered: boolean;
shouldSelectEmptyOption?: boolean;
};
export const SingleEntitySelectMenuItems = ({
export const SingleRecordSelectMenuItems = ({
EmptyIcon,
emptyLabel,
entitiesToSelect,
recordsToSelect,
loading,
onCancel,
onEntitySelected,
selectedEntity,
onRecordSelected,
selectedRecord,
SelectAllIcon,
selectAllLabel,
isAllEntitySelected,
isAllEntitySelectShown,
onAllEntitySelected,
isAllRecordsSelected,
isAllRecordsSelectShown,
onAllRecordsSelected,
hotkeyScope = RelationPickerHotkeyScope.RelationPicker,
isFiltered,
shouldSelectEmptyOption,
}: SingleEntitySelectMenuItemsProps) => {
}: SingleRecordSelectMenuItemsProps) => {
const containerRef = useRef<HTMLDivElement>(null);
const selectNone = emptyLabel
@ -61,7 +61,7 @@ export const SingleEntitySelectMenuItems = ({
}
: null;
const selectAll = isAllEntitySelectShown
const selectAll = isAllRecordsSelectShown
? {
__typename: '',
id: 'select-all',
@ -69,18 +69,18 @@ export const SingleEntitySelectMenuItems = ({
}
: null;
const entitiesInDropdown = [
const recordsInDropdown = [
selectAll,
selectNone,
selectedEntity,
...entitiesToSelect,
selectedRecord,
...recordsToSelect,
].filter(
(entity): entity is EntityForSelect =>
(entity): entity is RecordForSelect =>
isDefined(entity) && isNonEmptyString(entity.name),
);
const { isSelectedItemIdSelector, resetSelectedItem } = useSelectableList(
SINGLE_ENTITY_SELECT_BASE_LIST,
SINGLE_RECORD_SELECT_BASE_LIST,
);
const isSelectedSelectNoneButton = useRecoilValue(
@ -101,38 +101,38 @@ export const SingleEntitySelectMenuItems = ({
[onCancel, resetSelectedItem],
);
const selectableItemIds = entitiesInDropdown.map((entity) => entity.id);
const selectableItemIds = recordsInDropdown.map((entity) => entity.id);
return (
<div ref={containerRef}>
<SelectableList
selectableListId={SINGLE_ENTITY_SELECT_BASE_LIST}
selectableListId={SINGLE_RECORD_SELECT_BASE_LIST}
selectableItemIdArray={selectableItemIds}
hotkeyScope={hotkeyScope}
onEnter={(itemId) => {
const entityIndex = entitiesInDropdown.findIndex(
(entity) => entity.id === itemId,
const recordIndex = recordsInDropdown.findIndex(
(record) => record.id === itemId,
);
onEntitySelected(entitiesInDropdown[entityIndex]);
onRecordSelected(recordsInDropdown[recordIndex]);
resetSelectedItem();
}}
>
<DropdownMenuItemsContainer hasMaxHeight>
{loading && !isFiltered ? (
<DropdownMenuSkeletonItem />
) : entitiesInDropdown.length === 0 &&
!isAllEntitySelectShown &&
) : recordsInDropdown.length === 0 &&
!isAllRecordsSelectShown &&
!loading ? (
<></>
) : (
entitiesInDropdown?.map((entity) => {
switch (entity.id) {
recordsInDropdown?.map((record) => {
switch (record.id) {
case 'select-none': {
return (
emptyLabel && (
<MenuItemSelect
key={entity.id}
onClick={() => onEntitySelected()}
key={record.id}
onClick={() => onRecordSelected()}
LeftIcon={EmptyIcon}
text={emptyLabel}
selected={shouldSelectEmptyOption === true}
@ -143,15 +143,15 @@ export const SingleEntitySelectMenuItems = ({
}
case 'select-all': {
return (
isAllEntitySelectShown &&
isAllRecordsSelectShown &&
selectAllLabel &&
onAllEntitySelected && (
onAllRecordsSelected && (
<MenuItemSelect
key={entity.id}
onClick={() => onAllEntitySelected()}
key={record.id}
onClick={() => onAllRecordsSelected()}
LeftIcon={SelectAllIcon}
text={selectAllLabel}
selected={!!isAllEntitySelected}
selected={!!isAllRecordsSelected}
hovered={isSelectedSelectAllButton}
/>
)
@ -160,10 +160,10 @@ export const SingleEntitySelectMenuItems = ({
default: {
return (
<SelectableMenuItemSelect
key={entity.id}
entity={entity}
onEntitySelected={onEntitySelected}
selectedEntity={selectedEntity}
key={record.id}
record={record}
onRecordSelected={onRecordSelected}
selectedRecord={selectedRecord}
/>
);
}

113
packages/twenty-front/src/modules/object-record/relation-picker/components/SingleRecordSelectMenuItemsWithSearch.tsx Normal file
View File

@ -0,0 +1,113 @@
import {
SingleRecordSelectMenuItems,
SingleRecordSelectMenuItemsProps,
} from '@/object-record/relation-picker/components/SingleRecordSelectMenuItems';
import { useRecordPickerRecordsOptions } from '@/object-record/relation-picker/hooks/useRecordPickerRecordsOptions';
import { useRecordSelectSearch } from '@/object-record/relation-picker/hooks/useRecordSelectSearch';
import { CreateNewButton } from '@/ui/input/relation-picker/components/CreateNewButton';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { Placement } from '@floating-ui/react';
import { IconPlus } from 'twenty-ui';
import { isDefined } from '~/utils/isDefined';
import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
export type SingleRecordSelectMenuItemsWithSearchProps = {
excludedRecordIds?: string[];
onCreate?: ((searchInput?: string) => void) | (() => void);
objectNameSingular: string;
recordPickerInstanceId?: string;
selectedRecordIds: string[];
dropdownPlacement?: Placement | null;
} & Pick<
SingleRecordSelectMenuItemsProps,
| 'EmptyIcon'
| 'emptyLabel'
| 'onCancel'
| 'onRecordSelected'
| 'selectedRecord'
>;
export const SingleRecordSelectMenuItemsWithSearch = ({
EmptyIcon,
emptyLabel,
excludedRecordIds,
onCancel,
onCreate,
onRecordSelected,
objectNameSingular,
recordPickerInstanceId = 'record-picker',
selectedRecordIds,
dropdownPlacement,
}: SingleRecordSelectMenuItemsWithSearchProps) => {
const { handleSearchFilterChange } = useRecordSelectSearch({
recordPickerInstanceId,
});
const { records, recordPickerSearchFilter } = useRecordPickerRecordsOptions({
objectNameSingular,
selectedRecordIds,
excludedRecordIds,
});
const createNewButton = isDefined(onCreate) && (
<CreateNewButton
onClick={() => onCreate?.(recordPickerSearchFilter)}
LeftIcon={IconPlus}
text="Add New"
/>
);
const results = (
<SingleRecordSelectMenuItems
recordsToSelect={records.recordsToSelect}
loading={records.loading}
selectedRecord={
records.recordsToSelect.length === 1
? records.recordsToSelect[0]
: undefined
}
shouldSelectEmptyOption={selectedRecordIds?.length === 0}
hotkeyScope={recordPickerInstanceId}
isFiltered={!!recordPickerSearchFilter}
{...{
EmptyIcon,
emptyLabel,
onCancel,
onRecordSelected,
}}
/>
);
return (
<>
{dropdownPlacement?.includes('end') && (
<>
<DropdownMenuItemsContainer>
{createNewButton}
</DropdownMenuItemsContainer>
{records.recordsToSelect.length > 0 && <DropdownMenuSeparator />}
{records.recordsToSelect.length > 0 && results}
<DropdownMenuSeparator />
</>
)}
<DropdownMenuSearchInput onChange={handleSearchFilterChange} autoFocus />
{(dropdownPlacement?.includes('start') ||
isUndefinedOrNull(dropdownPlacement)) && (
<>
<DropdownMenuSeparator />
{records.recordsToSelect.length > 0 && results}
{records.recordsToSelect.length > 0 && isDefined(onCreate) && (
<DropdownMenuSeparator />
)}
{isDefined(onCreate) && (
<DropdownMenuItemsContainer>
{createNewButton}
</DropdownMenuItemsContainer>
)}
</>
)}
</>
);
};

32
packages/twenty-front/src/modules/object-record/relation-picker/components/__stories__/SingleEntitySelect.stories.tsx → packages/twenty-front/src/modules/object-record/relation-picker/components/__stories__/SingleRecordSelect.stories.tsx
View File

@ -5,18 +5,18 @@ import { ComponentDecorator, IconUserCircle } from 'twenty-ui';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { ComponentWithRecoilScopeDecorator } from '~/testing/decorators/ComponentWithRecoilScopeDecorator';
import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
import { RelationPickerDecorator } from '~/testing/decorators/RelationPickerDecorator';
import { RecordPickerDecorator } from '~/testing/decorators/RecordPickerDecorator';
import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { getPeopleMock } from '~/testing/mock-data/people';
import { sleep } from '~/utils/sleep';
import { EntityForSelect } from '../../types/EntityForSelect';
import { SingleEntitySelect } from '../SingleEntitySelect';
import { RecordForSelect } from '../../types/RecordForSelect';
import { SingleRecordSelect } from '../SingleRecordSelect';
const peopleMock = getPeopleMock();
const entities = peopleMock.map<EntityForSelect>((person) => ({
const records = peopleMock.map<RecordForSelect>((person) => ({
id: person.id,
name: person.name.firstName + ' ' + person.name.lastName,
avatarUrl: 'https://picsum.photos/200',
@ -24,24 +24,24 @@ const entities = peopleMock.map<EntityForSelect>((person) => ({
record: { ...person, __typename: 'Person' },
}));
const meta: Meta<typeof SingleEntitySelect> = {
title: 'UI/Input/RelationPicker/SingleEntitySelect',
component: SingleEntitySelect,
const meta: Meta<typeof SingleRecordSelect> = {
title: 'UI/Input/RelationPicker/SingleRecordSelect',
component: SingleRecordSelect,
decorators: [
ComponentDecorator,
ComponentWithRecoilScopeDecorator,
RelationPickerDecorator,
RecordPickerDecorator,
ObjectMetadataItemsDecorator,
SnackBarDecorator,
],
args: {
relationObjectNameSingular: CoreObjectNameSingular.WorkspaceMember,
selectedRelationRecordIds: [],
objectNameSingular: CoreObjectNameSingular.WorkspaceMember,
selectedRecordIds: [],
},
argTypes: {
selectedEntity: {
options: entities.map(({ name }) => name),
mapping: entities.reduce(
selectedRecord: {
options: records.map(({ name }) => name),
mapping: records.reduce(
(result, entity) => ({ ...result, [entity.name]: entity }),
{},
),
@ -53,12 +53,12 @@ const meta: Meta<typeof SingleEntitySelect> = {
};
export default meta;
type Story = StoryObj<typeof SingleEntitySelect>;
type Story = StoryObj<typeof SingleRecordSelect>;
export const Default: Story = {};
export const WithSelectedEntity: Story = {
args: { selectedEntity: entities[2] },
export const WithSelectedRecord: Story = {
args: { selectedRecord: records[2] },
};
export const WithEmptyOption: Story = {

1
packages/twenty-front/src/modules/object-record/relation-picker/constants/SingleEntitySelectBaseList.ts
View File

@ -1 +0,0 @@
export const SINGLE_ENTITY_SELECT_BASE_LIST = 'single-entity-select-base-list';

1
packages/twenty-front/src/modules/object-record/relation-picker/constants/SingleRecordSelectBaseList.ts Normal file
View File

@ -0,0 +1 @@
export const SINGLE_RECORD_SELECT_BASE_LIST = 'single-record-select-base-list';

46
packages/twenty-front/src/modules/object-record/relation-picker/hooks/__tests__/useEntitySelectSearch.test.tsx
View File

@ -1,46 +0,0 @@
import { ChangeEvent } from 'react';
import { act, renderHook } from '@testing-library/react';
import { RecoilRoot, useRecoilValue } from 'recoil';
import { useRelationPickerScopedStates } from '@/object-record/relation-picker/hooks/internal/useRelationPickerScopedStates';
import { useEntitySelectSearch } from '@/object-record/relation-picker/hooks/useEntitySelectSearch';
import { RelationPickerScopeInternalContext } from '@/object-record/relation-picker/scopes/scope-internal-context/RelationPickerScopeInternalContext';
const scopeId = 'scopeId';
const Wrapper = ({ children }: { children: React.ReactNode }) => (
<RelationPickerScopeInternalContext.Provider value={{ scopeId }}>
<RecoilRoot>{children}</RecoilRoot>
</RelationPickerScopeInternalContext.Provider>
);
describe('useEntitySelectSearch', () => {
it('should update searchFilter after change event', async () => {
const { result } = renderHook(
() => {
const entitySelectSearchHook = useEntitySelectSearch({
relationPickerScopeId: 'relation-picker',
});
const relationPickerScopedStatesHook = useRelationPickerScopedStates({
relationPickerScopedId: 'relation-picker',
});
const internallyStoredFilter = useRecoilValue(
relationPickerScopedStatesHook.relationPickerSearchFilterState,
);
return { entitySelectSearchHook, internallyStoredFilter };
},
{
wrapper: Wrapper,
},
);
const filter = 'value';
act(() => {
result.current.entitySelectSearchHook.handleSearchFilterChange({
currentTarget: { value: filter },
} as ChangeEvent<HTMLInputElement>);
});
expect(result.current.internallyStoredFilter).toBe(filter);
});
});

8
packages/twenty-front/src/modules/object-record/relation-picker/hooks/__tests__/useLimitPerMetadataItem.test.tsx
View File

@ -3,13 +3,13 @@ import { RecoilRoot } from 'recoil';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { useLimitPerMetadataItem } from '@/object-record/relation-picker/hooks/useLimitPerMetadataItem';
import { RelationPickerScopeInternalContext } from '@/object-record/relation-picker/scopes/scope-internal-context/RelationPickerScopeInternalContext';
import { RecordPickerComponentInstanceContext } from '@/object-record/relation-picker/states/contexts/RecordPickerComponentInstanceContext';
const scopeId = 'scopeId';
const instanceId = 'instanceId';
const Wrapper = ({ children }: { children: React.ReactNode }) => (
<RelationPickerScopeInternalContext.Provider value={{ scopeId }}>
<RecordPickerComponentInstanceContext.Provider value={{ instanceId }}>
<RecoilRoot>{children}</RecoilRoot>
</RelationPickerScopeInternalContext.Provider>
</RecordPickerComponentInstanceContext.Provider>
);
describe('useLimitPerMetadataItem', () => {

8
packages/twenty-front/src/modules/object-record/relation-picker/hooks/__tests__/useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray.test.tsx
View File

@ -3,14 +3,14 @@ import { RecoilRoot, useSetRecoilState } from 'recoil';
import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
import { useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray } from '@/object-record/relation-picker/hooks/useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray';
import { RelationPickerScopeInternalContext } from '@/object-record/relation-picker/scopes/scope-internal-context/RelationPickerScopeInternalContext';
import { RecordPickerComponentInstanceContext } from '@/object-record/relation-picker/states/contexts/RecordPickerComponentInstanceContext';
import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
const scopeId = 'scopeId';
const instanceId = 'instanceId';
const Wrapper = ({ children }: { children: React.ReactNode }) => (
<RelationPickerScopeInternalContext.Provider value={{ scopeId }}>
<RecordPickerComponentInstanceContext.Provider value={{ instanceId }}>
<RecoilRoot>{children}</RecoilRoot>
</RelationPickerScopeInternalContext.Provider>
</RecordPickerComponentInstanceContext.Provider>
);
const opportunityId = 'cb702502-4b1d-488e-9461-df3fb096ebf6';

8
packages/twenty-front/src/modules/object-record/relation-picker/hooks/__tests__/useMultiObjectSearchQueryResultFormattedAsObjectRecordsMap.test.tsx
View File

@ -3,14 +3,14 @@ import { RecoilRoot, useSetRecoilState } from 'recoil';
import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
import { useMultiObjectSearchQueryResultFormattedAsObjectRecordsMap } from '@/object-record/relation-picker/hooks/useMultiObjectSearchQueryResultFormattedAsObjectRecordsMap';
import { RelationPickerScopeInternalContext } from '@/object-record/relation-picker/scopes/scope-internal-context/RelationPickerScopeInternalContext';
import { RecordPickerComponentInstanceContext } from '@/object-record/relation-picker/states/contexts/RecordPickerComponentInstanceContext';
import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
const scopeId = 'scopeId';
const instanceId = 'instanceId';
const Wrapper = ({ children }: { children: React.ReactNode }) => (
<RelationPickerScopeInternalContext.Provider value={{ scopeId }}>
<RecordPickerComponentInstanceContext.Provider value={{ instanceId }}>
<RecoilRoot>{children}</RecoilRoot>
</RelationPickerScopeInternalContext.Provider>
</RecordPickerComponentInstanceContext.Provider>
);
const opportunityId = 'cb702502-4b1d-488e-9461-df3fb096ebf6';

45
packages/twenty-front/src/modules/object-record/relation-picker/hooks/__tests__/useRecordSelectSearch.test.tsx Normal file
View File

@ -0,0 +1,45 @@
import { act, renderHook } from '@testing-library/react';
import { ChangeEvent } from 'react';
import { RecoilRoot } from 'recoil';
import { useRecordSelectSearch } from '@/object-record/relation-picker/hooks/useRecordSelectSearch';
import { RecordPickerComponentInstanceContext } from '@/object-record/relation-picker/states/contexts/RecordPickerComponentInstanceContext';
import { recordPickerSearchFilterComponentState } from '@/object-record/relation-picker/states/recordPickerSearchFilterComponentState';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
const instanceId = 'instanceId';
const Wrapper = ({ children }: { children: React.ReactNode }) => (
<RecordPickerComponentInstanceContext.Provider value={{ instanceId }}>
<RecoilRoot>{children}</RecoilRoot>
</RecordPickerComponentInstanceContext.Provider>
);
describe('useRecordSelectSearch', () => {
it('should update searchFilter after change event', async () => {
const { result } = renderHook(
() => {
const recordSelectSearchHook = useRecordSelectSearch({
recordPickerInstanceId: instanceId,
});
const internallyStoredFilter = useRecoilComponentValueV2(
recordPickerSearchFilterComponentState,
instanceId,
);
return { recordSelectSearchHook, internallyStoredFilter };
},
{
wrapper: Wrapper,
},
);
const filter = 'value';
act(() => {
result.current.recordSelectSearchHook.handleSearchFilterChange({
currentTarget: { value: filter },
} as ChangeEvent<HTMLInputElement>);
});
expect(result.current.internallyStoredFilter).toBe(filter);
});
});

29
packages/twenty-front/src/modules/object-record/relation-picker/hooks/internal/useRelationPickerScopedStates.ts
View File

@ -1,29 +0,0 @@
import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
import { getRelationPickerScopedStates } from '@/object-record/relation-picker/utils/getRelationPickerScopedStates';
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
export const useRelationPickerScopedStates = (args?: {
relationPickerScopedId?: string;
}) => {
const { relationPickerScopedId } = args ?? {};
const scopeId = useAvailableComponentInstanceIdOrThrow(
RecordTableComponentInstanceContext,
relationPickerScopedId,
);
const {
relationPickerSearchFilterState,
relationPickerPreselectedIdState,
searchQueryState,
} = getRelationPickerScopedStates({
relationPickerScopeId: scopeId,
});
return {
scopeId,
relationPickerSearchFilterState,
relationPickerPreselectedIdState,
searchQueryState,
};
};

24
packages/twenty-front/src/modules/object-record/relation-picker/hooks/useRecordPicker.ts Normal file
View File

@ -0,0 +1,24 @@
import { recordPickerPreselectedIdComponentState } from '@/object-record/relation-picker/states/recordPickerPreselectedIdComponentState';
import { recordPickerSearchFilterComponentState } from '@/object-record/relation-picker/states/recordPickerSearchFilterComponentState';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
export const useRecordPicker = ({
recordPickerInstanceId,
}: {
recordPickerInstanceId?: string;
}) => {
const setRecordPickerSearchFilter = useSetRecoilComponentStateV2(
recordPickerSearchFilterComponentState,
recordPickerInstanceId,
);
const setRecordPickerPreselectedId = useSetRecoilComponentStateV2(
recordPickerPreselectedIdComponentState,
recordPickerInstanceId,
);
return {
setRecordPickerSearchFilter,
setRecordPickerPreselectedId,
};
};

26
packages/twenty-front/src/modules/object-record/relation-picker/hooks/useRecordPickerRecordsOptions.ts Normal file
View File

@ -0,0 +1,26 @@
import { recordPickerSearchFilterComponentState } from '@/object-record/relation-picker/states/recordPickerSearchFilterComponentState';
import { useFilteredSearchRecordQuery } from '@/search/hooks/useFilteredSearchRecordQuery';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
export const useRecordPickerRecordsOptions = ({
objectNameSingular,
selectedRecordIds = [],
excludedRecordIds = [],
}: {
objectNameSingular: string;
selectedRecordIds?: string[];
excludedRecordIds?: string[];
}) => {
const recordPickerSearchFilter = useRecoilComponentValueV2(
recordPickerSearchFilterComponentState,
);
const records = useFilteredSearchRecordQuery({
searchFilter: recordPickerSearchFilter,
selectedIds: selectedRecordIds,
excludedRecordIds: excludedRecordIds,
objectNameSingular,
});
return { records, recordPickerSearchFilter };
};

18
packages/twenty-front/src/modules/object-record/relation-picker/hooks/useEntitySelectSearch.ts → packages/twenty-front/src/modules/object-record/relation-picker/hooks/useRecordSelectSearch.ts
View File

@ -1,17 +1,17 @@
import { useDebouncedCallback } from 'use-debounce';
import { useRelationPicker } from '@/object-record/relation-picker/hooks/useRelationPicker';
import { useRecordPicker } from '@/object-record/relation-picker/hooks/useRecordPicker';
export const useEntitySelectSearch = ({
relationPickerScopeId,
export const useRecordSelectSearch = ({
recordPickerInstanceId,
}: {
relationPickerScopeId?: string;
recordPickerInstanceId?: string;
} = {}) => {
const { setRelationPickerSearchFilter, setRelationPickerPreselectedId } =
useRelationPicker({ relationPickerScopeId });
const { setRecordPickerSearchFilter, setRecordPickerPreselectedId } =
useRecordPicker({ recordPickerInstanceId });
const debouncedSetSearchFilter = useDebouncedCallback(
setRelationPickerSearchFilter,
setRecordPickerSearchFilter,
100,
{
leading: true,
@ -20,14 +20,14 @@ export const useEntitySelectSearch = ({
const resetSearchFilter = () => {
debouncedSetSearchFilter('');
setRelationPickerPreselectedId('');
setRecordPickerPreselectedId('');
};
const handleSearchFilterChange = (
event: React.ChangeEvent<HTMLInputElement>,
) => {
debouncedSetSearchFilter(event.currentTarget.value);
setRelationPickerPreselectedId('');
setRecordPickerPreselectedId('');
};
return {

34
packages/twenty-front/src/modules/object-record/relation-picker/hooks/useRelationPicker.ts
View File

@ -1,34 +0,0 @@
import { useSetRecoilState } from 'recoil';
import { useRelationPickerScopedStates } from '@/object-record/relation-picker/hooks/internal/useRelationPickerScopedStates';
import { RelationPickerScopeInternalContext } from '@/object-record/relation-picker/scopes/scope-internal-context/RelationPickerScopeInternalContext';
import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
type useRelationPickeProps = {
relationPickerScopeId?: string;
};
export const useRelationPicker = (props?: useRelationPickeProps) => {
const scopeId = useAvailableScopeIdOrThrow(
RelationPickerScopeInternalContext,
props?.relationPickerScopeId,
);
const { relationPickerSearchFilterState, relationPickerPreselectedIdState } =
useRelationPickerScopedStates({
relationPickerScopedId: scopeId,
});
const setRelationPickerSearchFilter = useSetRecoilState(
relationPickerSearchFilterState,
);
const setRelationPickerPreselectedId = useSetRecoilState(
relationPickerPreselectedIdState,
);
return {
setRelationPickerSearchFilter,
setRelationPickerPreselectedId,
};
};

36
packages/twenty-front/src/modules/object-record/relation-picker/hooks/useRelationPickerEntitiesOptions.ts
View File

@ -1,36 +0,0 @@
import { useRecoilValue } from 'recoil';
import { useRelationPickerScopedStates } from '@/object-record/relation-picker/hooks/internal/useRelationPickerScopedStates';
import { RelationPickerScopeInternalContext } from '@/object-record/relation-picker/scopes/scope-internal-context/RelationPickerScopeInternalContext';
import { useFilteredSearchEntityQuery } from '@/search/hooks/useFilteredSearchEntityQuery';
import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
export const useRelationPickerEntitiesOptions = ({
relationObjectNameSingular,
selectedRelationRecordIds = [],
excludedRelationRecordIds = [],
}: {
relationObjectNameSingular: string;
selectedRelationRecordIds?: string[];
excludedRelationRecordIds?: string[];
}) => {
const scopeId = useAvailableScopeIdOrThrow(
RelationPickerScopeInternalContext,
);
const { relationPickerSearchFilterState } = useRelationPickerScopedStates({
relationPickerScopedId: scopeId,
});
const relationPickerSearchFilter = useRecoilValue(
relationPickerSearchFilterState,
);
const entities = useFilteredSearchEntityQuery({
searchFilter: relationPickerSearchFilter,
selectedIds: selectedRelationRecordIds,
excludeRecordIds: excludedRelationRecordIds,
objectNameSingular: relationObjectNameSingular,
});
return { entities, relationPickerSearchFilter };
};

21
packages/twenty-front/src/modules/object-record/relation-picker/scopes/RelationPickerScope.tsx
View File

@ -1,21 +0,0 @@
import { ReactNode } from 'react';
import { RelationPickerScopeInternalContext } from '@/object-record/relation-picker/scopes/scope-internal-context/RelationPickerScopeInternalContext';
type RelationPickerScopeProps = {
children: ReactNode;
relationPickerScopeId: string;
};
export const RelationPickerScope = ({
children,
relationPickerScopeId,
}: RelationPickerScopeProps) => {
return (
<RelationPickerScopeInternalContext.Provider
value={{ scopeId: relationPickerScopeId }}
>
{children}
</RelationPickerScopeInternalContext.Provider>
);
};

7
packages/twenty-front/src/modules/object-record/relation-picker/scopes/scope-internal-context/RelationPickerScopeInternalContext.ts
View File

@ -1,7 +0,0 @@
import { createScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-internal/utils/createScopeInternalContext';
import { RecoilComponentStateKey } from '@/ui/utilities/state/component-state/types/RecoilComponentStateKey';
type RelationPickerScopeInternalContextProps = RecoilComponentStateKey;
export const RelationPickerScopeInternalContext =
createScopeInternalContext<RelationPickerScopeInternalContextProps>();

4
packages/twenty-front/src/modules/object-record/relation-picker/states/contexts/RecordPickerComponentInstanceContext.ts Normal file
View File

@ -0,0 +1,4 @@
import { createComponentInstanceContext } from '@/ui/utilities/state/component-state/utils/createComponentInstanceContext';
export const RecordPickerComponentInstanceContext =
createComponentInstanceContext();

5
packages/twenty-front/src/modules/object-record/relation-picker/states/recoil-scope-contexts/RelationPickerRecoilScopeContext.ts
View File

@ -1,5 +0,0 @@
import { createContext } from 'react';
export const RelationPickerRecoilScopeContext = createContext<string | null>(
'relation-picker-context',
);

10
packages/twenty-front/src/modules/object-record/relation-picker/states/recordPickerPreselectedIdComponentState.ts Normal file
View File

@ -0,0 +1,10 @@
import { RecordPickerComponentInstanceContext } from '@/object-record/relation-picker/states/contexts/RecordPickerComponentInstanceContext';
import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
export const recordPickerPreselectedIdComponentState = createComponentStateV2<
string | undefined
>({
key: 'recordPickerPreselectedIdComponentState',
defaultValue: undefined,
componentInstanceContext: RecordPickerComponentInstanceContext,
});

9
packages/twenty-front/src/modules/object-record/relation-picker/states/recordPickerSearchFilterComponentState.ts Normal file
View File

@ -0,0 +1,9 @@
import { RecordPickerComponentInstanceContext } from '@/object-record/relation-picker/states/contexts/RecordPickerComponentInstanceContext';
import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
export const recordPickerSearchFilterComponentState =
createComponentStateV2<string>({
key: 'recordPickerSearchFilterComponentState',
defaultValue: '',
componentInstanceContext: RecordPickerComponentInstanceContext,
});

8
packages/twenty-front/src/modules/object-record/relation-picker/states/relationPickerPreselectedIdScopedState.ts
View File

@ -1,8 +0,0 @@
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
export const relationPickerPreselectedIdScopedState = createComponentState<
string | undefined
>({
key: 'relationPickerPreselectedIdScopedState',
defaultValue: undefined,
});

7
packages/twenty-front/src/modules/object-record/relation-picker/states/relationPickerSearchFilterScopedState.ts
View File

@ -1,7 +0,0 @@
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
export const relationPickerSearchFilterScopedState =
createComponentState<string>({
key: 'relationPickerSearchFilterScopedState',
defaultValue: '',
});

10
packages/twenty-front/src/modules/object-record/relation-picker/states/searchQueryComponentState.ts Normal file
View File

@ -0,0 +1,10 @@
import { RecordPickerComponentInstanceContext } from '@/object-record/relation-picker/states/contexts/RecordPickerComponentInstanceContext';
import { SearchQuery } from '@/object-record/relation-picker/types/SearchQuery';
import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
export const searchQueryComponentState =
createComponentStateV2<SearchQuery | null>({
key: 'searchQueryComponentState',
defaultValue: null,
componentInstanceContext: RecordPickerComponentInstanceContext,
});

7
packages/twenty-front/src/modules/object-record/relation-picker/states/searchQueryScopedState.ts
View File

@ -1,7 +0,0 @@
import { SearchQuery } from '@/object-record/relation-picker/types/SearchQuery';
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
export const searchQueryScopedState = createComponentState<SearchQuery | null>({
key: 'searchQueryScopedState',
defaultValue: null,
});

10
packages/twenty-front/src/modules/object-record/relation-picker/types/EntitiesForMultipleEntitySelect.ts
View File

@ -1,10 +0,0 @@
import { EntityForSelect } from '@/object-record/relation-picker/types/EntityForSelect';
export type EntitiesForMultipleEntitySelect<
CustomEntityForSelect extends EntityForSelect,
> = {
selectedEntities: CustomEntityForSelect[];
filteredSelectedEntities: CustomEntityForSelect[];
entitiesToSelect: CustomEntityForSelect[];
loading: boolean;
};

2
packages/twenty-front/src/modules/object-record/relation-picker/types/EntityForSelect.ts → packages/twenty-front/src/modules/object-record/relation-picker/types/RecordForSelect.ts
View File

@ -1,6 +1,6 @@
import { ObjectRecord } from '@/object-record/types/ObjectRecord';
import { ObjectRecordIdentifier } from '@/object-record/types/ObjectRecordIdentifier';
export type EntityForSelect = ObjectRecordIdentifier & {
export type RecordForSelect = ObjectRecordIdentifier & {
record: ObjectRecord;
};

10
packages/twenty-front/src/modules/object-record/relation-picker/types/RecordsForMultipleRecordSelect.ts Normal file
View File

@ -0,0 +1,10 @@
import { RecordForSelect } from '@/object-record/relation-picker/types/RecordForSelect';
export type RecordsForMultipleRecordSelect<
CustomRecordForSelect extends RecordForSelect,
> = {
selectedRecords: CustomRecordForSelect[];
filteredSelectedRecords: CustomRecordForSelect[];
recordsToSelect: CustomRecordForSelect[];
loading: boolean;
};

31
packages/twenty-front/src/modules/object-record/relation-picker/utils/getRelationPickerScopedStates.ts
View File

@ -1,31 +0,0 @@
import { relationPickerPreselectedIdScopedState } from '@/object-record/relation-picker/states/relationPickerPreselectedIdScopedState';
import { relationPickerSearchFilterScopedState } from '@/object-record/relation-picker/states/relationPickerSearchFilterScopedState';
import { searchQueryScopedState } from '@/object-record/relation-picker/states/searchQueryScopedState';
import { getScopedStateDeprecated } from '@/ui/utilities/recoil-scope/utils/getScopedStateDeprecated';
export const getRelationPickerScopedStates = ({
relationPickerScopeId,
}: {
relationPickerScopeId: string;
}) => {
const searchQueryState = getScopedStateDeprecated(
searchQueryScopedState,
relationPickerScopeId,
);
const relationPickerPreselectedIdState = getScopedStateDeprecated(
relationPickerPreselectedIdScopedState,
relationPickerScopeId,
);
const relationPickerSearchFilterState = getScopedStateDeprecated(
relationPickerSearchFilterScopedState,
relationPickerScopeId,
);
return {
relationPickerSearchFilterState,
relationPickerPreselectedIdState,
searchQueryState,
};
};

6
packages/twenty-front/src/modules/object-record/select/hooks/useRecordsForSelect.ts
View File

@ -16,14 +16,14 @@ export const useRecordsForSelect = ({
sortOrder = 'AscNullsLast',
selectedIds,
limit,
excludeRecordIds = [],
excludedRecordIds = [],
objectNameSingular,
}: {
searchFilterText: string;
sortOrder?: OrderBy;
selectedIds: string[];
limit?: number;
excludeRecordIds?: string[];
excludedRecordIds?: string[];
objectNameSingular: string;
}) => {
const { mapToObjectRecordIdentifier } = useMapToObjectRecordIdentifier({
@ -91,7 +91,7 @@ export const useRecordsForSelect = ({
skip: !selectedIds.length,
});
const notFilterIds = [...selectedIds, ...excludeRecordIds];
const notFilterIds = [...selectedIds, ...excludedRecordIds];
const notFilter = notFilterIds.length
? { not: { id: { in: notFilterIds } } }
: undefined;

4
packages/twenty-front/src/modules/object-record/utils/getRecordChipGenerators.ts
View File

@ -47,13 +47,13 @@ export const getRecordChipGenerators = (
labelIdentifierFieldMetadataItem?.id === fieldMetadataItem.id;
const currentObjectNameSingular = objectMetadataItem.nameSingular;
const fieldRelationObjectNameSingular =
const fieldObjectNameSingular =
fieldMetadataItem.relationDefinition?.targetObjectMetadata
.nameSingular ?? undefined;
const objectNameSingularToFind = isLabelIdentifier
? currentObjectNameSingular
: fieldRelationObjectNameSingular;
: fieldObjectNameSingular;
const objectMetadataItemToUse = objectMetadataItems.find(
(objectMetadataItem) =>

4
packages/twenty-front/src/modules/search/hooks/__mocks__/useFilteredSearchEntityQuery.ts → packages/twenty-front/src/modules/search/hooks/__mocks__/useFilteredSearchRecordQuery.ts
View File

@ -144,7 +144,7 @@ export const query = gql`
`;
export const variables = {
entitiesToSelect: {
recordsToSelect: {
limit: 10,
filter: {
and: [
@ -154,7 +154,7 @@ export const variables = {
},
orderBy: [{ name: 'AscNullsLast' }],
},
filteredSelectedEntities: {
filteredSelectedRecords: {
limit: 60,
filter: {
and: [

24
packages/twenty-front/src/modules/search/hooks/__tests__/useFilteredSearchEntityQuery.test.tsx → packages/twenty-front/src/modules/search/hooks/__tests__/useFilteredSearchRecordQuery.test.tsx
View File

@ -5,7 +5,7 @@ import { RecoilRoot, useSetRecoilState } from 'recoil';
import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
import { EntitiesForMultipleEntitySelect } from '@/object-record/relation-picker/types/EntitiesForMultipleEntitySelect';
import { RecordsForMultipleRecordSelect } from '@/object-record/relation-picker/types/RecordsForMultipleRecordSelect';
import { SnackBarProviderScope } from '@/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope';
import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
@ -13,14 +13,14 @@ import {
query,
responseData,
variables,
} from '../__mocks__/useFilteredSearchEntityQuery';
import { useFilteredSearchEntityQuery } from '../useFilteredSearchEntityQuery';
} from '../__mocks__/useFilteredSearchRecordQuery';
import { useFilteredSearchRecordQuery } from '../useFilteredSearchRecordQuery';
const mocks = [
{
request: {
query,
variables: variables.entitiesToSelect,
variables: variables.recordsToSelect,
},
result: jest.fn(() => ({
data: {
@ -31,7 +31,7 @@ const mocks = [
{
request: {
query,
variables: variables.filteredSelectedEntities,
variables: variables.filteredSelectedRecords,
},
result: jest.fn(() => ({
data: {
@ -62,7 +62,7 @@ const Wrapper = ({ children }: { children: ReactNode }) => (
</RecoilRoot>
);
describe('useFilteredSearchEntityQuery', () => {
describe('useFilteredSearchRecordQuery', () => {
it('returns the correct result when everything is provided', async () => {
const { result } = renderHook(
() => {
@ -79,10 +79,10 @@ describe('useFilteredSearchEntityQuery', () => {
setMetadataItems(generatedMockObjectMetadataItems);
return useFilteredSearchEntityQuery({
return useFilteredSearchRecordQuery({
selectedIds: ['1'],
limit: 10,
excludeRecordIds: ['2'],
excludedRecordIds: ['2'],
objectNameSingular: 'person',
searchFilter: 'Entity',
});
@ -90,10 +90,10 @@ describe('useFilteredSearchEntityQuery', () => {
{ wrapper: Wrapper },
);
const expectedResult: EntitiesForMultipleEntitySelect<any> = {
selectedEntities: [],
filteredSelectedEntities: [],
entitiesToSelect: [],
const expectedResult: RecordsForMultipleRecordSelect<any> = {
selectedRecords: [],
filteredSelectedRecords: [],
recordsToSelect: [],
loading: true,
};

22
packages/twenty-front/src/modules/search/hooks/useFilteredSearchEntityQuery.ts → packages/twenty-front/src/modules/search/hooks/useFilteredSearchRecordQuery.ts
View File

@ -1,27 +1,27 @@
import { useMapToObjectRecordIdentifier } from '@/object-metadata/hooks/useMapToObjectRecordIdentifier';
import { DEFAULT_SEARCH_REQUEST_LIMIT } from '@/object-record/constants/DefaultSearchRequestLimit';
import { useSearchRecords } from '@/object-record/hooks/useSearchRecords';
import { EntitiesForMultipleEntitySelect } from '@/object-record/relation-picker/types/EntitiesForMultipleEntitySelect';
import { EntityForSelect } from '@/object-record/relation-picker/types/EntityForSelect';
import { RecordForSelect } from '@/object-record/relation-picker/types/RecordForSelect';
import { RecordsForMultipleRecordSelect } from '@/object-record/relation-picker/types/RecordsForMultipleRecordSelect';
import { ObjectRecord } from '@/object-record/types/ObjectRecord';
import { isDefined } from '~/utils/isDefined';
// TODO: use this for all search queries, because we need selectedEntities and entitiesToSelect each time we want to search
// TODO: use this for all search queries, because we need selectedRecords and recordsToSelect each time we want to search
// Filtered entities to select are
export const useFilteredSearchEntityQuery = ({
export const useFilteredSearchRecordQuery = ({
selectedIds,
limit,
excludeRecordIds = [],
excludedRecordIds = [],
objectNameSingular,
searchFilter,
}: {
selectedIds: string[];
limit?: number;
excludeRecordIds?: string[];
excludedRecordIds?: string[];
objectNameSingular: string;
searchFilter?: string;
}): EntitiesForMultipleEntitySelect<EntityForSelect> => {
}): RecordsForMultipleRecordSelect<RecordForSelect> => {
const { mapToObjectRecordIdentifier } = useMapToObjectRecordIdentifier({
objectNameSingular,
});
@ -50,7 +50,7 @@ export const useFilteredSearchEntityQuery = ({
searchInput: searchFilter,
});
const notFilterIds = [...selectedIds, ...excludeRecordIds];
const notFilterIds = [...selectedIds, ...excludedRecordIds];
const notFilter = notFilterIds.length
? { not: { id: { in: notFilterIds } } }
: undefined;
@ -63,11 +63,11 @@ export const useFilteredSearchEntityQuery = ({
});
return {
selectedEntities: selectedRecords.map(mappingFunction).filter(isDefined),
filteredSelectedEntities: filteredSelectedRecords
selectedRecords: selectedRecords.map(mappingFunction).filter(isDefined),
filteredSelectedRecords: filteredSelectedRecords
.map(mappingFunction)
.filter(isDefined),
entitiesToSelect: recordsToSelect.map(mappingFunction).filter(isDefined),
recordsToSelect: recordsToSelect.map(mappingFunction).filter(isDefined),
loading:
recordsToSelectLoading ||
filteredSelectedRecordsLoading ||

11
packages/twenty-front/src/testing/decorators/RecordPickerDecorator.tsx Normal file
View File

@ -0,0 +1,11 @@
import { Decorator } from '@storybook/react';
import { RecordPickerComponentInstanceContext } from '@/object-record/relation-picker/states/contexts/RecordPickerComponentInstanceContext';
export const RecordPickerDecorator: Decorator = (Story) => (
<RecordPickerComponentInstanceContext.Provider
value={{ instanceId: 'record-picker' }}
>
<Story />
</RecordPickerComponentInstanceContext.Provider>
);

9
packages/twenty-front/src/testing/decorators/RelationPickerDecorator.tsx
View File

@ -1,9 +0,0 @@
import { Decorator } from '@storybook/react';
import { RelationPickerScope } from '@/object-record/relation-picker/scopes/RelationPickerScope';
export const RelationPickerDecorator: Decorator = (Story) => (
<RelationPickerScope relationPickerScopeId="relation-picker">
<Story />
</RelationPickerScope>
);