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

61
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,20 +31,41 @@ export const SettingsIntegrationDatabaseConnectionSummaryCard = ({
databaseLogoUrl, databaseLogoUrl,
connectionName, connectionName,
connectedTablesNb, connectedTablesNb,
}: SettingsIntegrationDatabaseConnectionSummaryCardProps) => ( }: SettingsIntegrationDatabaseConnectionSummaryCardProps) => {
<SettingsSummaryCard const dropdownId =
title={ 'settings-integration-database-connection-summary-card-dropdown';
<>
<StyledDatabaseLogoContainer> return (
<StyledDatabaseLogo alt="" src={databaseLogoUrl} /> <SettingsSummaryCard
</StyledDatabaseLogoContainer> title={
{connectionName} <>
</> <StyledDatabaseLogoContainer>
} <StyledDatabaseLogo alt="" src={databaseLogoUrl} />
rightComponent={ </StyledDatabaseLogoContainer>
<SettingsIntegrationDatabaseConnectedTablesStatus {connectionName}
connectedTablesCount={connectedTablesNb} </>
/> }
} 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>
}
/>
</>
}
/>
);
};