3804 use email visibility to display only the shared information frontend (#3875)

* create and use component

* visibility working

* Fix click behavior for email thread previews

* Add dynamic styling to EmailThreadPreview component

* refactor to respect the convention

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

@@ -0,0 +1,30 @@
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { IconLock } from '@/ui/display/icon';
+
+const StyledContainer = styled.div`
+  align-items: center;
+  display: flex;
+  flex: 1 0 0;
+  gap: ${({ theme }) => theme.spacing(1)};
+  height: 20px;
+  padding: ${({ theme }) => theme.spacing(0, 1)};
+
+  border-radius: 4px;
+  border: 1px solid ${({ theme }) => theme.border.color.light};
+  background: ${({ theme }) => theme.background.transparent.lighter};
+
+  color: ${({ theme }) => theme.font.color.tertiary};
+  font-weight: ${({ theme }) => theme.font.weight.regular};
+`;
+
+export const EmailThreadNotShared = () => {
+  const theme = useTheme();
+  return (
+    <StyledContainer>
+      <IconLock size={theme.icon.size.md} />
+      Not shared
+    </StyledContainer>
+  );
+};

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

@@ -1,18 +1,20 @@
 import styled from '@emotion/styled';
 
+import { EmailThreadNotShared } from '@/activities/emails/components/EmailThreadNotShared';
 import { CardContent } from '@/ui/layout/card/components/CardContent';
 import { grayScale } from '@/ui/theme/constants/colors';
 import { Avatar } from '@/users/components/Avatar';
 import { TimelineThread } from '~/generated/graphql';
 import { formatToHumanReadableDate } from '~/utils';
 
-const StyledCardContent = styled(CardContent)`
+const StyledCardContent = styled(CardContent)<{ visibility: string }>`
   align-items: center;
   display: flex;
   gap: ${({ theme }) => theme.spacing(2)};
   height: ${({ theme }) => theme.spacing(12)};
   padding: ${({ theme }) => theme.spacing(0, 4)};
-  cursor: pointer;
+  cursor: ${({ visibility }) =>
+    visibility === 'share_everything' ? 'pointer' : 'default'};
 `;
 
 const StyledHeading = styled.div<{ unread: boolean }>`
@@ -43,6 +45,7 @@ const StyledThreadCount = styled.span`
 `;
 
 const StyledSubjectAndBody = styled.div`
+  align-items: center;
   display: flex;
   flex: 1;
   gap: ${({ theme }) => theme.spacing(2)};
@@ -74,12 +77,14 @@ type EmailThreadPreviewProps = {
   divider?: boolean;
   thread: TimelineThread;
   onClick: () => void;
+  visibility: 'metadata' | 'subject' | 'share_everything';
 };
 
 export const EmailThreadPreview = ({
   divider,
   thread,
   onClick,
+  visibility,
 }: EmailThreadPreviewProps) => {
   const senderNames =
     thread.firstParticipant.displayName +
@@ -100,7 +105,11 @@ export const EmailThreadPreview = ({
         ];
 
   return (
-    <StyledCardContent onClick={() => onClick()} divider={divider}>
+    <StyledCardContent
+      onClick={() => onClick()}
+      divider={divider}
+      visibility={visibility}
+    >
       <StyledHeading unread={!thread.read}>
         <StyledParticipantsContainer>
           <Avatar
@@ -131,8 +140,13 @@ export const EmailThreadPreview = ({
       </StyledHeading>
 
       <StyledSubjectAndBody>
-        <StyledSubject>{thread.subject}</StyledSubject>
+        {visibility !== 'metadata' && (
-        <StyledBody>{thread.lastMessageBody}</StyledBody>
+          <StyledSubject>{thread.subject}</StyledSubject>
+        )}
+        {visibility === 'share_everything' && (
+          <StyledBody>{thread.lastMessageBody}</StyledBody>
+        )}
+        {visibility !== 'share_everything' && <EmailThreadNotShared />}
       </StyledSubjectAndBody>
       <StyledReceivedAt>
         {formatToHumanReadableDate(thread.lastMessageReceivedAt)}

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

@@ -185,7 +185,18 @@ export const EmailThreads = ({
                 key={index}
                 divider={index < timelineThreads.length - 1}
                 thread={thread}
-                onClick={() => openEmailThread(thread.id)}
+                onClick={
+                  thread.visibility === 'share_everything'
+                    ? () => openEmailThread(thread.id)
+                    : () => {}
+                }
+                visibility={
+                  // TODO: Fix typing for visibility
+                  thread.visibility as
+                    | 'metadata'
+                    | 'subject'
+                    | 'share_everything'
+                }
               />
             ))}
           </Card>

packages/twenty-front/src/modules/ui/display/icon/index.ts

@@ -76,6 +76,7 @@ export {
   IconLink,
   IconLinkOff,
   IconList,
+  IconLock,
   IconLogout,
   IconMail,
   IconMailCog,