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/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>
+  );
+};