Complete labelIdentifer, relationPicker first implementation (#2618)

* Fix first column main identifier

* Fixes

front/src/modules/companies/components/CompanyBoardCard.tsx

@@ -239,7 +239,7 @@ export const CompanyBoardCard = () => {
                   value={{
                     entityId: boardCardId,
                     recoilScopeId: boardCardId + viewField.fieldMetadataId,
-                    isMainIdentifier: false,
+                    isLabelIdentifier: false,
                     fieldDefinition: {
                       fieldMetadataId: viewField.fieldMetadataId,
                       label: viewField.label,

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

@@ -2,9 +2,22 @@ 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';
+import { getLogoUrlFromDomainName } from '~/utils';
 
 export const ObjectMetadataItemsRelationPickerEffect = () => {
-  const { setIdentifiersMapper } = useRelationPicker();
+  const { setIdentifiersMapper, setSearchQuery } = useRelationPicker();
+
+  const computeFilterFields = (relationPickerType: string) => {
+    if (relationPickerType === 'company') {
+      return ['name'];
+    }
+
+    if (['workspaceMember', 'person'].includes(relationPickerType)) {
+      return ['name.firstName', 'name.lastName'];
+    }
+
+    return ['name'];
+  };
 
   const identifierMapper: IdentifiersMapper = (
     record: any,
@@ -18,13 +31,15 @@ export const ObjectMetadataItemsRelationPickerEffect = () => {
       return {
         id: record.id,
         name: record.name,
-        avatarUrl: record.avatarUrl,
+        avatarUrl: getLogoUrlFromDomainName(record.domainName ?? ''),
         avatarType: 'squared',
         record: record,
       };
     }
 
-    if (objectMetadataItemSingularName === 'workspaceMember') {
+    if (
+      ['workspaceMember', 'person'].includes(objectMetadataItemSingularName)
+    ) {
       return {
         id: record.id,
         name: record.name.firstName + ' ' + record.name.lastName,
@@ -34,6 +49,16 @@ export const ObjectMetadataItemsRelationPickerEffect = () => {
       };
     }
 
+    if (['opportunity'].includes(objectMetadataItemSingularName)) {
+      return {
+        id: record.id,
+        name: record.company.name,
+        avatarUrl: record.avatarUrl,
+        avatarType: 'rounded',
+        record: record,
+      };
+    }
+
     return {
       id: record.id,
       name: record.name,
@@ -45,7 +70,10 @@ export const ObjectMetadataItemsRelationPickerEffect = () => {
 
   useEffect(() => {
     setIdentifiersMapper(() => identifierMapper);
-  }, [setIdentifiersMapper]);
+    setSearchQuery({
+      computeFilterFields,
+    });
+  }, [setIdentifiersMapper, setSearchQuery]);
 
   return <></>;
 };

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

@@ -22,13 +22,16 @@ export const useComputeDefinitionsFromFieldMetadata = (
 
   const columnDefinitions: ColumnDefinition<FieldMetadata>[] = useMemo(
     () =>
-      activeFieldMetadataItems.map((field, index) =>
+      objectMetadataItem
-        formatFieldMetadataItemAsColumnDefinition({
+        ? activeFieldMetadataItems.map((field, index) =>
-          position: index,
+            formatFieldMetadataItemAsColumnDefinition({
-          field,
+              position: index,
-        }),
+              field,
-      ),
+              objectMetadataItem,
-    [activeFieldMetadataItems],
+            }),
+          )
+        : [],
+    [activeFieldMetadataItems, objectMetadataItem],
   );
 
   const filterDefinitions = formatFieldMetadataItemsAsFilterDefinitions({

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

@@ -1,21 +0,0 @@
-import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
-import { Nullable } from '~/types/Nullable';
-
-export const useObjectMainIdentifier = (
-  objectMetadataItem?: Nullable<ObjectMetadataItem>,
-) => {
-  if (!objectMetadataItem) {
-    return {};
-  }
-
-  const labelIdentifierFieldMetadataId = objectMetadataItem.fields.find(
-    ({ name }) => name === 'name',
-  )?.id;
-
-  const basePathToShowPage = `/object/${objectMetadataItem.nameSingular}/`;
-
-  return {
-    labelIdentifierFieldMetadataId,
-    basePathToShowPage,
-  };
-};

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

@@ -56,7 +56,15 @@ export const useObjectMetadataItem = ({
     objectMetadataItem,
   });
 
+  const labelIdentifierFieldMetadataId = objectMetadataItem?.fields.find(
+    ({ name }) => name === 'name',
+  )?.id;
+
+  const basePathToShowPage = `/object/${objectMetadataItem?.nameSingular}/`;
+
   return {
+    labelIdentifierFieldMetadataId,
+    basePathToShowPage,
     objectMetadataItem,
     objectNotFoundInMetadata,
     findManyQuery,

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

@@ -1,3 +1,4 @@
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { parseFieldRelationType } from '@/object-metadata/utils/parseFieldRelationType';
 import { FieldMetadata } from '@/ui/object/field/types/FieldMetadata';
 import { ColumnDefinition } from '@/ui/object/record-table/types/ColumnDefinition';
@@ -9,9 +10,11 @@ import { parseFieldType } from './parseFieldType';
 export const formatFieldMetadataItemAsColumnDefinition = ({
   position,
   field,
+  objectMetadataItem,
 }: {
   position: number;
   field: FieldMetadataItem;
+  objectMetadataItem: ObjectMetadataItem;
 }): ColumnDefinition<FieldMetadata> => {
   const relationObjectMetadataItem =
     field.toRelationMetadata?.fromObjectMetadata;
@@ -26,9 +29,11 @@ export const formatFieldMetadataItemAsColumnDefinition = ({
       fieldName: field.name,
       placeHolder: field.label,
       relationType: parseFieldRelationType(field),
-      objectMetadataNameSingular:
+      relationObjectMetadataNameSingular:
         relationObjectMetadataItem?.nameSingular ?? '',
-      objectMetadataNamePlural: relationObjectMetadataItem?.namePlural ?? '',
+      relationObjectMetadataNamePlural:
+        relationObjectMetadataItem?.namePlural ?? '',
+      objectMetadataNameSingular: objectMetadataItem.nameSingular ?? '',
     },
     iconName: field.icon ?? 'Icon123',
     isVisible: true,

front/src/modules/object-record/components/RecordShowPage.tsx

@@ -166,11 +166,12 @@ export const RecordShowPage = () => {
                           value={{
                             entityId: object.id,
                             recoilScopeId: object.id + metadataField.id,
-                            isMainIdentifier: false,
+                            isLabelIdentifier: false,
                             fieldDefinition:
                               formatFieldMetadataItemAsColumnDefinition({
                                 field: metadataField,
                                 position: index,
+                                objectMetadataItem,
                               }),
                             useUpdateEntityMutation: useUpdateOneObjectMutation,
                             hotkeyScope: InlineCellHotkeyScope.InlineCell,

front/src/modules/object-record/components/RecordTableEffect.tsx

@@ -1,7 +1,6 @@
 import { useEffect } from 'react';
 
 import { useComputeDefinitionsFromFieldMetadata } from '@/object-metadata/hooks/useComputeDefinitionsFromFieldMetadata';
-import { useObjectMainIdentifier } from '@/object-metadata/hooks/useObjectMainIdentifier';
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { useRecordTableContextMenuEntries } from '@/object-record/hooks/useRecordTableContextMenuEntries';
 import { filterAvailableTableColumns } from '@/object-record/utils/filterAvailableTableColumns';
@@ -17,13 +16,14 @@ export const RecordTableEffect = () => {
     setObjectMetadataConfig,
   } = useRecordTable();
 
-  const { objectMetadataItem } = useObjectMetadataItem({
+  const {
+    objectMetadataItem,
+    basePathToShowPage,
+    labelIdentifierFieldMetadataId,
+  } = useObjectMetadataItem({
     objectNamePlural,
   });
 
-  const { basePathToShowPage, labelIdentifierFieldMetadataId } =
-    useObjectMainIdentifier(objectMetadataItem);
-
   const { columnDefinitions, filterDefinitions, sortDefinitions } =
     useComputeDefinitionsFromFieldMetadata(objectMetadataItem);
 

front/src/modules/settings/data-model/components/SettingsObjectFieldPreview.tsx

@@ -90,11 +90,12 @@ export const SettingsObjectFieldPreview = ({
     objectMetadataId,
   });
 
-  const { defaultValue: relationDefaultValue } = useRelationFieldPreview({
+  const { defaultValue: relationDefaultValue, relationObjectMetadataItem } =
-    relationObjectMetadataId,
+    useRelationFieldPreview({
-    skipDefaultValue:
+      relationObjectMetadataId,
-      fieldMetadata.type !== FieldMetadataType.Relation || hasValue,
+      skipDefaultValue:
-  });
+        fieldMetadata.type !== FieldMetadataType.Relation || hasValue,
+    });
 
   const defaultValue =
     fieldMetadata.type === FieldMetadataType.Relation
@@ -137,7 +138,7 @@ export const SettingsObjectFieldPreview = ({
         <FieldContext.Provider
           value={{
             entityId,
-            isMainIdentifier: false,
+            isLabelIdentifier: false,
             fieldDefinition: {
               type: parseFieldType(fieldMetadata.type),
               iconName: 'FieldIcon',
@@ -145,6 +146,8 @@ export const SettingsObjectFieldPreview = ({
               label: fieldMetadata.label,
               metadata: {
                 fieldName,
+                relationObjectMetadataNameSingular:
+                  relationObjectMetadataItem?.nameSingular,
               },
             },
             hotkeyScope: 'field-preview',

front/src/modules/settings/data-model/hooks/useFieldPreview.ts

@@ -26,7 +26,10 @@ export const useFieldPreview = ({
   const fieldName = fieldMetadata.id
     ? objectMetadataItem?.fields.find(({ id }) => id === fieldMetadata.id)?.name
     : undefined;
-  const value = fieldName ? firstRecord?.[fieldName] : undefined;
+  const value =
+    fieldMetadata.type !== 'RELATION' && fieldName
+      ? firstRecord?.[fieldName]
+      : undefined;
 
   return {
     entityId: firstRecord?.id || `${objectMetadataId}-no-records`,

front/src/modules/settings/data-model/hooks/useRelationFieldPreview.ts

@@ -1,5 +1,6 @@
 import { useObjectMetadataItemForSettings } from '@/object-metadata/hooks/useObjectMetadataItemForSettings';
 import { useFindManyObjectRecords } from '@/object-record/hooks/useFindManyObjectRecords';
+import { capitalize } from '~/utils/string/capitalize';
 
 export const useRelationFieldPreview = ({
   relationObjectMetadataId,
@@ -20,6 +21,9 @@ export const useRelationFieldPreview = ({
   });
 
   return {
-    defaultValue: relationObjects?.[0],
+    relationObjectMetadataItem,
+    defaultValue: relationObjects?.[0] ?? {
+      name: capitalize(relationObjectMetadataItem?.nameSingular ?? ''),
+    },
   };
 };

front/src/modules/ui/input/components/internal/relation-picker/RelationPicker.tsx

@@ -37,7 +37,8 @@ export const RelationPicker = ({
   }, [initialSearchFilter, setRelationPickerSearchFilter]);
 
   const { findManyQuery } = useObjectMetadataItem({
-    objectNameSingular: fieldDefinition.metadata.objectMetadataNameSingular,
+    objectNameSingular:
+      fieldDefinition.metadata.relationObjectMetadataNameSingular,
   });
 
   const useFindManyQuery = (options: any) => useQuery(findManyQuery, options);
@@ -49,8 +50,8 @@ export const RelationPicker = ({
     filters: [
       {
         fieldNames:
-          searchQuery?.filterFields?.(
+          searchQuery?.computeFilterFields?.(
-            fieldDefinition.metadata.objectMetadataNameSingular,
+            fieldDefinition.metadata.relationObjectMetadataNameSingular,
           ) ?? [],
         filter: relationPickerSearchFilter,
       },
@@ -59,10 +60,10 @@ export const RelationPicker = ({
     mappingFunction: (record: any) =>
       identifiersMapper?.(
         record,
-        fieldDefinition.metadata.objectMetadataNameSingular,
+        fieldDefinition.metadata.relationObjectMetadataNameSingular,
       ),
     selectedIds: recordId ? [recordId] : [],
-    objectNamePlural: fieldDefinition.metadata.objectMetadataNamePlural,
+    objectNamePlural: fieldDefinition.metadata.relationObjectMetadataNamePlural,
   });
 
   const handleEntitySelected = async (selectedUser: any | null | undefined) => {

front/src/modules/ui/input/components/internal/relation-picker/types/SearchQuery.tsx

@@ -1,3 +1,3 @@
 export type SearchQuery = {
-  filterFields: (relationPickerType: string) => string[];
+  computeFilterFields: (relationPickerType: string) => string[];
 };

front/src/modules/ui/object/field/components/FieldDisplay.tsx

@@ -1,5 +1,6 @@
 import { useContext } from 'react';
 
+import { ChipFieldDisplay } from '@/ui/object/field/meta-types/display/components/ChipFieldDisplay';
 import { FullNameFieldDisplay } from '@/ui/object/field/meta-types/display/components/FullNameFieldDisplay';
 import { LinkFieldDisplay } from '@/ui/object/field/meta-types/display/components/LinkFieldDisplay';
 import { RelationFieldDisplay } from '@/ui/object/field/meta-types/display/components/RelationFieldDisplay';
@@ -24,8 +25,14 @@ import { isFieldRelation } from '../types/guards/isFieldRelation';
 import { isFieldText } from '../types/guards/isFieldText';
 
 export const FieldDisplay = () => {
-  const { fieldDefinition } = useContext(FieldContext);
+  const { fieldDefinition, isLabelIdentifier } = useContext(FieldContext);
 
+  if (
+    isLabelIdentifier &&
+    (isFieldText(fieldDefinition) || isFieldFullName(fieldDefinition))
+  ) {
+    return <ChipFieldDisplay />;
+  }
   return (
     <>
       {isFieldRelation(fieldDefinition) ? (

front/src/modules/ui/object/field/contexts/FieldContext.ts

@@ -10,12 +10,7 @@ export type GenericFieldContextType = {
   entityId: string;
   recoilScopeId?: string;
   hotkeyScope: string;
-  isMainIdentifier: boolean;
+  isLabelIdentifier: boolean;
-  mainIdentifierMapper?: (record: any) => {
-    name: string;
-    avatarUrl?: string;
-    avatarType: string;
-  };
   basePathToShowPage?: string;
 };
 

front/src/modules/ui/object/field/meta-types/__stories__/FieldContextProvider.tsx

@@ -18,7 +18,7 @@ export const FieldContextProvider = ({
     <FieldContext.Provider
       value={{
         entityId: entityId ?? '1',
-        isMainIdentifier: false,
+        isLabelIdentifier: false,
         recoilScopeId: '1',
         hotkeyScope: 'hotkey-scope',
         fieldDefinition,

front/src/modules/ui/object/field/meta-types/display/components/ChipFieldDisplay.tsx

@@ -1,10 +1,24 @@
+import { EntityChip } from '@/ui/display/chip/components/EntityChip';
+import { useChipField } from '@/ui/object/field/meta-types/hooks/useChipField';
+
 export const ChipFieldDisplay = () => {
-  // const { avatarFieldValue, contentFieldValue, entityId } = useChipField();
+  const {
-  // return (
+    record,
-  //   <ChipDisplay
+    entityId,
-  //     displayName={contentFieldValue}
+    identifiersMapper,
-  //     avatarUrlValue={avatarFieldValue}
+    objectNameSingular,
-  //     entityId={entityId}
+    basePathToShowPage,
-  //   />
+  } = useChipField();
-  // );
+
+  const identifiers = identifiersMapper?.(record, objectNameSingular ?? '');
+
+  return (
+    <EntityChip
+      name={identifiers?.name ?? ''}
+      avatarUrl={identifiers?.avatarUrl}
+      avatarType={identifiers?.avatarType}
+      entityId={entityId}
+      linkToEntity={basePathToShowPage + entityId}
+    />
+  );
 };

front/src/modules/ui/object/field/meta-types/display/components/DoubleTextChipFieldDisplay.tsx

@@ -1,11 +0,0 @@
-export const DoubleTextChipFieldDisplay = () => {
-  // const {} = useFullNameField();
-  // const content = [firstValue, secondValue].filter(Boolean).join(' ');
-  // return (
-  //   <ChipDisplay
-  //     displayName={content}
-  //     avatarUrlValue={avatarUrl}
-  //     entityId={entityId}
-  //   />
-  // );
-};

front/src/modules/ui/object/field/meta-types/display/components/RelationFieldDisplay.tsx

@@ -13,7 +13,7 @@ export const RelationFieldDisplay = () => {
 
   const objectIdentifiers = identifiersMapper(
     fieldValue,
-    fieldDefinition.metadata.objectMetadataNameSingular,
+    fieldDefinition.metadata.relationObjectMetadataNameSingular,
   );
 
   return (

front/src/modules/ui/object/field/meta-types/display/components/__stories__/DateFieldDisplay.stories.tsx

@@ -26,7 +26,7 @@ const meta: Meta = {
       <FieldContext.Provider
         value={{
           entityId: '',
-          isMainIdentifier: false,
+          isLabelIdentifier: false,
           fieldDefinition: {
             fieldMetadataId: 'date',
             label: 'Date',

front/src/modules/ui/object/field/meta-types/display/components/__stories__/EmailFieldDisplay.stories.tsx

@@ -25,7 +25,7 @@ const meta: Meta = {
       <FieldContext.Provider
         value={{
           entityId: '',
-          isMainIdentifier: false,
+          isLabelIdentifier: false,
           fieldDefinition: {
             fieldMetadataId: 'email',
             label: 'Email',

front/src/modules/ui/object/field/meta-types/display/components/__stories__/NumberFieldDisplay.stories.tsx

@@ -24,7 +24,7 @@ const meta: Meta = {
       <FieldContext.Provider
         value={{
           entityId: '',
-          isMainIdentifier: false,
+          isLabelIdentifier: false,
           fieldDefinition: {
             fieldMetadataId: 'number',
             label: 'Number',

front/src/modules/ui/object/field/meta-types/display/components/__stories__/PhoneFieldDisplay.stories.tsx

@@ -25,7 +25,7 @@ const meta: Meta = {
       <FieldContext.Provider
         value={{
           entityId: '',
-          isMainIdentifier: false,
+          isLabelIdentifier: false,
           fieldDefinition: {
             fieldMetadataId: 'phone',
             label: 'Phone',

front/src/modules/ui/object/field/meta-types/display/components/__stories__/TextFieldDisplay.stories.tsx

@@ -24,7 +24,7 @@ const meta: Meta = {
       <FieldContext.Provider
         value={{
           entityId: '',
-          isMainIdentifier: false,
+          isLabelIdentifier: false,
           fieldDefinition: {
             fieldMetadataId: 'text',
             label: 'Text',

front/src/modules/ui/object/field/meta-types/hooks/useChipField.ts

@@ -0,0 +1,31 @@
+import { useContext } from 'react';
+import { useRecoilValue } from 'recoil';
+
+import { useRelationPicker } from '@/ui/input/components/internal/relation-picker/hooks/useRelationPicker';
+import { entityFieldsFamilyState } from '@/ui/object/field/states/entityFieldsFamilyState';
+import { isFieldFullName } from '@/ui/object/field/types/guards/isFieldFullName';
+import { isFieldText } from '@/ui/object/field/types/guards/isFieldText';
+
+import { FieldContext } from '../../contexts/FieldContext';
+
+export const useChipField = () => {
+  const { entityId, fieldDefinition, basePathToShowPage } =
+    useContext(FieldContext);
+
+  const objectNameSingular =
+    isFieldText(fieldDefinition) || isFieldFullName(fieldDefinition)
+      ? fieldDefinition.metadata.objectMetadataNameSingular
+      : undefined;
+
+  const record = useRecoilValue<any | null>(entityFieldsFamilyState(entityId));
+
+  const { identifiersMapper } = useRelationPicker();
+
+  return {
+    basePathToShowPage,
+    entityId,
+    objectNameSingular,
+    record,
+    identifiersMapper,
+  };
+};

front/src/modules/ui/object/field/types/FieldMetadata.ts

@@ -9,6 +9,7 @@ export type FieldBooleanMetadata = {
 };
 
 export type FieldTextMetadata = {
+  objectMetadataNameSingular: string;
   placeHolder: string;
   fieldName: string;
 };
@@ -36,6 +37,7 @@ export type FieldCurrencyMetadata = {
 };
 
 export type FieldFullNameMetadata = {
+  objectMetadataNameSingular: string;
   placeHolder: string;
   fieldName: string;
 };
@@ -64,8 +66,8 @@ export type FieldRelationMetadata = {
   fieldName: string;
   useEditButton?: boolean;
   relationType?: FieldDefinitionRelationType;
-  objectMetadataNameSingular: string;
+  relationObjectMetadataNameSingular: string;
-  objectMetadataNamePlural: string;
+  relationObjectMetadataNamePlural: string;
 };
 
 export type FieldMetadata =

front/src/modules/ui/object/record-table/components/RecordTableCell.tsx

@@ -60,7 +60,8 @@ export const RecordTableCell = ({ cellIndex }: { cellIndex: number }) => {
               fieldDefinition: columnDefinition,
               useUpdateEntityMutation: () => [updateEntityMutation, {}],
               hotkeyScope: customHotkeyScope,
-              isMainIdentifier:
+              basePathToShowPage: objectMetadataConfig?.basePathToShowPage,
+              isLabelIdentifier:
                 columnDefinition.fieldMetadataId ===
                 objectMetadataConfig?.labelIdentifierFieldMetadataId,
             }}