Delete connection from frontend (#4880)

This PR:
- creates the query to delete a connection
- creates the hook that triggers the query
- triggers the hook function when clicking on remove + get back to
connection page

---------

Co-authored-by: Thomas Trompette <thomast@twenty.com>

packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationDatabaseConnection.tsx

@@ -4,6 +4,7 @@ import { useNavigate, useParams } from 'react-router-dom';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { IconSettings } from 'twenty-ui';
 
+import { useDeleteOneDatabaseConnection } from '@/databases/hooks/useDeleteOneDatabaseConnection';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import {
   SettingsIntegrationDatabaseTablesListCard,
@@ -48,6 +49,16 @@ export const SettingsIntegrationDatabaseConnection = () => {
     )?.connections || [];
   const connection = connections.find(({ key }) => key === connectionKey);
 
+  const { deleteOneDatabaseConnection } = useDeleteOneDatabaseConnection();
+
+  const deleteConnection = async () => {
+    if (!connection) return;
+
+    await deleteOneDatabaseConnection({ id: connection.id });
+
+    navigate(`${settingsIntegrationsPagePath}/${databaseKey}`);
+  };
+
   useEffect(() => {
     if (!isIntegrationAvailable || !connection) {
       navigate(AppPath.NotFound);
@@ -91,6 +102,7 @@ export const SettingsIntegrationDatabaseConnection = () => {
               databaseLogoUrl={integration.from.image}
               connectionName={connection.name}
               connectedTablesNb={tables.length}
+              onRemove={deleteConnection}
             />
           </Section>
           <Section>

packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationDatabaseConnectionSummaryCard.tsx

@@ -13,6 +13,7 @@ type SettingsIntegrationDatabaseConnectionSummaryCardProps = {
   databaseLogoUrl: string;
   connectionName: string;
   connectedTablesNb: number;
+  onRemove: () => void;
 };
 
 const StyledDatabaseLogoContainer = styled.div`
@@ -31,6 +32,7 @@ export const SettingsIntegrationDatabaseConnectionSummaryCard = ({
   databaseLogoUrl,
   connectionName,
   connectedTablesNb,
+  onRemove,
 }: SettingsIntegrationDatabaseConnectionSummaryCardProps) => {
   const dropdownId =
     'settings-integration-database-connection-summary-card-dropdown';
@@ -59,7 +61,11 @@ export const SettingsIntegrationDatabaseConnectionSummaryCard = ({
             dropdownComponents={
               <DropdownMenu>
                 <DropdownMenuItemsContainer>
-                  <MenuItem LeftIcon={IconTrash} text="Remove" />
+                  <MenuItem
+                    LeftIcon={IconTrash}
+                    text="Remove"
+                    onClick={onRemove}
+                  />
                 </DropdownMenuItemsContainer>
               </DropdownMenu>
             }