twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-11-23 14:03:35 +03:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
…tion page

Closes #4872
This commit is contained in:
Thaïs 2024-04-08 11:28:04 +02:00 committed by GitHub
parent 2890a7a44a
commit 1cbbb1600c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 44 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,13 @@
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { IconDotsVertical, IconTrash } from 'twenty-ui';
import { SettingsSummaryCard } from '@/settings/components/SettingsSummaryCard'; import { SettingsSummaryCard } from '@/settings/components/SettingsSummaryCard';
import { SettingsIntegrationDatabaseConnectedTablesStatus } from '@/settings/integrations/components/SettingsIntegrationDatabaseConnectedTablesStatus'; 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 = { type SettingsIntegrationDatabaseConnectionSummaryCardProps = {
databaseLogoUrl: string; databaseLogoUrl: string;
@ -25,7 +31,11 @@ export const SettingsIntegrationDatabaseConnectionSummaryCard = ({
databaseLogoUrl, databaseLogoUrl,
connectionName, connectionName,
connectedTablesNb, connectedTablesNb,
}: SettingsIntegrationDatabaseConnectionSummaryCardProps) => ( }: SettingsIntegrationDatabaseConnectionSummaryCardProps) => {
const dropdownId =
'settings-integration-database-connection-summary-card-dropdown';
return (
<SettingsSummaryCard <SettingsSummaryCard
title={ title={
<> <>
@ -36,9 +46,26 @@ export const SettingsIntegrationDatabaseConnectionSummaryCard = ({
</> </>
} }
rightComponent={ rightComponent={
<>
<SettingsIntegrationDatabaseConnectedTablesStatus <SettingsIntegrationDatabaseConnectedTablesStatus
connectedTablesCount={connectedTablesNb} connectedTablesCount={connectedTablesNb}
/> />
<Dropdown
dropdownId={dropdownId}
dropdownHotkeyScope={{ scope: dropdownId }}
clickableComponent={
<LightIconButton Icon={IconDotsVertical} accent="tertiary" />
}
dropdownComponents={
<DropdownMenu>
<DropdownMenuItemsContainer>
<MenuItem LeftIcon={IconTrash} text="Remove" />
</DropdownMenuItemsContainer>
</DropdownMenu>
} }
/> />
); </>
}
/>
);
};