Share an email thread to workspace members chip and dropdown (#4199)

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

@@ -0,0 +1,16 @@
+import { MessageThreadSubscribersDropdownButton } from '@/activities/emails/components/MessageThreadSubscribersDropdownButton';
+import { MessageThread } from '@/activities/emails/types/MessageThread';
+
+export const EmailThreadMembersChip = ({
+  messageThread,
+}: {
+  messageThread: MessageThread;
+}) => {
+  const subscribers = messageThread.subscribers ?? [];
+
+  return (
+    <MessageThreadSubscribersDropdownButton
+      messageThreadSubscribers={subscribers}
+    />
+  );
+};

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

@@ -0,0 +1,40 @@
+import { MessageThreadSubscriberDropdownAddSubscriberMenuItem } from '@/activities/emails/components/MessageThreadSubscriberDropdownAddSubscriberMenuItem';
+import { MessageThreadSubscriber } from '@/activities/emails/types/MessageThreadSubscriber';
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
+import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
+import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
+import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
+import { WorkspaceMember } from '@/workspace-member/types/WorkspaceMember';
+
+export const MessageThreadSubscriberDropdownAddSubscriber = ({
+  existingSubscribers,
+}: {
+  existingSubscribers: MessageThreadSubscriber[];
+}) => {
+  const { records: workspaceMembersLeftToAdd } =
+    useFindManyRecords<WorkspaceMember>({
+      objectNameSingular: CoreObjectNameSingular.WorkspaceMember,
+      filter: {
+        not: {
+          id: {
+            in: existingSubscribers.map(
+              ({ workspaceMember }) => workspaceMember.id,
+            ),
+          },
+        },
+      },
+    });
+
+  return (
+    <DropdownMenuItemsContainer>
+      <DropdownMenuSearchInput />
+      <DropdownMenuSeparator />
+      {workspaceMembersLeftToAdd.map((workspaceMember) => (
+        <MessageThreadSubscriberDropdownAddSubscriberMenuItem
+          workspaceMember={workspaceMember}
+        />
+      ))}
+    </DropdownMenuItemsContainer>
+  );
+};

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

@@ -0,0 +1,43 @@
+import { MessageThreadSubscriber } from '@/activities/emails/types/MessageThreadSubscriber';
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
+import { MenuItemAvatar } from '@/ui/navigation/menu-item/components/MenuItemAvatar';
+import { WorkspaceMember } from '@/workspace-member/types/WorkspaceMember';
+import { IconPlus } from 'twenty-ui';
+
+export const MessageThreadSubscriberDropdownAddSubscriberMenuItem = ({
+  workspaceMember,
+}: {
+  workspaceMember: WorkspaceMember;
+}) => {
+  const text = `${workspaceMember.name.firstName} ${workspaceMember.name.lastName}`;
+
+  const { createOneRecord } = useCreateOneRecord<MessageThreadSubscriber>({
+    objectNameSingular: CoreObjectNameSingular.MessageThreadSubscriber,
+  });
+
+  const handleAddButtonClick = () => {
+    createOneRecord({
+      workspaceMember,
+    });
+  };
+
+  return (
+    <MenuItemAvatar
+      avatar={{
+        placeholder: workspaceMember.name.firstName,
+        avatarUrl: workspaceMember.avatarUrl,
+        placeholderColorSeed: workspaceMember.id,
+        size: 'md',
+        type: 'rounded',
+      }}
+      text={text}
+      iconButtons={[
+        {
+          Icon: IconPlus,
+          onClick: handleAddButtonClick,
+        },
+      ]}
+    />
+  );
+};

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

@@ -0,0 +1,80 @@
+import { MessageThreadSubscriber } from '@/activities/emails/types/MessageThreadSubscriber';
+import { isNonEmptyString } from '@sniptt/guards';
+import { useContext } from 'react';
+import {
+  Avatar,
+  AvatarGroup,
+  Chip,
+  ChipVariant,
+  IconChevronDown,
+  ThemeContext,
+} from 'twenty-ui';
+
+const MAX_NUMBER_OF_AVATARS = 3;
+
+export const MessageThreadSubscribersChip = ({
+  messageThreadSubscribers,
+}: {
+  messageThreadSubscribers: MessageThreadSubscriber[];
+}) => {
+  const { theme } = useContext(ThemeContext);
+
+  const numberOfMessageThreadSubscribers = messageThreadSubscribers.length;
+
+  const isOnlyOneSubscriber = numberOfMessageThreadSubscribers === 1;
+
+  const isPrivateThread = isOnlyOneSubscriber;
+
+  const privateLabel = 'Private';
+
+  const susbcriberAvatarUrls = messageThreadSubscribers
+    .map((member) => member.workspaceMember.avatarUrl)
+    .filter(isNonEmptyString);
+
+  const firstAvatarUrl = susbcriberAvatarUrls[0];
+  const firstAvatarColorSeed = messageThreadSubscribers?.[0].workspaceMember.id;
+  const firstAvatarPlaceholder =
+    messageThreadSubscribers?.[0].workspaceMember.name.firstName;
+
+  const subscriberNames = messageThreadSubscribers.map(
+    (member) => member.workspaceMember?.name.firstName,
+  );
+
+  const moreAvatarsLabel =
+    numberOfMessageThreadSubscribers > MAX_NUMBER_OF_AVATARS
+      ? `+${numberOfMessageThreadSubscribers - MAX_NUMBER_OF_AVATARS}`
+      : null;
+
+  const label = isPrivateThread ? privateLabel : moreAvatarsLabel ?? '';
+
+  return (
+    <Chip
+      label={label}
+      variant={ChipVariant.Highlighted}
+      leftComponent={
+        isOnlyOneSubscriber ? (
+          <Avatar
+            avatarUrl={firstAvatarUrl}
+            placeholderColorSeed={firstAvatarColorSeed}
+            placeholder={firstAvatarPlaceholder}
+            size="md"
+            type={'rounded'}
+          />
+        ) : (
+          <AvatarGroup
+            avatars={subscriberNames.map((name, index) => (
+              <Avatar
+                key={name}
+                avatarUrl={susbcriberAvatarUrls[index] ?? ''}
+                placeholder={name}
+                type="rounded"
+              />
+            ))}
+          />
+        )
+      }
+      rightComponent={<IconChevronDown size={theme.icon.size.sm} />}
+      clickable
+    />
+  );
+};

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

@@ -0,0 +1,110 @@
+import { offset } from '@floating-ui/react';
+import { IconMinus, IconPlus } from 'twenty-ui';
+
+import { MessageThreadSubscriberDropdownAddSubscriber } from '@/activities/emails/components/MessageThreadSubscriberDropdownAddSubscriber';
+import { MessageThreadSubscribersChip } from '@/activities/emails/components/MessageThreadSubscribersChip';
+import { MessageThreadSubscriber } from '@/activities/emails/types/MessageThreadSubscriber';
+import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
+import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
+import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
+import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
+import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useListenRightDrawerClose } from '@/ui/layout/right-drawer/hooks/useListenRightDrawerClose';
+import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
+import { MenuItemAvatar } from '@/ui/navigation/menu-item/components/MenuItemAvatar';
+import { useState } from 'react';
+
+export const MESSAGE_THREAD_SUBSCRIBER_DROPDOWN_ID =
+  'message-thread-subscriber';
+
+export const MessageThreadSubscribersDropdownButton = ({
+  messageThreadSubscribers,
+}: {
+  messageThreadSubscribers: MessageThreadSubscriber[];
+}) => {
+  const [isAddingSubscriber, setIsAddingSubscriber] = useState(false);
+
+  const { closeDropdown } = useDropdown(MESSAGE_THREAD_SUBSCRIBER_DROPDOWN_ID);
+
+  const mockSubscribers = [
+    ...messageThreadSubscribers,
+    ...messageThreadSubscribers,
+    ...messageThreadSubscribers,
+    ...messageThreadSubscribers,
+  ];
+
+  // TODO: implement
+  const handleAddSubscriberClick = () => {
+    setIsAddingSubscriber(true);
+  };
+
+  // TODO: implement
+  const handleRemoveSubscriber = (_subscriber: MessageThreadSubscriber) => {
+    closeDropdown();
+  };
+
+  useListenRightDrawerClose(() => {
+    closeDropdown();
+  });
+
+  return (
+    <Dropdown
+      dropdownId={MESSAGE_THREAD_SUBSCRIBER_DROPDOWN_ID}
+      clickableComponent={
+        <MessageThreadSubscribersChip
+          messageThreadSubscribers={mockSubscribers}
+        />
+      }
+      dropdownComponents={
+        <DropdownMenu width="160px" z-index={offset(1)}>
+          {isAddingSubscriber ? (
+            <MessageThreadSubscriberDropdownAddSubscriber
+              existingSubscribers={messageThreadSubscribers}
+            />
+          ) : (
+            <DropdownMenuItemsContainer>
+              {messageThreadSubscribers?.map((subscriber) => (
+                <MenuItemAvatar
+                  key={subscriber.workspaceMember.id}
+                  testId="menu-item"
+                  onClick={() => {
+                    handleRemoveSubscriber(subscriber);
+                  }}
+                  text={
+                    subscriber.workspaceMember.name.firstName +
+                    ' ' +
+                    subscriber.workspaceMember.name.lastName
+                  }
+                  avatar={{
+                    placeholder: subscriber.workspaceMember.name.firstName,
+                    avatarUrl: subscriber.workspaceMember.avatarUrl,
+                    placeholderColorSeed: subscriber.workspaceMember.id,
+                    size: 'md',
+                    type: 'rounded',
+                  }}
+                  iconButtons={[
+                    {
+                      Icon: IconMinus,
+                      onClick: () => {
+                        handleRemoveSubscriber(subscriber);
+                      },
+                    },
+                  ]}
+                />
+              ))}
+              <DropdownMenuSeparator />
+              <MenuItem
+                LeftIcon={IconPlus}
+                onClick={handleAddSubscriberClick}
+                text="Add subscriber"
+              />
+            </DropdownMenuItemsContainer>
+          )}
+        </DropdownMenu>
+      }
+      dropdownHotkeyScope={{
+        scope: MESSAGE_THREAD_SUBSCRIBER_DROPDOWN_ID,
+      }}
+    />
+  );
+};

