admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: add Database Connection Summary Card to Settings/Integrations/D… (#4791)

Browse Source 
…atabase/Connection page

Closes #4558

<img width="542" alt="image"
src="https://github.com/twentyhq/twenty/assets/3098428/16d7d8ce-57db-4e48-ba72-a2318a2d34a4">

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
Thaïs
2024-04-04 15:56:52 +02:00
committed by GitHub
parent 9d45f7811e
commit f184541293
7 changed files with 141 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationDatabaseConnectedTablesStatus.tsx Normal file
View File

@ -0,0 +1,18 @@
import { Status } from '@/ui/display/status/components/Status';
type SettingsIntegrationDatabaseConnectedTablesStatusProps = {
connectedTablesCount: number;
};
export const SettingsIntegrationDatabaseConnectedTablesStatus = ({
connectedTablesCount,
}: SettingsIntegrationDatabaseConnectedTablesStatusProps) => (
<Status
color="green"
text={
connectedTablesCount === 1
? `1 tracked table`
: `${connectedTablesCount} tracked tables`
}
/>
);

11
packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationDatabaseConnectionsListCard.tsx
View File

@ -3,7 +3,7 @@ import styled from '@emotion/styled';
import { IconChevronRight } from 'twenty-ui';
import { SettingsListCard } from '@/settings/components/SettingsListCard';
import { Status } from '@/ui/display/status/components/Status';
import { SettingsIntegrationDatabaseConnectedTablesStatus } from '@/settings/integrations/components/SettingsIntegrationDatabaseConnectedTablesStatus';
import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
type SettingsIntegrationDatabaseConnectionsListCardProps = {
@ -52,13 +52,8 @@ export const SettingsIntegrationDatabaseConnectionsListCard = ({
)}
RowRightComponent={({ item: connection }) => (
<StyledRowRightContainer>
<Status
color="green"
text={
connection.tables.length === 1
? `1 tracked table`
: `${connection.tables.length} tracked tables`
}
<SettingsIntegrationDatabaseConnectedTablesStatus
connectedTablesCount={connection.tables.length}
/>
<LightIconButton Icon={IconChevronRight} accent="tertiary" />
</StyledRowRightContainer>