feat: add Accounts List Card to Calendar Settings (#4129)

Closes #4061

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

@@ -1,18 +1,31 @@
+import { useNavigate } from 'react-router-dom';
+import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
 
 import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
-import { SettingsAccountsListEmptyStateCard } from '@/settings/accounts/components/SettingsAccountsListEmptyStateCard';
+import { SettingsAccountsListCard } from '@/settings/accounts/components/SettingsAccountsListCard';
-import { SettingsAccountsListSkeletonCard } from '@/settings/accounts/components/SettingsAccountsListSkeletonCard';
+import { SettingsAccountsSynchronizationStatus } from '@/settings/accounts/components/SettingsAccountsSynchronizationStatus';
+import { IconChevronRight } from '@/ui/display/icon';
+import { IconGoogleCalendar } from '@/ui/display/icon/components/IconGoogleCalendar';
 import { H2Title } from '@/ui/display/typography/components/H2Title';
+import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 import { Section } from '@/ui/layout/section/components/Section';
+import { mockedConnectedAccounts } from '~/testing/mock-data/accounts';
+
+const StyledRowRightContainer = styled.div`
+  align-items: center;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(1)};
+`;
 
 export const SettingsAccountsCalendarSettingsSection = () => {
   const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
+  const navigate = useNavigate();
 
-  const { records: accounts, loading } = useFindManyRecords<ConnectedAccount>({
+  const { records: _accounts, loading } = useFindManyRecords<ConnectedAccount>({
     objectNameSingular: CoreObjectNameSingular.ConnectedAccount,
     filter: {
       accountOwnerId: {
@@ -27,12 +40,20 @@ export const SettingsAccountsCalendarSettingsSection = () => {
         title="Calendar settings"
         description="Sync your calendars and set your preferences"
       />
-
+      <SettingsAccountsListCard
-      {loading ? (
+        accounts={mockedConnectedAccounts}
-        <SettingsAccountsListSkeletonCard />
+        isLoading={loading}
-      ) : !accounts.length ? (
+        onRowClick={(account) =>
-        <SettingsAccountsListEmptyStateCard />
+          navigate(`/settings/accounts/calendars/${account.id}`)
-      ) : null}
+        }
+        RowIcon={IconGoogleCalendar}
+        RowRightComponent={({ account: _account }) => (
+          <StyledRowRightContainer>
+            <SettingsAccountsSynchronizationStatus synced />
+            <LightIconButton Icon={IconChevronRight} accent="tertiary" />
+          </StyledRowRightContainer>
+        )}
+      />
     </Section>
   );
 };

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

@@ -1,69 +0,0 @@
-import { useNavigate } from 'react-router-dom';
-import { useTheme } from '@emotion/react';
-import styled from '@emotion/styled';
-
-import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
-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';
-
-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;
-`;
-
-const StyledDropdown = styled(SettingsAccountsRowDropdownMenu)`
-  margin-left: auto;
-`;
-
-type SettingsAccountsCardProps = {
-  accounts: ConnectedAccount[];
-  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.id}
-          LeftIcon={IconGoogle}
-          account={account}
-          rightComponent={
-            <StyledDropdown account={account} onRemove={onAccountRemove} />
-          }
-          divider={index < accounts.length - 1}
-        />
-      ))}
-      <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,37 +1,27 @@
 import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
-import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord';
+import { SettingsAccountsRowDropdownMenu } from '@/settings/accounts/components/SettingsAccountsRowDropdownMenu';
 import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { Section } from '@/ui/layout/section/components/Section';
 
-import { SettingsAccountsCard } from './SettingsAccountsCard';
+import { SettingsAccountsListCard } from './SettingsAccountsListCard';
-import { SettingsAccountsListEmptyStateCard } from './SettingsAccountsListEmptyStateCard';
 
 export const SettingsAccountsConnectedAccountsSection = ({
   accounts,
+  loading,
 }: {
   accounts: ConnectedAccount[];
-}) => {
+  loading?: boolean;
-  const { deleteOneRecord } = useDeleteOneRecord({
+}) => (
-    objectNameSingular: 'connectedAccount',
+  <Section>
-  });
+    <H2Title
-
+      title="Connected accounts"
-  const handleAccountRemove = (idToRemove: string) =>
+      description="Manage your internet accounts."
-    deleteOneRecord(idToRemove);
+    />
-
+    <SettingsAccountsListCard
-  return (
+      accounts={accounts}
-    <Section>
+      isLoading={loading}
-      <H2Title
+      RowRightComponent={SettingsAccountsRowDropdownMenu}
-        title="Connected accounts"
+      hasFooter
-        description="Manage your internet accounts."
+    />
-      />
+  </Section>
-      {accounts?.length ? (
+);
-        <SettingsAccountsCard
-          accounts={accounts}
-          onAccountRemove={handleAccountRemove}
-        />
-      ) : (
-        <SettingsAccountsListEmptyStateCard />
-      )}
-    </Section>
-  );
-};

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

@@ -1,54 +0,0 @@
-import { useNavigate } from 'react-router-dom';
-import styled from '@emotion/styled';
-
-import { MessageChannel } from '@/accounts/types/MessageChannel';
-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 = {
-  messageChannels: MessageChannel[];
-};
-
-export const SettingsAccountsEmailsCard = ({
-  messageChannels,
-}: SettingsAccountsEmailsCardProps) => {
-  const navigate = useNavigate();
-
-  return (
-    <Card>
-      {messageChannels.map((messageChannel, index) => (
-        <SettingsAccountRow
-          key={messageChannel.id}
-          LeftIcon={IconGmail}
-          account={messageChannel}
-          rightComponent={
-            <StyledRightContainer>
-              {messageChannel.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/${messageChannel.id}`)
-          }
-          divider={index < messageChannels.length - 1}
-        />
-      ))}
-    </Card>
-  );
-};

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

