3434 connect settingsaccountsemails to the backend (#3584)

* wip

* wip

* update sync settings

* fix key in map

* connect email visibility to backend

* finished

* improve typing

packages/twenty-front/src/modules/accounts/types/ConnectedAccount.ts

@@ -0,0 +1,15 @@
+import { MessageChannel } from './MessageChannel';
+
+type MessageChannelConnection = { edges: [MessageChannelEdge] };
+type MessageChannelEdge = { node: MessageChannel };
+
+export type ConnectedAccount = {
+  id: string;
+  handle: string;
+  provider: string;
+  accessToken: string;
+  refreshToken: string;
+  accountOwnerId: string;
+  lastSyncHistoryId: string;
+  messageChannels: MessageChannelConnection;
+};

packages/twenty-front/src/modules/accounts/types/MessageChannel.ts

@@ -1,6 +1,6 @@
 import { InboxSettingsVisibilityValue } from '@/settings/accounts/components/SettingsAccountsInboxSettingsVisibilitySection';
 
-export type Account = {
+export type MessageChannel = {
   id: string;
   handle: string;
   isContactAutoCreationEnabled?: boolean;

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCard.tsx

@@ -2,7 +2,7 @@ import { useNavigate } from 'react-router-dom';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
-import { Account } from '@/accounts/types/Account';
+import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
 import { SettingsAccountsRowDropdownMenu } from '@/settings/accounts/components/SettingsAccountsRowDropdownMenu';
 import { IconAt, IconPlus } from '@/ui/display/icon';
 import { IconGoogle } from '@/ui/display/icon/components/IconGoogle';
@@ -31,7 +31,7 @@ const StyledDropdown = styled(SettingsAccountsRowDropdownMenu)`
 `;
 
 type SettingsAccountsCardProps = {
-  accounts: Account[];
+  accounts: ConnectedAccount[];
   onAccountRemove?: (uuid: string) => void;
 };
 

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsSection.tsx

@@ -1,6 +1,6 @@
 import { useRecoilValue } from 'recoil';
 
-import { Account } from '@/accounts/types/Account';
+import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
@@ -13,7 +13,7 @@ import { SettingsAccountsEmptyStateCard } from './SettingsAccountsEmptyStateCard
 export const SettingsAccountsConnectedAccountsSection = () => {
   const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
 
-  const accounts = useFindManyRecords<Account>({
+  const accounts = useFindManyRecords<ConnectedAccount>({
     objectNameSingular: 'connectedAccount',
     filter: {
       accountOwnerId: {

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsCard.tsx

@@ -1,7 +1,7 @@
 import { useNavigate } from 'react-router-dom';
 import styled from '@emotion/styled';
 
-import { Account } from '@/accounts/types/Account';
+import { MessageChannel } from '@/accounts/types/MessageChannel';
 import { IconChevronRight } from '@/ui/display/icon';
 import { IconGmail } from '@/ui/display/icon/components/IconGmail';
 import { Status } from '@/ui/display/status/components/Status';
@@ -18,24 +18,24 @@ const StyledRightContainer = styled.div`
 `;
 
 type SettingsAccountsEmailsCardProps = {
-  accounts: Account[];
+  messageChannels: MessageChannel[];
 };
 
 export const SettingsAccountsEmailsCard = ({
-  accounts,
+  messageChannels,
 }: SettingsAccountsEmailsCardProps) => {
   const navigate = useNavigate();
 
   return (
     <Card>
-      {accounts.map((account, index) => (
+      {messageChannels.map((messageChannel, index) => (
         <SettingsAccountRow
-          key={account.id}
+          key={messageChannel.id}
           LeftIcon={IconGmail}
-          account={account}
+          account={messageChannel}
           rightComponent={
             <StyledRightContainer>
-              {account.isSynced ? (
+              {messageChannel.isSynced ? (
                 <Status color="green" text="Synced" weight="medium" />
               ) : (
                 <Status color="gray" text="Not Synced" weight="medium" />
@@ -43,8 +43,10 @@ export const SettingsAccountsEmailsCard = ({
               <LightIconButton Icon={IconChevronRight} accent="tertiary" />
             </StyledRightContainer>
           }
-          onClick={() => navigate(`/settings/accounts/emails/${account.id}`)}
+          onClick={() =>
-          divider={index < accounts.length - 1}
+            navigate(`/settings/accounts/emails/${messageChannel.id}`)
+          }
+          divider={index < messageChannels.length - 1}
         />
       ))}
     </Card>

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsSyncSection.tsx

@@ -1,20 +1,56 @@
+import { useRecoilValue } from 'recoil';
+
+import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
+import { MessageChannel } from '@/accounts/types/MessageChannel';
+import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
+import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { Section } from '@/ui/layout/section/components/Section';
-import { mockedAccounts as accounts } from '~/testing/mock-data/accounts';
 
 import { SettingsAccountsEmailsCard } from './SettingsAccountsEmailsCard';
 import { SettingsAccountsEmptyStateCard } from './SettingsAccountsEmptyStateCard';
 
-export const SettingsAccountsEmailsSyncSection = () => (
+export const SettingsAccountsEmailsSyncSection = () => {
-  <Section>
+  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
-    <H2Title
+
-      title="Emails sync"
+  const accounts = useFindManyRecords<ConnectedAccount>({
-      description="Sync your inboxes and set your privacy settings"
+    objectNameSingular: 'connectedAccount',
-    />
+    filter: {
-    {accounts.length ? (
+      accountOwnerId: {
-      <SettingsAccountsEmailsCard accounts={accounts} />
+        eq: currentWorkspaceMember?.id,
-    ) : (
+      },
-      <SettingsAccountsEmptyStateCard />
+    },
-    )}
+  }).records;
-  </Section>
+
-);
+  const messageChannels = useFindManyRecords<MessageChannel>({
+    objectNameSingular: 'messageChannel',
+    filter: {
+      connectedAccountId: {
+        in: accounts.map((account) => account.id),
+      },
+    },
+  }).records;
+
+  const messageChannelsWithSyncedEmails = messageChannels.map(
+    (messageChannel) => ({
+      ...messageChannel,
+      isSynced: true,
+    }),
+  );
+
+  return (
+    <Section>
+      <H2Title
+        title="Emails sync"
+        description="Sync your inboxes and set your privacy settings"
+      />
+      {accounts.length ? (
+        <SettingsAccountsEmailsCard
+          messageChannels={messageChannelsWithSyncedEmails}
+        />
+      ) : (
+        <SettingsAccountsEmptyStateCard />
+      )}
+    </Section>
+  );
+};

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsInboxSettingsContactAutoCreationSection.tsx

@@ -1,7 +1,7 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
-import { Account } from '@/accounts/types/Account';
+import { MessageChannel } from '@/accounts/types/MessageChannel';
 import { SettingsAccountsInboxSettingsCardMedia } from '@/settings/accounts/components/SettingsAccountsInboxSettingsCardMedia';
 import { IconSend } from '@/ui/display/icon';
 import { H2Title } from '@/ui/display/typography/components/H2Title';
@@ -24,12 +24,12 @@ const StyledTitle = styled.span`
 `;
 
 type SettingsAccountsInboxSettingsContactAutoCreateSectionProps = {
-  account: Account;
+  messageChannel: MessageChannel;
   onToggle: (value: boolean) => void;
 };
 
 export const SettingsAccountsInboxSettingsContactAutoCreateSection = ({
-  account,
+  messageChannel,
   onToggle,
 }: SettingsAccountsInboxSettingsContactAutoCreateSectionProps) => {
   const theme = useTheme();
@@ -47,7 +47,7 @@ export const SettingsAccountsInboxSettingsContactAutoCreateSection = ({
           </SettingsAccountsInboxSettingsCardMedia>
           <StyledTitle>Auto-creation</StyledTitle>
           <Toggle
-            value={account.isContactAutoCreationEnabled}
+            value={messageChannel.isContactAutoCreationEnabled}
             onChange={onToggle}
           />
         </StyledCardContent>

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsInboxSettingsSynchronizationSection.tsx

@@ -1,7 +1,7 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
-import { Account } from '@/accounts/types/Account';
+import { MessageChannel } from '@/accounts/types/MessageChannel';
 import { SettingsAccountsInboxSettingsCardMedia } from '@/settings/accounts/components/SettingsAccountsInboxSettingsCardMedia';
 import { IconRefresh } from '@/ui/display/icon';
 import { H2Title } from '@/ui/display/typography/components/H2Title';
@@ -24,12 +24,12 @@ const StyledTitle = styled.span`
 `;
 
 type SettingsAccountsInboxSettingsSynchronizationSectionProps = {
-  account: Account;
+  messageChannel: MessageChannel;
   onToggle: (value: boolean) => void;
 };
 
 export const SettingsAccountsInboxSettingsSynchronizationSection = ({
-  account,
+  messageChannel,
   onToggle,
 }: SettingsAccountsInboxSettingsSynchronizationSectionProps) => {
   const theme = useTheme();
@@ -49,7 +49,7 @@ export const SettingsAccountsInboxSettingsSynchronizationSection = ({
             />
           </SettingsAccountsInboxSettingsCardMedia>
           <StyledTitle>Sync emails</StyledTitle>
-          <Toggle value={account.isSynced} onChange={onToggle} />
+          <Toggle value={messageChannel.isSynced} onChange={onToggle} />
         </StyledCardContent>
       </Card>
     </Section>

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsInboxSettingsVisibilitySection.tsx

@@ -8,8 +8,8 @@ import { CardContent } from '@/ui/layout/card/components/CardContent';
 import { Section } from '@/ui/layout/section/components/Section';
 
 export enum InboxSettingsVisibilityValue {
-  Everything = 'everything',
+  Everything = 'share_everything',
-  SubjectMetadata = 'subject-metadata',
+  SubjectMetadata = 'subject',
   Metadata = 'metadata',
 }
 
@@ -108,7 +108,7 @@ export const SettingsAccountsInboxSettingsVisibilitySection = ({
           index,
         ) => (
           <StyledCardContent
-            key={value}
+            key={optionValue}
             divider={index < inboxSettingsVisibilityOptions.length - 1}
           >
             <StyledCardMedia>

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRow.tsx

@@ -2,7 +2,8 @@ import { ReactNode } from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
-import { Account } from '@/accounts/types/Account';
+import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
+import { MessageChannel } from '@/accounts/types/MessageChannel';
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { CardContent } from '@/ui/layout/card/components/CardContent';
 
@@ -18,7 +19,7 @@ const StyledRow = styled(CardContent)`
 `;
 
 type SettingsAccountRowProps = {
-  account: Account;
+  account: ConnectedAccount | MessageChannel;
   divider?: boolean;
   LeftIcon: IconComponent;
   onClick?: () => void;

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx

@@ -1,6 +1,6 @@
 import { useNavigate } from 'react-router-dom';
 
-import { Account } from '@/accounts/types/Account';
+import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
 import { IconDotsVertical, IconMail, IconTrash } from '@/ui/display/icon';
 import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
@@ -10,7 +10,7 @@ import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 
 type SettingsAccountsRowDropdownMenuProps = {
-  account: Account;
+  account: ConnectedAccount;
   className?: string;
   onRemove?: (uuid: string) => void;
 };
@@ -41,7 +41,9 @@ export const SettingsAccountsRowDropdownMenu = ({
               LeftIcon={IconMail}
               text="Emails settings"
               onClick={() => {
-                navigate(`/settings/accounts/emails/${account.id}`);
+                navigate(
+                  `/settings/accounts/emails/${account.messageChannels.edges[0].node.id}`,
+                );
                 closeDropdown();
               }}
             />

packages/twenty-front/src/pages/settings/accounts/SettingsAccountsEmailsInboxSettings.tsx

@@ -1,8 +1,9 @@
 import { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
-import { SettingsAccountsInboxSettingsContactAutoCreateSection } from '@/settings/accounts/components/SettingsAccountsInboxSettingsContactAutoCreationSection';
+import { MessageChannel } from '@/accounts/types/MessageChannel';
-import { SettingsAccountsInboxSettingsSynchronizationSection } from '@/settings/accounts/components/SettingsAccountsInboxSettingsSynchronizationSection';
+import { useFindOneRecord } from '@/object-record/hooks/useFindOneRecord';
+import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
 import {
   InboxSettingsVisibilityValue,
   SettingsAccountsInboxSettingsVisibilitySection,
@@ -12,24 +13,34 @@ import { AppPath } from '@/types/AppPath';
 import { IconSettings } from '@/ui/display/icon';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
 import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
-import { mockedAccounts } from '~/testing/mock-data/accounts';
 
 export const SettingsAccountsEmailsInboxSettings = () => {
   const navigate = useNavigate();
-  const { accountUuid = '' } = useParams();
+  const { accountUuid: messageChannelId = '' } = useParams();
-  const account = mockedAccounts.find((account) => account.id === accountUuid);
+
+  const { record: messageChannel, loading } = useFindOneRecord<MessageChannel>({
+    objectNameSingular: 'messageChannel',
+    objectRecordId: messageChannelId,
+  });
+
+  const { updateOneRecord } = useUpdateOneRecord({
+    objectNameSingular: 'messageChannel',
+  });
+
+  const handleVisibilityChange = (_value: InboxSettingsVisibilityValue) => {
+    updateOneRecord({
+      idToUpdate: messageChannelId,
+      updateOneRecordInput: {
+        visibility: _value,
+      },
+    });
+  };
 
   useEffect(() => {
-    if (!account) navigate(AppPath.NotFound);
+    if (!loading && !messageChannel) navigate(AppPath.NotFound);
-  }, [account, navigate]);
+  }, [loading, messageChannel, navigate]);
 
-  if (!account) return null;
+  if (!messageChannel) return null;
-
-  const handleSynchronizationToggle = (_value: boolean) => {};
-
-  const handleContactAutoCreationToggle = (_value: boolean) => {};
-
-  const handleVisibilityChange = (_value: InboxSettingsVisibilityValue) => {};
 
   return (
     <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
@@ -38,21 +49,23 @@ export const SettingsAccountsEmailsInboxSettings = () => {
           links={[
             { children: 'Accounts', href: '/settings/accounts' },
             { children: 'Emails', href: '/settings/accounts/emails' },
-            { children: account?.handle || '' },
+            { children: messageChannel?.handle || '' },
           ]}
         />
-        <SettingsAccountsInboxSettingsSynchronizationSection
+        {/* TODO : discuss the desired sync behaviour */}
-          account={account}
+        {/* <SettingsAccountsInboxSettingsSynchronizationSection
+          messageChannel={messageChannel}
           onToggle={handleSynchronizationToggle}
-        />
+        /> */}
         <SettingsAccountsInboxSettingsVisibilitySection
-          value={account.visibility}
+          value={messageChannel?.visibility}
           onChange={handleVisibilityChange}
         />
-        <SettingsAccountsInboxSettingsContactAutoCreateSection
+        {/* TODO : Add this section when the backend will be ready to auto create contacts */}
-          account={account}
+        {/* <SettingsAccountsInboxSettingsContactAutoCreateSection
+          messageChannel={messageChannel}
           onToggle={handleContactAutoCreationToggle}
-        />
+        /> */}
       </SettingsPageContainer>
     </SubMenuTopBarContainer>
   );

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

@@ -1,8 +1,8 @@
-import { Account } from '@/accounts/types/Account';
 import { BlockedEmail } from '@/accounts/types/BlockedEmail';
+import { MessageChannel } from '@/accounts/types/MessageChannel';
 import { InboxSettingsVisibilityValue } from '@/settings/accounts/components/SettingsAccountsInboxSettingsVisibilitySection';
 
-export const mockedAccounts: Account[] = [
+export const mockedAccounts: MessageChannel[] = [
   {
     handle: 'thomas@twenty.com',
     isSynced: true,