admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

3434 connect settingsaccountsemails to the backend (#3584)

Browse Source 
* wip

* wip

* update sync settings

* fix key in map

* connect email visibility to backend

* finished

* improve typing
This commit is contained in:
bosiraphael
2024-01-22 18:29:14 +01:00
committed by GitHub
parent 062bbd57a3
commit 6aad59d0be
13 changed files with 137 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
packages/twenty-front/src/modules/accounts/types/ConnectedAccount.ts Normal file
View File

@ -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;
};

2
packages/twenty-front/src/modules/accounts/types/Account.ts → packages/twenty-front/src/modules/accounts/types/MessageChannel.ts
View File

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

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

@ -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;
};

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

@ -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: {

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

@ -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>

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

@ -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>
);
};

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

@ -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>

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

@ -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>

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

@ -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>

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

@ -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;

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

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