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 { SettingsListSkeletonCard } from '@/settings/components/SettingsListSkeletonCard';
-import { SettingsAccountsListSkeletonCard } from '@/settings/accounts/components/SettingsAccountsListSkeletonCard';
-import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
-import { SettingsPath } from '@/types/SettingsPath';
 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 = {
+type SettingsListCardProps<ListItem extends { id: string }> = {
-  handle: string;
+  items: ListItem[];
-  id: string;
+  getItemLabel: (item: ListItem) => string;
-};
-
-type SettingsAccountsListCardProps<T extends SettingsAccountsListCardItem> = {
-  items: T[];
   hasFooter?: boolean;
   isLoading?: boolean;
-  onRowClick?: (item: T) => void;
+  onRowClick?: (item: ListItem) => void;
-  RowIcon?: IconComponent;
+  RowIcon: IconComponent;
-  RowRightComponent: ComponentType<{ item: T }>;
+  RowRightComponent: ComponentType<{ item: ListItem }>;
+  footerButtonLabel?: string;
+  onFooterButtonClick?: () => void;
 };
 
-export const SettingsAccountsListCard = <
+export const SettingsListCard = <
-  T extends SettingsAccountsListCardItem,
+  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 (isLoading === true) return <SettingsListSkeletonCard />;
-
-  if (!items.length) return <SettingsAccountsListEmptyStateCard />;
 
   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>
+        <StyledFooter divider={!!items.length}>
-          <StyledButton
+          <StyledButton onClick={onFooterButtonClick}>
-            onClick={() =>
-              navigate(getSettingsPagePath(SettingsPath.NewAccount))
-            }
-          >
             <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 = {
+type SettingsListItemCardContentProps = {
-  account: Pick<ConnectedAccount, 'handle'>;
+  label: string;
   divider?: boolean;
   LeftIcon: IconComponent;
   onClick?: () => void;
   rightComponent: ReactNode;
 };
 
-export const SettingsAccountRow = ({
+export const SettingsListItemCardContent = ({
-  account,
+  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)};
 `;

packages/twenty-front/src/pages/settings/SettingsBilling.tsx

@@ -6,24 +6,24 @@ import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { useOnboardingStatus } from '@/auth/hooks/useOnboardingStatus.ts';
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState.ts';
 import { OnboardingStatus } from '@/auth/utils/getOnboardingStatus.ts';
-import { SettingsBillingCoverImage } from '@/billing/components/SettingsBillingCoverImage.tsx';
+import { SettingsBillingCoverImage } from '@/billing/components/SettingsBillingCoverImage';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
-import { SupportChat } from '@/support/components/SupportChat.tsx';
+import { SupportChat } from '@/support/components/SupportChat';
 import { AppPath } from '@/types/AppPath.ts';
 import { IconCalendarEvent, IconCircleX } from '@/ui/display/icon';
 import { IconCreditCard, IconCurrencyDollar } from '@/ui/display/icon';
-import { Info } from '@/ui/display/info/components/Info.tsx';
+import { Info } from '@/ui/display/info/components/Info';
-import { H1Title } from '@/ui/display/typography/components/H1Title.tsx';
+import { H1Title } from '@/ui/display/typography/components/H1Title';
-import { H2Title } from '@/ui/display/typography/components/H2Title.tsx';
+import { H2Title } from '@/ui/display/typography/components/H2Title';
-import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar.ts';
+import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
-import { Button } from '@/ui/input/button/components/Button.tsx';
+import { Button } from '@/ui/input/button/components/Button';
-import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal.tsx';
+import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
-import { Section } from '@/ui/layout/section/components/Section.tsx';
+import { Section } from '@/ui/layout/section/components/Section';
 import {
   useBillingPortalSessionQuery,
   useUpdateBillingSubscriptionMutation,
-} from '~/generated/graphql.tsx';
+} from '~/generated/graphql';
 import { isDefined } from '~/utils/isDefined';
 
 const StyledH1Title = styled(H1Title)`

packages/twenty-front/src/pages/settings/accounts/SettingsAccounts.tsx

@@ -4,12 +4,14 @@ import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 import { SettingsAccountLoader } from '@/settings/accounts/components/SettingsAccountLoader';
-import { SettingsAccountsConnectedAccountsSection } from '@/settings/accounts/components/SettingsAccountsConnectedAccountsSection';
+import { SettingsAccountsConnectedAccountsListCard } from '@/settings/accounts/components/SettingsAccountsConnectedAccountsListCard';
 import { SettingsAccountsEmailsBlocklistSection } from '@/settings/accounts/components/SettingsAccountsEmailsBlocklistSection';
 import { SettingsAccountsSettingsSection } from '@/settings/accounts/components/SettingsAccountsSettingsSection';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { IconSettings } from '@/ui/display/icon';
+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';
 
@@ -42,7 +44,16 @@ export const SettingsAccounts = () => {
           <SettingsAccountLoader />
         ) : (
           <>
-            <SettingsAccountsConnectedAccountsSection accounts={accounts} />
+            <Section>
+              <H2Title
+                title="Connected accounts"
+                description="Manage your internet accounts."
+              />
+              <SettingsAccountsConnectedAccountsListCard
+                accounts={accounts}
+                loading={loading}
+              />
+            </Section>
             {isBlocklistEnabled && <SettingsAccountsEmailsBlocklistSection />}
             <SettingsAccountsSettingsSection />
           </>

packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationDetail.tsx

@@ -2,13 +2,19 @@ import { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
+import { SettingsIntegrationDatabasesListCard } from '@/settings/integrations/components/SettingsIntegrationDatabasesListCard';
 import { SettingsIntegrationPreview } from '@/settings/integrations/components/SettingsIntegrationPreview';
 import { useSettingsIntegrationCategories } from '@/settings/integrations/hooks/useSettingsIntegrationCategories';
+import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { AppPath } from '@/types/AppPath';
+import { SettingsPath } from '@/types/SettingsPath';
 import { IconSettings } from '@/ui/display/icon';
+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 { mockedRemoteObjectIntegrations } from '~/testing/mock-data/remoteObjectDatabases';
 
 export const SettingsIntegrationDetail = () => {
   const { integrationKey = '' } = useParams();
@@ -38,18 +44,36 @@ export const SettingsIntegrationDetail = () => {
 
   if (!isIntegrationAvailable) return null;
 
+  const databases =
+    mockedRemoteObjectIntegrations.find(
+      ({ key }) => key === integration.from.key,
+    )?.databases || [];
+
   return (
     <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
       <SettingsPageContainer>
         <Breadcrumb
           links={[
-            { children: 'Integrations', href: '/settings/integrations' },
+            {
+              children: 'Integrations',
+              href: getSettingsPagePath(SettingsPath.Integrations),
+            },
             { children: integration.text },
           ]}
         />
         <SettingsIntegrationPreview
           integrationLogoUrl={integration.from.image}
         />
+        <Section>
+          <H2Title
+            title={`${integration.text} database`}
+            description={`Connect or access your ${integration.text} data`}
+          />
+          <SettingsIntegrationDatabasesListCard
+            integrationLogoUrl={integration.from.image}
+            databases={databases}
+          />
+        </Section>
       </SettingsPageContainer>
     </SubMenuTopBarContainer>
   );

packages/twenty-front/src/testing/mock-data/remoteObjectDatabases.ts

@@ -0,0 +1,20 @@
+export const mockedRemoteObjectIntegrations = [
+  {
+    id: '5b717911-dc75-4876-bf33-dfdc994c88cd',
+    key: 'postgresql',
+    databases: [
+      {
+        id: '67cbfd35-8dd4-4591-b9d4-c1906281a5da',
+        key: 'twenty_postgres',
+        name: 'Twenty_postgres',
+        tables: [{ name: '1' }],
+      },
+      {
+        id: '3740cd85-7a1e-45b5-8b0d-47e1921d01f3',
+        key: 'image_postgres',
+        name: 'Image_postgres',
+        tables: [{ name: '2' }, { name: '3' }],
+      },
+    ],
+  },
+];