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

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

@@ -0,0 +1,46 @@
+import { MessageThread } from '@/activities/emails/types/MessageThread';
+import { SharedDropdownMenu } from '@/ui/layout/dropdown/components/SharedDropdownMenu';
+
+export const EmailThreadMembersChip = ({
+  messageThread,
+}: {
+  messageThread: MessageThread | null;
+}) => {
+  const renderChip = () => {
+    if (!messageThread) {
+      return null;
+    }
+    const isEveryone = messageThread?.everyone;
+    const numberOfMessageThreadMembers =
+      messageThread.messageThreadMember.length;
+    switch (isEveryone) {
+      case false:
+        if (numberOfMessageThreadMembers === 1) {
+          return (
+            <SharedDropdownMenu
+              label="Private"
+              messageThreadMembers={messageThread.messageThreadMember}
+            />
+          );
+        } else {
+          return (
+            <SharedDropdownMenu
+              messageThreadMembers={messageThread.messageThreadMember}
+            />
+          );
+        }
+      case true:
+        return (
+          <SharedDropdownMenu
+            label="Everyone"
+            messageThreadMembers={messageThread.messageThreadMember}
+            everyone={true}
+          />
+        );
+      default:
+        return null;
+    }
+  };
+
+  return <>{renderChip()} </>;
+};

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

@@ -26,5 +26,16 @@ export const fetchAllThreadMessagesOperationSignatureFactory: RecordGqlOperation
       text: true,
       receivedAt: true,
       messageParticipants: true,
+      messageThread: {
+        id: true,
+        everyone: true,
+        messageThreadMember: {
+          workspaceMember: {
+            id: true,
+            name: true,
+            avatarUrl: true,
+          },
+        },
+      },
     },
   });

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

@@ -1,5 +1,6 @@
+import { useEffect } from 'react';
 import styled from '@emotion/styled';
-import { useRecoilCallback } from 'recoil';
+import { useRecoilCallback, useSetRecoilState } from 'recoil';
 
 import { CustomResolverFetchMoreLoader } from '@/activities/components/CustomResolverFetchMoreLoader';
 import { EmailLoader } from '@/activities/emails/components/EmailLoader';
