feat: add remote object integration databases list card (#4621)

* feat: add remote object integration databases list card

Closes #4549

* fix: fixes after rebase

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsListCard.tsx

@@ -7,8 +7,9 @@ import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
-import { SettingsAccountsListCard } from '@/settings/accounts/components/SettingsAccountsListCard';
+import { SettingsAccountsListEmptyStateCard } from '@/settings/accounts/components/SettingsAccountsListEmptyStateCard';
 import { SettingsAccountsSynchronizationStatus } from '@/settings/accounts/components/SettingsAccountsSynchronizationStatus';
+import { SettingsListCard } from '@/settings/components/SettingsListCard';
 import { IconChevronRight } from '@/ui/display/icon';
 import { IconGoogleCalendar } from '@/ui/display/icon/components/IconGoogleCalendar';
 import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
@@ -36,6 +37,7 @@ export const SettingsAccountsCalendarChannelsListCard = () => {
   const { records: calendarChannels, loading: calendarChannelsLoading } =
     useFindManyRecords<CalendarChannel>({
       objectNameSingular: CoreObjectNameSingular.CalendarChannel,
+      skip: !accounts.length,
       filter: {
         connectedAccountId: {
           in: accounts.map((account) => account.id),
@@ -43,9 +45,14 @@ export const SettingsAccountsCalendarChannelsListCard = () => {
       },
     });
 
+  if (!calendarChannels.length) {
+    return <SettingsAccountsListEmptyStateCard />;
+  }
+
   return (
-    <SettingsAccountsListCard
+    <SettingsListCard
       items={calendarChannels}
+      getItemLabel={(calendarChannel) => calendarChannel.handle}
       isLoading={accountsLoading || calendarChannelsLoading}
       onRowClick={(calendarChannel) =>
         navigate(`/settings/accounts/calendars/${calendarChannel.id}`)

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsListCard.tsx

@@ -0,0 +1,41 @@
+import { useNavigate } from 'react-router-dom';
+
+import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
+import { SettingsAccountsListEmptyStateCard } from '@/settings/accounts/components/SettingsAccountsListEmptyStateCard';
+import { SettingsAccountsRowDropdownMenu } from '@/settings/accounts/components/SettingsAccountsRowDropdownMenu';
+import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
+import { SettingsPath } from '@/types/SettingsPath';
+import { IconGoogle } from '@/ui/display/icon/components/IconGoogle';
+
+import { SettingsListCard } from '../../components/SettingsListCard';
+
+export const SettingsAccountsConnectedAccountsListCard = ({
+  accounts,
+  loading,
+}: {
+  accounts: ConnectedAccount[];
+  loading?: boolean;
+}) => {
+  const navigate = useNavigate();
+
+  if (!accounts.length) {
+    return <SettingsAccountsListEmptyStateCard />;
+  }
+
+  return (
+    <SettingsListCard
+      items={accounts}
+      getItemLabel={(account) => account.handle}
+      isLoading={loading}
+      RowIcon={IconGoogle}
+      RowRightComponent={({ item: account }) => (
+        <SettingsAccountsRowDropdownMenu item={account} />
+      )}
+      hasFooter
+      footerButtonLabel="Add account"
+      onFooterButtonClick={() =>
+        navigate(getSettingsPagePath(SettingsPath.NewAccount))
+      }
+    />
+  );
+};

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsSection.tsx

@@ -1,27 +0,0 @@
-import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
-import { SettingsAccountsRowDropdownMenu } from '@/settings/accounts/components/SettingsAccountsRowDropdownMenu';
-import { H2Title } from '@/ui/display/typography/components/H2Title';
-import { Section } from '@/ui/layout/section/components/Section';
-
-import { SettingsAccountsListCard } from './SettingsAccountsListCard';
-
-export const SettingsAccountsConnectedAccountsSection = ({
-  accounts,
-  loading,
-}: {
-  accounts: ConnectedAccount[];
-  loading?: boolean;
-}) => (
-  <Section>
-    <H2Title
-      title="Connected accounts"
-      description="Manage your internet accounts."
-    />
-    <SettingsAccountsListCard
-      items={accounts}
-      isLoading={loading}
-      RowRightComponent={SettingsAccountsRowDropdownMenu}
-      hasFooter
-    />
-  </Section>
-);

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelsListCard.tsx

@@ -8,8 +8,9 @@ import { MessageChannel } from '@/accounts/types/MessageChannel';
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
-import { SettingsAccountsListCard } from '@/settings/accounts/components/SettingsAccountsListCard';
+import { SettingsAccountsListEmptyStateCard } from '@/settings/accounts/components/SettingsAccountsListEmptyStateCard';
 import { SettingsAccountsSynchronizationStatus } from '@/settings/accounts/components/SettingsAccountsSynchronizationStatus';
+import { SettingsListCard } from '@/settings/components/SettingsListCard';
 import { IconChevronRight } from '@/ui/display/icon';
 import { IconGmail } from '@/ui/display/icon/components/IconGmail';
 
@@ -50,9 +51,14 @@ export const SettingsAccountsMessageChannelsListCard = () => {
     }),
   );
 
+  if (!messageChannelsWithSyncedEmails.length) {
+    return <SettingsAccountsListEmptyStateCard />;
+  }
+
   return (
-    <SettingsAccountsListCard
+    <SettingsListCard
       items={messageChannelsWithSyncedEmails}
+      getItemLabel={(messageChannel) => messageChannel.handle}
       isLoading={accountsLoading || messageChannelsLoading}
       onRowClick={(messageChannel) =>
         navigate(`/settings/accounts/emails/${messageChannel.id}`)

packages/twenty-front/src/modules/settings/components/SettingsListCard.tsx

@@ -1,19 +1,14 @@
 import { ComponentType } from 'react';
-import { useNavigate } from 'react-router-dom';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
-import { SettingsAccountsListEmptyStateCard } from '@/settings/accounts/components/SettingsAccountsListEmptyStateCard';
-import { SettingsAccountsListSkeletonCard } from '@/settings/accounts/components/SettingsAccountsListSkeletonCard';
-import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
-import { SettingsPath } from '@/types/SettingsPath';
+import { SettingsListSkeletonCard } from '@/settings/components/SettingsListSkeletonCard';
 import { IconPlus } from '@/ui/display/icon';
-import { IconGoogle } from '@/ui/display/icon/components/IconGoogle';
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { Card } from '@/ui/layout/card/components/Card';
 import { CardFooter } from '@/ui/layout/card/components/CardFooter';
 
-import { SettingsAccountRow } from './SettingsAccountsRow';
+import { SettingsListItemCardContent } from './SettingsListItemCardContent';
 
 const StyledFooter = styled(CardFooter)`
   align-items: center;
@@ -41,58 +36,54 @@ const StyledButton = styled.button`
   }
 `;
 
-type SettingsAccountsListCardItem = {
-  handle: string;
-  id: string;
-};
-
-type SettingsAccountsListCardProps<T extends SettingsAccountsListCardItem> = {
-  items: T[];
+type SettingsListCardProps<ListItem extends { id: string }> = {
+  items: ListItem[];
+  getItemLabel: (item: ListItem) => string;
   hasFooter?: boolean;
   isLoading?: boolean;
-  onRowClick?: (item: T) => void;
-  RowIcon?: IconComponent;
-  RowRightComponent: ComponentType<{ item: T }>;
+  onRowClick?: (item: ListItem) => void;
+  RowIcon: IconComponent;
+  RowRightComponent: ComponentType<{ item: ListItem }>;
+  footerButtonLabel?: string;
+  onFooterButtonClick?: () => void;
 };
 
-export const SettingsAccountsListCard = <
-  T extends SettingsAccountsListCardItem,
+export const SettingsListCard = <
+  ListItem extends { id: string } = {
+    id: string;
+  },
 >({
   items,
+  getItemLabel,
   hasFooter,
   isLoading,
   onRowClick,
-  RowIcon = IconGoogle,
+  RowIcon,
   RowRightComponent,
-}: SettingsAccountsListCardProps<T>) => {
+  onFooterButtonClick,
+  footerButtonLabel,
+}: SettingsListCardProps<ListItem>) => {
   const theme = useTheme();
-  const navigate = useNavigate();
 
-  if (isLoading === true) return <SettingsAccountsListSkeletonCard />;
-
-  if (!items.length) return <SettingsAccountsListEmptyStateCard />;
+  if (isLoading === true) return <SettingsListSkeletonCard />;
 
   return (
     <Card>
       {items.map((item, index) => (
-        <SettingsAccountRow
+        <SettingsListItemCardContent
           key={item.id}
           LeftIcon={RowIcon}
-          account={item}
+          label={getItemLabel(item)}
           rightComponent={<RowRightComponent item={item} />}
           divider={index < items.length - 1}
           onClick={() => onRowClick?.(item)}
         />
       ))}
       {hasFooter && (
-        <StyledFooter>
-          <StyledButton
-            onClick={() =>
-              navigate(getSettingsPagePath(SettingsPath.NewAccount))
-            }
-          >
+        <StyledFooter divider={!!items.length}>
+          <StyledButton onClick={onFooterButtonClick}>
             <IconPlus size={theme.icon.size.md} />
-            Add account
+            {footerButtonLabel}
           </StyledButton>
         </StyledFooter>
       )}

packages/twenty-front/src/modules/settings/components/SettingsListItemCardContent.tsx

@@ -2,7 +2,6 @@ import { ReactNode } from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
-import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { CardContent } from '@/ui/layout/card/components/CardContent';
 
@@ -21,27 +20,27 @@ const StyledAccountHandle = styled.span`
   flex: 1 0 auto;
 `;
 
-type SettingsAccountRowProps = {
-  account: Pick<ConnectedAccount, 'handle'>;
+type SettingsListItemCardContentProps = {
+  label: string;
   divider?: boolean;
   LeftIcon: IconComponent;
   onClick?: () => void;
   rightComponent: ReactNode;
 };
 
-export const SettingsAccountRow = ({
-  account,
+export const SettingsListItemCardContent = ({
+  label,
   divider,
   LeftIcon,
   onClick,
   rightComponent,
-}: SettingsAccountRowProps) => {
+}: SettingsListItemCardContentProps) => {
   const theme = useTheme();
 
   return (
     <StyledRow onClick={onClick} divider={divider}>
       <LeftIcon size={theme.icon.size.md} />
-      <StyledAccountHandle>{account.handle}</StyledAccountHandle>
+      <StyledAccountHandle>{label}</StyledAccountHandle>
       {rightComponent}
     </StyledRow>
   );

packages/twenty-front/src/modules/settings/components/SettingsListSkeletonCard.tsx

@@ -7,4 +7,4 @@ const StyledCard = styled(Card)`
   height: 40px;
 `;
 
-export { StyledCard as SettingsAccountsListSkeletonCard };
+export { StyledCard as SettingsListSkeletonCard };

packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationDatabasesListCard.tsx

@@ -0,0 +1,73 @@
+import { useNavigate } from 'react-router-dom';
+import styled from '@emotion/styled';
+
+import { SettingsListCard } from '@/settings/components/SettingsListCard';
+import { IconChevronRight } from '@/ui/display/icon';
+import { Status } from '@/ui/display/status/components/Status';
+import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
+
+type SettingsIntegrationDatabasesListCardProps = {
+  integrationLogoUrl: string;
+  databases: {
+    id: string;
+    key: string;
+    name: string;
+    tables: {
+      name: string;
+    }[];
+  }[];
+};
+
+const StyledIntegrationLogoContainer = styled.div`
+  align-items: center;
+  display: flex;
+  height: ${({ theme }) => theme.spacing(4)};
+  justify-content: center;
+  width: ${({ theme }) => theme.spacing(4)};
+`;
+
+const StyledIntegrationLogo = styled.img`
+  height: 100%;
+`;
+
+const StyledRowRightContainer = styled.div`
+  align-items: center;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(1)};
+`;
+
+export const SettingsIntegrationDatabasesListCard = ({
+  integrationLogoUrl,
+  databases,
+}: SettingsIntegrationDatabasesListCardProps) => {
+  const navigate = useNavigate();
+
+  return (
+    <SettingsListCard
+      items={databases}
+      RowIcon={() => (
+        <StyledIntegrationLogoContainer>
+          <StyledIntegrationLogo alt="" src={integrationLogoUrl} />
+        </StyledIntegrationLogoContainer>
+      )}
+      RowRightComponent={({ item: database }) => (
+        <StyledRowRightContainer>
+          <Status
+            color="green"
+            text={
+              database.tables.length === 1
+                ? `1 tracked table`
+                : `${database.tables.length} tracked tables`
+            }
+          />
+          <LightIconButton Icon={IconChevronRight} accent="tertiary" />
+        </StyledRowRightContainer>
+      )}
+      onRowClick={(database) => navigate(`./${database.key}`)}
+      getItemLabel={(database) => database.name}
+      hasFooter
+      footerButtonLabel="Add connection"
+      onFooterButtonClick={() => navigate('./new')}
+    />
+  );
+};

packages/twenty-front/src/modules/ui/layout/card/components/CardFooter.tsx

@@ -1,8 +1,10 @@
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 
-const StyledCardFooter = styled.div`
+const StyledCardFooter = styled.div<{ divider?: boolean }>`
   background-color: ${({ theme }) => theme.background.primary};
-  border-top: 1px solid ${({ theme }) => theme.border.color.medium};
+  border-top: ${({ divider = true, theme }) =>
+    divider ? css`1px solid ${theme.border.color.medium}` : 0};
   font-size: ${({ theme }) => theme.font.size.sm};
   padding: ${({ theme }) => theme.spacing(2, 4)};
 `;