feat(app-connection): Gateway support for SQL connections

backend/src/ee/services/app-connections/oracledb/oracledb-connection-schemas.ts

@@ -24,6 +24,7 @@ export const SanitizedOracleDBConnectionSchema = z.discriminatedUnion("method",
   BaseOracleDBConnectionSchema.extend({
     method: z.literal(OracleDBConnectionMethod.UsernameAndPassword),
     credentials: OracleDBConnectionCredentialsSchema.pick({
+      gatewayId: true,
       host: true,
       database: true,
       port: true,

backend/src/server/routes/index.ts

@@ -1706,7 +1706,8 @@ export const registerRoutes = async (
     appConnectionDAL,
     permissionService,
     kmsService,
-    licenseService
+    licenseService,
+    gatewayService
   });
 
   const secretSyncService = secretSyncServiceFactory({

backend/src/services/app-connection/app-connection-service.ts

@@ -3,6 +3,7 @@ import { ForbiddenError, subject } from "@casl/ability";
 import { ValidateOCIConnectionCredentialsSchema } from "@app/ee/services/app-connections/oci";
 import { ociConnectionService } from "@app/ee/services/app-connections/oci/oci-connection-service";
 import { ValidateOracleDBConnectionCredentialsSchema } from "@app/ee/services/app-connections/oracledb";
+import { TGatewayServiceFactory } from "@app/ee/services/gateway/gateway-service";
 import { TLicenseServiceFactory } from "@app/ee/services/license/license-service";
 import { OrgPermissionAppConnectionActions, OrgPermissionSubjects } from "@app/ee/services/permission/org-permission";
 import { TPermissionServiceFactory } from "@app/ee/services/permission/permission-service-types";
@@ -92,6 +93,7 @@ export type TAppConnectionServiceFactoryDep = {
   permissionService: Pick<TPermissionServiceFactory, "getOrgPermission">;
   kmsService: Pick<TKmsServiceFactory, "createCipherPairWithDataKey">;
   licenseService: Pick<TLicenseServiceFactory, "getPlan">;
+  gatewayService: Pick<TGatewayServiceFactory, "fnGetGatewayClientTlsByGatewayId">;
 };
 
 export type TAppConnectionServiceFactory = ReturnType<typeof appConnectionServiceFactory>;
@@ -135,7 +137,8 @@ export const appConnectionServiceFactory = ({
   appConnectionDAL,
   permissionService,
   kmsService,
-  licenseService
+  licenseService,
+  gatewayService
 }: TAppConnectionServiceFactoryDep) => {
   const listAppConnectionsByOrg = async (actor: OrgServiceActor, app?: AppConnection) => {
     const { permission } = await permissionService.getOrgPermission(
@@ -273,7 +276,8 @@ export const appConnectionServiceFactory = ({
             credentials: validatedCredentials,
             method
           } as TAppConnectionConfig,
-          (platformCredentials) => createConnection(platformCredentials)
+          (platformCredentials) => createConnection(platformCredentials),
+          gatewayService
         );
       } else {
         connection = await createConnection(validatedCredentials);
@@ -387,7 +391,8 @@ export const appConnectionServiceFactory = ({
             credentials: updatedCredentials,
             method
           } as TAppConnectionConfig,
-          (platformCredentials) => updateConnection(platformCredentials)
+          (platformCredentials) => updateConnection(platformCredentials),
+          gatewayService
         );
       } else {
         updatedConnection = await updateConnection(updatedCredentials);

backend/src/services/app-connection/app-connection-types.ts

@@ -9,6 +9,7 @@ import {
   TOracleDBConnectionInput,
   TValidateOracleDBConnectionCredentialsSchema
 } from "@app/ee/services/app-connections/oracledb";
+import { TGatewayServiceFactory } from "@app/ee/services/gateway/gateway-service";
 import { TAppConnectionDALFactory } from "@app/services/app-connection/app-connection-dal";
 import { TSqlConnectionConfig } from "@app/services/app-connection/shared/sql/sql-connection-types";
 import { SecretSync } from "@app/services/secret-sync/secret-sync-enums";
@@ -354,7 +355,8 @@ export type TAppConnectionCredentialsValidator = (
 
 export type TAppConnectionTransitionCredentialsToPlatform = (
   appConnection: TAppConnectionConfig,
-  callback: (credentials: TAppConnection["credentials"]) => Promise<TAppConnectionRaw>
+  callback: (credentials: TAppConnection["credentials"]) => Promise<TAppConnectionRaw>,
+  gatewayService: Pick<TGatewayServiceFactory, "fnGetGatewayClientTlsByGatewayId">
 ) => Promise<TAppConnectionRaw>;
 
 export type TAppConnectionBaseConfig = {

backend/src/services/app-connection/mssql/mssql-connection-schemas.ts

@@ -26,6 +26,7 @@ export const SanitizedMsSqlConnectionSchema = z.discriminatedUnion("method", [
   BaseMsSqlConnectionSchema.extend({
     method: z.literal(MsSqlConnectionMethod.UsernameAndPassword),
     credentials: MsSqlConnectionAccessTokenCredentialsSchema.pick({
+      gatewayId: true,
       host: true,
       database: true,
       port: true,

backend/src/services/app-connection/mysql/mysql-connection-schemas.ts

@@ -24,6 +24,7 @@ export const SanitizedMySqlConnectionSchema = z.discriminatedUnion("method", [
   BaseMySqlConnectionSchema.extend({
     method: z.literal(MySqlConnectionMethod.UsernameAndPassword),
     credentials: MySqlConnectionAccessTokenCredentialsSchema.pick({
+      gatewayId: true,
       host: true,
       database: true,
       port: true,

backend/src/services/app-connection/postgres/postgres-connection-schemas.ts

@@ -24,6 +24,7 @@ export const SanitizedPostgresConnectionSchema = z.discriminatedUnion("method",
   BasePostgresConnectionSchema.extend({
     method: z.literal(PostgresConnectionMethod.UsernameAndPassword),
     credentials: PostgresConnectionAccessTokenCredentialsSchema.pick({
+      gatewayId: true,
       host: true,
       database: true,
       port: true,

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

@@ -1,11 +1,13 @@
 import knex, { Knex } from "knex";
 
 import { verifyHostInputValidity } from "@app/ee/services/dynamic-secret/dynamic-secret-fns";
+import { TGatewayServiceFactory } from "@app/ee/services/gateway/gateway-service";
 import {
   TSqlCredentialsRotationGeneratedCredentials,
   TSqlCredentialsRotationWithConnection
 } from "@app/ee/services/secret-rotation-v2/shared/sql-credentials/sql-credentials-rotation-types";
 import { BadRequestError, DatabaseError } from "@app/lib/errors";
+import { GatewayProxyProtocol, withGatewayProxy } from "@app/lib/gateway";
 import { alphaNumericNanoId } from "@app/lib/nanoid";
 import { AppConnection } from "@app/services/app-connection/app-connection-enums";
 import { TAppConnectionRaw, TSqlConnection } from "@app/services/app-connection/app-connection-types";
@@ -98,25 +100,80 @@ export const getSqlConnectionClient = async (appConnection: Pick<TSqlConnection,
   return client;
 };
 
-export const validateSqlConnectionCredentials = async (config: TSqlConnectionConfig) => {
+const executeWithPotentialGateway = async <T>(
+  config: TSqlConnectionConfig,
+  gatewayService: Pick<TGatewayServiceFactory, "fnGetGatewayClientTlsByGatewayId">,
+  operation: (client: Knex) => Promise<T>
+): Promise<T> => {
   const { credentials, app } = config;
 
-  let client: Knex | undefined;
+  if (credentials.gatewayId && gatewayService) {
+    const [targetHost] = await verifyHostInputValidity(credentials.host, true);
+    const relayDetails = await gatewayService.fnGetGatewayClientTlsByGatewayId(credentials.gatewayId);
+    const [relayHost, relayPort] = relayDetails.relayAddress.split(":");
 
+    return withGatewayProxy(
+      async (proxyPort) => {
+        const client = knex({
+          client: SQL_CONNECTION_CLIENT_MAP[app],
+          connection: {
+            database: credentials.database,
+            port: proxyPort,
+            host: "localhost",
+            user: credentials.username,
+            password: credentials.password,
+            connectionTimeoutMillis: EXTERNAL_REQUEST_TIMEOUT,
+            ...getConnectionConfig({ app, credentials })
+          }
+        });
+        try {
+          return await operation(client);
+        } finally {
+          await client.destroy();
+        }
+      },
+      {
+        protocol: GatewayProxyProtocol.Tcp,
+        targetHost,
+        targetPort: credentials.port,
+        relayHost,
+        relayPort: Number(relayPort),
+        identityId: relayDetails.identityId,
+        orgId: relayDetails.orgId,
+        tlsOptions: {
+          ca: relayDetails.certChain,
+          cert: relayDetails.certificate,
+          key: relayDetails.privateKey.toString()
+        }
+      }
+    );
+  }
+
+  // Non-gateway path
+  const client = await getSqlConnectionClient({ app, credentials });
   try {
-    client = await getSqlConnectionClient({ app, credentials });
+    return await operation(client);
+  } finally {
+    await client.destroy();
+  }
+};
 
-    await client.raw(`Select 1`);
+export const validateSqlConnectionCredentials = async (
-
+  config: TSqlConnectionConfig & { gatewayId?: string },
-    return credentials;
+  gatewayService: Pick<TGatewayServiceFactory, "fnGetGatewayClientTlsByGatewayId">
+) => {
+  try {
+    await executeWithPotentialGateway(config, gatewayService, async (client) => {
+      await client.raw(`Select 1`);
+    });
+    return config.credentials;
   } catch (error) {
     throw new BadRequestError({
       message: `Unable to validate connection: ${
-        (error as Error)?.message?.replaceAll(credentials.password, "********************") ?? "verify credentials"
+        (error as Error)?.message?.replaceAll(config.credentials.password, "********************") ??
+        "verify credentials"
       }`
     });
-  } finally {
-    await client?.destroy();
   }
 };
 
@@ -132,22 +189,23 @@ export const SQL_CONNECTION_ALTER_LOGIN_STATEMENT: Record<
 
 export const transferSqlConnectionCredentialsToPlatform = async (
   config: TSqlConnectionConfig,
-  callback: (credentials: TSqlConnectionConfig["credentials"]) => Promise<TAppConnectionRaw>
+  callback: (credentials: TSqlConnectionConfig["credentials"]) => Promise<TAppConnectionRaw>,
+  gatewayService: Pick<TGatewayServiceFactory, "fnGetGatewayClientTlsByGatewayId">
 ) => {
   const { credentials, app } = config;
 
-  const client = await getSqlConnectionClient({ app, credentials });
-
   const newPassword = alphaNumericNanoId(32);
 
   try {
-    return await client.transaction(async (tx) => {
+    return await executeWithPotentialGateway(config, gatewayService, (client) => {
-      await tx.raw(
+      return client.transaction(async (tx) => {
-        ...SQL_CONNECTION_ALTER_LOGIN_STATEMENT[app]({ username: credentials.username, password: newPassword })
+        await tx.raw(
-      );
+          ...SQL_CONNECTION_ALTER_LOGIN_STATEMENT[app]({ username: credentials.username, password: newPassword })
-      return callback({
+        );
-        ...credentials,
+        return callback({
-        password: newPassword
+          ...credentials,
+          password: newPassword
+        });
       });
     });
   } catch (error) {
@@ -161,7 +219,5 @@ export const transferSqlConnectionCredentialsToPlatform = async (
         (error as Error)?.message?.replaceAll(newPassword, "********************") ??
         "Encountered an error transferring credentials to platform"
     });
-  } finally {
-    await client.destroy();
   }
 };

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

@@ -3,6 +3,7 @@ import { z } from "zod";
 import { AppConnections } from "@app/lib/api-docs";
 
 export const BaseSqlUsernameAndPasswordConnectionSchema = z.object({
+  gatewayId: z.string().optional(),
   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/hooks/api/appConnections/types/shared/sql-connection.ts

@@ -1,4 +1,5 @@
 export type TBaseSqlConnectionCredentials = {
+  gatewayId?: string;
   host: string;
   port: number;
   username: string;

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

@@ -1,10 +1,17 @@
 import { useState } from "react";
 import { Controller, FormProvider, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useQuery } from "@tanstack/react-query";
 import { z } from "zod";
 
-import { Button, FormControl, ModalClose, Select, SelectItem } from "@app/components/v2";
+import { OrgPermissionCan } from "@app/components/permissions";
+import { Button, FormControl, ModalClose, Select, SelectItem, Tooltip } from "@app/components/v2";
+import {
+  OrgGatewayPermissionActions,
+  OrgPermissionSubjects
+} from "@app/context/OrgPermissionContext/types";
 import { APP_CONNECTION_MAP, getAppConnectionMethodDetails } from "@app/helpers/appConnections";
+import { gatewaysQueryKeys } from "@app/hooks/api";
 import { AppConnection } from "@app/hooks/api/appConnections/enums";
 import {
   MsSqlConnectionMethod,
@@ -52,6 +59,7 @@ export const MsSqlConnectionForm = ({ appConnection, onSubmit }: Props) => {
       app: AppConnection.MsSql,
       method: MsSqlConnectionMethod.UsernameAndPassword,
       credentials: {
+        gatewayId: "",
         host: "",
         port: 1433,
         database: "default",
@@ -71,6 +79,7 @@ export const MsSqlConnectionForm = ({ appConnection, onSubmit }: Props) => {
   } = form;
 
   const isPlatformManagedCredentials = appConnection?.isPlatformManagedCredentials ?? false;
+  const { data: gateways, isPending: isGatewaysLoading } = useQuery(gatewaysQueryKeys.list());
 
   const confirmSubmit = async (formData: FormData) => {
     if (formData.isPlatformManagedCredentials) {
@@ -121,6 +130,55 @@ export const MsSqlConnectionForm = ({ appConnection, onSubmit }: Props) => {
             </FormControl>
           )}
         />
+        <OrgPermissionCan
+          I={OrgGatewayPermissionActions.AttachGateways}
+          a={OrgPermissionSubjects.Gateway}
+        >
+          {(isAllowed) => (
+            <Controller
+              control={control}
+              name="credentials.gatewayId"
+              defaultValue=""
+              render={({ field: { value, onChange }, fieldState: { error } }) => (
+                <FormControl
+                  isError={Boolean(error?.message)}
+                  errorText={error?.message}
+                  label="Gateway"
+                >
+                  <Tooltip
+                    isDisabled={isAllowed}
+                    content="Restricted access. You don't have permission to attach gateways to resources."
+                  >
+                    <div>
+                      <Select
+                        isDisabled={!isAllowed}
+                        value={value}
+                        onValueChange={onChange}
+                        className="w-full border border-mineshaft-500"
+                        dropdownContainerClassName="max-w-none"
+                        isLoading={isGatewaysLoading}
+                        placeholder="Default: Internet Gateway"
+                        position="popper"
+                      >
+                        <SelectItem
+                          value={null as unknown as string}
+                          onClick={() => onChange(undefined)}
+                        >
+                          Internet Gateway
+                        </SelectItem>
+                        {gateways?.map((el) => (
+                          <SelectItem value={el.id} key={el.id}>
+                            {el.name}
+                          </SelectItem>
+                        ))}
+                      </Select>
+                    </div>
+                  </Tooltip>
+                </FormControl>
+              )}
+            />
+          )}
+        </OrgPermissionCan>
         <SqlConnectionFields
           isPlatformManagedCredentials={isPlatformManagedCredentials}
           selectedTabIndex={selectedTabIndex}

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

@@ -1,10 +1,17 @@
 import { useState } from "react";
 import { Controller, FormProvider, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useQuery } from "@tanstack/react-query";
 import { z } from "zod";
 
-import { Button, FormControl, ModalClose, Select, SelectItem } from "@app/components/v2";
+import { OrgPermissionCan } from "@app/components/permissions";
+import { Button, FormControl, ModalClose, Select, SelectItem, Tooltip } from "@app/components/v2";
+import {
+  OrgGatewayPermissionActions,
+  OrgPermissionSubjects
+} from "@app/context/OrgPermissionContext/types";
 import { APP_CONNECTION_MAP, getAppConnectionMethodDetails } from "@app/helpers/appConnections";
+import { gatewaysQueryKeys } from "@app/hooks/api";
 import { MySqlConnectionMethod, TMySqlConnection } from "@app/hooks/api/appConnections";
 import { AppConnection } from "@app/hooks/api/appConnections/enums";
 import { PlatformManagedConfirmationModal } from "@app/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/shared/PlatformManagedConfirmationModal";
@@ -49,6 +56,7 @@ export const MySqlConnectionForm = ({ appConnection, onSubmit }: Props) => {
       app: AppConnection.MySql,
       method: MySqlConnectionMethod.UsernameAndPassword,
       credentials: {
+        gatewayId: "",
         host: "",
         port: 3306,
         database: "default",
@@ -68,6 +76,7 @@ export const MySqlConnectionForm = ({ appConnection, onSubmit }: Props) => {
   } = form;
 
   const isPlatformManagedCredentials = appConnection?.isPlatformManagedCredentials ?? false;
+  const { data: gateways, isPending: isGatewaysLoading } = useQuery(gatewaysQueryKeys.list());
 
   const confirmSubmit = async (formData: FormData) => {
     if (formData.isPlatformManagedCredentials) {
@@ -118,6 +127,55 @@ export const MySqlConnectionForm = ({ appConnection, onSubmit }: Props) => {
             </FormControl>
           )}
         />
+        <OrgPermissionCan
+          I={OrgGatewayPermissionActions.AttachGateways}
+          a={OrgPermissionSubjects.Gateway}
+        >
+          {(isAllowed) => (
+            <Controller
+              control={control}
+              name="credentials.gatewayId"
+              defaultValue=""
+              render={({ field: { value, onChange }, fieldState: { error } }) => (
+                <FormControl
+                  isError={Boolean(error?.message)}
+                  errorText={error?.message}
+                  label="Gateway"
+                >
+                  <Tooltip
+                    isDisabled={isAllowed}
+                    content="Restricted access. You don't have permission to attach gateways to resources."
+                  >
+                    <div>
+                      <Select
+                        isDisabled={!isAllowed}
+                        value={value}
+                        onValueChange={onChange}
+                        className="w-full border border-mineshaft-500"
+                        dropdownContainerClassName="max-w-none"
+                        isLoading={isGatewaysLoading}
+                        placeholder="Default: Internet Gateway"
+                        position="popper"
+                      >
+                        <SelectItem
+                          value={null as unknown as string}
+                          onClick={() => onChange(undefined)}
+                        >
+                          Internet Gateway
+                        </SelectItem>
+                        {gateways?.map((el) => (
+                          <SelectItem value={el.id} key={el.id}>
+                            {el.name}
+                          </SelectItem>
+                        ))}
+                      </Select>
+                    </div>
+                  </Tooltip>
+                </FormControl>
+              )}
+            />
+          )}
+        </OrgPermissionCan>
         <SqlConnectionFields
           isPlatformManagedCredentials={isPlatformManagedCredentials}
           selectedTabIndex={selectedTabIndex}

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

@@ -1,10 +1,17 @@
 import { useState } from "react";
 import { Controller, FormProvider, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useQuery } from "@tanstack/react-query";
 import { z } from "zod";
 
-import { Button, FormControl, ModalClose, Select, SelectItem } from "@app/components/v2";
+import { OrgPermissionCan } from "@app/components/permissions";
+import { Button, FormControl, ModalClose, Select, SelectItem, Tooltip } from "@app/components/v2";
+import {
+  OrgGatewayPermissionActions,
+  OrgPermissionSubjects
+} from "@app/context/OrgPermissionContext/types";
 import { APP_CONNECTION_MAP, getAppConnectionMethodDetails } from "@app/helpers/appConnections";
+import { gatewaysQueryKeys } from "@app/hooks/api";
 import { OracleDBConnectionMethod, TOracleDBConnection } from "@app/hooks/api/appConnections";
 import { AppConnection } from "@app/hooks/api/appConnections/enums";
 import { PlatformManagedConfirmationModal } from "@app/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/shared/PlatformManagedConfirmationModal";
@@ -49,6 +56,7 @@ export const OracleDBConnectionForm = ({ appConnection, onSubmit }: Props) => {
       app: AppConnection.OracleDB,
       method: OracleDBConnectionMethod.UsernameAndPassword,
       credentials: {
+        gatewayId: "",
         host: "",
         port: 1521,
         database: "ORCL", // Typically FREEPDB1 or ORCL
@@ -68,6 +76,7 @@ export const OracleDBConnectionForm = ({ appConnection, onSubmit }: Props) => {
   } = form;
 
   const isPlatformManagedCredentials = appConnection?.isPlatformManagedCredentials ?? false;
+  const { data: gateways, isPending: isGatewaysLoading } = useQuery(gatewaysQueryKeys.list());
 
   const confirmSubmit = async (formData: FormData) => {
     if (formData.isPlatformManagedCredentials) {
@@ -118,6 +127,55 @@ export const OracleDBConnectionForm = ({ appConnection, onSubmit }: Props) => {
             </FormControl>
           )}
         />
+        <OrgPermissionCan
+          I={OrgGatewayPermissionActions.AttachGateways}
+          a={OrgPermissionSubjects.Gateway}
+        >
+          {(isAllowed) => (
+            <Controller
+              control={control}
+              name="credentials.gatewayId"
+              defaultValue=""
+              render={({ field: { value, onChange }, fieldState: { error } }) => (
+                <FormControl
+                  isError={Boolean(error?.message)}
+                  errorText={error?.message}
+                  label="Gateway"
+                >
+                  <Tooltip
+                    isDisabled={isAllowed}
+                    content="Restricted access. You don't have permission to attach gateways to resources."
+                  >
+                    <div>
+                      <Select
+                        isDisabled={!isAllowed}
+                        value={value}
+                        onValueChange={onChange}
+                        className="w-full border border-mineshaft-500"
+                        dropdownContainerClassName="max-w-none"
+                        isLoading={isGatewaysLoading}
+                        placeholder="Default: Internet Gateway"
+                        position="popper"
+                      >
+                        <SelectItem
+                          value={null as unknown as string}
+                          onClick={() => onChange(undefined)}
+                        >
+                          Internet Gateway
+                        </SelectItem>
+                        {gateways?.map((el) => (
+                          <SelectItem value={el.id} key={el.id}>
+                            {el.name}
+                          </SelectItem>
+                        ))}
+                      </Select>
+                    </div>
+                  </Tooltip>
+                </FormControl>
+              )}
+            />
+          )}
+        </OrgPermissionCan>
         <SqlConnectionFields
           isPlatformManagedCredentials={isPlatformManagedCredentials}
           selectedTabIndex={selectedTabIndex}

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

@@ -1,10 +1,17 @@
 import { useState } from "react";
 import { Controller, FormProvider, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useQuery } from "@tanstack/react-query";
 import { z } from "zod";
 
-import { Button, FormControl, ModalClose, Select, SelectItem } from "@app/components/v2";
+import { OrgPermissionCan } from "@app/components/permissions";
+import { Button, FormControl, ModalClose, Select, SelectItem, Tooltip } from "@app/components/v2";
+import {
+  OrgGatewayPermissionActions,
+  OrgPermissionSubjects
+} from "@app/context/OrgPermissionContext/types";
 import { APP_CONNECTION_MAP, getAppConnectionMethodDetails } from "@app/helpers/appConnections";
+import { gatewaysQueryKeys } from "@app/hooks/api";
 import { PostgresConnectionMethod, TPostgresConnection } from "@app/hooks/api/appConnections";
 import { AppConnection } from "@app/hooks/api/appConnections/enums";
 import { PlatformManagedConfirmationModal } from "@app/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/shared/PlatformManagedConfirmationModal";
@@ -49,6 +56,7 @@ export const PostgresConnectionForm = ({ appConnection, onSubmit }: Props) => {
       app: AppConnection.Postgres,
       method: PostgresConnectionMethod.UsernameAndPassword,
       credentials: {
+        gatewayId: "",
         host: "",
         port: 5432,
         database: "default",
@@ -68,6 +76,7 @@ export const PostgresConnectionForm = ({ appConnection, onSubmit }: Props) => {
   } = form;
 
   const isPlatformManagedCredentials = appConnection?.isPlatformManagedCredentials ?? false;
+  const { data: gateways, isPending: isGatewaysLoading } = useQuery(gatewaysQueryKeys.list());
 
   const confirmSubmit = async (formData: FormData) => {
     if (formData.isPlatformManagedCredentials) {
@@ -118,6 +127,55 @@ export const PostgresConnectionForm = ({ appConnection, onSubmit }: Props) => {
             </FormControl>
           )}
         />
+        <OrgPermissionCan
+          I={OrgGatewayPermissionActions.AttachGateways}
+          a={OrgPermissionSubjects.Gateway}
+        >
+          {(isAllowed) => (
+            <Controller
+              control={control}
+              name="credentials.gatewayId"
+              defaultValue=""
+              render={({ field: { value, onChange }, fieldState: { error } }) => (
+                <FormControl
+                  isError={Boolean(error?.message)}
+                  errorText={error?.message}
+                  label="Gateway"
+                >
+                  <Tooltip
+                    isDisabled={isAllowed}
+                    content="Restricted access. You don't have permission to attach gateways to resources."
+                  >
+                    <div>
+                      <Select
+                        isDisabled={!isAllowed}
+                        value={value}
+                        onValueChange={onChange}
+                        className="w-full border border-mineshaft-500"
+                        dropdownContainerClassName="max-w-none"
+                        isLoading={isGatewaysLoading}
+                        placeholder="Default: Internet Gateway"
+                        position="popper"
+                      >
+                        <SelectItem
+                          value={null as unknown as string}
+                          onClick={() => onChange(undefined)}
+                        >
+                          Internet Gateway
+                        </SelectItem>
+                        {gateways?.map((el) => (
+                          <SelectItem value={el.id} key={el.id}>
+                            {el.name}
+                          </SelectItem>
+                        ))}
+                      </Select>
+                    </div>
+                  </Tooltip>
+                </FormControl>
+              )}
+            />
+          )}
+        </OrgPermissionCan>
         <SqlConnectionFields
           isPlatformManagedCredentials={isPlatformManagedCredentials}
           selectedTabIndex={selectedTabIndex}

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

@@ -1,6 +1,7 @@
 import { z } from "zod";
 
 export const BaseSqlUsernameAndPasswordConnectionSchema = z.object({
+  gatewayId: z.string().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"),