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

19
packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetail.tsx
View File

@ -13,13 +13,13 @@ import { getDisabledFieldMetadataItems } from '@/object-metadata/utils/getDisabl
import { getFieldSlug } from '@/object-metadata/utils/getFieldSlug';
import { isLabelIdentifierField } from '@/object-metadata/utils/isLabelIdentifierField';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { SettingsAboutSection } from '@/settings/data-model/object-details/components/SettingsObjectAboutSection';
import { SettingsObjectFieldActiveActionDropdown } from '@/settings/data-model/object-details/components/SettingsObjectFieldActiveActionDropdown';
import { SettingsObjectFieldInactiveActionDropdown } from '@/settings/data-model/object-details/components/SettingsObjectFieldDisabledActionDropdown';
import {
SettingsObjectFieldItemTableRow,
StyledObjectFieldTableRow,
} from '@/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow';
import { SettingsObjectSummaryCard } from '@/settings/data-model/object-details/components/SettingsObjectSummaryCard';
import { getFieldIdentifierType } from '@/settings/data-model/utils/getFieldIdentifierType';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { AppPath } from '@/types/AppPath';
@ -98,13 +98,16 @@ export const SettingsObjectDetail = () => {
{ children: activeObjectMetadataItem.labelPlural },
]}
/>
<SettingsAboutSection
iconKey={activeObjectMetadataItem.icon ?? undefined}
name={activeObjectMetadataItem.labelPlural || ''}
isCustom={activeObjectMetadataItem.isCustom}
onDeactivate={handleDisableObject}
onEdit={() => navigate('./edit')}
/>
<Section>
<H2Title title="About" description="Manage your object" />
<SettingsObjectSummaryCard
iconKey={activeObjectMetadataItem.icon ?? undefined}
name={activeObjectMetadataItem.labelPlural || ''}
isCustom={activeObjectMetadataItem.isCustom}
onDeactivate={handleDisableObject}
onEdit={() => navigate('./edit')}
/>
</Section>
<Section>
<H2Title
title="Fields"

11
packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationDatabaseConnection.tsx
View File

@ -7,9 +7,12 @@ import { useSettingsIntegrationCategories } from '@/settings/integrations/hooks/
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { AppPath } from '@/types/AppPath';
import { SettingsPath } from '@/types/SettingsPath';
import { H2Title } from '@/ui/display/typography/components/H2Title';
import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
import { Section } from '@/ui/layout/section/components/Section';
import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
import { SettingsIntegrationDatabaseConnectionSummaryCard } from '~/pages/settings/integrations/SettingsIntegrationDatabaseConnectionSummaryCard';
import { mockedRemoteObjectIntegrations } from '~/testing/mock-data/remoteObjectDatabases';
export const SettingsIntegrationDatabaseConnection = () => {
@ -66,6 +69,14 @@ export const SettingsIntegrationDatabaseConnection = () => {
{ children: connection.name },
]}
/>
<Section>
<H2Title title="About" description="About this remote object" />
<SettingsIntegrationDatabaseConnectionSummaryCard
databaseLogoUrl={integration.from.image}
connectionName={connection.name}
connectedTablesNb={connection.tables.length}
/>
</Section>
</SettingsPageContainer>
</SubMenuTopBarContainer>
);

44
packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationDatabaseConnectionSummaryCard.tsx Normal file
View File

@ -0,0 +1,44 @@
import styled from '@emotion/styled';
import { SettingsSummaryCard } from '@/settings/components/SettingsSummaryCard';
import { SettingsIntegrationDatabaseConnectedTablesStatus } from '@/settings/integrations/components/SettingsIntegrationDatabaseConnectedTablesStatus';
type SettingsIntegrationDatabaseConnectionSummaryCardProps = {
databaseLogoUrl: string;
connectionName: string;
connectedTablesNb: number;
};
const StyledDatabaseLogoContainer = styled.div`
align-items: center;
display: flex;
height: ${({ theme }) => theme.spacing(4)};
justify-content: center;
width: ${({ theme }) => theme.spacing(4)};
`;
const StyledDatabaseLogo = styled.img`
height: 100%;
`;
export const SettingsIntegrationDatabaseConnectionSummaryCard = ({
databaseLogoUrl,
connectionName,
connectedTablesNb,
}: SettingsIntegrationDatabaseConnectionSummaryCardProps) => (
<SettingsSummaryCard
title={
<>
<StyledDatabaseLogoContainer>
<StyledDatabaseLogo alt="" src={databaseLogoUrl} />
</StyledDatabaseLogoContainer>
{connectionName}
</>
}
rightComponent={
<SettingsIntegrationDatabaseConnectedTablesStatus
connectedTablesCount={connectedTablesNb}
/>
}
/>
);