A few tweaks

backend/src/lib/api-docs/constants.ts

@@ -2199,6 +2199,7 @@ export const AppConnections = {
       audience: "The unique identifier of the target API you want to access."
     },
     SQL_CONNECTION: {
+      gatewayId: "The ID of the gateway to use when performing database requests.",
       host: "The hostname of the database server.",
       port: "The port number of the database.",
       database: "The name of the database to connect to.",

backend/src/services/app-connection/shared/sql/sql-connection-schemas.ts

@@ -3,7 +3,11 @@ import { z } from "zod";
 import { AppConnections } from "@app/lib/api-docs";
 
 export const BaseSqlUsernameAndPasswordConnectionSchema = z.object({
-  gatewayId: z.string().optional(),
+  gatewayId: z
+    .union([z.string().uuid(), z.literal("")])
+    .transform((value) => value || null)
+    .nullish()
+    .describe(AppConnections.CREDENTIALS.SQL_CONNECTION.gatewayId),
   host: z.string().trim().min(1, "Host required").describe(AppConnections.CREDENTIALS.SQL_CONNECTION.host),
   port: z.coerce.number().describe(AppConnections.CREDENTIALS.SQL_CONNECTION.port),
   database: z.string().trim().min(1, "Database required").describe(AppConnections.CREDENTIALS.SQL_CONNECTION.database),

frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/MsSqlConnectionForm.tsx

@@ -152,7 +152,7 @@ export const MsSqlConnectionForm = ({ appConnection, onSubmit }: Props) => {
                     <div>
                       <Select
                         isDisabled={!isAllowed}
-                        value={value}
+                        value={value as string}
                         onValueChange={onChange}
                         className="w-full border border-mineshaft-500"
                         dropdownContainerClassName="max-w-none"

frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/MySqlConnectionForm.tsx

@@ -149,7 +149,7 @@ export const MySqlConnectionForm = ({ appConnection, onSubmit }: Props) => {
                     <div>
                       <Select
                         isDisabled={!isAllowed}
-                        value={value}
+                        value={value as string}
                         onValueChange={onChange}
                         className="w-full border border-mineshaft-500"
                         dropdownContainerClassName="max-w-none"

frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/OracleDBConnectionForm.tsx

@@ -149,7 +149,7 @@ export const OracleDBConnectionForm = ({ appConnection, onSubmit }: Props) => {
                     <div>
                       <Select
                         isDisabled={!isAllowed}
-                        value={value}
+                        value={value as string}
                         onValueChange={onChange}
                         className="w-full border border-mineshaft-500"
                         dropdownContainerClassName="max-w-none"

frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/PostgresConnectionForm.tsx

@@ -149,7 +149,7 @@ export const PostgresConnectionForm = ({ appConnection, onSubmit }: Props) => {
                     <div>
                       <Select
                         isDisabled={!isAllowed}
-                        value={value}
+                        value={value as string}
                         onValueChange={onChange}
                         className="w-full border border-mineshaft-500"
                         dropdownContainerClassName="max-w-none"

frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/shared/sql-connection-schemas.ts

@@ -1,7 +1,7 @@
 import { z } from "zod";
 
 export const BaseSqlUsernameAndPasswordConnectionSchema = z.object({
-  gatewayId: z.string().optional(),
+  gatewayId: z.string().nullable().optional(),
   host: z.string().trim().min(1, "Host required"),
   port: z.coerce.number().default(5432),
   database: z.string().trim().min(1, "Database required").default("default"),