From 856b78abc74ca8559b240994da665459134fa934 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tha=C3=AFs?= Date: Wed, 13 Dec 2023 17:37:12 +0100 Subject: [PATCH] feat: add Settings/Accounts/Emails Emails Sync section accounts list (#2957) Closes #2888 Co-authored-by: Lucas Bordeau --- .../src/modules/accounts/types/Account.ts | 2 +- .../components/SettingsAccountsCard.tsx | 13 +++- .../components/SettingsAccountsEmailsCard.tsx | 52 ++++++++++++++ .../SettingsAccountsEmailsSyncSection.tsx | 8 ++- .../components/SettingsAccountsRow.tsx | 70 ++++--------------- .../SettingsAccountsRowDropdownMenu.tsx | 66 +++++++++++++++++ .../modules/ui/display/icon/assets/gmail.svg | 7 ++ .../ui/display/icon/assets/google-icon.svg | 9 --- .../modules/ui/display/icon/assets/google.svg | 13 ++++ .../ui/display/icon/components/IconGmail.tsx | 14 ++++ .../ui/display/icon/components/IconGoogle.tsx | 4 +- .../ui/display/status/components/Status.tsx | 13 +++- .../components/__stories__/Card.stories.tsx | 5 +- .../src/testing/mock-data/accounts.ts | 14 +++- 14 files changed, 211 insertions(+), 79 deletions(-) create mode 100644 packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsCard.tsx create mode 100644 packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx create mode 100644 packages/twenty-front/src/modules/ui/display/icon/assets/gmail.svg delete mode 100644 packages/twenty-front/src/modules/ui/display/icon/assets/google-icon.svg create mode 100644 packages/twenty-front/src/modules/ui/display/icon/assets/google.svg create mode 100644 packages/twenty-front/src/modules/ui/display/icon/components/IconGmail.tsx diff --git a/packages/twenty-front/src/modules/accounts/types/Account.ts b/packages/twenty-front/src/modules/accounts/types/Account.ts index 2d40aeb64..e432b12c3 100644 --- a/packages/twenty-front/src/modules/accounts/types/Account.ts +++ b/packages/twenty-front/src/modules/accounts/types/Account.ts @@ -1 +1 @@ -export type Account = { email: string; uuid: string }; +export type Account = { email: string; isSynced?: boolean; uuid: string }; diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCard.tsx index 3bd8b146d..c2b5f7fd5 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCard.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCard.tsx @@ -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) => ( + } divider={index < accounts.length - 1} - onRemove={onAccountRemove} /> ))} diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsCard.tsx new file mode 100644 index 000000000..d9eae1a9e --- /dev/null +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsCard.tsx @@ -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 ( + + {accounts.map((account, index) => ( + + {account.isSynced ? ( + + ) : ( + + )} + + + } + onClick={() => navigate(`/settings/accounts/emails/${account.uuid}`)} + divider={index < accounts.length - 1} + /> + ))} + + ); +}; diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsSyncSection.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsSyncSection.tsx index 06e600ce6..d140db076 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsSyncSection.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsSyncSection.tsx @@ -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" /> - + {accounts.length ? ( + + ) : ( + + )} ); diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRow.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRow.tsx index d33a734d7..716f99e00 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRow.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRow.tsx @@ -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 ( - - + + {account.email} - - - } - dropdownComponents={ - - - { - navigate(`/settings/accounts/emails/${account.uuid}`); - closeDropdown(); - }} - /> - {!!onRemove && ( - { - onRemove(account.uuid); - closeDropdown(); - }} - /> - )} - - - } - /> - + {rightComponent} ); }; diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx new file mode 100644 index 000000000..f5919b53b --- /dev/null +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx @@ -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 ( + + + } + dropdownComponents={ + + + { + navigate(`/settings/accounts/emails/${account.uuid}`); + closeDropdown(); + }} + /> + {!!onRemove && ( + { + onRemove(account.uuid); + closeDropdown(); + }} + /> + )} + + + } + /> + + ); +}; diff --git a/packages/twenty-front/src/modules/ui/display/icon/assets/gmail.svg b/packages/twenty-front/src/modules/ui/display/icon/assets/gmail.svg new file mode 100644 index 000000000..5f4c0fdc5 --- /dev/null +++ b/packages/twenty-front/src/modules/ui/display/icon/assets/gmail.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/packages/twenty-front/src/modules/ui/display/icon/assets/google-icon.svg b/packages/twenty-front/src/modules/ui/display/icon/assets/google-icon.svg deleted file mode 100644 index 5166126ca..000000000 --- a/packages/twenty-front/src/modules/ui/display/icon/assets/google-icon.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/packages/twenty-front/src/modules/ui/display/icon/assets/google.svg b/packages/twenty-front/src/modules/ui/display/icon/assets/google.svg new file mode 100644 index 000000000..836f0912f --- /dev/null +++ b/packages/twenty-front/src/modules/ui/display/icon/assets/google.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/twenty-front/src/modules/ui/display/icon/components/IconGmail.tsx b/packages/twenty-front/src/modules/ui/display/icon/components/IconGmail.tsx new file mode 100644 index 000000000..647780e27 --- /dev/null +++ b/packages/twenty-front/src/modules/ui/display/icon/components/IconGmail.tsx @@ -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 ; +}; diff --git a/packages/twenty-front/src/modules/ui/display/icon/components/IconGoogle.tsx b/packages/twenty-front/src/modules/ui/display/icon/components/IconGoogle.tsx index 6ab2a51d6..7ab67694f 100644 --- a/packages/twenty-front/src/modules/ui/display/icon/components/IconGoogle.tsx +++ b/packages/twenty-front/src/modules/ui/display/icon/components/IconGoogle.tsx @@ -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; diff --git a/packages/twenty-front/src/modules/ui/display/status/components/Status.tsx b/packages/twenty-front/src/modules/ui/display/status/components/Status.tsx index 4ba436c92..8d1b3542e 100644 --- a/packages/twenty-front/src/modules/ui/display/status/components/Status.tsx +++ b/packages/twenty-front/src/modules/ui/display/status/components/Status.tsx @@ -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) => ( {text} diff --git a/packages/twenty-front/src/modules/ui/layout/card/components/__stories__/Card.stories.tsx b/packages/twenty-front/src/modules/ui/layout/card/components/__stories__/Card.stories.tsx index b30740ea4..e47537344 100644 --- a/packages/twenty-front/src/modules/ui/layout/card/components/__stories__/Card.stories.tsx +++ b/packages/twenty-front/src/modules/ui/layout/card/components/__stories__/Card.stories.tsx @@ -11,8 +11,9 @@ const meta: Meta = { title: 'UI/Layout/Card/Card', component: Card, decorators: [ComponentDecorator], - render: () => ( - + render: (args) => ( + // eslint-disable-next-line react/jsx-props-no-spreading + Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id massa diff --git a/packages/twenty-front/src/testing/mock-data/accounts.ts b/packages/twenty-front/src/testing/mock-data/accounts.ts index 908710efc..8c7a73f79 100644 --- a/packages/twenty-front/src/testing/mock-data/accounts.ts +++ b/packages/twenty-front/src/testing/mock-data/accounts.ts @@ -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', + }, ];