3233 connect connected accounts settings to backend (#3235)

* connect SettingsAccountsConnectedAccountsSection to backend

* get current user

packages/twenty-front/src/modules/accounts/types/Account.ts

@@ -1,8 +1,8 @@
 import { InboxSettingsVisibilityValue } from '@/settings/accounts/components/SettingsAccountsInboxSettingsVisibilitySection';
 
 export type Account = {
-  email: string;
+  id: string;
+  handle: string;
   isSynced?: boolean;
-  uuid: string;
   visibility: InboxSettingsVisibilityValue;
 };

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

@@ -46,7 +46,7 @@ export const SettingsAccountsCard = ({
     <Card>
       {accounts.map((account, index) => (
         <SettingsAccountRow
-          key={account.uuid}
+          key={account.id}
           LeftIcon={IconGoogle}
           account={account}
           rightComponent={

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

@@ -1,19 +1,33 @@
-import { useState } from 'react';
+import { useRecoilValue } from 'recoil';
 
+import { Account } from '@/accounts/types/Account';
+import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
+import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord';
+import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 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 = () => {
-  const [accounts, setAccounts] = useState(mockedAccounts);
+  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
 
-  const handleAccountRemove = (uuid: string) =>
+  const accounts = useFindManyRecords<Account>({
-    setAccounts((previousAccounts) =>
+    objectNameSingular: 'connectedAccount',
-      previousAccounts.filter((account) => account.uuid !== uuid),
+    filter: {
-    );
+      accountOwnerId: {
+        eq: currentWorkspaceMember?.id,
+      },
+    },
+  }).records;
+
+  const { deleteOneRecord } = useDeleteOneRecord({
+    objectNameSingular: 'connectedAccount',
+  });
+
+  const handleAccountRemove = (idToRemove: string) =>
+    deleteOneRecord(idToRemove);
 
   return (
     <Section>
@@ -21,7 +35,7 @@ export const SettingsAccountsConnectedAccountsSection = () => {
         title="Connected accounts"
         description="Manage your internet accounts."
       />
-      {accounts.length ? (
+      {accounts?.length ? (
         <SettingsAccountsCard
           accounts={accounts}
           onAccountRemove={handleAccountRemove}

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

@@ -37,7 +37,7 @@ export const SettingsAccountRow = ({
   return (
     <StyledRow onClick={onClick} divider={divider}>
       <LeftIcon size={theme.icon.size.sm} />
-      {account.email}
+      {account.handle}
       {rightComponent}
     </StyledRow>
   );

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

@@ -21,7 +21,7 @@ export const SettingsAccountsRowDropdownMenu = ({
   className,
   onRemove,
 }: SettingsAccountsRowDropdownMenuProps) => {
-  const dropdownScopeId = `settings-account-row-${account.uuid}`;
+  const dropdownScopeId = `settings-account-row-${account.id}`;
 
   const navigate = useNavigate();
   const { closeDropdown } = useDropdown(dropdownScopeId);
@@ -42,7 +42,7 @@ export const SettingsAccountsRowDropdownMenu = ({
                 LeftIcon={IconMail}
                 text="Emails settings"
                 onClick={() => {
-                  navigate(`/settings/accounts/emails/${account.uuid}`);
+                  navigate(`/settings/accounts/emails/${account.id}`);
                   closeDropdown();
                 }}
               />
@@ -52,7 +52,7 @@ export const SettingsAccountsRowDropdownMenu = ({
                   LeftIcon={IconTrash}
                   text="Remove account"
                   onClick={() => {
-                    onRemove(account.uuid);
+                    onRemove(account.id);
                     closeDropdown();
                   }}
                 />