From ecaa58e8d07bf54a48f4e7aec3b4b90601c894fc Mon Sep 17 00:00:00 2001 From: Nick Zelei <2420177+nickzelei@users.noreply.github.com> Date: Tue, 16 Jul 2024 15:24:54 -0400 Subject: [PATCH] NEOS-1236 mysql and postgresql connections bugged when using connect by url (#2292) --- .../connections/[id]/components/MysqlForm.tsx | 1 + .../[id]/components/PostgresForm.tsx | 1 + .../[id]/components/connection-component.tsx | 108 +++++++++--------- .../new/connection/supabase/SupabaseLogo.tsx | 8 +- frontend/apps/web/components/providers/prism | 1 - .../apps/web/components/providers/prism.svg | 1 - .../apps/web/yup-validations/connections.ts | 50 ++++++-- 7 files changed, 99 insertions(+), 71 deletions(-) delete mode 100644 frontend/apps/web/components/providers/prism delete mode 100644 frontend/apps/web/components/providers/prism.svg diff --git a/frontend/apps/web/app/(mgmt)/[account]/connections/[id]/components/MysqlForm.tsx b/frontend/apps/web/app/(mgmt)/[account]/connections/[id]/components/MysqlForm.tsx index 301df30a03..954bd97763 100644 --- a/frontend/apps/web/app/(mgmt)/[account]/connections/[id]/components/MysqlForm.tsx +++ b/frontend/apps/web/app/(mgmt)/[account]/connections/[id]/components/MysqlForm.tsx @@ -67,6 +67,7 @@ export default function MysqlForm(props: Props) { ); const form = useForm({ + mode: 'onChange', resolver: yupResolver(MysqlFormValues), values: defaultValues, context: { diff --git a/frontend/apps/web/app/(mgmt)/[account]/connections/[id]/components/PostgresForm.tsx b/frontend/apps/web/app/(mgmt)/[account]/connections/[id]/components/PostgresForm.tsx index bd80db4446..7f3d18a0bb 100644 --- a/frontend/apps/web/app/(mgmt)/[account]/connections/[id]/components/PostgresForm.tsx +++ b/frontend/apps/web/app/(mgmt)/[account]/connections/[id]/components/PostgresForm.tsx @@ -65,6 +65,7 @@ export default function PostgresForm(props: Props): ReactElement { ); const form = useForm({ + mode: 'onChange', resolver: yupResolver(POSTGRES_FORM_SCHEMA), values: defaultValues, context: { diff --git a/frontend/apps/web/app/(mgmt)/[account]/connections/[id]/components/connection-component.tsx b/frontend/apps/web/app/(mgmt)/[account]/connections/[id]/components/connection-component.tsx index f813e7292c..ebc7911530 100644 --- a/frontend/apps/web/app/(mgmt)/[account]/connections/[id]/components/connection-component.tsx +++ b/frontend/apps/web/app/(mgmt)/[account]/connections/[id]/components/connection-component.tsx @@ -179,66 +179,66 @@ export function getConnectionComponentDetails( port: mysqlConfig.port, protocol: mysqlConfig.protocol, }; - + break; case 'url': mysqlConfig = mysqlValue.connectionConfig.value; - + break; default: mysqlConfig = mysqlValue.connectionConfig.value; mysqldbConfig = mysqldbConfig; - - return { - name: connection.name, - summary: ( -
-

No summary found.

-
- ), - header: ( - } - extraHeading={extraPageHeading} - subHeadings={subHeading} - /> - ), - body: ( - onSaved(resp)} - onSaveFailed={onSaveFailed} - /> - ), - }; } + + return { + name: connection.name, + summary: ( +
+

No summary found.

+
+ ), + header: ( + } + extraHeading={extraPageHeading} + subHeadings={subHeading} + /> + ), + body: ( + onSaved(resp)} + onSaveFailed={onSaveFailed} + /> + ), + }; + case 'awsS3Config': return { name: connection.name, diff --git a/frontend/apps/web/app/(mgmt)/[account]/new/connection/supabase/SupabaseLogo.tsx b/frontend/apps/web/app/(mgmt)/[account]/new/connection/supabase/SupabaseLogo.tsx index 0c9f176e31..cea20a3a26 100644 --- a/frontend/apps/web/app/(mgmt)/[account]/new/connection/supabase/SupabaseLogo.tsx +++ b/frontend/apps/web/app/(mgmt)/[account]/new/connection/supabase/SupabaseLogo.tsx @@ -14,7 +14,7 @@ export const SupabaseLogo = () => { { y2="18.4024" gradientUnits="userSpaceOnUse" > - - + + { gradientUnits="userSpaceOnUse" > - + diff --git a/frontend/apps/web/components/providers/prism b/frontend/apps/web/components/providers/prism deleted file mode 100644 index 4ffc2cdc0f..0000000000 --- a/frontend/apps/web/components/providers/prism +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/frontend/apps/web/components/providers/prism.svg b/frontend/apps/web/components/providers/prism.svg deleted file mode 100644 index 4ffc2cdc0f..0000000000 --- a/frontend/apps/web/components/providers/prism.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/frontend/apps/web/yup-validations/connections.ts b/frontend/apps/web/yup-validations/connections.ts index 9759f8b152..88b784442e 100644 --- a/frontend/apps/web/yup-validations/connections.ts +++ b/frontend/apps/web/yup-validations/connections.ts @@ -97,16 +97,44 @@ export const MYSQL_CONNECTION_PROTOCOLS = ['tcp', 'sock', 'pipe', 'memory']; export const MysqlFormValues = Yup.object({ connectionName: connectionNameSchema, db: Yup.object({ - host: Yup.string().required(), - name: Yup.string().required(), - user: Yup.string().required(), - pass: Yup.string().required(), - port: Yup.number().integer().positive().required(), - protocol: Yup.string().required(), + host: Yup.string().when('$activeTab', { + is: 'host', // Only require if activeTab is 'host' + then: (schema) => schema.required('The host name is required.'), + otherwise: (schema) => schema.notRequired(), + }), + name: Yup.string().when('$activeTab', { + is: 'host', + then: (schema) => schema.required('The database name is required.'), + otherwise: (schema) => schema.notRequired(), + }), + user: Yup.string().when('$activeTab', { + is: 'host', + then: (schema) => schema.required('The database user is required.'), + otherwise: (schema) => schema.notRequired(), + }), + pass: Yup.string().when('$activeTab', { + is: 'host', + then: (schema) => schema.required('The database password is required.'), + otherwise: (schema) => schema.notRequired(), + }), + port: Yup.number() + .integer() + .positive() + .when('$activeTab', { + is: 'host', + then: (schema) => schema.required('A database port is required.'), + otherwise: (schema) => schema.notRequired(), + }), + protocol: Yup.string().when('$activeTab', { + is: 'host', + then: (schema) => schema.required('The database protocol is required.'), + otherwise: (schema) => schema.notRequired(), + }), }).required(), url: Yup.string().when('$activeTab', { is: 'url', // Only require if activeTab is 'url' then: (schema) => schema.required('The connection url is required'), + otherwise: (schema) => schema.notRequired(), }), tunnel: SshTunnelFormValues, options: SQL_OPTIONS_FORM_SCHEMA, @@ -118,22 +146,22 @@ export const POSTGRES_FORM_SCHEMA = Yup.object({ connectionName: connectionNameSchema, db: Yup.object({ host: Yup.string().when('$activeTab', { - is: 'parameters', // Only require if activeTab is 'parameters' + is: 'host', // Only require if activeTab is 'host' then: (schema) => schema.required('The host name is required.'), otherwise: (schema) => schema.notRequired(), }), name: Yup.string().when('$activeTab', { - is: 'parameters', + is: 'host', then: (schema) => schema.required('The database name is required'), otherwise: (schema) => schema.notRequired(), }), user: Yup.string().when('$activeTab', { - is: 'parameters', + is: 'host', then: (schema) => schema.required('The database user is required'), otherwise: (schema) => schema.notRequired(), }), pass: Yup.string().when('$activeTab', { - is: 'parameters', + is: 'host', then: (schema) => schema.required('The database password is required'), otherwise: (schema) => schema.notRequired(), }), @@ -141,7 +169,7 @@ export const POSTGRES_FORM_SCHEMA = Yup.object({ .integer() .positive() .when('$activeTab', { - is: 'parameters', + is: 'host', then: (schema) => schema.required('The database port is required'), otherwise: (schema) => schema.notRequired(), }),