From 1cbbb1600cf0d974314ca4eb2272a34954c02cbc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tha=C3=AFs?= <guigon.thais@gmail.com>
Date: Mon, 8 Apr 2024 11:28:04 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20add=20Remove=20menu=20option=20to=20Set?=
 =?UTF-8?q?tings/Integrations/Database/Connec=E2=80=A6=20(#4874)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

…tion page

Closes #4872
---
 ...tegrationDatabaseConnectionSummaryCard.tsx | 61 +++++++++++++------
 1 file changed, 44 insertions(+), 17 deletions(-)

diff --git a/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationDatabaseConnectionSummaryCard.tsx b/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationDatabaseConnectionSummaryCard.tsx
index 36ceebab48..216d3625c6 100644
--- a/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationDatabaseConnectionSummaryCard.tsx
+++ b/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationDatabaseConnectionSummaryCard.tsx
@@ -1,7 +1,13 @@
 import styled from '@emotion/styled';
+import { IconDotsVertical, IconTrash } from 'twenty-ui';
 
 import { SettingsSummaryCard } from '@/settings/components/SettingsSummaryCard';
 import { SettingsIntegrationDatabaseConnectedTablesStatus } from '@/settings/integrations/components/SettingsIntegrationDatabaseConnectedTablesStatus';
+import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
+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 { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 
 type SettingsIntegrationDatabaseConnectionSummaryCardProps = {
   databaseLogoUrl: string;
@@ -25,20 +31,41 @@ export const SettingsIntegrationDatabaseConnectionSummaryCard = ({
   databaseLogoUrl,
   connectionName,
   connectedTablesNb,
-}: SettingsIntegrationDatabaseConnectionSummaryCardProps) => (
-  <SettingsSummaryCard
-    title={
-      <>
-        <StyledDatabaseLogoContainer>
-          <StyledDatabaseLogo alt="" src={databaseLogoUrl} />
-        </StyledDatabaseLogoContainer>
-        {connectionName}
-      </>
-    }
-    rightComponent={
-      <SettingsIntegrationDatabaseConnectedTablesStatus
-        connectedTablesCount={connectedTablesNb}
-      />
-    }
-  />
-);
+}: SettingsIntegrationDatabaseConnectionSummaryCardProps) => {
+  const dropdownId =
+    'settings-integration-database-connection-summary-card-dropdown';
+
+  return (
+    <SettingsSummaryCard
+      title={
+        <>
+          <StyledDatabaseLogoContainer>
+            <StyledDatabaseLogo alt="" src={databaseLogoUrl} />
+          </StyledDatabaseLogoContainer>
+          {connectionName}
+        </>
+      }
+      rightComponent={
+        <>
+          <SettingsIntegrationDatabaseConnectedTablesStatus
+            connectedTablesCount={connectedTablesNb}
+          />
+          <Dropdown
+            dropdownId={dropdownId}
+            dropdownHotkeyScope={{ scope: dropdownId }}
+            clickableComponent={
+              <LightIconButton Icon={IconDotsVertical} accent="tertiary" />
+            }
+            dropdownComponents={
+              <DropdownMenu>
+                <DropdownMenuItemsContainer>
+                  <MenuItem LeftIcon={IconTrash} text="Remove" />
+                </DropdownMenuItemsContainer>
+              </DropdownMenu>
+            }
+          />
+        </>
+      }
+    />
+  );
+};