diff --git a/packages/twenty-front/src/modules/settings/components/SettingsSummaryCard.tsx b/packages/twenty-front/src/modules/settings/components/SettingsSummaryCard.tsx
new file mode 100644
index 0000000000..6c7eeeed8d
--- /dev/null
+++ b/packages/twenty-front/src/modules/settings/components/SettingsSummaryCard.tsx
@@ -0,0 +1,38 @@
+import { ReactNode } from 'react';
+import styled from '@emotion/styled';
+
+import { Card } from '@/ui/layout/card/components/Card';
+import { CardContent } from '@/ui/layout/card/components/CardContent';
+
+type SettingsSummaryCardProps = {
+ title: ReactNode;
+ rightComponent: ReactNode;
+};
+
+const StyledCardContent = styled(CardContent)`
+ align-items: center;
+ display: flex;
+ gap: ${({ theme }) => theme.spacing(2)};
+ padding: ${({ theme }) => theme.spacing(2)};
+ min-height: ${({ theme }) => theme.spacing(6)};
+`;
+
+const StyledTitle = styled.div`
+ color: ${({ theme }) => theme.font.color.primary};
+ display: flex;
+ font-weight: ${({ theme }) => theme.font.weight.medium};
+ gap: ${({ theme }) => theme.spacing(2)};
+ margin-right: auto;
+`;
+
+export const SettingsSummaryCard = ({
+ title,
+ rightComponent,
+}: SettingsSummaryCardProps) => (
+
+
+ {title}
+ {rightComponent}
+
+
+);
diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectAboutSection.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectSummaryCard.tsx
similarity index 68%
rename from packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectAboutSection.tsx
rename to packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectSummaryCard.tsx
index b494270694..84a4e87dc8 100644
--- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectAboutSection.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectSummaryCard.tsx
@@ -2,20 +2,17 @@ import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { IconArchive, IconDotsVertical, IconPencil } from 'twenty-ui';
+import { SettingsSummaryCard } from '@/settings/components/SettingsSummaryCard';
import { SettingsDataModelIsCustomTag } from '@/settings/data-model/objects/SettingsDataModelIsCustomTag';
import { useIcons } from '@/ui/display/icon/hooks/useIcons';
-import { H2Title } from '@/ui/display/typography/components/H2Title';
import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
-import { Card } from '@/ui/layout/card/components/Card';
-import { CardContent } from '@/ui/layout/card/components/CardContent';
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 { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { Section } from '@/ui/layout/section/components/Section';
import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
-type SettingsAboutSectionProps = {
+type SettingsObjectSummaryCardProps = {
iconKey?: string;
isCustom: boolean;
name: string;
@@ -23,21 +20,6 @@ type SettingsAboutSectionProps = {
onEdit: () => void;
};
-const StyledCardContent = styled(CardContent)`
- align-items: center;
- display: flex;
- gap: ${({ theme }) => theme.spacing(2)};
- padding: ${({ theme }) => theme.spacing(2)};
-`;
-
-const StyledName = styled.div`
- color: ${({ theme }) => theme.font.color.primary};
- display: flex;
- font-weight: ${({ theme }) => theme.font.weight.medium};
- gap: ${({ theme }) => theme.spacing(2)};
- margin-right: auto;
-`;
-
const StyledIsCustomTag = styled(SettingsDataModelIsCustomTag)`
box-sizing: border-box;
height: ${({ theme }) => theme.spacing(6)};
@@ -45,13 +27,13 @@ const StyledIsCustomTag = styled(SettingsDataModelIsCustomTag)`
const dropdownId = 'settings-object-edit-about-menu-dropdown';
-export const SettingsAboutSection = ({
+export const SettingsObjectSummaryCard = ({
iconKey = '',
isCustom,
name,
onDeactivate,
onEdit,
-}: SettingsAboutSectionProps) => {
+}: SettingsObjectSummaryCardProps) => {
const theme = useTheme();
const { getIcon } = useIcons();
const Icon = getIcon(iconKey);
@@ -69,14 +51,15 @@ export const SettingsAboutSection = ({
};
return (
-
-
-
-
-
- {!!Icon && }
- {name}
-
+
+ {!!Icon && }
+ {name}
+ >
+ }
+ rightComponent={
+ <>
-
-
-
+ >
+ }
+ />
);
};
diff --git a/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationDatabaseConnectedTablesStatus.tsx b/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationDatabaseConnectedTablesStatus.tsx
new file mode 100644
index 0000000000..a934efee3e
--- /dev/null
+++ b/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationDatabaseConnectedTablesStatus.tsx
@@ -0,0 +1,18 @@
+import { Status } from '@/ui/display/status/components/Status';
+
+type SettingsIntegrationDatabaseConnectedTablesStatusProps = {
+ connectedTablesCount: number;
+};
+
+export const SettingsIntegrationDatabaseConnectedTablesStatus = ({
+ connectedTablesCount,
+}: SettingsIntegrationDatabaseConnectedTablesStatusProps) => (
+
+);
diff --git a/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationDatabaseConnectionsListCard.tsx b/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationDatabaseConnectionsListCard.tsx
index d38e8dc1d7..af0df28157 100644
--- a/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationDatabaseConnectionsListCard.tsx
+++ b/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationDatabaseConnectionsListCard.tsx
@@ -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 }) => (
-
diff --git a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetail.tsx b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetail.tsx
index 713f92f325..59491290bb 100644
--- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetail.tsx
+++ b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetail.tsx
@@ -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 },
]}
/>
- navigate('./edit')}
- />
+
+
+ navigate('./edit')}
+ />
+
{
@@ -66,6 +69,14 @@ export const SettingsIntegrationDatabaseConnection = () => {
{ children: connection.name },
]}
/>
+
);
diff --git a/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationDatabaseConnectionSummaryCard.tsx b/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationDatabaseConnectionSummaryCard.tsx
new file mode 100644
index 0000000000..36ceebab48
--- /dev/null
+++ b/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationDatabaseConnectionSummaryCard.tsx
@@ -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) => (
+
+
+
+
+ {connectionName}
+ >
+ }
+ rightComponent={
+
+ }
+ />
+);