Add record chip for sender and add receivers (#3629)

* Add record chip for sender and add receivers

* Build enum for roles

* Rename var and use string literal

---------

Co-authored-by: Thomas Trompette <thomast@twenty.com>

packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessage.tsx

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 
 import { EmailThreadMessageBody } from '@/activities/emails/components/EmailThreadMessageBody';
 import { EmailThreadMessageBodyPreview } from '@/activities/emails/components/EmailThreadMessageBodyPreview';
+import { EmailThreadMessageReceivers } from '@/activities/emails/components/EmailThreadMessageReceivers';
 import { EmailThreadMessageSender } from '@/activities/emails/components/EmailThreadMessageSender';
 import { EmailThreadMessageParticipant } from '@/activities/emails/types/EmailThreadMessageParticipant';
 
@@ -27,28 +28,6 @@ type EmailThreadMessageProps = {
   participants: EmailThreadMessageParticipant[];
 };
 
-const getDisplayNameFromParticipant = (
-  participant: EmailThreadMessageParticipant,
-) => {
-  if (participant.person) {
-    return `${participant.person?.name?.firstName} ${participant.person?.name?.lastName}`;
-  }
-
-  if (participant.workspaceMember) {
-    return `${participant.workspaceMember?.name?.firstName} ${participant.workspaceMember?.name?.lastName}`;
-  }
-
-  if (participant.displayName) {
-    return participant.displayName;
-  }
-
-  if (participant.handle) {
-    return participant.handle;
-  }
-
-  return 'Unknown';
-};
-
 export const EmailThreadMessage = ({
   body,
   sentAt,
@@ -57,25 +36,19 @@ export const EmailThreadMessage = ({
   const [isOpen, setIsOpen] = useState(false);
 
   const from = participants.find((participant) => participant.role === 'from');
-  const to = participants.filter((participant) => participant.role === 'to');
+  const receivers = participants.filter(
+    (participant) => participant.role !== 'from',
+  );
 
-  if (!from || to.length === 0) {
+  if (!from || receivers.length === 0) {
     return null;
   }
 
-  const displayName = getDisplayNameFromParticipant(from);
-
-  const avatarUrl =
-    from.person?.avatarUrl ?? from.workspaceMember?.avatarUrl ?? '';
-
   return (
     <StyledThreadMessage onClick={() => setIsOpen(!isOpen)}>
       <StyledThreadMessageHeader>
-        <EmailThreadMessageSender
+        <EmailThreadMessageSender sender={from} sentAt={sentAt} />
-          displayName={displayName}
+        {isOpen && <EmailThreadMessageReceivers receivers={receivers} />}
-          avatarUrl={avatarUrl}
-          sentAt={sentAt}
-        />
       </StyledThreadMessageHeader>
       {isOpen ? (
         <EmailThreadMessageBody body={body} />

packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageReceivers.tsx

@@ -0,0 +1,33 @@
+import styled from '@emotion/styled';
+
+import { EmailThreadMessageParticipant } from '@/activities/emails/types/EmailThreadMessageParticipant';
+import { getDisplayNameFromParticipant } from '@/activities/emails/utils/getDisplayNameFromParticipant';
+import { OverflowingTextWithTooltip } from '@/ui/display/tooltip/OverflowingTextWithTooltip';
+
+type EmailThreadMessageReceiversProps = {
+  receivers: EmailThreadMessageParticipant[];
+};
+
+const StyledThreadMessageReceivers = styled.span`
+  color: ${({ theme }) => theme.font.color.tertiary};
+  display: flex;
+  font-size: ${({ theme }) => theme.font.size.xs};
+  padding: ${({ theme }) => theme.spacing(2, 0, 0, 1)};
+  width: 50%;
+`;
+
+export const EmailThreadMessageReceivers = ({
+  receivers,
+}: EmailThreadMessageReceiversProps) => {
+  const displayedReceivers = receivers
+    .map((receiver) => getDisplayNameFromParticipant({ participant: receiver }))
+    .join(', ');
+
+  const body = `to: ${displayedReceivers}`;
+
+  return (
+    <StyledThreadMessageReceivers>
+      <OverflowingTextWithTooltip text={body} />
+    </StyledThreadMessageReceivers>
+  );
+};

packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageSender.tsx

@@ -1,6 +1,10 @@
 import React from 'react';
 import styled from '@emotion/styled';
 
+import { EmailThreadMessageParticipant } from '@/activities/emails/types/EmailThreadMessageParticipant';
+import { getDisplayNameFromParticipant } from '@/activities/emails/utils/getDisplayNameFromParticipant';
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { RecordChip } from '@/object-record/components/RecordChip';
 import { Avatar } from '@/users/components/Avatar';
 import { beautifyPastDateRelativeToNow } from '~/utils/date-utils';
 
@@ -32,26 +36,42 @@ const StyledThreadMessageSentAt = styled.div`
 `;
 
 type EmailThreadMessageSenderProps = {
-  displayName: string;
+  sender: EmailThreadMessageParticipant;
-  avatarUrl: string;
   sentAt: string;
 };
 
 export const EmailThreadMessageSender = ({
-  displayName,
+  sender,
-  avatarUrl,
   sentAt,
 }: EmailThreadMessageSenderProps) => {
+  const { person, workspaceMember } = sender;
+
+  const displayName = getDisplayNameFromParticipant({
+    participant: sender,
+    shouldUseFullName: true,
+  });
+
+  const avatarUrl = person?.avatarUrl ?? workspaceMember?.avatarUrl ?? '';
+
   return (
     <StyledEmailThreadMessageSender>
       <StyledEmailThreadMessageSenderUser>
-        <StyledAvatar
+        {person ? (
-          avatarUrl={avatarUrl}
+          <RecordChip
-          type="rounded"
+            objectNameSingular={CoreObjectNameSingular.Person}
-          placeholder={displayName}
+            record={person}
-          size="sm"
+          />
-        />
+        ) : (
-        <StyledSenderName>{displayName}</StyledSenderName>
+          <>
+            <StyledAvatar
+              avatarUrl={avatarUrl}
+              type="rounded"
+              placeholder={displayName}
+              size="sm"
+            />
+            <StyledSenderName>{displayName}</StyledSenderName>
+          </>
+        )}
       </StyledEmailThreadMessageSenderUser>
       <StyledThreadMessageSentAt>
         {beautifyPastDateRelativeToNow(sentAt)}

packages/twenty-front/src/modules/activities/emails/types/EmailParticipantRole.ts

@@ -0,0 +1 @@
+export type EmailParticipantRole = 'from' | 'to' | 'cc' | 'bcc';

packages/twenty-front/src/modules/activities/emails/types/EmailThreadMessageParticipant.ts

@@ -1,10 +1,11 @@
+import { EmailParticipantRole } from '@/activities/emails/types/EmailParticipantRole';
 import { Person } from '@/people/types/Person';
 import { WorkspaceMember } from '@/workspace-member/types/WorkspaceMember';
 
 export type EmailThreadMessageParticipant = {
   displayName: string;
   handle: string;
-  role: string;
+  role: EmailParticipantRole;
   person: Person;
   workspaceMember: WorkspaceMember;
 };

packages/twenty-front/src/modules/activities/emails/utils/getDisplayNameFromParticipant.ts

@@ -0,0 +1,35 @@
+import { EmailThreadMessageParticipant } from '@/activities/emails/types/EmailThreadMessageParticipant';
+
+export const getDisplayNameFromParticipant = ({
+  participant,
+  shouldUseFullName = false,
+}: {
+  participant: EmailThreadMessageParticipant;
+  shouldUseFullName?: boolean;
+}) => {
+  if (participant.person) {
+    return (
+      `${participant.person?.name?.firstName}` +
+      (shouldUseFullName ? ` ${participant.person?.name?.lastName}` : '')
+    );
+  }
+
+  if (participant.workspaceMember) {
+    return (
+      participant.workspaceMember?.name?.firstName +
+      (shouldUseFullName
+        ? ` ${participant.workspaceMember?.name?.lastName}`
+        : '')
+    );
+  }
+
+  if (participant.displayName) {
+    return participant.displayName;
+  }
+
+  if (participant.handle) {
+    return participant.handle;
+  }
+
+  return 'Unknown';
+};