NEOS-1236 mysql and postgresql connections bugged when using connect …

…by url (#2292)
nucleuscloud · Jul 16, 2024 · ecaa58e · ecaa58e
1 parent 729f928
commit ecaa58e
Show file tree

Hide file tree

Showing 7 changed files with 99 additions and 71 deletions.
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
@@ -67,6 +67,7 @@ export default function MysqlForm(props: Props) {
   );
 
   const form = useForm<MysqlFormValues>({
+    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
@@ -65,6 +65,7 @@ export default function PostgresForm(props: Props): ReactElement {
   );
 
   const form = useForm<PostgresFormValues>({
+    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
@@ -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: (
-              <div>
-                <p>No summary found.</p>
-              </div>
-            ),
-            header: (
-              <PageHeader
-                header="Mysql"
-                leftIcon={<ConnectionIcon connectionType="mysql" />}
-                extraHeading={extraPageHeading}
-                subHeadings={subHeading}
-              />
-            ),
-            body: (
-              <MysqlForm
-                connectionId={connection.id}
-                defaultValues={{
-                  connectionName: connection.name,
-                  db: mysqldbConfig,
-                  url: typeof mysqlConfig === 'string' ? mysqlConfig : '',
-                  options: {
-                    maxConnectionLimit:
-                      mysqlValue.connectionOptions?.maxConnectionLimit,
-                  },
-                  tunnel: {
-                    host: mysqlValue.tunnel?.host ?? '',
-                    port: mysqlValue.tunnel?.port ?? 22,
-                    knownHostPublicKey:
-                      mysqlValue.tunnel?.knownHostPublicKey ?? '',
-                    user: mysqlValue.tunnel?.user ?? '',
-                    passphrase:
-                      mysqlValue.tunnel && mysqlValue.tunnel.authentication
-                        ? getPassphraseFromSshAuthentication(
-                            mysqlValue.tunnel.authentication
-                          ) ?? ''
-                        : '',
-                    privateKey:
-                      mysqlValue.tunnel && mysqlValue.tunnel.authentication
-                        ? getPrivateKeyFromSshAuthentication(
-                            mysqlValue.tunnel.authentication
-                          ) ?? ''
-                        : '',
-                  },
-                }}
-                onSaved={(resp) => onSaved(resp)}
-                onSaveFailed={onSaveFailed}
-              />
-            ),
-          };
       }
+
+      return {
+        name: connection.name,
+        summary: (
+          <div>
+            <p>No summary found.</p>
+          </div>
+        ),
+        header: (
+          <PageHeader
+            header="Mysql"
+            leftIcon={<ConnectionIcon connectionType="mysql" />}
+            extraHeading={extraPageHeading}
+            subHeadings={subHeading}
+          />
+        ),
+        body: (
+          <MysqlForm
+            connectionId={connection.id}
+            defaultValues={{
+              connectionName: connection.name,
+              db: mysqldbConfig,
+              url: typeof mysqlConfig === 'string' ? mysqlConfig : '',
+              options: {
+                maxConnectionLimit:
+                  mysqlValue.connectionOptions?.maxConnectionLimit,
+              },
+              tunnel: {
+                host: mysqlValue.tunnel?.host ?? '',
+                port: mysqlValue.tunnel?.port ?? 22,
+                knownHostPublicKey: mysqlValue.tunnel?.knownHostPublicKey ?? '',
+                user: mysqlValue.tunnel?.user ?? '',
+                passphrase:
+                  mysqlValue.tunnel && mysqlValue.tunnel.authentication
+                    ? getPassphraseFromSshAuthentication(
+                        mysqlValue.tunnel.authentication
+                      ) ?? ''
+                    : '',
+                privateKey:
+                  mysqlValue.tunnel && mysqlValue.tunnel.authentication
+                    ? getPrivateKeyFromSshAuthentication(
+                        mysqlValue.tunnel.authentication
+                      ) ?? ''
+                    : '',
+              },
+            }}
+            onSaved={(resp) => 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
@@ -14,7 +14,7 @@ export const SupabaseLogo = () => {
       <path
         d="M16.3623 28.2829C15.6276 29.2081 14.1379 28.7012 14.1202 27.5197L13.8613 10.2402H25.48C27.5845 10.2402 28.7582 12.6709 27.4496 14.3191L16.3623 28.2829Z"
         fill="url(#paint1_linear_3396_390)"
-        fill-opacity="0.2"
+        fillOpacity="0.2"
       />
       <path
         d="M11.6374 0.477868C12.3721 -0.447473 13.8618 0.0595473 13.8795 1.24097L13.993 18.5204H2.51967C0.415142 18.5204 -0.75859 16.0898 0.550066 14.4416L11.6374 0.477868Z"
@@ -29,8 +29,8 @@ export const SupabaseLogo = () => {
           y2="18.4024"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stop-color="#249361" />
-          <stop offset="1" stop-color="#3ECF8E" />
+          <stop stopColor="#249361" />
+          <stop offset="1" stopColor="#3ECF8E" />
         </linearGradient>
         <linearGradient
           id="paint1_linear_3396_390"
@@ -41,7 +41,7 @@ export const SupabaseLogo = () => {
           gradientUnits="userSpaceOnUse"
         >
           <stop />
-          <stop offset="1" stop-opacity="0" />
+          <stop offset="1" stopOpacity="0" />
         </linearGradient>
       </defs>
     </svg>

diff --git a/frontend/apps/web/components/providers/prism b/frontend/apps/web/components/providers/prism
diff --git a/frontend/apps/web/components/providers/prism.svg b/frontend/apps/web/components/providers/prism.svg
diff --git 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,30 +146,30 @@ 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(),
     }),
     port: Yup.number()
       .integer()
       .positive()
       .when('$activeTab', {
-        is: 'parameters',
+        is: 'host',
         then: (schema) => schema.required('The database port is required'),
         otherwise: (schema) => schema.notRequired(),
       }),