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/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 { H1Title } from '@/ui/display/typography/components/H1Title.tsx';
-import { H2Title } from '@/ui/display/typography/components/H2Title.tsx';
-import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar.ts';
-import { Button } from '@/ui/input/button/components/Button.tsx';
-import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal.tsx';
+import { Info } from '@/ui/display/info/components/Info';
+import { H1Title } from '@/ui/display/typography/components/H1Title';
+import { H2Title } from '@/ui/display/typography/components/H2Title';
+import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import { Button } from '@/ui/input/button/components/Button';
+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>
   );