feat: add Tables settings to Settings/Integrations/Database/Connectio… (#4851)

…n page

Closes #4560

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

@@ -1,8 +1,15 @@
 import { useEffect } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
 import { useNavigate, useParams } from 'react-router-dom';
+import { zodResolver } from '@hookform/resolvers/zod';
 import { IconSettings } from 'twenty-ui';
 
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
+import {
+  SettingsIntegrationDatabaseTablesListCard,
+  SettingsIntegrationsDatabaseTablesFormValues,
+  settingsIntegrationsDatabaseTablesSchema,
+} from '@/settings/integrations/components/SettingsIntegrationDatabaseTablesListCard';
 import { useSettingsIntegrationCategories } from '@/settings/integrations/hooks/useSettingsIntegrationCategories';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { AppPath } from '@/types/AppPath';
@@ -47,37 +54,54 @@ export const SettingsIntegrationDatabaseConnection = () => {
     }
   }, [integration, databaseKey, navigate, isIntegrationAvailable, connection]);
 
+  const formConfig = useForm<SettingsIntegrationsDatabaseTablesFormValues>({
+    mode: 'onTouched',
+    resolver: zodResolver(settingsIntegrationsDatabaseTablesSchema),
+  });
+
   if (!isIntegrationAvailable || !connection) return null;
 
   const settingsIntegrationsPagePath = getSettingsPagePath(
     SettingsPath.Integrations,
   );
 
+  const tables = mockedRemoteObjectIntegrations[0].connections[0].tables;
+
   return (
-    <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
-      <SettingsPageContainer>
-        <Breadcrumb
-          links={[
-            {
-              children: 'Integrations',
-              href: settingsIntegrationsPagePath,
-            },
-            {
-              children: integration.text,
-              href: `${settingsIntegrationsPagePath}/${databaseKey}`,
-            },
-            { children: connection.name },
-          ]}
-        />
-        <Section>
-          <H2Title title="About" description="About this remote object" />
-          <SettingsIntegrationDatabaseConnectionSummaryCard
-            databaseLogoUrl={integration.from.image}
-            connectionName={connection.name}
-            connectedTablesNb={connection.tables.length}
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    <FormProvider {...formConfig}>
+      <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
+        <SettingsPageContainer>
+          <Breadcrumb
+            links={[
+              {
+                children: 'Integrations',
+                href: settingsIntegrationsPagePath,
+              },
+              {
+                children: integration.text,
+                href: `${settingsIntegrationsPagePath}/${databaseKey}`,
+              },
+              { children: connection.name },
+            ]}
           />
-        </Section>
-      </SettingsPageContainer>
-    </SubMenuTopBarContainer>
+          <Section>
+            <H2Title title="About" description="About this remote object" />
+            <SettingsIntegrationDatabaseConnectionSummaryCard
+              databaseLogoUrl={integration.from.image}
+              connectionName={connection.name}
+              connectedTablesNb={tables.length}
+            />
+          </Section>
+          <Section>
+            <H2Title
+              title="Tables"
+              description="Select the tables that should be tracked"
+            />
+            <SettingsIntegrationDatabaseTablesListCard tables={tables} />
+          </Section>
+        </SettingsPageContainer>
+      </SubMenuTopBarContainer>
+    </FormProvider>
   );
 };