Refactor RelationFieldDisplay to eliminate dependency on non-ui components (#1949)

* job done

* removed example type

* removed unused temporary type

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

@@ -170,6 +170,7 @@ export const CompanyBoardCard = () => {
                     type: viewField.type,
                     metadata: viewField.metadata,
                     buttonIcon: viewField.buttonIcon,
+                    entityChipDisplayMapper: viewField.entityChipDisplayMapper,
                   },
                   useUpdateEntityMutation: useUpdateOnePipelineProgressMutation,
                   hotkeyScope: InlineCellHotkeyScope.InlineCell,

front/src/modules/companies/constants/companiesAvailableColumnDefinitions.tsx

@@ -25,6 +25,7 @@ import {
   IconUsers,
 } from '@/ui/icon/index';
 import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
+import { User } from '~/generated/graphql';
 
 export const companiesAvailableColumnDefinitions: ColumnDefinition<FieldMetadata>[] =
   [
@@ -76,6 +77,13 @@ export const companiesAvailableColumnDefinitions: ColumnDefinition<FieldMetadata
       isVisible: true,
       infoTooltipContent:
         'Your team member responsible for managing the company account.',
+      entityChipDisplayMapper: (dataObject: User) => {
+        return {
+          name: dataObject?.displayName,
+          pictureUrl: dataObject?.avatarUrl ?? undefined,
+          avatarType: 'rounded',
+        };
+      },
     } satisfies ColumnDefinition<FieldRelationMetadata>,
     {
       key: 'createdAt',

front/src/modules/people/constants/peopleAvailableColumnDefinitions.tsx

@@ -23,6 +23,8 @@ import {
   IconUser,
 } from '@/ui/icon/index';
 import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
+import { Company } from '~/generated/graphql';
+import { getLogoUrlFromDomainName } from '~/utils';
 
 export const peopleAvailableColumnDefinitions: ColumnDefinition<FieldMetadata>[] =
   [
@@ -71,6 +73,13 @@ export const peopleAvailableColumnDefinitions: ColumnDefinition<FieldMetadata>[]
         relationType: Entity.Company,
       },
       infoTooltipContent: 'Contact’s company.',
+      entityChipDisplayMapper: (dataObject: Company) => {
+        return {
+          name: dataObject?.name,
+          pictureUrl: getLogoUrlFromDomainName(dataObject?.domainName),
+          avatarType: 'squared',
+        };
+      },
     } satisfies ColumnDefinition<FieldRelationMetadata>,
     {
       key: 'phone',

front/src/modules/pipeline/constants/pipelineAvailableFieldDefinitions.tsx

@@ -14,6 +14,7 @@ import {
   IconUser,
 } from '@/ui/icon';
 import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
+import { Person } from '~/generated/graphql';
 
 export const pipelineAvailableFieldDefinitions: BoardFieldDefinition<FieldMetadata>[] =
   [
@@ -70,5 +71,12 @@ export const pipelineAvailableFieldDefinitions: BoardFieldDefinition<FieldMetada
       isVisible: true,
       buttonIcon: IconPencil,
       infoTooltipContent: 'Primary contact within the company.',
+      entityChipDisplayMapper: (dataObject: Person) => {
+        return {
+          name: dataObject?.displayName,
+          pictureUrl: dataObject?.avatarUrl ?? undefined,
+          avatarType: 'rounded',
+        };
+      },
     } satisfies BoardFieldDefinition<FieldRelationMetadata>,
   ];

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

@@ -1,52 +1,24 @@
-import { CompanyChip } from '@/companies/components/CompanyChip';
+import { EntityChip } from '@/ui/chip/components/EntityChip';
-import { PersonChip } from '@/people/components/PersonChip';
-import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
-import { UserChip } from '@/users/components/UserChip';
-import { getLogoUrlFromDomainName } from '~/utils';
-import { logError } from '~/utils/logError';
 
 import { useRelationField } from '../../hooks/useRelationField';
 
 export const RelationFieldDisplay = () => {
-  const { fieldDefinition, fieldValue } = useRelationField();
+  const { fieldValue, fieldDefinition } = useRelationField();
-
+  const { entityChipDisplayMapper } = fieldDefinition;
-  switch (fieldDefinition.metadata.relationType) {
+  if (!entityChipDisplayMapper) {
-    case Entity.Person: {
+    throw new Error(
-      return (
+      "Missing entityChipDisplayMapper in FieldContext. Please provide it in the FieldContextProvider's value prop.",
-        <PersonChip
+    );
-          id={fieldValue?.id ?? ''}
-          name={fieldValue?.displayName ?? ''}
-          pictureUrl={fieldValue?.avatarUrl ?? ''}
-        />
-      );
-    }
-    case Entity.User: {
-      return (
-        <UserChip
-          id={fieldValue?.id ?? ''}
-          name={fieldValue?.displayName ?? ''}
-          pictureUrl={fieldValue?.avatarUrl ?? ''}
-        />
-      );
-    }
-    case Entity.Company: {
-      return (
-        <CompanyChip
-          id={fieldValue?.id ?? ''}
-          name={fieldValue?.name ?? ''}
-          pictureUrl={
-            fieldValue?.domainName
-              ? getLogoUrlFromDomainName(fieldValue.domainName)
-              : ''
-          }
-        />
-      );
-    }
-    default:
-      logError(
-        `Unknown relation type: "${fieldDefinition.metadata.relationType}"
-          in RelationFieldDisplay`,
-      );
-      return <> </>;
   }
+  const { name, pictureUrl, avatarType } =
+    entityChipDisplayMapper?.(fieldValue);
+
+  return (
+    <EntityChip
+      entityId={fieldValue?.id}
+      name={name}
+      pictureUrl={pictureUrl}
+      avatarType={avatarType}
+    />
+  );
 };

front/src/modules/ui/field/types/FieldDefinition.ts

@@ -1,4 +1,5 @@
 import { IconComponent } from '@/ui/icon/types/IconComponent';
+import { AvatarType } from '@/users/components/Avatar';
 
 import { FieldMetadata } from './FieldMetadata';
 import { FieldType } from './FieldType';
@@ -12,4 +13,9 @@ export type FieldDefinition<T extends FieldMetadata> = {
   buttonIcon?: IconComponent;
   basePathToShowPage?: string;
   infoTooltipContent?: string;
+  entityChipDisplayMapper?: (dataObject: any) => {
+    name: string;
+    pictureUrl?: string;
+    avatarType: AvatarType;
+  };
 };