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={ + + } + /> +);