2929 fetch emails from backend and display them in the UI (#3092)

* sending mock data from the resolver

* add sql raw query to the resolver

* improve query

* fix email component css

* fix query

* css adjustments

* create hard limit for mail display

* fix display name ellipsis

* add service

* fetching email on company page is working

* graphql generate

* move queries into separate files

* add types

* renaming

* add early return

* modified according to comments

* graphql data generate

* fix bug after renaming

* fix issue with mock data

packages/twenty-front/src/generated/graphql.tsx

@@ -350,6 +350,8 @@ export type Query = {
   currentUser: User;
   currentWorkspace: Workspace;
   findWorkspaceFromInviteHash: Workspace;
+  getTimelineThreadsFromCompanyId: Array<TimelineThread>;
+  getTimelineThreadsFromPersonId: Array<TimelineThread>;
   object: Object;
   objects: ObjectConnection;
 };
@@ -369,6 +371,16 @@ export type QueryFindWorkspaceFromInviteHashArgs = {
   inviteHash: Scalars['String'];
 };
 
+
+export type QueryGetTimelineThreadsFromCompanyIdArgs = {
+  companyId: Scalars['String'];
+};
+
+
+export type QueryGetTimelineThreadsFromPersonIdArgs = {
+  personId: Scalars['String'];
+};
+
 export type RefreshToken = {
   __typename?: 'RefreshToken';
   createdAt: Scalars['DateTime'];
@@ -438,6 +450,17 @@ export type Telemetry = {
   enabled: Scalars['Boolean'];
 };
 
+export type TimelineThread = {
+  __typename?: 'TimelineThread';
+  body: Scalars['String'];
+  numberOfMessagesInThread: Scalars['Float'];
+  read: Scalars['Boolean'];
+  receivedAt: Scalars['DateTime'];
+  senderName: Scalars['String'];
+  senderPictureUrl: Scalars['String'];
+  subject: Scalars['String'];
+};
+
 export type TransientToken = {
   __typename?: 'TransientToken';
   transientToken: AuthToken;
@@ -630,6 +653,20 @@ export type RelationEdge = {
   node: Relation;
 };
 
+export type GetTimelineThreadsFromCompanyIdQueryVariables = Exact<{
+  companyId: Scalars['String'];
+}>;
+
+
+export type GetTimelineThreadsFromCompanyIdQuery = { __typename?: 'Query', getTimelineThreadsFromCompanyId: Array<{ __typename?: 'TimelineThread', body: string, numberOfMessagesInThread: number, read: boolean, receivedAt: string, senderName: string, senderPictureUrl: string, subject: string }> };
+
+export type GetTimelineThreadsFromPersonIdQueryVariables = Exact<{
+  personId: Scalars['String'];
+}>;
+
+
+export type GetTimelineThreadsFromPersonIdQuery = { __typename?: 'Query', getTimelineThreadsFromPersonId: Array<{ __typename?: 'TimelineThread', body: string, numberOfMessagesInThread: number, read: boolean, receivedAt: string, senderName: string, senderPictureUrl: string, subject: string }> };
+
 export type CreateEventMutationVariables = Exact<{
   type: Scalars['String'];
   data: Scalars['JSON'];
@@ -817,6 +854,88 @@ export const UserQueryFragmentFragmentDoc = gql`
   }
 }
     `;
+export const GetTimelineThreadsFromCompanyIdDocument = gql`
+    query GetTimelineThreadsFromCompanyId($companyId: String!) {
+  getTimelineThreadsFromCompanyId(companyId: $companyId) {
+    body
+    numberOfMessagesInThread
+    read
+    receivedAt
+    senderName
+    senderPictureUrl
+    subject
+  }
+}
+    `;
+
+/**
+ * __useGetTimelineThreadsFromCompanyIdQuery__
+ *
+ * To run a query within a React component, call `useGetTimelineThreadsFromCompanyIdQuery` and pass it any options that fit your needs.
+ * When your component renders, `useGetTimelineThreadsFromCompanyIdQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useGetTimelineThreadsFromCompanyIdQuery({
+ *   variables: {
+ *      companyId: // value for 'companyId'
+ *   },
+ * });
+ */
+export function useGetTimelineThreadsFromCompanyIdQuery(baseOptions: Apollo.QueryHookOptions<GetTimelineThreadsFromCompanyIdQuery, GetTimelineThreadsFromCompanyIdQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<GetTimelineThreadsFromCompanyIdQuery, GetTimelineThreadsFromCompanyIdQueryVariables>(GetTimelineThreadsFromCompanyIdDocument, options);
+      }
+export function useGetTimelineThreadsFromCompanyIdLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetTimelineThreadsFromCompanyIdQuery, GetTimelineThreadsFromCompanyIdQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<GetTimelineThreadsFromCompanyIdQuery, GetTimelineThreadsFromCompanyIdQueryVariables>(GetTimelineThreadsFromCompanyIdDocument, options);
+        }
+export type GetTimelineThreadsFromCompanyIdQueryHookResult = ReturnType<typeof useGetTimelineThreadsFromCompanyIdQuery>;
+export type GetTimelineThreadsFromCompanyIdLazyQueryHookResult = ReturnType<typeof useGetTimelineThreadsFromCompanyIdLazyQuery>;
+export type GetTimelineThreadsFromCompanyIdQueryResult = Apollo.QueryResult<GetTimelineThreadsFromCompanyIdQuery, GetTimelineThreadsFromCompanyIdQueryVariables>;
+export const GetTimelineThreadsFromPersonIdDocument = gql`
+    query GetTimelineThreadsFromPersonId($personId: String!) {
+  getTimelineThreadsFromPersonId(personId: $personId) {
+    body
+    numberOfMessagesInThread
+    read
+    receivedAt
+    senderName
+    senderPictureUrl
+    subject
+  }
+}
+    `;
+
+/**
+ * __useGetTimelineThreadsFromPersonIdQuery__
+ *
+ * To run a query within a React component, call `useGetTimelineThreadsFromPersonIdQuery` and pass it any options that fit your needs.
+ * When your component renders, `useGetTimelineThreadsFromPersonIdQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useGetTimelineThreadsFromPersonIdQuery({
+ *   variables: {
+ *      personId: // value for 'personId'
+ *   },
+ * });
+ */
+export function useGetTimelineThreadsFromPersonIdQuery(baseOptions: Apollo.QueryHookOptions<GetTimelineThreadsFromPersonIdQuery, GetTimelineThreadsFromPersonIdQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<GetTimelineThreadsFromPersonIdQuery, GetTimelineThreadsFromPersonIdQueryVariables>(GetTimelineThreadsFromPersonIdDocument, options);
+      }
+export function useGetTimelineThreadsFromPersonIdLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetTimelineThreadsFromPersonIdQuery, GetTimelineThreadsFromPersonIdQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<GetTimelineThreadsFromPersonIdQuery, GetTimelineThreadsFromPersonIdQueryVariables>(GetTimelineThreadsFromPersonIdDocument, options);
+        }
+export type GetTimelineThreadsFromPersonIdQueryHookResult = ReturnType<typeof useGetTimelineThreadsFromPersonIdQuery>;
+export type GetTimelineThreadsFromPersonIdLazyQueryHookResult = ReturnType<typeof useGetTimelineThreadsFromPersonIdLazyQuery>;
+export type GetTimelineThreadsFromPersonIdQueryResult = Apollo.QueryResult<GetTimelineThreadsFromPersonIdQuery, GetTimelineThreadsFromPersonIdQueryVariables>;
 export const CreateEventDocument = gql`
     mutation CreateEvent($type: String!, $data: JSON!) {
   createEvent(type: $type, data: $data) {

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

@@ -1,47 +0,0 @@
-import styled from '@emotion/styled';
-
-import {
-  H1Title,
-  H1TitleFontColor,
-} from '@/ui/display/typography/components/H1Title';
-import { Card } from '@/ui/layout/card/components/Card';
-import { Section } from '@/ui/layout/section/components/Section';
-import { mockedEmails as emails } from '~/testing/mock-data/activities';
-
-import { EmailPreview } from './EmailPreview';
-
-const StyledContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: ${({ theme }) => theme.spacing(6)};
-  padding: ${({ theme }) => theme.spacing(6, 6, 2)};
-`;
-
-const StyledH1Title = styled(H1Title)`
-  display: flex;
-  gap: ${({ theme }) => theme.spacing(2)};
-`;
-
-const StyledEmailCount = styled.span`
-  color: ${({ theme }) => theme.font.color.light};
-`;
-
-export const Emails = () => (
-  <StyledContainer>
-    <Section>
-      <StyledH1Title
-        title={
-          <>
-            Inbox <StyledEmailCount>{emails.length}</StyledEmailCount>
-          </>
-        }
-        fontColor={H1TitleFontColor.Primary}
-      />
-      <Card>
-        {emails.map((email, index) => (
-          <EmailPreview divider={index < emails.length - 1} email={email} />
-        ))}
-      </Card>
-    </Section>
-  </StyledContainer>
-);

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

@@ -2,10 +2,9 @@ import styled from '@emotion/styled';
 
 import { CardContent } from '@/ui/layout/card/components/CardContent';
 import { Avatar } from '@/users/components/Avatar';
+import { TimelineThread } from '~/generated/graphql';
 import { formatToHumanReadableDate } from '~/utils';
 
-import { Email } from '../types/email';
-
 const StyledCardContent = styled(CardContent)`
   align-items: center;
   display: flex;
@@ -22,6 +21,7 @@ const StyledHeading = styled.div<{ unread: boolean }>`
   font-weight: ${({ theme, unread }) =>
     unread ? theme.font.weight.medium : theme.font.weight.regular};
   gap: ${({ theme }) => theme.spacing(1)};
+  overflow: hidden;
   width: 160px;
 
   :before {
@@ -39,50 +39,66 @@ const StyledAvatar = styled(Avatar)`
   margin: ${({ theme }) => theme.spacing(0, 1)};
 `;
 
+const StyledSenderName = styled.span`
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
 const StyledThreadCount = styled.span`
   color: ${({ theme }) => theme.font.color.tertiary};
 `;
 
-const StyledSubject = styled.div<{ unread: boolean }>`
+const StyledSubject = styled.span<{ unread: boolean }>`
   color: ${({ theme, unread }) =>
     unread ? theme.font.color.primary : theme.font.color.secondary};
+  white-space: nowrap;
 `;
 
-const StyledBody = styled.div`
+const StyledBody = styled.span`
   color: ${({ theme }) => theme.font.color.tertiary};
-  flex: 1 0 0;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
 
+const StyledSubjectAndBody = styled.div`
+  display: flex;
+  flex: 1;
+  gap: ${({ theme }) => theme.spacing(2)};
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
 const StyledReceivedAt = styled.div`
   font-size: ${({ theme }) => theme.font.size.sm};
   font-weight: ${({ theme }) => theme.font.weight.regular};
   padding: ${({ theme }) => theme.spacing(0, 1)};
 `;
 
-type EmailPreviewProps = {
+type ThreadPreviewProps = {
   divider?: boolean;
-  email: Email;
+  thread: TimelineThread;
 };
 
-export const EmailPreview = ({ divider, email }: EmailPreviewProps) => (
+export const ThreadPreview = ({ divider, thread }: ThreadPreviewProps) => (
   <StyledCardContent divider={divider}>
-    <StyledHeading unread={!email.read}>
+    <StyledHeading unread={!thread.read}>
       <StyledAvatar
-        avatarUrl={email.senderPictureUrl}
-        placeholder={email.senderName}
+        avatarUrl={thread.senderPictureUrl}
+        placeholder={thread.senderName}
         type="rounded"
       />
-      {email.senderName}{' '}
-      <StyledThreadCount>{email.numberOfEmailsInThread}</StyledThreadCount>
+      <StyledSenderName>{thread.senderName}</StyledSenderName>
+      <StyledThreadCount>{thread.numberOfMessagesInThread}</StyledThreadCount>
     </StyledHeading>
-    <StyledSubject unread={!email.read}>{email.subject}</StyledSubject>
-    <StyledBody>{email.body}</StyledBody>
+
+    <StyledSubjectAndBody>
+      <StyledSubject unread={!thread.read}>{thread.subject}</StyledSubject>
+      <StyledBody>{thread.body}</StyledBody>
+    </StyledSubjectAndBody>
     <StyledReceivedAt>
-      {formatToHumanReadableDate(email.receivedAt)}
+      {formatToHumanReadableDate(thread.receivedAt)}
     </StyledReceivedAt>
   </StyledCardContent>
 );

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

@@ -0,0 +1,82 @@
+import { useQuery } from '@apollo/client';
+import styled from '@emotion/styled';
+
+import { ThreadPreview } from '@/activities/emails/components/ThreadPreview';
+import { getTimelineThreadsFromCompanyId } from '@/activities/emails/queries/getTimelineThreadsFromCompanyId';
+import { getTimelineThreadsFromPersonId } from '@/activities/emails/queries/getTimelineThreadsFromPersonId';
+import { ActivityTargetableEntity } from '@/activities/types/ActivityTargetableEntity';
+import {
+  H1Title,
+  H1TitleFontColor,
+} from '@/ui/display/typography/components/H1Title';
+import { Card } from '@/ui/layout/card/components/Card';
+import { Section } from '@/ui/layout/section/components/Section';
+import { TimelineThread } from '~/generated/graphql';
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(6)};
+  padding: ${({ theme }) => theme.spacing(6, 6, 2)};
+`;
+
+const StyledH1Title = styled(H1Title)`
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledEmailCount = styled.span`
+  color: ${({ theme }) => theme.font.color.light};
+`;
+
+export const Threads = ({ entity }: { entity: ActivityTargetableEntity }) => {
+  const threadQuery =
+    entity.type === 'Person'
+      ? getTimelineThreadsFromPersonId
+      : getTimelineThreadsFromCompanyId;
+
+  const threadQueryVariables =
+    entity.type === 'Person'
+      ? { personId: entity.id }
+      : { companyId: entity.id };
+
+  const threads = useQuery(threadQuery, {
+    variables: threadQueryVariables,
+  });
+
+  if (threads.loading) {
+    return;
+  }
+
+  const timelineThreads: TimelineThread[] =
+    threads.data[
+      entity.type === 'Person'
+        ? 'getTimelineThreadsFromPersonId'
+        : 'getTimelineThreadsFromCompanyId'
+    ];
+
+  return (
+    <StyledContainer>
+      <Section>
+        <StyledH1Title
+          title={
+            <>
+              Inbox{' '}
+              <StyledEmailCount>{timelineThreads.length}</StyledEmailCount>
+            </>
+          }
+          fontColor={H1TitleFontColor.Primary}
+        />
+        <Card>
+          {timelineThreads.map((thread: TimelineThread, index: number) => (
+            <ThreadPreview
+              key={index}
+              divider={index < timelineThreads.length - 1}
+              thread={thread}
+            />
+          ))}
+        </Card>
+      </Section>
+    </StyledContainer>
+  );
+};

packages/twenty-front/src/modules/activities/emails/components/__stories__/Emails.stories.tsx

@@ -1,13 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import { Emails } from '../Emails';
-
-const meta: Meta<typeof Emails> = {
-  title: 'Modules/Activity/Emails/Emails',
-  component: Emails,
-};
-
-export default meta;
-type Story = StoryObj<typeof Emails>;
-
-export const Default: Story = {};

packages/twenty-front/src/modules/activities/emails/components/__stories__/Threads.stories.tsx

@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Threads } from '../Threads';
+
+const meta: Meta<typeof Threads> = {
+  title: 'Modules/Activity/Emails/Threads',
+  component: Threads,
+};
+
+export default meta;
+type Story = StoryObj<typeof Threads>;
+
+export const Default: Story = {};

packages/twenty-front/src/modules/activities/emails/queries/getTimelineThreadsFromCompanyId.ts

@@ -0,0 +1,15 @@
+import { gql } from '@apollo/client';
+
+export const getTimelineThreadsFromCompanyId = gql`
+  query GetTimelineThreadsFromCompanyId($companyId: String!) {
+    getTimelineThreadsFromCompanyId(companyId: $companyId) {
+      body
+      numberOfMessagesInThread
+      read
+      receivedAt
+      senderName
+      senderPictureUrl
+      subject
+    }
+  }
+`;

packages/twenty-front/src/modules/activities/emails/queries/getTimelineThreadsFromPersonId.ts

@@ -0,0 +1,15 @@
+import { gql } from '@apollo/client';
+
+export const getTimelineThreadsFromPersonId = gql`
+  query GetTimelineThreadsFromPersonId($personId: String!) {
+    getTimelineThreadsFromPersonId(personId: $personId) {
+      body
+      numberOfMessagesInThread
+      read
+      receivedAt
+      senderName
+      senderPictureUrl
+      subject
+    }
+  }
+`;

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

@@ -1,9 +0,0 @@
-export type Email = {
-  body: string;
-  numberOfEmailsInThread: number;
-  read: boolean;
-  receivedAt: Date;
-  senderName: string;
-  senderPictureUrl: string;
-  subject: string;
-};

packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-import { Emails } from '@/activities/emails/components/Emails';
+import { Threads } from '@/activities/emails/components/Threads';
 import { Attachments } from '@/activities/files/components/Attachments';
 import { Notes } from '@/activities/notes/components/Notes';
 import { EntityTasks } from '@/activities/tasks/components/EntityTasks';
@@ -108,7 +108,7 @@ export const ShowPageRightContainer = ({
       {activeTabId === 'tasks' && <EntityTasks entity={entity} />}
       {activeTabId === 'notes' && <Notes entity={entity} />}
       {activeTabId === 'files' && <Attachments targetableEntity={entity} />}
-      {activeTabId === 'emails' && <Emails />}
+      {activeTabId === 'emails' && <Threads entity={entity} />}
     </StyledShowPageRightContainer>
   );
 };

packages/twenty-front/src/testing/mock-data/activities.ts

@@ -1,10 +1,10 @@
-import { Email } from '@/activities/emails/types/email';
 import { Activity } from '@/activities/types/Activity';
 import { ActivityTarget } from '@/activities/types/ActivityTarget';
 import { Comment } from '@/activities/types/Comment';
 import { Company } from '@/companies/types/Company';
 import { Person } from '@/people/types/Person';
 import { WorkspaceMember } from '@/workspace-member/types/WorkspaceMember';
+import { TimelineThread } from '~/generated/graphql';
 
 type MockedActivity = Pick<
   Activity,
@@ -207,21 +207,21 @@ export const mockedActivities: Array<MockedActivity> = [
   },
 ];
 
-export const mockedEmails: Email[] = [
+export const mockedThreads: TimelineThread[] = [
   {
     body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dignissim nisi eu tellus dapibus, egestas placerat risus placerat. Praesent eget arcu consectetur, efficitur felis.',
-    numberOfEmailsInThread: 4,
+    numberOfMessagesInThread: 4,
     read: false,
-    receivedAt: new Date('11/04/2023'),
+    receivedAt: new Date('11/04/2023').toISOString(),
     senderName: 'Steve Anahi',
     senderPictureUrl: '',
     subject: 'Partnerships',
   },
   {
     body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dignissim nisi eu tellus dapibus, egestas placerat risus placerat. Praesent eget arcu consectetur, efficitur felis.',
-    numberOfEmailsInThread: 3,
+    numberOfMessagesInThread: 3,
     read: true,
-    receivedAt: new Date('11/04/2023'),
+    receivedAt: new Date('11/04/2023').toISOString(),
     senderName: 'Alexandre Prot',
     senderPictureUrl: '',
     subject: 'Next step',