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

Closes #2888

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

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

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) => (
         <SettingsAccountRow
           key={account.uuid}
+          LeftIcon={IconGoogle}
           account={account}
+          rightComponent={
+            <StyledDropdown account={account} onRemove={onAccountRemove} />
+          }
           divider={index < accounts.length - 1}
-          onRemove={onAccountRemove}
         />
       ))}
       <StyledFooter>

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

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"
     />
-    <SettingsAccountsEmptyStateCard />
+    {accounts.length ? (
+      <SettingsAccountsEmailsCard accounts={accounts} />
+    ) : (
+      <SettingsAccountsEmptyStateCard />
+    )}
   </Section>
 );

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 { Account } from '@/accounts/types/account';
-import { IconDotsVertical, IconMail, IconTrash } from '@/ui/display/icon';
+import { IconComponent } from '@/ui/display/icon/types/IconComponent';
-import { IconGoogle } from '@/ui/display/icon/components/IconGoogle';
-import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 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}>
+    <StyledRow onClick={onClick} divider={divider}>
-      <IconGoogle size={theme.icon.size.sm} />
+      <LeftIcon size={theme.icon.size.sm} />
       {account.email}
-      <DropdownScope dropdownScopeId={dropdownScopeId}>
+      {rightComponent}
-        <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>
     </StyledRow>
   );
 };

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

packages/twenty-front/src/modules/ui/display/icon/assets/gmail.svg

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

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

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

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 <IconGmailRaw height={size} width={size} />;
+};

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;
 

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) => (
   <StyledStatus
     className={className}
     color={themeColorSchema.catch('gray').parse(color)}
     onClick={onClick}
+    weight={weight}
   >
     <StyledContent>{text}</StyledContent>
   </StyledStatus>

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

@@ -11,8 +11,9 @@ const meta: Meta<typeof Card> = {
   title: 'UI/Layout/Card/Card',
   component: Card,
   decorators: [ComponentDecorator],
-  render: () => (
+  render: (args) => (
-    <Card>
+    // 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

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',
+  },
 ];