@@ -1,18 +1,29 @@
+import { useNavigate } from 'react-router-dom';
+import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
+import { LightIconButton } from 'tsup.ui.index';
 
 import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
 import { MessageChannel } from '@/accounts/types/MessageChannel';
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
-import { SettingsAccountsEmailsCard } from '@/settings/accounts/components/SettingsAccountsEmailsCard';
+import { SettingsAccountsListCard } from '@/settings/accounts/components/SettingsAccountsListCard';
-import { SettingsAccountsListEmptyStateCard } from '@/settings/accounts/components/SettingsAccountsListEmptyStateCard';
+import { SettingsAccountsSynchronizationStatus } from '@/settings/accounts/components/SettingsAccountsSynchronizationStatus';
-import { SettingsAccountsListSkeletonCard } from '@/settings/accounts/components/SettingsAccountsListSkeletonCard';
+import { IconChevronRight } from '@/ui/display/icon';
+import { IconGmail } from '@/ui/display/icon/components/IconGmail';
 import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { Section } from '@/ui/layout/section/components/Section';
 
+const StyledRowRightContainer = styled.div`
+  align-items: center;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(1)};
+`;
+
 export const SettingsAccountsEmailsSyncSection = () => {
   const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
+  const navigate = useNavigate();
 
   const { records: accounts, loading: accountsLoading } =
     useFindManyRecords<ConnectedAccount>({
@@ -26,7 +37,7 @@ export const SettingsAccountsEmailsSyncSection = () => {
 
   const { records: messageChannels, loading: messageChannelsLoading } =
     useFindManyRecords<MessageChannel>({
-      objectNameSingular: 'messageChannel',
+      objectNameSingular: CoreObjectNameSingular.MessageChannel,
       filter: {
         connectedAccountId: {
           in: accounts.map((account) => account.id),
@@ -41,24 +52,28 @@ export const SettingsAccountsEmailsSyncSection = () => {
     }),
   );
 
-  const loading = accountsLoading || messageChannelsLoading;
-
   return (
     <Section>
       <H2Title
         title="Emails sync"
         description="Sync your inboxes and set your privacy settings"
       />
-
+      <SettingsAccountsListCard
-      {loading ? (
+        accounts={messageChannelsWithSyncedEmails}
-        <SettingsAccountsListSkeletonCard />
+        isLoading={accountsLoading || messageChannelsLoading}
-      ) : accounts.length ? (
+        onRowClick={(messageChannel) =>
-        <SettingsAccountsEmailsCard
+          navigate(`/settings/accounts/emails/${messageChannel.id}`)
-          messageChannels={messageChannelsWithSyncedEmails}
+        }
-        />
+        RowIcon={IconGmail}
-      ) : (
+        RowRightComponent={({ account: messageChannel }) => (
-        <SettingsAccountsListEmptyStateCard />
+          <StyledRowRightContainer>
-      )}
+            <SettingsAccountsSynchronizationStatus
+              synced={messageChannel.isSynced}
+            />
+            <LightIconButton Icon={IconChevronRight} accent="tertiary" />
+          </StyledRowRightContainer>
+        )}
+      />
     </Section>
   );
 };

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

@@ -0,0 +1,89 @@
+import { ReactNode } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
+import { SettingsAccountsListEmptyStateCard } from '@/settings/accounts/components/SettingsAccountsListEmptyStateCard';
+import { SettingsAccountsListSkeletonCard } from '@/settings/accounts/components/SettingsAccountsListSkeletonCard';
+import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
+import { SettingsPath } from '@/types/SettingsPath';
+import { IconAt, IconPlus } from '@/ui/display/icon';
+import { IconGoogle } from '@/ui/display/icon/components/IconGoogle';
+import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+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 SettingsAccountsListCardProps<
+  Account extends Pick<ConnectedAccount, 'handle' | 'id'>,
+> = {
+  accounts: Account[];
+  hasFooter?: boolean;
+  isLoading?: boolean;
+  onRowClick?: (account: Account) => void;
+  RowIcon?: IconComponent;
+  RowRightComponent: ({ account }: { account: Account }) => ReactNode;
+};
+
+export const SettingsAccountsListCard = <
+  Account extends Pick<ConnectedAccount, 'handle' | 'id'> = ConnectedAccount,
+>({
+  accounts,
+  hasFooter,
+  isLoading,
+  onRowClick,
+  RowIcon = IconGoogle,
+  RowRightComponent,
+}: SettingsAccountsListCardProps<Account>) => {
+  const theme = useTheme();
+  const navigate = useNavigate();
+
+  if (isLoading) return <SettingsAccountsListSkeletonCard />;
+
+  if (!accounts.length) return <SettingsAccountsListEmptyStateCard />;
+
+  return (
+    <Card>
+      {accounts.map((account, index) => (
+        <SettingsAccountRow
+          key={account.id}
+          LeftIcon={RowIcon}
+          account={account}
+          rightComponent={<RowRightComponent account={account} />}
+          divider={index < accounts.length - 1}
+          onClick={() => onRowClick?.(account)}
+        />
+      ))}
+      {hasFooter && (
+        <StyledFooter>
+          <IconAt size={theme.icon.size.sm} />
+          Add account
+          <StyledIconButton
+            Icon={IconPlus}
+            accent="tertiary"
+            onClick={() =>
+              navigate(getSettingsPagePath(SettingsPath.NewAccount))
+            }
+          />
+        </StyledFooter>
+      )}
+    </Card>
+  );
+};

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

@@ -3,7 +3,6 @@ import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
-import { MessageChannel } from '@/accounts/types/MessageChannel';
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { CardContent } from '@/ui/layout/card/components/CardContent';
 
@@ -18,8 +17,12 @@ const StyledRow = styled(CardContent)`
   padding-left: ${({ theme }) => theme.spacing(4)};
 `;
 
+const StyledAccountHandle = styled.span`
+  flex: 1 0 auto;
+`;
+
 type SettingsAccountRowProps = {
-  account: ConnectedAccount | MessageChannel;
+  account: Pick<ConnectedAccount, 'handle'>;
   divider?: boolean;
   LeftIcon: IconComponent;
   onClick?: () => void;
@@ -37,8 +40,8 @@ export const SettingsAccountRow = ({
 
   return (
     <StyledRow onClick={onClick} divider={divider}>
-      <LeftIcon size={theme.icon.size.sm} />
+      <LeftIcon size={theme.icon.size.md} />
-      {account.handle}
+      <StyledAccountHandle>{account.handle}</StyledAccountHandle>
       {rightComponent}
     </StyledRow>
   );

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

@@ -1,6 +1,8 @@
 import { useNavigate } from 'react-router-dom';
 
 import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord';
 import { IconDotsVertical, IconMail, IconTrash } from '@/ui/display/icon';
 import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
@@ -10,21 +12,23 @@ import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 
 type SettingsAccountsRowDropdownMenuProps = {
-  account: ConnectedAccount;
+  account: Pick<ConnectedAccount, 'id' | 'messageChannels'>;
   className?: string;
-  onRemove?: (uuid: string) => void;
 };
 
 export const SettingsAccountsRowDropdownMenu = ({
   account,
   className,
-  onRemove,
 }: SettingsAccountsRowDropdownMenuProps) => {
   const dropdownId = `settings-account-row-${account.id}`;
 
   const navigate = useNavigate();
   const { closeDropdown } = useDropdown(dropdownId);
 
+  const { deleteOneRecord } = useDeleteOneRecord({
+    objectNameSingular: CoreObjectNameSingular.ConnectedAccount,
+  });
+
   return (
     <Dropdown
       dropdownId={dropdownId}
@@ -47,17 +51,15 @@ export const SettingsAccountsRowDropdownMenu = ({
                 closeDropdown();
               }}
             />
-            {!!onRemove && (
+            <MenuItem
-              <MenuItem
+              accent="danger"
-                accent="danger"
+              LeftIcon={IconTrash}
-                LeftIcon={IconTrash}
+              text="Remove account"
-                text="Remove account"
+              onClick={() => {
-                onClick={() => {
+                deleteOneRecord(account.id);
-                  onRemove(account.id);
+                closeDropdown();
-                  closeDropdown();
+              }}
-                }}
+            />
-              />
-            )}
           </DropdownMenuItemsContainer>
         </DropdownMenu>
       }

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

@@ -0,0 +1,15 @@
+import { Status } from '@/ui/display/status/components/Status';
+
+type SettingsAccountsSynchronizationStatusProps = {
+  synced: boolean;
+};
+
+export const SettingsAccountsSynchronizationStatus = ({
+  synced,
+}: SettingsAccountsSynchronizationStatusProps) => (
+  <Status
+    color={synced ? 'green' : 'gray'}
+    text={synced ? 'Synced' : 'Not Synced'}
+    weight="medium"
+  />
+);

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

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 76 76">
+  <path fill="#fff" d="M58 18H18v40h40z"/>
+  <path fill="#4285f4" d="M26.2 49.03c-1.495-1.01-2.53-2.485-3.095-4.435l3.47-1.43c.315 1.2.865 2.13 1.65 2.79.78.66 1.73.985 2.84.985 1.135 0 2.11-.345 2.925-1.035s1.225-1.57 1.225-2.635c0-1.09-.43-1.98-1.29-2.67s-1.94-1.035-3.23-1.035H28.69V36.13h1.8c1.11 0 2.045-.3 2.805-.9s1.14-1.42 1.14-2.465c0-.93-.34-1.67-1.02-2.225s-1.54-.835-2.585-.835c-1.02 0-1.83.27-2.43.815a4.784 4.784 0 0 0-1.31 2.005l-3.435-1.43c.455-1.29 1.29-2.43 2.515-3.415s2.79-1.48 4.69-1.48c1.405 0 2.67.27 3.79.815s2 1.3 2.635 2.26c.635.965.95 2.045.95 3.245 0 1.225-.295 2.26-.885 3.11s-1.315 1.5-2.175 1.955v.205a6.605 6.605 0 0 1 2.79 2.175c.725.975 1.09 2.14 1.09 3.5s-.345 2.575-1.035 3.64-1.645 1.905-2.855 2.515c-1.215.61-2.58.92-4.095.92-1.755.005-3.375-.5-4.87-1.51zm21.315-17.22-3.81 2.755-1.905-2.89 6.835-4.93h2.62V50h-3.74z"/>
+  <path fill="#34a853" d="M58 58H18v18h40z"/>
+  <path fill="#4285f4" d="M58 0H6C2.685 0 0 2.685 0 6v52h18V18h40z"/>
+  <path fill="#188038" d="M0 58v12c0 3.315 2.685 6 6 6h12V58z"/>
+  <path fill="#fbbc04" d="M76 18H58v40h18z"/>
+  <path fill="#1967d2" d="M76 18V6c0-3.315-2.685-6-6-6H58v18z"/>
+  <path fill="#ea4335" d="m58 76 18-18H58z"/>
+</svg>

packages/twenty-front/src/modules/ui/display/icon/components/IconGoogleCalendar.tsx

@@ -0,0 +1,14 @@
+import { useTheme } from '@emotion/react';
+
+import IconGoogleCalendarRaw from '../assets/google-calendar.svg?react';
+
+type IconGoogleCalendarProps = {
+  size?: number;
+};
+
+export const IconGoogleCalendar = (props: IconGoogleCalendarProps) => {
+  const theme = useTheme();
+  const size = props.size ?? theme.icon.size.lg;
+
+  return <IconGoogleCalendarRaw height={size} width={size} />;
+};