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 <></>;
+};