feat: add Settings/Accounts Connected Accounts section accounts list (#2953)

Closes #2887

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

@@ -0,0 +1,60 @@
+import { useNavigate } from 'react-router-dom';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { Account } from '@/accounts/types/Account';
+import { IconAt, IconPlus } from '@/ui/display/icon';
+import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
+import { Card } from '@/ui/layout/card/components/Card';
+import { CardFooter } from '@/ui/layout/card/components/CardFooter';
+
+import { SettingsAccountRow } from './SettingsAccountsRow';
+
+const StyledFooter = styled(CardFooter)`
+  align-items: center;
+  color: ${({ theme }) => theme.font.color.tertiary};
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(2)};
+  height: ${({ theme }) => theme.spacing(6)};
+  padding: ${({ theme }) => theme.spacing(2)};
+  padding-left: ${({ theme }) => theme.spacing(4)};
+`;
+
+const StyledIconButton = styled(LightIconButton)`
+  margin-left: auto;
+`;
+
+type SettingsAccountsCardProps = {
+  accounts: Account[];
+  onAccountRemove?: (uuid: string) => void;
+};
+
+export const SettingsAccountsCard = ({
+  accounts,
+  onAccountRemove,
+}: SettingsAccountsCardProps) => {
+  const theme = useTheme();
+  const navigate = useNavigate();
+
+  return (
+    <Card>
+      {accounts.map((account, index) => (
+        <SettingsAccountRow
+          key={account.uuid}
+          account={account}
+          divider={index < accounts.length - 1}
+          onRemove={onAccountRemove}
+        />
+      ))}
+      <StyledFooter>
+        <IconAt size={theme.icon.size.sm} />
+        Add account
+        <StyledIconButton
+          Icon={IconPlus}
+          accent="tertiary"
+          onClick={() => navigate('/settings/accounts/new')}
+        />
+      </StyledFooter>
+    </Card>
+  );
+};

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

@@ -1,14 +1,34 @@
+import { useState } from 'react';
+
 import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { Section } from '@/ui/layout/section/components/Section';
+import { mockedAccounts } from '~/testing/mock-data/accounts';
 
+import { SettingsAccountsCard } from './SettingsAccountsCard';
 import { SettingsAccountsEmptyStateCard } from './SettingsAccountsEmptyStateCard';
 
-export const SettingsAccountsConnectedAccountsSection = () => (
-  <Section>
-    <H2Title
-      title="Connected accounts"
-      description="Manage your internet accounts."
-    />
-    <SettingsAccountsEmptyStateCard />
-  </Section>
-);
+export const SettingsAccountsConnectedAccountsSection = () => {
+  const [accounts, setAccounts] = useState(mockedAccounts);
+
+  const handleAccountRemove = (uuid: string) =>
+    setAccounts((previousAccounts) =>
+      previousAccounts.filter((account) => account.uuid !== uuid),
+    );
+
+  return (
+    <Section>
+      <H2Title
+        title="Connected accounts"
+        description="Manage your internet accounts."
+      />
+      {accounts.length ? (
+        <SettingsAccountsCard
+          accounts={accounts}
+          onAccountRemove={handleAccountRemove}
+        />
+      ) : (
+        <SettingsAccountsEmptyStateCard />
+      )}
+    </Section>
+  );
+};

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmptyStateCard.tsx

@@ -4,30 +4,20 @@ import styled from '@emotion/styled';
 import { IconGoogle } from '@/ui/display/icon/components/IconGoogle';
 import { Button } from '@/ui/input/button/components/Button';
 import { Card } from '@/ui/layout/card/components/Card';
+import { CardContent } from '@/ui/layout/card/components/CardContent';
+import { CardHeader } from '@/ui/layout/card/components/CardHeader';
 import { REACT_APP_SERVER_AUTH_URL } from '~/config';
 import { useGenerateTransientTokenMutation } from '~/generated/graphql';
 
-const StyledCard = styled(Card)`
-  border-radius: ${({ theme }) => theme.border.radius.md};
-  overflow: hidden;
-  padding: 0;
-`;
-
-const StyledHeader = styled.div`
+const StyledHeader = styled(CardHeader)`
   align-items: center;
-  background-color: ${({ theme }) => theme.background.primary};
-  border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
   display: flex;
-  font-size: ${({ theme }) => theme.font.size.sm};
-  font-weight: ${({ theme }) => theme.font.weight.medium};
   height: ${({ theme }) => theme.spacing(6)};
-  padding: ${({ theme }) => theme.spacing(2, 4)};
 `;
 
-const StyledBody = styled.div`
+const StyledBody = styled(CardContent)`
   display: flex;
   justify-content: center;
-  padding: ${({ theme }) => theme.spacing(4)};
 `;
 
 export const SettingsAccountsEmptyStateCard = () => {
@@ -43,8 +33,9 @@ export const SettingsAccountsEmptyStateCard = () => {
 
     window.location.href = `${authServerUrl}/google-gmail?transientToken=${token}`;
   }, [generateTransientToken]);
+
   return (
-    <StyledCard>
+    <Card>
       <StyledHeader>No connected account</StyledHeader>
       <StyledBody>
         <Button
@@ -54,6 +45,6 @@ export const SettingsAccountsEmptyStateCard = () => {
           onClick={handleGmailLogin}
         />
       </StyledBody>
-    </StyledCard>
+    </Card>
   );
 };

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

@@ -0,0 +1,88 @@
+import { useNavigate } from 'react-router-dom';
+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 { 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;
+  display: flex;
+  font-size: ${({ theme }) => theme.font.size.sm};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  gap: ${({ theme }) => theme.spacing(2)};
+  padding: ${({ theme }) => theme.spacing(2)};
+  padding-left: ${({ theme }) => theme.spacing(4)};
+`;
+
+const StyledDropdown = styled(Dropdown)`
+  margin-left: auto;
+`;
+
+type SettingsAccountRowProps = {
+  account: Account;
+  divider?: boolean;
+  onRemove?: (uuid: string) => void;
+};
+
+export const SettingsAccountRow = ({
+  account,
+  divider,
+  onRemove,
+}: 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} />
+      {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>
+    </StyledRow>
+  );
+};