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

* job done

* removed example type

* removed unused temporary type

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

@@ -1,52 +1,24 @@
-import { CompanyChip } from '@/companies/components/CompanyChip';
-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 { EntityChip } from '@/ui/chip/components/EntityChip';
 
 import { useRelationField } from '../../hooks/useRelationField';
 
 export const RelationFieldDisplay = () => {
-  const { fieldDefinition, fieldValue } = useRelationField();
-
-  switch (fieldDefinition.metadata.relationType) {
-    case Entity.Person: {
-      return (
-        <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 { fieldValue, fieldDefinition } = useRelationField();
+  const { entityChipDisplayMapper } = fieldDefinition;
+  if (!entityChipDisplayMapper) {
+    throw new Error(
+      "Missing entityChipDisplayMapper in FieldContext. Please provide it in the FieldContextProvider's value prop.",
+    );
   }
+  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;
+  };
 };