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

…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>

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) => (
+  <Card>
+    <StyledCardContent>
+      <StyledTitle>{title}</StyledTitle>
+      {rightComponent}
+    </StyledCardContent>
+  </Card>
+);

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 (
-    <Section>
-      <H2Title title="About" description="Manage your object" />
-      <Card>
-        <StyledCardContent>
-          <StyledName>
-            {!!Icon && <Icon size={theme.icon.size.md} />}
-            {name}
-          </StyledName>
+    <SettingsSummaryCard
+      title={
+        <>
+          {!!Icon && <Icon size={theme.icon.size.md} />}
+          {name}
+        </>
+      }
+      rightComponent={
+        <>
           <StyledIsCustomTag isCustom={isCustom} />
           <Dropdown
             dropdownId={dropdownId}
@@ -103,8 +86,8 @@ export const SettingsAboutSection = ({
               scope: dropdownId,
             }}
           />
-        </StyledCardContent>
-      </Card>
-    </Section>
+        </>
+      }
+    />
   );
 };

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) => (
+  <Status
+    color="green"
+    text={
+      connectedTablesCount === 1
+        ? `1 tracked table`
+        : `${connectedTablesCount} tracked tables`
+    }
+  />
+);

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 }) => (
         <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>