Swap gateway to outer layer

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

@@ -6,7 +6,8 @@ import { slugSchema } from "@app/lib/schemas";
 
 export const genericAppConnectionFieldsSchema = z.object({
   name: slugSchema({ min: 1, max: 64, field: "Name" }),
-  description: z.string().trim().max(256, "Description cannot exceed 256 characters").nullish()
+  description: z.string().trim().max(256, "Description cannot exceed 256 characters").nullish(),
+  gatewayId: z.string().uuid().nullish()
 });
 
 export const GenericAppConnectionsFields = () => {

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

@@ -58,8 +58,8 @@ export const MsSqlConnectionForm = ({ appConnection, onSubmit }: Props) => {
     defaultValues: appConnection ?? {
       app: AppConnection.MsSql,
       method: MsSqlConnectionMethod.UsernameAndPassword,
+      gatewayId: null,
       credentials: {
-        gatewayId: "",
         host: "",
         port: 1433,
         database: "default",
@@ -99,37 +99,6 @@ export const MsSqlConnectionForm = ({ appConnection, onSubmit }: Props) => {
         }}
       >
         {!isUpdate && <GenericAppConnectionsFields />}
-        <Controller
-          name="method"
-          control={control}
-          render={({ field: { value, onChange }, fieldState: { error } }) => (
-            <FormControl
-              tooltipText={`The method you would like to use to connect with ${
-                APP_CONNECTION_MAP[AppConnection.MsSql].name
-              }. This field cannot be changed after creation.`}
-              errorText={error?.message}
-              isError={Boolean(error?.message)}
-              label="Method"
-            >
-              <Select
-                isDisabled={isUpdate}
-                value={value}
-                onValueChange={(val) => onChange(val)}
-                className="w-full border border-mineshaft-500"
-                position="popper"
-                dropdownContainerClassName="max-w-none"
-              >
-                {Object.values(MsSqlConnectionMethod).map((method) => {
-                  return (
-                    <SelectItem value={method} key={method}>
-                      {getAppConnectionMethodDetails(method).name}{" "}
-                    </SelectItem>
-                  );
-                })}
-              </Select>
-            </FormControl>
-          )}
-        />
         <OrgPermissionCan
           I={OrgGatewayPermissionActions.AttachGateways}
           a={OrgPermissionSubjects.Gateway}
@@ -137,7 +106,7 @@ export const MsSqlConnectionForm = ({ appConnection, onSubmit }: Props) => {
           {(isAllowed) => (
             <Controller
               control={control}
-              name="credentials.gatewayId"
+              name="gatewayId"
               defaultValue=""
               render={({ field: { value, onChange }, fieldState: { error } }) => (
                 <FormControl
@@ -179,6 +148,37 @@ export const MsSqlConnectionForm = ({ appConnection, onSubmit }: Props) => {
             />
           )}
         </OrgPermissionCan>
+        <Controller
+          name="method"
+          control={control}
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl
+              tooltipText={`The method you would like to use to connect with ${
+                APP_CONNECTION_MAP[AppConnection.MsSql].name
+              }. This field cannot be changed after creation.`}
+              errorText={error?.message}
+              isError={Boolean(error?.message)}
+              label="Method"
+            >
+              <Select
+                isDisabled={isUpdate}
+                value={value}
+                onValueChange={(val) => onChange(val)}
+                className="w-full border border-mineshaft-500"
+                position="popper"
+                dropdownContainerClassName="max-w-none"
+              >
+                {Object.values(MsSqlConnectionMethod).map((method) => {
+                  return (
+                    <SelectItem value={method} key={method}>
+                      {getAppConnectionMethodDetails(method).name}{" "}
+                    </SelectItem>
+                  );
+                })}
+              </Select>
+            </FormControl>
+          )}
+        />
         <SqlConnectionFields
           isPlatformManagedCredentials={isPlatformManagedCredentials}
           selectedTabIndex={selectedTabIndex}

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

@@ -55,8 +55,8 @@ export const MySqlConnectionForm = ({ appConnection, onSubmit }: Props) => {
     defaultValues: appConnection ?? {
       app: AppConnection.MySql,
       method: MySqlConnectionMethod.UsernameAndPassword,
+      gatewayId: null,
       credentials: {
-        gatewayId: "",
         host: "",
         port: 3306,
         database: "default",
@@ -96,37 +96,6 @@ export const MySqlConnectionForm = ({ appConnection, onSubmit }: Props) => {
         }}
       >
         {!isUpdate && <GenericAppConnectionsFields />}
-        <Controller
-          name="method"
-          control={control}
-          render={({ field: { value, onChange }, fieldState: { error } }) => (
-            <FormControl
-              tooltipText={`The method you would like to use to connect with ${
-                APP_CONNECTION_MAP[AppConnection.MySql].name
-              }. This field cannot be changed after creation.`}
-              errorText={error?.message}
-              isError={Boolean(error?.message)}
-              label="Method"
-            >
-              <Select
-                isDisabled={isUpdate}
-                value={value}
-                onValueChange={(val) => onChange(val)}
-                className="w-full border border-mineshaft-500"
-                position="popper"
-                dropdownContainerClassName="max-w-none"
-              >
-                {Object.values(MySqlConnectionMethod).map((method) => {
-                  return (
-                    <SelectItem value={method} key={method}>
-                      {getAppConnectionMethodDetails(method).name}{" "}
-                    </SelectItem>
-                  );
-                })}
-              </Select>
-            </FormControl>
-          )}
-        />
         <OrgPermissionCan
           I={OrgGatewayPermissionActions.AttachGateways}
           a={OrgPermissionSubjects.Gateway}
@@ -134,7 +103,7 @@ export const MySqlConnectionForm = ({ appConnection, onSubmit }: Props) => {
           {(isAllowed) => (
             <Controller
               control={control}
-              name="credentials.gatewayId"
+              name="gatewayId"
               defaultValue=""
               render={({ field: { value, onChange }, fieldState: { error } }) => (
                 <FormControl
@@ -176,6 +145,37 @@ export const MySqlConnectionForm = ({ appConnection, onSubmit }: Props) => {
             />
           )}
         </OrgPermissionCan>
+        <Controller
+          name="method"
+          control={control}
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl
+              tooltipText={`The method you would like to use to connect with ${
+                APP_CONNECTION_MAP[AppConnection.MySql].name
+              }. This field cannot be changed after creation.`}
+              errorText={error?.message}
+              isError={Boolean(error?.message)}
+              label="Method"
+            >
+              <Select
+                isDisabled={isUpdate}
+                value={value}
+                onValueChange={(val) => onChange(val)}
+                className="w-full border border-mineshaft-500"
+                position="popper"
+                dropdownContainerClassName="max-w-none"
+              >
+                {Object.values(MySqlConnectionMethod).map((method) => {
+                  return (
+                    <SelectItem value={method} key={method}>
+                      {getAppConnectionMethodDetails(method).name}{" "}
+                    </SelectItem>
+                  );
+                })}
+              </Select>
+            </FormControl>
+          )}
+        />
         <SqlConnectionFields
           isPlatformManagedCredentials={isPlatformManagedCredentials}
           selectedTabIndex={selectedTabIndex}

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

@@ -55,8 +55,8 @@ export const OracleDBConnectionForm = ({ appConnection, onSubmit }: Props) => {
     defaultValues: appConnection ?? {
       app: AppConnection.OracleDB,
       method: OracleDBConnectionMethod.UsernameAndPassword,
+      gatewayId: null,
       credentials: {
-        gatewayId: "",
         host: "",
         port: 1521,
         database: "ORCL", // Typically FREEPDB1 or ORCL
@@ -96,37 +96,6 @@ export const OracleDBConnectionForm = ({ appConnection, onSubmit }: Props) => {
         }}
       >
         {!isUpdate && <GenericAppConnectionsFields />}
-        <Controller
-          name="method"
-          control={control}
-          render={({ field: { value, onChange }, fieldState: { error } }) => (
-            <FormControl
-              tooltipText={`The method you would like to use to connect with ${
-                APP_CONNECTION_MAP[AppConnection.OracleDB].name
-              }. This field cannot be changed after creation.`}
-              errorText={error?.message}
-              isError={Boolean(error?.message)}
-              label="Method"
-            >
-              <Select
-                isDisabled={isUpdate}
-                value={value}
-                onValueChange={(val) => onChange(val)}
-                className="w-full border border-mineshaft-500"
-                position="popper"
-                dropdownContainerClassName="max-w-none"
-              >
-                {Object.values(OracleDBConnectionMethod).map((method) => {
-                  return (
-                    <SelectItem value={method} key={method}>
-                      {getAppConnectionMethodDetails(method).name}{" "}
-                    </SelectItem>
-                  );
-                })}
-              </Select>
-            </FormControl>
-          )}
-        />
         <OrgPermissionCan
           I={OrgGatewayPermissionActions.AttachGateways}
           a={OrgPermissionSubjects.Gateway}
@@ -134,7 +103,7 @@ export const OracleDBConnectionForm = ({ appConnection, onSubmit }: Props) => {
           {(isAllowed) => (
             <Controller
               control={control}
-              name="credentials.gatewayId"
+              name="gatewayId"
               defaultValue=""
               render={({ field: { value, onChange }, fieldState: { error } }) => (
                 <FormControl
@@ -176,6 +145,37 @@ export const OracleDBConnectionForm = ({ appConnection, onSubmit }: Props) => {
             />
           )}
         </OrgPermissionCan>
+        <Controller
+          name="method"
+          control={control}
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl
+              tooltipText={`The method you would like to use to connect with ${
+                APP_CONNECTION_MAP[AppConnection.OracleDB].name
+              }. This field cannot be changed after creation.`}
+              errorText={error?.message}
+              isError={Boolean(error?.message)}
+              label="Method"
+            >
+              <Select
+                isDisabled={isUpdate}
+                value={value}
+                onValueChange={(val) => onChange(val)}
+                className="w-full border border-mineshaft-500"
+                position="popper"
+                dropdownContainerClassName="max-w-none"
+              >
+                {Object.values(OracleDBConnectionMethod).map((method) => {
+                  return (
+                    <SelectItem value={method} key={method}>
+                      {getAppConnectionMethodDetails(method).name}{" "}
+                    </SelectItem>
+                  );
+                })}
+              </Select>
+            </FormControl>
+          )}
+        />
         <SqlConnectionFields
           isPlatformManagedCredentials={isPlatformManagedCredentials}
           selectedTabIndex={selectedTabIndex}

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

@@ -55,8 +55,8 @@ export const PostgresConnectionForm = ({ appConnection, onSubmit }: Props) => {
     defaultValues: appConnection ?? {
       app: AppConnection.Postgres,
       method: PostgresConnectionMethod.UsernameAndPassword,
+      gatewayId: null,
       credentials: {
-        gatewayId: "",
         host: "",
         port: 5432,
         database: "default",
@@ -96,37 +96,6 @@ export const PostgresConnectionForm = ({ appConnection, onSubmit }: Props) => {
         }}
       >
         {!isUpdate && <GenericAppConnectionsFields />}
-        <Controller
-          name="method"
-          control={control}
-          render={({ field: { value, onChange }, fieldState: { error } }) => (
-            <FormControl
-              tooltipText={`The method you would like to use to connect with ${
-                APP_CONNECTION_MAP[AppConnection.Postgres].name
-              }. This field cannot be changed after creation.`}
-              errorText={error?.message}
-              isError={Boolean(error?.message)}
-              label="Method"
-            >
-              <Select
-                isDisabled={isUpdate}
-                value={value}
-                onValueChange={(val) => onChange(val)}
-                className="w-full border border-mineshaft-500"
-                position="popper"
-                dropdownContainerClassName="max-w-none"
-              >
-                {Object.values(PostgresConnectionMethod).map((method) => {
-                  return (
-                    <SelectItem value={method} key={method}>
-                      {getAppConnectionMethodDetails(method).name}{" "}
-                    </SelectItem>
-                  );
-                })}
-              </Select>
-            </FormControl>
-          )}
-        />
         <OrgPermissionCan
           I={OrgGatewayPermissionActions.AttachGateways}
           a={OrgPermissionSubjects.Gateway}
@@ -134,7 +103,7 @@ export const PostgresConnectionForm = ({ appConnection, onSubmit }: Props) => {
           {(isAllowed) => (
             <Controller
               control={control}
-              name="credentials.gatewayId"
+              name="gatewayId"
               defaultValue=""
               render={({ field: { value, onChange }, fieldState: { error } }) => (
                 <FormControl
@@ -176,6 +145,37 @@ export const PostgresConnectionForm = ({ appConnection, onSubmit }: Props) => {
             />
           )}
         </OrgPermissionCan>
+        <Controller
+          name="method"
+          control={control}
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl
+              tooltipText={`The method you would like to use to connect with ${
+                APP_CONNECTION_MAP[AppConnection.Postgres].name
+              }. This field cannot be changed after creation.`}
+              errorText={error?.message}
+              isError={Boolean(error?.message)}
+              label="Method"
+            >
+              <Select
+                isDisabled={isUpdate}
+                value={value}
+                onValueChange={(val) => onChange(val)}
+                className="w-full border border-mineshaft-500"
+                position="popper"
+                dropdownContainerClassName="max-w-none"
+              >
+                {Object.values(PostgresConnectionMethod).map((method) => {
+                  return (
+                    <SelectItem value={method} key={method}>
+                      {getAppConnectionMethodDetails(method).name}{" "}
+                    </SelectItem>
+                  );
+                })}
+              </Select>
+            </FormControl>
+          )}
+        />
         <SqlConnectionFields
           isPlatformManagedCredentials={isPlatformManagedCredentials}
           selectedTabIndex={selectedTabIndex}

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

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