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

feat: add Settings/Accounts/Emails Emails Sync section accounts list (#2957)

Browse Source 
Closes #2888

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
Thaïs
2023-12-13 17:37:12 +01:00
committed by GitHub
parent 9eddaffac4
commit 856b78abc7
14 changed files with 211 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1 +1 @@
export type Account = { email: string; uuid: string };
export type Account = { email: string; isSynced?: boolean; uuid: string };

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

@ -2,8 +2,10 @@ import { useNavigate } from 'react-router-dom';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { Account } from '@/accounts/types/Account';
import { Account } from '@/accounts/types/account';
import { SettingsAccountsRowDropdownMenu } from '@/settings/accounts/components/SettingsAccountsRowDropdownMenu';
import { IconAt, IconPlus } from '@/ui/display/icon';
import { IconGoogle } from '@/ui/display/icon/components/IconGoogle';
import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
import { Card } from '@/ui/layout/card/components/Card';
import { CardFooter } from '@/ui/layout/card/components/CardFooter';
@ -24,6 +26,10 @@ const StyledIconButton = styled(LightIconButton)`
margin-left: auto;
`;
const StyledDropdown = styled(SettingsAccountsRowDropdownMenu)`
margin-left: auto;
`;
type SettingsAccountsCardProps = {
accounts: Account[];
onAccountRemove?: (uuid: string) => void;
@ -41,9 +47,12 @@ export const SettingsAccountsCard = ({
{accounts.map((account, index) => (
<SettingsAccountRow
key={account.uuid}
LeftIcon={IconGoogle}
account={account}
rightComponent={
<StyledDropdown account={account} onRemove={onAccountRemove} />
}
divider={index < accounts.length - 1}
onRemove={onAccountRemove}
/>
))}
<StyledFooter>

52
packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsCard.tsx Normal file
View File

@ -0,0 +1,52 @@
import { useNavigate } from 'react-router-dom';
import styled from '@emotion/styled';
import { Account } from '@/accounts/types/account';
import { IconChevronRight } from '@/ui/display/icon';
import { IconGmail } from '@/ui/display/icon/components/IconGmail';
import { Status } from '@/ui/display/status/components/Status';
import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
import { Card } from '@/ui/layout/card/components/Card';
import { SettingsAccountRow } from './SettingsAccountsRow';
const StyledRightContainer = styled.div`
align-items: center;
display: flex;
gap: ${({ theme }) => theme.spacing(1)};
margin-left: auto;
`;
type SettingsAccountsEmailsCardProps = {
accounts: Account[];
};
export const SettingsAccountsEmailsCard = ({
accounts,
}: SettingsAccountsEmailsCardProps) => {
const navigate = useNavigate();
return (
<Card>
{accounts.map((account, index) => (
<SettingsAccountRow
key={account.uuid}
LeftIcon={IconGmail}
account={account}
rightComponent={
<StyledRightContainer>
{account.isSynced ? (
<Status color="green" text="Synced" weight="medium" />
) : (
<Status color="gray" text="Not Synced" weight="medium" />
)}
<LightIconButton Icon={IconChevronRight} accent="tertiary" />
</StyledRightContainer>
}
onClick={() => navigate(`/settings/accounts/emails/${account.uuid}`)}
divider={index < accounts.length - 1}
/>
))}
</Card>
);
};

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

@ -1,6 +1,8 @@
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 = () => (
@ -9,6 +11,10 @@ export const SettingsAccountsEmailsSyncSection = () => (
title="Emails sync"
description="Sync your inboxes and set your privacy settings"
/>
<SettingsAccountsEmptyStateCard />
{accounts.length ? (
<SettingsAccountsEmailsCard accounts={accounts} />
) : (
<SettingsAccountsEmptyStateCard />
)}
</Section>
);

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

@ -1,21 +1,14 @@
import { useNavigate } from 'react-router-dom';
import { ReactNode } from 'react';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { Account } from '@/accounts/types/Account';
import { IconDotsVertical, IconMail, IconTrash } from '@/ui/display/icon';
import { IconGoogle } from '@/ui/display/icon/components/IconGoogle';
import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
import { Account } from '@/accounts/types/account';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { CardContent } from '@/ui/layout/card/components/CardContent';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
const StyledRow = styled(CardContent)`
align-items: center;
cursor: ${({ onClick }) => (onClick ? 'pointer' : 'default')};
display: flex;
font-size: ${({ theme }) => theme.font.size.sm};
font-weight: ${({ theme }) => theme.font.weight.medium};
@ -24,65 +17,28 @@ const StyledRow = styled(CardContent)`
padding-left: ${({ theme }) => theme.spacing(4)};
`;
const StyledDropdown = styled(Dropdown)`
margin-left: auto;
`;
type SettingsAccountRowProps = {
account: Account;
divider?: boolean;
onRemove?: (uuid: string) => void;
LeftIcon: IconComponent;
onClick?: () => void;
rightComponent: ReactNode;
};
export const SettingsAccountRow = ({
account,
divider,
onRemove,
LeftIcon,
onClick,
rightComponent,
}: SettingsAccountRowProps) => {
const dropdownScopeId = `settings-account-row-${account.uuid}`;
const theme = useTheme();
const navigate = useNavigate();
const { closeDropdown } = useDropdown({ dropdownScopeId });
return (
<StyledRow divider={divider}>
<IconGoogle size={theme.icon.size.sm} />
<StyledRow onClick={onClick} divider={divider}>
<LeftIcon size={theme.icon.size.sm} />
{account.email}
<DropdownScope dropdownScopeId={dropdownScopeId}>
<StyledDropdown
dropdownPlacement="right-start"
dropdownHotkeyScope={{ scope: dropdownScopeId }}
clickableComponent={
<LightIconButton Icon={IconDotsVertical} accent="tertiary" />
}
dropdownComponents={
<DropdownMenu>
<DropdownMenuItemsContainer>
<MenuItem
LeftIcon={IconMail}
text="Emails settings"
onClick={() => {
navigate(`/settings/accounts/emails/${account.uuid}`);
closeDropdown();
}}
/>
{!!onRemove && (
<MenuItem
accent="danger"
LeftIcon={IconTrash}
text="Remove account"
onClick={() => {
onRemove(account.uuid);
closeDropdown();
}}
/>
)}
</DropdownMenuItemsContainer>
</DropdownMenu>
}
/>
</DropdownScope>
{rightComponent}
</StyledRow>
);
};

66
packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx Normal file
View File

@ -0,0 +1,66 @@
import { useNavigate } from 'react-router-dom';
import { Account } from '@/accounts/types/account';
import { IconDotsVertical, IconMail, IconTrash } from '@/ui/display/icon';
import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
type SettingsAccountsRowDropdownMenuProps = {
account: Account;
className?: string;
onRemove?: (uuid: string) => void;
};
export const SettingsAccountsRowDropdownMenu = ({
account,
className,
onRemove,
}: SettingsAccountsRowDropdownMenuProps) => {
const dropdownScopeId = `settings-account-row-${account.uuid}`;
const navigate = useNavigate();
const { closeDropdown } = useDropdown({ dropdownScopeId });
return (
<DropdownScope dropdownScopeId={dropdownScopeId}>
<Dropdown
className={className}
dropdownPlacement="right-start"
dropdownHotkeyScope={{ scope: dropdownScopeId }}
clickableComponent={
<LightIconButton Icon={IconDotsVertical} accent="tertiary" />
}
dropdownComponents={
<DropdownMenu>
<DropdownMenuItemsContainer>
<MenuItem
LeftIcon={IconMail}
text="Emails settings"
onClick={() => {
navigate(`/settings/accounts/emails/${account.uuid}`);
closeDropdown();
}}
/>
{!!onRemove && (
<MenuItem
accent="danger"
LeftIcon={IconTrash}
text="Remove account"
onClick={() => {
onRemove(account.uuid);
closeDropdown();
}}
/>
)}
</DropdownMenuItemsContainer>
</DropdownMenu>
}
/>
</DropdownScope>
);
};

7
packages/twenty-front/src/modules/ui/display/icon/assets/gmail.svg Normal file
View File

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="12" fill="none" viewBox="0 0 14 12">
<path fill="#4285F4" d="M.955 11.252h2.227v-5.41L0 3.456v6.841c0 .528.428.954.955.954Z"/>
<path fill="#34A853" d="M10.818 11.252h2.227a.954.954 0 0 0 .955-.955V3.456l-3.182 2.386"/>
<path fill="#FBBC04" d="M10.818 1.706v4.136L14 3.456V2.183c0-1.18-1.348-1.853-2.291-1.145"/>
<path fill="#EA4335" d="M3.182 5.842V1.706L7 4.57l3.818-2.864v4.136L7 8.706"/>
<path fill="#C5221F" d="M0 2.183v1.273l3.182 2.386V1.706l-.891-.668C1.346.33 0 1.003 0 2.183Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 563 B

9
packages/twenty-front/src/modules/ui/display/icon/assets/google-icon.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 84 KiB

13
packages/twenty-front/src/modules/ui/display/icon/assets/google.svg Normal file
View File

@ -0,0 +1,13 @@
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 14 14">
<g clip-path="url(#a)">
<path fill="#4285F4" d="M7 5.727v2.711h3.767a3.228 3.228 0 0 1-1.406 2.107l2.272 1.762c1.323-1.221 2.087-3.016 2.087-5.148 0-.496-.045-.973-.127-1.432H7Z"/>
<path fill="#34A853" d="m3.077 8.332-.512.393L.75 10.137C1.903 12.422 4.263 14 7 14c1.89 0 3.474-.624 4.633-1.693L9.36 10.544c-.624.42-1.42.675-2.361.675-1.82 0-3.366-1.228-3.92-2.883l-.003-.004Z"/>
<path fill="#FBBC05" d="M.75 3.863A6.914 6.914 0 0 0 0 7c0 1.133.274 2.196.75 3.137 0 .007 2.33-1.807 2.33-1.807A4.195 4.195 0 0 1 2.857 7c0-.465.083-.91.223-1.33L.75 3.863Z"/>
<path fill="#EA4335" d="M7 2.787c1.03 0 1.947.357 2.68 1.044l2.004-2.005C10.468.694 8.89 0 7 0A6.988 6.988 0 0 0 .75 3.863L3.08 5.67C3.634 4.015 5.18 2.787 7 2.787Z"/>
</g>
<defs>
<clipPath id="a">
<path fill="#fff" d="M0 0h13.72v14H0z"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 956 B

14
packages/twenty-front/src/modules/ui/display/icon/components/IconGmail.tsx Normal file
View File

@ -0,0 +1,14 @@
import { useTheme } from '@emotion/react';
import IconGmailRaw from '../assets/gmail.svg?react';
interface IconGmailProps {
size?: number;
}
export const IconGmail = (props: IconGmailProps) => {
const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
return <IconGmailRaw height={size} width={size} />;
};

4
packages/twenty-front/src/modules/ui/display/icon/components/IconGoogle.tsx
View File

@ -1,12 +1,12 @@
import { useTheme } from '@emotion/react';
import IconGoogleRaw from '../assets/google-icon.svg?react';
import IconGoogleRaw from '../assets/google.svg?react';
interface IconGoogleProps {
size?: number;
}
export const IconGoogle = (props: IconGoogleProps): JSX.Element => {
export const IconGoogle = (props: IconGoogleProps) => {
const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;

13
packages/twenty-front/src/modules/ui/display/status/components/Status.tsx
View File

@ -5,6 +5,7 @@ import { themeColorSchema } from '@/ui/theme/utils/themeColorSchema';
const StyledStatus = styled.h3<{
color: ThemeColor;
weight: 'regular' | 'medium';
}>`
align-items: center;
background: ${({ color, theme }) => theme.tag.background[color]};
@ -13,7 +14,7 @@ const StyledStatus = styled.h3<{
display: inline-flex;
font-size: ${({ theme }) => theme.font.size.md};
font-style: normal;
font-weight: ${({ theme }) => theme.font.weight.regular};
font-weight: ${({ theme, weight }) => theme.font.weight[weight]};
gap: ${({ theme }) => theme.spacing(1)};
height: ${({ theme }) => theme.spacing(5)};
margin: 0;
@ -42,13 +43,21 @@ type StatusProps = {
color: ThemeColor;
text: string;
onClick?: () => void;
weight?: 'regular' | 'medium';
};
export const Status = ({ className, color, text, onClick }: StatusProps) => (
export const Status = ({
className,
color,
text,
onClick,
weight = 'regular',
}: StatusProps) => (
<StyledStatus
className={className}
color={themeColorSchema.catch('gray').parse(color)}
onClick={onClick}
weight={weight}
>
<StyledContent>{text}</StyledContent>
</StyledStatus>

5
packages/twenty-front/src/modules/ui/layout/card/components/__stories__/Card.stories.tsx
View File

@ -11,8 +11,9 @@ const meta: Meta<typeof Card> = {
title: 'UI/Layout/Card/Card',
component: Card,
decorators: [ComponentDecorator],
render: () => (
<Card>
render: (args) => (
// eslint-disable-next-line react/jsx-props-no-spreading
<Card {...args}>
<CardHeader>Lorem ipsum</CardHeader>
<CardContent>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id massa

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

@ -1,6 +1,14 @@
import { Account } from '@/accounts/types/Account';
import { Account } from '@/accounts/types/account';
export const mockedAccounts: Account[] = [
{ email: 'thomas@twenty.com', uuid: '0794b782-f52e-48c3-977e-b0f57f90de24' },
{ email: 'thomas@twenty.dev', uuid: 'dc66a7ec-56b2-425b-a8e8-26ff0396c3aa' },
{
email: 'thomas@twenty.com',
isSynced: true,
uuid: '0794b782-f52e-48c3-977e-b0f57f90de24',
},
{
email: 'thomas@twenty.dev',
isSynced: false,
uuid: 'dc66a7ec-56b2-425b-a8e8-26ff0396c3aa',
},
];