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

Closes #2888 Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
2023-12-13 17:37:12 +01:00
parent 9eddaffac4
commit 856b78abc7
14 changed files with 211 additions and 79 deletions
--- 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) => (
        <SettingsAccountRow
          key={account.uuid}
+          LeftIcon={IconGoogle}
          account={account}
+          rightComponent={
+            <StyledDropdown account={account} onRemove={onAccountRemove} />
+          }
          divider={index < accounts.length - 1}
-          onRemove={onAccountRemove}
        />
      ))}
      <StyledFooter>
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsCard.tsx
+++ 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 (
+    <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>
+  );
+};
--- 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"
    />
-    <SettingsAccountsEmptyStateCard />
+    {accounts.length ? (
+      <SettingsAccountsEmailsCard accounts={accounts} />
+    ) : (
+      <SettingsAccountsEmptyStateCard />
+    )}
  </Section>
 );
--- 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 (
-    <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>
  );
 };
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx
+++ 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 (
+    <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>
+  );
+};