From ad47ab5bcd30f0800dba9ef37925d16acf8c84ab Mon Sep 17 00:00:00 2001
From: Alex Motoc <alexmotoc97@gmail.com>
Date: Wed, 19 Feb 2025 15:29:10 +0000
Subject: [PATCH] Display confirmation dialog on connected account deletion
 (#10323)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

![deleteConfirmation](https://github.com/user-attachments/assets/1f0fea78-d02c-4351-b79f-733c08e0e0ec)

Fairly straightforward change, it's my first contribution in this
project so tried to follow the existing patterns.
I couldn't find any component tests or e2e Playwright tests touching
this area to update - happy to write some from scratch if necessary!

Closes #10285

---------

Co-authored-by: Félix Malfait <felix@twenty.com>
---
 .github/workflows/i18n-pull.yaml              |   3 +
 .../SettingsAccountsRowDropdownMenu.tsx       | 109 +++++++++++-------
 2 files changed, 69 insertions(+), 43 deletions(-)

diff --git a/.github/workflows/i18n-pull.yaml b/.github/workflows/i18n-pull.yaml
index b45ab4a68..562f9feec 100644
--- a/.github/workflows/i18n-pull.yaml
+++ b/.github/workflows/i18n-pull.yaml
@@ -104,6 +104,9 @@ jobs:
           npx nx run twenty-emails:lingui:compile 
           npx nx run twenty-front:lingui:compile
 
+      - name: Debug git status
+        run: git status
+
       - name: Check and commit compiled files
         id: check_changes
         run: |
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx
index 3192bd281..a02cf68bf 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   IconCalendarEvent,
   IconDotsVertical,
@@ -16,6 +17,7 @@ import { SettingsPath } from '@/types/SettingsPath';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
 import { useNavigateSettings } from '~/hooks/useNavigateSettings';
 
 type SettingsAccountsRowDropdownMenuProps = {
@@ -27,6 +29,9 @@ export const SettingsAccountsRowDropdownMenu = ({
 }: SettingsAccountsRowDropdownMenuProps) => {
   const dropdownId = `settings-account-row-${account.id}`;
 
+  const [isDeleteAccountModalOpen, setIsDeleteAccountModalOpen] =
+    useState(false);
+
   const navigate = useNavigateSettings();
   const { closeDropdown } = useDropdown(dropdownId);
 
@@ -35,54 +40,72 @@ export const SettingsAccountsRowDropdownMenu = ({
   });
   const { triggerApisOAuth } = useTriggerApisOAuth();
 
+  const deleteAccount = async () => {
+    await destroyOneRecord(account.id);
+    setIsDeleteAccountModalOpen(false);
+  };
+
   return (
-    <Dropdown
-      dropdownId={dropdownId}
-      dropdownPlacement="right-start"
-      dropdownHotkeyScope={{ scope: dropdownId }}
-      clickableComponent={
-        <LightIconButton Icon={IconDotsVertical} accent="tertiary" />
-      }
-      dropdownMenuWidth={160}
-      dropdownComponents={
-        <DropdownMenuItemsContainer>
-          <MenuItem
-            LeftIcon={IconMail}
-            text="Emails settings"
-            onClick={() => {
-              navigate(SettingsPath.AccountsEmails);
-              closeDropdown();
-            }}
-          />
-          <MenuItem
-            LeftIcon={IconCalendarEvent}
-            text="Calendar settings"
-            onClick={() => {
-              navigate(SettingsPath.AccountsCalendars);
-              closeDropdown();
-            }}
-          />
-          {account.authFailedAt && (
+    <>
+      <Dropdown
+        dropdownId={dropdownId}
+        className={className}
+        dropdownPlacement="right-start"
+        dropdownHotkeyScope={{ scope: dropdownId }}
+        clickableComponent={
+          <LightIconButton Icon={IconDotsVertical} accent="tertiary" />
+        }
+        dropdownMenuWidth={160}
+        dropdownComponents={
+          <DropdownMenuItemsContainer>
             <MenuItem
-              LeftIcon={IconRefresh}
-              text="Reconnect"
+              LeftIcon={IconMail}
+              text="Emails settings"
               onClick={() => {
-                triggerApisOAuth(account.provider);
+                navigate(SettingsPath.AccountsEmails);
                 closeDropdown();
               }}
             />
-          )}
-          <MenuItem
-            accent="danger"
-            LeftIcon={IconTrash}
-            text="Remove account"
-            onClick={() => {
-              destroyOneRecord(account.id);
-              closeDropdown();
-            }}
-          />
-        </DropdownMenuItemsContainer>
-      }
-    />
+            <MenuItem
+              LeftIcon={IconCalendarEvent}
+              text="Calendar settings"
+              onClick={() => {
+                navigate(SettingsPath.AccountsCalendars);
+                closeDropdown();
+              }}
+            />
+            {account.authFailedAt && (
+              <MenuItem
+                LeftIcon={IconRefresh}
+                text="Reconnect"
+                onClick={() => {
+                  triggerApisOAuth(account.provider);
+                  closeDropdown();
+                }}
+              />
+            )}
+            <MenuItem
+              accent="danger"
+              LeftIcon={IconTrash}
+              text="Remove account"
+              onClick={() => {
+                setIsDeleteAccountModalOpen(true);
+                closeDropdown();
+              }}
+            />
+          </DropdownMenuItemsContainer>
+        }
+      />
+      <ConfirmationModal
+        isOpen={isDeleteAccountModalOpen}
+        setIsOpen={setIsDeleteAccountModalOpen}
+        title="Data deletion"
+        subtitle={
+          <>All emails and events linked to this account will be deleted</>
+        }
+        onConfirmClick={deleteAccount}
+        deleteButtonText="Delete account"
+      />
+    </>
   );
 };