packages/twenty-front/src/modules/activities/emails/graphql/operation-signatures/factories/fetchAllThreadMessagesOperationSignatureFactory.ts

@@ -2,7 +2,13 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSi
 import { RecordGqlOperationSignatureFactory } from '@/object-record/graphql/types/RecordGqlOperationSignatureFactory';
 
 export const fetchAllThreadMessagesOperationSignatureFactory: RecordGqlOperationSignatureFactory =
-  ({ messageThreadId }: { messageThreadId: string }) => ({
+  ({
+    messageThreadId,
+    isSubscribersEnabled,
+  }: {
+    messageThreadId: string;
+    isSubscribersEnabled: boolean;
+  }) => ({
     objectNameSingular: CoreObjectNameSingular.Message,
     variables: {
       filter: {
@@ -25,6 +31,18 @@ export const fetchAllThreadMessagesOperationSignatureFactory: RecordGqlOperation
       subject: true,
       text: true,
       receivedAt: true,
+      messageThread: {
+        id: true,
+        subscribers: isSubscribersEnabled
+          ? {
+              workspaceMember: {
+                id: true,
+                name: true,
+                avatarUrl: true,
+              },
+            }
+          : undefined,
+      },
       messageParticipants: {
         id: true,
         role: true,

packages/twenty-front/src/modules/activities/emails/right-drawer/components/RightDrawerEmailThread.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
-import { useRecoilCallback } from 'recoil';
+import { useEffect, useMemo } from 'react';
+import { useRecoilCallback, useSetRecoilState } from 'recoil';
 
 import { CustomResolverFetchMoreLoader } from '@/activities/components/CustomResolverFetchMoreLoader';
 import { EmailLoader } from '@/activities/emails/components/EmailLoader';
@@ -8,8 +9,8 @@ import { EmailThreadMessage } from '@/activities/emails/components/EmailThreadMe
 import { IntermediaryMessages } from '@/activities/emails/right-drawer/components/IntermediaryMessages';
 import { useRightDrawerEmailThread } from '@/activities/emails/right-drawer/hooks/useRightDrawerEmailThread';
 import { emailThreadIdWhenEmailThreadWasClosedState } from '@/activities/emails/states/lastViewableEmailThreadIdState';
-import { EmailThreadMessage as EmailThreadMessageType } from '@/activities/emails/types/EmailThreadMessage';
 import { RIGHT_DRAWER_CLICK_OUTSIDE_LISTENER_ID } from '@/ui/layout/right-drawer/constants/RightDrawerClickOutsideListener';
+import { messageThreadState } from '@/ui/layout/right-drawer/states/messageThreadState';
 import { useClickOutsideListener } from '@/ui/utilities/pointer-event/hooks/useClickOutsideListener';
 
 const StyledContainer = styled.div`
@@ -22,21 +23,31 @@ const StyledContainer = styled.div`
   position: relative;
 `;
 
-const getVisibleMessages = (messages: EmailThreadMessageType[]) =>
-  messages.filter(({ messageParticipants }) => {
-    const from = messageParticipants.find(
-      (participant) => participant.role === 'from',
-    );
-    const receivers = messageParticipants.filter(
-      (participant) => participant.role !== 'from',
-    );
-    return from && receivers.length > 0;
-  });
-
 export const RightDrawerEmailThread = () => {
+  const setMessageThread = useSetRecoilState(messageThreadState);
+
   const { thread, messages, fetchMoreMessages, loading } =
     useRightDrawerEmailThread();
 
+  const visibleMessages = useMemo(() => {
+    return messages.filter(({ messageParticipants }) => {
+      const from = messageParticipants.find(
+        (participant) => participant.role === 'from',
+      );
+      const receivers = messageParticipants.filter(
+        (participant) => participant.role !== 'from',
+      );
+      return from && receivers.length > 0;
+    });
+  }, [messages]);
+
+  useEffect(() => {
+    if (!visibleMessages[0]?.messageThread) {
+      return;
+    }
+    setMessageThread(visibleMessages[0]?.messageThread);
+  });
+
   const { useRegisterClickOutsideListenerCallback } = useClickOutsideListener(
     RIGHT_DRAWER_CLICK_OUTSIDE_LISTENER_ID,
   );
@@ -60,7 +71,6 @@ export const RightDrawerEmailThread = () => {
     return null;
   }
 
-  const visibleMessages = getVisibleMessages(messages);
   const visibleMessagesCount = visibleMessages.length;
   const is5OrMoreMessages = visibleMessagesCount >= 5;
   const firstMessages = visibleMessages.slice(