twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-12-26 05:24:04 +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

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

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