Introduce a RelationPicker component with a RelationPickerScope (#2617)

Refactor mainIdentifier into scope componetn

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

@@ -1,9 +1,18 @@
+import { ObjectMetadataItemsRelationPickerEffect } from '@/object-metadata/components/ObjectMetadataItemsRelationPickerEffect';
 import { useFindManyObjectMetadataItems } from '@/object-metadata/hooks/useFindManyObjectMetadataItems';
+import { RelationPickerScope } from '@/ui/input/components/internal/relation-picker/scopes/RelationPickerScope';
 
 export const ObjectMetadataItemsProvider = ({
   children,
 }: React.PropsWithChildren) => {
   const { loading } = useFindManyObjectMetadataItems();
 
-  return loading ? <></> : <>{children}</>;
+  return loading ? (
+    <></>
+  ) : (
+    <RelationPickerScope relationPickerScopeId="relation-picker">
+      <ObjectMetadataItemsRelationPickerEffect />
+      {children}
+    </RelationPickerScope>
+  );
 };

front/src/modules/object-metadata/components/ObjectMetadataItemsRelationPickerEffect.tsx

@@ -0,0 +1,51 @@
+import { useEffect } from 'react';
+
+import { useRelationPicker } from '@/ui/input/components/internal/relation-picker/hooks/useRelationPicker';
+import { IdentifiersMapper } from '@/ui/input/components/internal/relation-picker/types/IdentifiersMapper';
+
+export const ObjectMetadataItemsRelationPickerEffect = () => {
+  const { setIdentifiersMapper } = useRelationPicker();
+
+  const identifierMapper: IdentifiersMapper = (
+    record: any,
+    objectMetadataItemSingularName: string,
+  ) => {
+    if (!record) {
+      return;
+    }
+
+    if (objectMetadataItemSingularName === 'company') {
+      return {
+        id: record.id,
+        name: record.name,
+        avatarUrl: record.avatarUrl,
+        avatarType: 'squared',
+        record: record,
+      };
+    }
+
+    if (objectMetadataItemSingularName === 'workspaceMember') {
+      return {
+        id: record.id,
+        name: record.name.firstName + ' ' + record.name.lastName,
+        avatarUrl: record.avatarUrl,
+        avatarType: 'rounded',
+        record: record,
+      };
+    }
+
+    return {
+      id: record.id,
+      name: record.name,
+      avatarUrl: record.avatarUrl,
+      avatarType: 'rounded',
+      record,
+    };
+  };
+
+  useEffect(() => {
+    setIdentifiersMapper(() => identifierMapper);
+  }, [setIdentifiersMapper]);
+
+  return <></>;
+};

front/src/modules/object-metadata/hooks/useObjectMainIdentifier.ts

@@ -1,5 +1,4 @@
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
-import { AvatarType } from '@/users/components/Avatar';
 import { Nullable } from '~/types/Nullable';
 
 export const useObjectMainIdentifier = (
@@ -9,39 +8,14 @@ export const useObjectMainIdentifier = (
     return {};
   }
 
-  const labelIdentifierFieldPaths = ['person', 'workspaceMember'].includes(
-    objectMetadataItem.nameSingular,
-  )
-    ? ['name.firstName', 'name.lastName']
-    : ['name'];
-  const imageIdentifierFormat: AvatarType = ['company'].includes(
-    objectMetadataItem.nameSingular,
-  )
-    ? 'squared'
-    : 'rounded';
-  const imageIdentifierUrlPrefix = ['company'].includes(
-    objectMetadataItem.nameSingular,
-  )
-    ? 'https://favicon.twenty.com/'
-    : '';
-  const imageIdentifierUrlField = ['company'].includes(
-    objectMetadataItem.nameSingular,
-  )
-    ? 'domainName'
-    : 'avatarUrl';
-
-  const mainIdentifierFieldMetadataId = objectMetadataItem.fields.find(
+  const labelIdentifierFieldMetadataId = objectMetadataItem.fields.find(
     ({ name }) => name === 'name',
   )?.id;
 
   const basePathToShowPage = `/object/${objectMetadataItem.nameSingular}/`;
 
   return {
-    labelIdentifierFieldPaths,
-    imageIdentifierUrlField,
-    imageIdentifierUrlPrefix,
-    imageIdentifierFormat,
-    mainIdentifierFieldMetadataId,
+    labelIdentifierFieldMetadataId,
     basePathToShowPage,
   };
 };

front/src/modules/object-metadata/utils/formatFieldMetadataItemAsColumnDefinition.ts

@@ -1,7 +1,6 @@
 import { parseFieldRelationType } from '@/object-metadata/utils/parseFieldRelationType';
 import { FieldMetadata } from '@/ui/object/field/types/FieldMetadata';
 import { ColumnDefinition } from '@/ui/object/record-table/types/ColumnDefinition';
-import { AvatarType } from '@/users/components/Avatar';
 
 import { FieldMetadataItem } from '../types/FieldMetadataItem';
 
@@ -17,27 +16,6 @@ export const formatFieldMetadataItemAsColumnDefinition = ({
   const relationObjectMetadataItem =
     field.toRelationMetadata?.fromObjectMetadata;
 
-  const labelIdentifierFieldPaths = ['person', 'workspaceMember'].includes(
-    relationObjectMetadataItem?.nameSingular ?? '',
-  )
-    ? ['name.firstName', 'name.lastName']
-    : ['name'];
-  const imageIdentifierFormat: AvatarType = ['company'].includes(
-    relationObjectMetadataItem?.nameSingular ?? '',
-  )
-    ? 'squared'
-    : 'rounded';
-  const imageIdentifierUrlPrefix = ['company'].includes(
-    relationObjectMetadataItem?.nameSingular ?? '',
-  )
-    ? 'https://favicon.twenty.com/'
-    : '';
-  const imageIdentifierUrlField = ['company'].includes(
-    relationObjectMetadataItem?.nameSingular ?? '',
-  )
-    ? 'domainName'
-    : 'avatarUrl';
-
   return {
     position,
     fieldMetadataId: field.id,
@@ -47,15 +25,10 @@ export const formatFieldMetadataItemAsColumnDefinition = ({
     metadata: {
       fieldName: field.name,
       placeHolder: field.label,
-      labelIdentifierFieldPaths,
-      imageIdentifierUrlField,
-      imageIdentifierUrlPrefix,
-      imageIdentifierFormat,
       relationType: parseFieldRelationType(field),
-      searchFields: ['name'],
-      objectMetadataNamePlural: relationObjectMetadataItem?.namePlural ?? '',
       objectMetadataNameSingular:
         relationObjectMetadataItem?.nameSingular ?? '',
+      objectMetadataNamePlural: relationObjectMetadataItem?.namePlural ?? '',
     },
     iconName: field.icon ?? 'Icon123',
     isVisible: true,