@@ -10,6 +11,7 @@ import { useRightDrawerEmailThread } from '@/activities/emails/right-drawer/hook
 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`
@@ -34,8 +36,17 @@ const getVisibleMessages = (messages: EmailThreadMessageType[]) =>
   });
 
 export const RightDrawerEmailThread = () => {
+  const setMessageThread = useSetRecoilState(messageThreadState);
+
   const { thread, messages, fetchMoreMessages, loading } =
     useRightDrawerEmailThread();
+  const visibleMessages = getVisibleMessages(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(

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

@@ -1,4 +1,5 @@
 import { EmailThreadMessageParticipant } from '@/activities/emails/types/EmailThreadMessageParticipant';
+import { MessageThread } from '@/activities/emails/types/MessageThread';
 
 export type EmailThreadMessage = {
   id: string;
@@ -7,5 +8,6 @@ export type EmailThreadMessage = {
   subject: string;
   messageThreadId: string;
   messageParticipants: EmailThreadMessageParticipant[];
+  messageThread: MessageThread;
   __typename: 'EmailThreadMessage';
 };

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

@@ -0,0 +1,7 @@
+import { MessageThreadMember } from '@/activities/emails/types/MessageThreadMember';
+
+export type MessageThread = {
+  id: string;
+  everyone: boolean;
+  messageThreadMember: MessageThreadMember[];
+};

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

@@ -0,0 +1,5 @@
+import { WorkspaceMember } from '@/workspace-member/types/WorkspaceMember';
+
+export type MessageThreadMember = {
+  workspaceMember: WorkspaceMember;
+};

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

@@ -0,0 +1,21 @@
+import styled from '@emotion/styled';
+import { useRecoilValue } from 'recoil';
+
+import { EmailThreadMembersChip } from '@/activities/emails/components/EmailThreadMembersChip';
+import { messageThreadState } from '@/ui/layout/right-drawer/states/messageThreadState';
+
+const StyledButtonContainer = styled.div`
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  margin-left: ${({ theme }) => theme.spacing(3)};
+`;
+
+export const MessageThreadMembersBar = () => {
+  const messageThread = useRecoilValue(messageThreadState);
+  return (
+    <StyledButtonContainer>
+      <EmailThreadMembersChip messageThread={messageThread} />
+    </StyledButtonContainer>
+  );
+};

packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelectMenuItemsWithSearch.tsx

@@ -3,13 +3,12 @@ import {
   SingleEntitySelectMenuItems,
   SingleEntitySelectMenuItemsProps,
 } from '@/object-record/relation-picker/components/SingleEntitySelectMenuItems';
+import { useEntitySelectSearch } from '@/object-record/relation-picker/hooks/useEntitySelectSearch';
 import { useRelationPickerEntitiesOptions } from '@/object-record/relation-picker/hooks/useRelationPickerEntitiesOptions';
 import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { isDefined } from '~/utils/isDefined';
 
-import { useEntitySelectSearch } from '../hooks/useEntitySelectSearch';
-
 export type SingleEntitySelectMenuItemsWithSearchProps = {
   excludedRelationRecordIds?: string[];
   onCreate?: ((searchInput?: string) => void) | (() => void);

packages/twenty-front/src/modules/ui/layout/dropdown/components/SharedDropdownMenu.tsx

@@ -0,0 +1,132 @@
+import { useTheme } from '@emotion/react';
+import { offset } from '@floating-ui/react';
+import {
+  Avatar,
+  Chip,
+  ChipVariant,
+  IconChevronDown,
+  IconPlus,
+  IconUserCircle,
+  MultiChip,
+} from 'twenty-ui';
+
+import { MessageThreadMember } from '@/activities/emails/types/MessageThreadMember';
+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 { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
+import { MenuItemSelectAvatar } from '@/ui/navigation/menu-item/components/MenuItemSelectAvatar';
+import { getImageAbsoluteURIOrBase64 } from '~/utils/image/getImageAbsoluteURIOrBase64';
+
+export const SharedDropdownMenu = ({
+  messageThreadMembers,
+  label = '',
+  everyone = false,
+}: {
+  messageThreadMembers: MessageThreadMember[] | null;
+  label?: string;
+  everyone?: boolean;
+}) => {
+  const messageThreadMembersAvatarUrls = messageThreadMembers?.map(
+    (member) => member.workspaceMember.avatarUrl,
+  );
+
+  const messageThreadMembersNames = messageThreadMembers?.map(
+    (member) => member.workspaceMember?.name.firstName,
+  );
+
+  const theme = useTheme();
+
+  const { closeDropdown } = useDropdown('message-thread-share');
+
+  const handleAddParticipantClick = () => {
+    closeDropdown();
+  };
+
+  const handleParticipantClick = () => {
+    closeDropdown();
+  };
+
+  return (
+    <Dropdown
+      dropdownId={'message-thread-share'}
+      clickableComponent={
+        everyone ? (
+          <Chip
+            label="Everyone"
+            variant={ChipVariant.Highlighted}
+            leftComponent={<IconUserCircle size={theme.icon.size.md} />}
+            rightComponent={<IconChevronDown size={theme.icon.size.sm} />}
+          />
+        ) : messageThreadMembers?.length === 1 ? (
+          <Chip
+            label={label}
+            variant={ChipVariant.Highlighted}
+            leftComponent={
+              <Avatar
+                avatarUrl={getImageAbsoluteURIOrBase64(
+                  messageThreadMembersAvatarUrls?.[0],
+                )}
+                entityId={messageThreadMembers?.[0].workspaceMember.id}
+                placeholder={messageThreadMembersNames?.[0]}
+                size="md"
+                type={'rounded'}
+              />
+            }
+            rightComponent={<IconChevronDown size={theme.icon.size.sm} />}
+          />
+        ) : (
+          <MultiChip
+            names={messageThreadMembersNames ?? []}
+            RightIcon={IconChevronDown}
+            avatarUrls={
+              (messageThreadMembersAvatarUrls?.filter(Boolean) as string[]) ??
+              []
+            }
+          />
+        )
+      }
+      dropdownComponents={
+        <DropdownMenu width="160px" z-index={offset(1)}>
+          <DropdownMenuItemsContainer>
+            {messageThreadMembers?.map((member) => (
+              <MenuItemSelectAvatar
+                key={member.workspaceMember.id}
+                selected={false}
+                testId="menu-item"
+                onClick={handleParticipantClick}
+                text={
+                  member.workspaceMember.name.firstName +
+                  ' ' +
+                  member.workspaceMember.name.lastName
+                }
+                avatar={
+                  <Avatar
+                    avatarUrl={getImageAbsoluteURIOrBase64(
+                      member.workspaceMember.avatarUrl,
+                    )}
+                    entityId={member.workspaceMember.id}
+                    placeholder={member.workspaceMember.name.firstName}
+                    size="md"
+                    type={'rounded'}
+                  />
+                }
+              />
+            ))}
+            <DropdownMenuSeparator />
+            <MenuItem
+              LeftIcon={IconPlus}
+              onClick={handleAddParticipantClick}
+              text="Add participant"
+            />
+          </DropdownMenuItemsContainer>
+        </DropdownMenu>
+      }
+      dropdownHotkeyScope={{
+        scope: 'message-thread-share',
+      }}
+    />
+  );
+};

packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBar.tsx

@@ -4,6 +4,7 @@ import { useRecoilState, useRecoilValue } from 'recoil';
 import { Chip, ChipAccent, ChipSize, useIcons } from 'twenty-ui';
 
 import { ActivityActionBar } from '@/activities/right-drawer/components/ActivityActionBar';
+import { MessageThreadMembersBar } from '@/activities/right-drawer/components/MessageThreadMembersBar';
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { viewableRecordNameSingularState } from '@/object-record/record-right-drawer/states/viewableRecordNameSingularState';
 import { RightDrawerTopBarCloseButton } from '@/ui/layout/right-drawer/components/RightDrawerTopBarCloseButton';
@@ -103,6 +104,9 @@ export const RightDrawerTopBar = ({ page }: { page: RightDrawerPages }) => {
         </StyledMinimizeTopBarTitleContainer>
       )}
       <StyledTopBarWrapper>
+        {page === RightDrawerPages.ViewEmailThread && (
+          <MessageThreadMembersBar />
+        )}
         {!isMobile && !isRightDrawerMinimized && (
           <RightDrawerTopBarMinimizeButton />
         )}

packages/twenty-front/src/modules/ui/layout/right-drawer/states/messageThreadState.ts

@@ -0,0 +1,8 @@
+import { createState } from 'twenty-ui';
+
+import { MessageThread } from '@/activities/emails/types/MessageThread';
+
+export const messageThreadState = createState<MessageThread | null>({
+  key: 'messageThreadState',
+  defaultValue: null,
+});

packages/twenty-server/src/database/commands/data-seed-dev-workspace.command.ts

@@ -21,6 +21,7 @@ import { seedMessageChannel } from 'src/database/typeorm-seeds/workspace/message
 import { seedMessageChannelMessageAssociation } from 'src/database/typeorm-seeds/workspace/message-channel-message-associations';
 import { seedMessageParticipant } from 'src/database/typeorm-seeds/workspace/message-participants';
 import { seedMessageThread } from 'src/database/typeorm-seeds/workspace/message-threads';
+import { seedMessageThreadMember } from 'src/database/typeorm-seeds/workspace/message-thread-members';
 import { viewPrefillData } from 'src/engine/workspace-manager/standard-objects-prefill-data/view';
 import { seedCalendarEvents } from 'src/database/typeorm-seeds/workspace/calendar-events';
 import { seedCalendarChannels } from 'src/database/typeorm-seeds/workspace/calendar-channel';
@@ -131,6 +132,10 @@ export class DataSeedWorkspaceCommand extends CommandRunner {
                 entityManager,
                 dataSourceMetadata.schema,
               );
+              await seedMessageThreadMember(
+                entityManager,
+                dataSourceMetadata.schema,
+              );
               await seedMessage(entityManager, dataSourceMetadata.schema);
               await seedMessageChannel(
                 entityManager,