3434 connect settingsaccountsemails to the backend (#3584)

* wip * wip * update sync settings * fix key in map * connect email visibility to backend * finished * improve typing
2024-10-27 03:33:21 +03:00 · 2024-01-22 18:29:14 +01:00 · 2024-01-22 18:29:14 +01:00 · 6aad59d0be
commit 6aad59d0be
parent 062bbd57a3
13 changed files with 137 additions and 68 deletions
--- a/packages/twenty-front/src/modules/accounts/types/ConnectedAccount.ts
+++ b/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;
+};
--- a/packages/twenty-front/src/modules/accounts/types/MessageChannel.ts
+++ b/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;
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCard.tsx
+++ b/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;
 };

--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsSection.tsx
+++ b/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: {
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsCard.tsx
+++ b/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}`)}
-          divider={index < accounts.length - 1}
+          onClick={() =>
+            navigate(`/settings/accounts/emails/${messageChannel.id}`)
+          }
+          divider={index < messageChannels.length - 1}
        />
      ))}
    </Card>
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsSyncSection.tsx
+++ b/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 = () => (
-  <Section>
-    <H2Title
-      title="Emails sync"
-      description="Sync your inboxes and set your privacy settings"
-    />
-    {accounts.length ? (
-      <SettingsAccountsEmailsCard accounts={accounts} />
-    ) : (
-      <SettingsAccountsEmptyStateCard />
-    )}
-  </Section>
-);
+export const SettingsAccountsEmailsSyncSection = () => {
+  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
+
+  const accounts = useFindManyRecords<ConnectedAccount>({
+    objectNameSingular: 'connectedAccount',
+    filter: {
+      accountOwnerId: {
+        eq: currentWorkspaceMember?.id,
+      },
+    },
+  }).records;
+
+  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>
+  );
+};
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsInboxSettingsContactAutoCreationSection.tsx
+++ b/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>
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsInboxSettingsSynchronizationSection.tsx
+++ b/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>
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsInboxSettingsVisibilitySection.tsx
+++ b/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',
-  SubjectMetadata = 'subject-metadata',
+  Everything = 'share_everything',
+  SubjectMetadata = 'subject',
  Metadata = 'metadata',
 }

@ -108,7 +108,7 @@ export const SettingsAccountsInboxSettingsVisibilitySection = ({
          index,
        ) => (
          <StyledCardContent
-            key={value}
+            key={optionValue}
            divider={index < inboxSettingsVisibilityOptions.length - 1}
          >
            <StyledCardMedia>
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRow.tsx
+++ b/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;
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx
+++ b/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();
              }}
            />
--- a/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsEmailsInboxSettings.tsx
+++ b/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 { SettingsAccountsInboxSettingsSynchronizationSection } from '@/settings/accounts/components/SettingsAccountsInboxSettingsSynchronizationSection';
+import { MessageChannel } from '@/accounts/types/MessageChannel';
+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 account = mockedAccounts.find((account) => account.id === accountUuid);
+  const { accountUuid: messageChannelId = '' } = useParams();
+
+  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);
-  }, [account, navigate]);
+    if (!loading && !messageChannel) navigate(AppPath.NotFound);
+  }, [loading, messageChannel, navigate]);

-  if (!account) return null;
-
-  const handleSynchronizationToggle = (_value: boolean) => {};
-
-  const handleContactAutoCreationToggle = (_value: boolean) => {};
-
-  const handleVisibilityChange = (_value: InboxSettingsVisibilityValue) => {};
+  if (!messageChannel) return null;

  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
-          account={account}
+        {/* TODO : discuss the desired sync behaviour */}
+        {/* <SettingsAccountsInboxSettingsSynchronizationSection
+          messageChannel={messageChannel}
          onToggle={handleSynchronizationToggle}
-        />
+        /> */}
        <SettingsAccountsInboxSettingsVisibilitySection
-          value={account.visibility}
+          value={messageChannel?.visibility}
          onChange={handleVisibilityChange}
        />
-        <SettingsAccountsInboxSettingsContactAutoCreateSection
-          account={account}
+        {/* TODO : Add this section when the backend will be ready to auto create contacts */}
+        {/* <SettingsAccountsInboxSettingsContactAutoCreateSection
+          messageChannel={messageChannel}
          onToggle={handleContactAutoCreationToggle}
-        />
+        /> */}
      </SettingsPageContainer>
    </SubMenuTopBarContainer>
  );
--- a/packages/twenty-front/src/testing/mock-data/accounts.ts
+++ b/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,