From 9381844b9d3e6f82901492e7cc2e7b48d825277e Mon Sep 17 00:00:00 2001 From: Nate Kelley Date: Tue, 25 Mar 2025 13:12:23 -0600 Subject: [PATCH] form validators --- .../asset_interfaces/datasources/interfaces.test.ts | 4 ++-- .../[datasourceId]/_forms/BigQueryForm.tsx | 7 ++++++- .../[datasourceId]/_forms/DataBricksForm.tsx | 11 ++++++++++- .../[datasourceId]/_forms/MySqlForm.tsx | 9 +++++++-- .../[datasourceId]/_forms/PostgresForm.tsx | 2 +- .../[datasourceId]/_forms/RedshiftForm.tsx | 7 ++++++- .../[datasourceId]/_forms/SnowflakeForm.tsx | 13 +++++++++++-- .../[datasourceId]/_forms/SqlServerForm.tsx | 13 +++++++++++-- web/src/components/ui/form/FormBase.tsx | 2 -- 9 files changed, 54 insertions(+), 14 deletions(-) diff --git a/web/src/api/asset_interfaces/datasources/interfaces.test.ts b/web/src/api/asset_interfaces/datasources/interfaces.test.ts index 2d021a8fb..b0ed928d9 100644 --- a/web/src/api/asset_interfaces/datasources/interfaces.test.ts +++ b/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', () => { diff --git a/web/src/app/app/(settings_layout)/settings/(restricted-width)/datasources/(admin-restricted-space)/[datasourceId]/_forms/BigQueryForm.tsx b/web/src/app/app/(settings_layout)/settings/(restricted-width)/datasources/(admin-restricted-space)/[datasourceId]/_forms/BigQueryForm.tsx index a5745e694..3aa85d3d3 100644 --- a/web/src/app/app/(settings_layout)/settings/(restricted-width)/datasources/(admin-restricted-space)/[datasourceId]/_forms/BigQueryForm.tsx +++ b/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 } }); diff --git a/web/src/app/app/(settings_layout)/settings/(restricted-width)/datasources/(admin-restricted-space)/[datasourceId]/_forms/DataBricksForm.tsx b/web/src/app/app/(settings_layout)/settings/(restricted-width)/datasources/(admin-restricted-space)/[datasourceId]/_forms/DataBricksForm.tsx index 5b90054c7..0511ea5b8 100644 --- a/web/src/app/app/(settings_layout)/settings/(restricted-width)/datasources/(admin-restricted-space)/[datasourceId]/_forms/DataBricksForm.tsx +++ b/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 } }); diff --git a/web/src/app/app/(settings_layout)/settings/(restricted-width)/datasources/(admin-restricted-space)/[datasourceId]/_forms/MySqlForm.tsx b/web/src/app/app/(settings_layout)/settings/(restricted-width)/datasources/(admin-restricted-space)/[datasourceId]/_forms/MySqlForm.tsx index 92a331569..0782307f2 100644 --- a/web/src/app/app/(settings_layout)/settings/(restricted-width)/datasources/(admin-restricted-space)/[datasourceId]/_forms/MySqlForm.tsx +++ b/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[0], + } as Parameters[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 } }); diff --git a/web/src/app/app/(settings_layout)/settings/(restricted-width)/datasources/(admin-restricted-space)/[datasourceId]/_forms/PostgresForm.tsx b/web/src/app/app/(settings_layout)/settings/(restricted-width)/datasources/(admin-restricted-space)/[datasourceId]/_forms/PostgresForm.tsx index fe1332392..de820171b 100644 --- a/web/src/app/app/(settings_layout)/settings/(restricted-width)/datasources/(admin-restricted-space)/[datasourceId]/_forms/PostgresForm.tsx +++ b/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, diff --git a/web/src/app/app/(settings_layout)/settings/(restricted-width)/datasources/(admin-restricted-space)/[datasourceId]/_forms/RedshiftForm.tsx b/web/src/app/app/(settings_layout)/settings/(restricted-width)/datasources/(admin-restricted-space)/[datasourceId]/_forms/RedshiftForm.tsx index 36ae0864a..0d714e7ad 100644 --- a/web/src/app/app/(settings_layout)/settings/(restricted-width)/datasources/(admin-restricted-space)/[datasourceId]/_forms/RedshiftForm.tsx +++ b/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 } }); diff --git a/web/src/app/app/(settings_layout)/settings/(restricted-width)/datasources/(admin-restricted-space)/[datasourceId]/_forms/SnowflakeForm.tsx b/web/src/app/app/(settings_layout)/settings/(restricted-width)/datasources/(admin-restricted-space)/[datasourceId]/_forms/SnowflakeForm.tsx index 6af88d3f7..2547c19cd 100644 --- a/web/src/app/app/(settings_layout)/settings/(restricted-width)/datasources/(admin-restricted-space)/[datasourceId]/_forms/SnowflakeForm.tsx +++ b/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[0], + } as Parameters[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 } }); diff --git a/web/src/app/app/(settings_layout)/settings/(restricted-width)/datasources/(admin-restricted-space)/[datasourceId]/_forms/SqlServerForm.tsx b/web/src/app/app/(settings_layout)/settings/(restricted-width)/datasources/(admin-restricted-space)/[datasourceId]/_forms/SqlServerForm.tsx index 6ddb205aa..63d793b76 100644 --- a/web/src/app/app/(settings_layout)/settings/(restricted-width)/datasources/(admin-restricted-space)/[datasourceId]/_forms/SqlServerForm.tsx +++ b/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[0], + } as Parameters[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 } }); diff --git a/web/src/components/ui/form/FormBase.tsx b/web/src/components/ui/form/FormBase.tsx index 70bda28a6..8bfc01930 100644 --- a/web/src/components/ui/form/FormBase.tsx +++ b/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 = (