diff --git a/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationDatabaseConnection.tsx b/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationDatabaseConnection.tsx index d35b1158de6e6..3500ccc028a6b 100644 --- a/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationDatabaseConnection.tsx +++ b/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationDatabaseConnection.tsx @@ -1,12 +1,18 @@ 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 { useDeleteOneDatabaseConnection } from '@/databases/hooks/useDeleteOneDatabaseConnection'; import { useGetDatabaseConnection } from '@/databases/hooks/useGetDatabaseConnection'; import { useGetDatabaseConnectionTables } from '@/databases/hooks/useGetDatabaseConnectionTables'; import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer'; -import { SettingsIntegrationDatabaseTablesListCard } from '@/settings/integrations/components/SettingsIntegrationDatabaseTablesListCard'; +import { + SettingsIntegrationDatabaseTablesListCard, + SettingsIntegrationsDatabaseTablesFormValues, + settingsIntegrationsDatabaseTablesSchema, +} from '@/settings/integrations/components/SettingsIntegrationDatabaseTablesListCard'; import { useSettingsIntegrationCategories } from '@/settings/integrations/hooks/useSettingsIntegrationCategories'; import { getConnectionDbName } from '@/settings/integrations/utils/getConnectionDbName'; import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath'; @@ -73,6 +79,11 @@ export const SettingsIntegrationDatabaseConnection = () => { skip: !isIntegrationAvailable || !connection, }); + const formConfig = useForm({ + mode: 'onTouched', + resolver: zodResolver(settingsIntegrationsDatabaseTablesSchema), + }); + if (!isIntegrationAvailable || !connection) return null; const settingsIntegrationsPagePath = getSettingsPagePath( @@ -82,41 +93,44 @@ export const SettingsIntegrationDatabaseConnection = () => { const connectionName = getConnectionDbName({ integration, connection }); return ( - - - -
- - -
-
- - + + + -
-
-
+
+ + +
+
+ + +
+ + + ); };