feat: add Remove menu option to Settings/Integrations/Database/Connec… (

#4874)

…tion page

Closes #4872

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>
+            }
+          />
+        </>
+      }
+    />
+  );
+};