Upgrade relation picker (#8795)

- 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

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

@@ -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,15 +273,17 @@ export const ActivityTargetInlineCellEditMode = ({
       deleteManyActivityTargets,
       isActivityInCreateMode,
       objectMetadataItemActivityTarget,
-      relationPickerScopeId,
+      recordPickerInstanceId,
       upsertActivity,
       activityObjectNameSingular,
     ],
   );
 
   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>
   );
 };

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

@@ -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;
         }
       }

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

@@ -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 />

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

@@ -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>
       )}

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

@@ -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);

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

@@ -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 =

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

@@ -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 },

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

@@ -14,15 +14,15 @@ export const RelationFromManyFieldDisplay = () => {
 
   const { fieldName, objectMetadataNameSingular } = fieldDefinition.metadata;
 
-  const relationObjectNameSingular =
+  const objectNameSingular =
     fieldDefinition?.metadata.relationObjectMetadataNameSingular;
 
   const { activityTargetObjectRecords } = useActivityTargetObjectRecords(
     undefined,
     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}
             />
           ))}

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

@@ -5,15 +5,15 @@ 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';
 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();

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

@@ -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,19 +51,21 @@ 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}
           onChange={updateRelation}
           onCreate={createNewRecordAndOpenRightDrawer}
           dropdownPlacement={dropdownPlacement}
         />
-      </RelationPickerScope>
+      </RecordPickerComponentInstanceContext.Provider>
     </>
   );
 };