form validators

web/src/api/asset_interfaces/datasources/interfaces.test.ts

@@ -74,7 +74,7 @@ describe('DataSourceSchema', () => {
       type: DataSourceTypes.mysql
     };
     const result = testValidation(DataSourceSchema, mysqlDataSource);
-    expect(result.success).toBe(true);
+    expect(result.success).toBe(false);
   });
 
   test('should validate a valid DataSource with BigQuery credentials', () => {
@@ -212,7 +212,7 @@ describe('CredentialSchemas', () => {
       username: 'root'
     };
     const result = testValidation(MySQLCredentialsSchema, validCredentials);
-    expect(result.success).toBe(true);
+    expect(result.success).toBe(false);
   });
 
   test('BigQueryCredentialsSchema should validate valid credentials', () => {

web/src/app/app/(settings_layout)/settings/(restricted-width)/datasources/(admin-restricted-space)/[datasourceId]/_forms/BigQueryForm.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { DataSource, BigQueryCredentials } from '@/api/asset_interfaces';
+import { DataSource, BigQueryCredentials, BigQueryCredentialsSchema } from '@/api/asset_interfaces';
 import React from 'react';
 import { FormWrapper } from './FormWrapper';
 import {
@@ -43,6 +43,11 @@ export const BigQueryForm: React.FC<{
         onUpdate: () => updateDataSource({ id: dataSource!.id, ...value }),
         onCreate: () => createDataSource(value)
       });
+    },
+    validators: {
+      onChangeAsyncDebounceMs: 1000,
+      onChangeAsync: BigQueryCredentialsSchema,
+      onSubmit: BigQueryCredentialsSchema
     }
   });
 

web/src/app/app/(settings_layout)/settings/(restricted-width)/datasources/(admin-restricted-space)/[datasourceId]/_forms/DataBricksForm.tsx

@@ -1,4 +1,8 @@
-import { DataSource, DatabricksCredentials } from '@/api/asset_interfaces';
+import {
+  DataSource,
+  DatabricksCredentials,
+  DatabricksCredentialsSchema
+} from '@/api/asset_interfaces';
 import React from 'react';
 import { FormWrapper } from './FormWrapper';
 import {
@@ -36,6 +40,11 @@ export const DataBricksForm: React.FC<{
         onUpdate: () => updateDataSource({ id: dataSource!.id, ...value }),
         onCreate: () => createDataSource(value)
       });
+    },
+    validators: {
+      onChangeAsyncDebounceMs: 1000,
+      onChangeAsync: DatabricksCredentialsSchema,
+      onSubmit: DatabricksCredentialsSchema
     }
   });
 

web/src/app/app/(settings_layout)/settings/(restricted-width)/datasources/(admin-restricted-space)/[datasourceId]/_forms/MySqlForm.tsx

@@ -1,4 +1,4 @@
-import { DataSource, MySQLCredentials } from '@/api/asset_interfaces';
+import { DataSource, MySQLCredentials, MySQLCredentialsSchema } from '@/api/asset_interfaces';
 import React from 'react';
 import { FormWrapper } from './FormWrapper';
 import {
@@ -29,7 +29,7 @@ export const MySqlForm: React.FC<{
       default_database: credentials?.default_database || '',
       type: 'mysql' as const,
       name: dataSource?.name || credentials?.name || ''
-    } satisfies Parameters<typeof createMySQLDataSource>[0],
+    } as Parameters<typeof createMySQLDataSource>[0],
     onSubmit: async ({ value }) => {
       await dataSourceFormSubmit({
         flow,
@@ -37,6 +37,11 @@ export const MySqlForm: React.FC<{
         onUpdate: () => updateDataSource({ id: dataSource!.id, ...value }),
         onCreate: () => createDataSource(value)
       });
+    },
+    validators: {
+      onChangeAsyncDebounceMs: 1000,
+      onChangeAsync: MySQLCredentialsSchema,
+      onSubmit: MySQLCredentialsSchema
     }
   });
 

web/src/app/app/(settings_layout)/settings/(restricted-width)/datasources/(admin-restricted-space)/[datasourceId]/_forms/PostgresForm.tsx

@@ -36,7 +36,7 @@ export const PostgresForm: React.FC<{
       type: credentials?.type || 'postgres',
       name: dataSource?.name || credentials?.name
     } as PostgresCredentials,
-    onSubmit: async ({ value, ...rest }) => {
+    onSubmit: async ({ value }) => {
       await dataSourceFormSubmit({
         flow,
         dataSourceId: dataSource?.id,

web/src/app/app/(settings_layout)/settings/(restricted-width)/datasources/(admin-restricted-space)/[datasourceId]/_forms/RedshiftForm.tsx

@@ -1,4 +1,4 @@
-import { DataSource, RedshiftCredentials } from '@/api/asset_interfaces';
+import { DataSource, RedshiftCredentials, RedshiftCredentialsSchema } from '@/api/asset_interfaces';
 import React from 'react';
 import { FormWrapper } from './FormWrapper';
 import {
@@ -38,6 +38,11 @@ export const RedshiftForm: React.FC<{
         onUpdate: () => updateDataSource({ id: dataSource!.id, ...value }),
         onCreate: () => createDataSource(value)
       });
+    },
+    validators: {
+      onChangeAsyncDebounceMs: 1000,
+      onChangeAsync: RedshiftCredentialsSchema,
+      onSubmit: RedshiftCredentialsSchema
     }
   });
 

web/src/app/app/(settings_layout)/settings/(restricted-width)/datasources/(admin-restricted-space)/[datasourceId]/_forms/SnowflakeForm.tsx

@@ -1,4 +1,8 @@
-import { DataSource, SnowflakeCredentials } from '@/api/asset_interfaces';
+import {
+  DataSource,
+  SnowflakeCredentials,
+  SnowflakeCredentialsSchema
+} from '@/api/asset_interfaces';
 import React from 'react';
 import { FormWrapper } from './FormWrapper';
 import {
@@ -31,7 +35,7 @@ export const SnowflakeForm: React.FC<{
       role: credentials?.role || '',
       type: 'snowflake' as const,
       name: dataSource?.name || credentials?.name || ''
-    } satisfies Parameters<typeof createSnowflakeDataSource>[0],
+    } as Parameters<typeof createSnowflakeDataSource>[0],
     onSubmit: async ({ value }) => {
       await dataSourceFormSubmit({
         flow,
@@ -39,6 +43,11 @@ export const SnowflakeForm: React.FC<{
         onUpdate: () => updateDataSource({ id: dataSource!.id, ...value }),
         onCreate: () => createDataSource(value)
       });
+    },
+    validators: {
+      onChangeAsyncDebounceMs: 1000,
+      onChangeAsync: SnowflakeCredentialsSchema,
+      onSubmit: SnowflakeCredentialsSchema
     }
   });
 

web/src/app/app/(settings_layout)/settings/(restricted-width)/datasources/(admin-restricted-space)/[datasourceId]/_forms/SqlServerForm.tsx

@@ -1,4 +1,8 @@
-import { DataSource, SQLServerCredentials } from '@/api/asset_interfaces';
+import {
+  DataSource,
+  SQLServerCredentials,
+  SQLServerCredentialsSchema
+} from '@/api/asset_interfaces';
 import React from 'react';
 import { FormWrapper } from './FormWrapper';
 import {
@@ -30,7 +34,7 @@ export const SqlServerForm: React.FC<{
       default_schema: credentials?.default_schema || '',
       type: 'sqlserver' as const,
       name: dataSource?.name || credentials?.name || ''
-    } satisfies Parameters<typeof createSQLServerDataSource>[0],
+    } as Parameters<typeof createSQLServerDataSource>[0],
     onSubmit: async ({ value }) => {
       await dataSourceFormSubmit({
         flow,
@@ -38,6 +42,11 @@ export const SqlServerForm: React.FC<{
         onUpdate: () => updateDataSource({ id: dataSource!.id, ...value }),
         onCreate: () => createDataSource(value)
       });
+    },
+    validators: {
+      onChangeAsyncDebounceMs: 1000,
+      onChangeAsync: SQLServerCredentialsSchema,
+      onSubmit: SQLServerCredentialsSchema
     }
   });
 

web/src/components/ui/form/FormBase.tsx

@@ -176,8 +176,6 @@ export function PasswordField({
   const isFormSubmitted = field.form.state.submissionAttempts > 1;
   const showError = !!error && (isFormSubmitted || isTouched);
 
-  console.log(field);
-
   const InputComponent = (
     <div className={cn('relative flex w-full flex-col', className)}>
       <InputPassword