improvements: add ssl options to sql connections and update ui/docs

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ParametersFields/shared/SqlRotationParametersFields.tsx

@@ -57,7 +57,7 @@ export const SqlRotationParametersFields = () => {
           to suit your needs.
         </p>
         <p className="mb-3 text-sm">
-          <pre className="whitespace-pre-wrap rounded border border-mineshaft-700 bg-mineshaft-800 p-2 text-mineshaft-300">
+          <pre className="max-h-[10rem] overflow-y-auto whitespace-pre-wrap rounded border border-mineshaft-700 bg-mineshaft-800 p-2 text-mineshaft-300">
             {rotationOption!.template.createUserStatement}
           </pre>
         </p>

frontend/src/hooks/api/appConnections/types/shared/sql-connection.ts

@@ -4,4 +4,6 @@ export type TBaseSqlConnectionCredentials = {
   username: string;
   password: string;
   database: string;
+  sslEnabled: boolean;
+  sslRejectUnauthorized: boolean;
 };

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

@@ -22,7 +22,7 @@ import {
 
 type Props = {
   appConnection?: TAwsConnection;
-  onSubmit: (formData: FormData) => void;
+  onSubmit: (formData: FormData) => Promise<void>;
 };
 
 const rootSchema = genericAppConnectionFieldsSchema.extend({

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

@@ -25,7 +25,7 @@ import {
 
 type Props = {
   appConnection?: TDatabricksConnection;
-  onSubmit: (formData: FormData) => void;
+  onSubmit: (formData: FormData) => Promise<void>;
 };
 
 const rootSchema = genericAppConnectionFieldsSchema.extend({

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

@@ -28,7 +28,7 @@ import {
 
 type Props = {
   appConnection?: TGcpConnection;
-  onSubmit: (formData: FormData) => void;
+  onSubmit: (formData: FormData) => Promise<void>;
 };
 
 const rootSchema = genericAppConnectionFieldsSchema.extend({

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

@@ -21,7 +21,7 @@ import {
 
 type Props = {
   appConnection?: THumanitecConnection;
-  onSubmit: (formData: FormData) => void;
+  onSubmit: (formData: FormData) => Promise<void>;
 };
 
 const rootSchema = genericAppConnectionFieldsSchema.extend({

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

@@ -24,7 +24,7 @@ import {
 
 type Props = {
   appConnection?: TMsSqlConnection;
-  onSubmit: (formData: FormData) => void;
+  onSubmit: (formData: FormData) => Promise<void>;
 };
 
 const rootSchema = genericAppConnectionFieldsSchema.extend({
@@ -44,6 +44,7 @@ type FormData = z.infer<typeof formSchema>;
 export const MsSqlConnectionForm = ({ appConnection, onSubmit }: Props) => {
   const isUpdate = Boolean(appConnection);
   const [showConfirmation, setShowConfirmation] = useState(false);
+  const [selectedTabIndex, setSelectedTabIndex] = useState(0);
 
   const form = useForm<FormData>({
     resolver: zodResolver(formSchema),
@@ -56,7 +57,9 @@ export const MsSqlConnectionForm = ({ appConnection, onSubmit }: Props) => {
         database: "default",
         username: "",
         password: "",
-        sslCertificate: ""
+        sslEnabled: true,
+        sslRejectUnauthorized: true,
+        sslCertificate: undefined
       }
     }
   });
@@ -69,18 +72,23 @@ export const MsSqlConnectionForm = ({ appConnection, onSubmit }: Props) => {
 
   const isPlatformManagedCredentials = appConnection?.isPlatformManagedCredentials ?? false;
 
-  const confirmSubmit = (formData: FormData) => {
+  const confirmSubmit = async (formData: FormData) => {
     if (formData.isPlatformManagedCredentials) {
       setShowConfirmation(true);
       return;
     }
 
-    onSubmit(formData);
+    await onSubmit(formData);
   };
 
   return (
     <FormProvider {...form}>
-      <form onSubmit={handleSubmit(confirmSubmit)}>
+      <form
+        onSubmit={(e) => {
+          setSelectedTabIndex(0);
+          handleSubmit(confirmSubmit)(e);
+        }}
+      >
         {!isUpdate && <GenericAppConnectionsFields />}
         <Controller
           name="method"
@@ -113,7 +121,11 @@ export const MsSqlConnectionForm = ({ appConnection, onSubmit }: Props) => {
             </FormControl>
           )}
         />
-        <SqlConnectionFields isPlatformManagedCredentials={isPlatformManagedCredentials} />
+        <SqlConnectionFields
+          isPlatformManagedCredentials={isPlatformManagedCredentials}
+          selectedTabIndex={selectedTabIndex}
+          setSelectedTabIndex={setSelectedTabIndex}
+        />
         {isPlatformManagedCredentials ? (
           <PlatformManagedNoticeBanner />
         ) : (

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

@@ -21,7 +21,7 @@ import {
 
 type Props = {
   appConnection?: TPostgresConnection;
-  onSubmit: (formData: FormData) => void;
+  onSubmit: (formData: FormData) => Promise<void>;
 };
 
 const rootSchema = genericAppConnectionFieldsSchema.extend({
@@ -41,6 +41,7 @@ type FormData = z.infer<typeof formSchema>;
 export const PostgresConnectionForm = ({ appConnection, onSubmit }: Props) => {
   const isUpdate = Boolean(appConnection);
   const [showConfirmation, setShowConfirmation] = useState(false);
+  const [selectedTabIndex, setSelectedTabIndex] = useState(0);
 
   const form = useForm<FormData>({
     resolver: zodResolver(formSchema),
@@ -53,7 +54,9 @@ export const PostgresConnectionForm = ({ appConnection, onSubmit }: Props) => {
         database: "default",
         username: "",
         password: "",
-        sslCertificate: ""
+        sslEnabled: true,
+        sslRejectUnauthorized: true,
+        sslCertificate: undefined
       }
     }
   });
@@ -66,18 +69,23 @@ export const PostgresConnectionForm = ({ appConnection, onSubmit }: Props) => {
 
   const isPlatformManagedCredentials = appConnection?.isPlatformManagedCredentials ?? false;
 
-  const confirmSubmit = (formData: FormData) => {
+  const confirmSubmit = async (formData: FormData) => {
     if (formData.isPlatformManagedCredentials) {
       setShowConfirmation(true);
       return;
     }
 
-    onSubmit(formData);
+    await onSubmit(formData);
   };
 
   return (
     <FormProvider {...form}>
-      <form onSubmit={handleSubmit(confirmSubmit)}>
+      <form
+        onSubmit={(e) => {
+          setSelectedTabIndex(0);
+          handleSubmit(confirmSubmit)(e);
+        }}
+      >
         {!isUpdate && <GenericAppConnectionsFields />}
         <Controller
           name="method"
@@ -110,7 +118,11 @@ export const PostgresConnectionForm = ({ appConnection, onSubmit }: Props) => {
             </FormControl>
           )}
         />
-        <SqlConnectionFields isPlatformManagedCredentials={isPlatformManagedCredentials} />
+        <SqlConnectionFields
+          isPlatformManagedCredentials={isPlatformManagedCredentials}
+          selectedTabIndex={selectedTabIndex}
+          setSelectedTabIndex={setSelectedTabIndex}
+        />
         {isPlatformManagedCredentials ? (
           <PlatformManagedNoticeBanner />
         ) : (

frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/shared/SqlConnectionFields.tsx

@@ -1,122 +1,207 @@
+import { Dispatch, SetStateAction } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 import { faQuestionCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Tab } from "@headlessui/react";
 
 import { FormControl, Input, SecretInput, Switch, TextArea, Tooltip } from "@app/components/v2";
 
 type Props = {
   isPlatformManagedCredentials: boolean;
+  selectedTabIndex: number;
+  setSelectedTabIndex: Dispatch<SetStateAction<number>>;
 };
 
-export const SqlConnectionFields = ({ isPlatformManagedCredentials }: Props) => {
-  const { control } = useFormContext();
+export const SqlConnectionFields = ({
+  isPlatformManagedCredentials,
+  setSelectedTabIndex,
+  selectedTabIndex
+}: Props) => {
+  const { control, watch } = useFormContext();
 
+  const sslEnabled = watch("credentials.sslEnabled");
   return (
     <>
-      <div className="flex items-start gap-2">
-        <Controller
-          name="credentials.host"
-          control={control}
-          shouldUnregister
-          render={({ field, fieldState: { error } }) => (
-            <FormControl
-              className="flex-1"
-              errorText={error?.message}
-              isError={Boolean(error?.message)}
-              label="Host"
-            >
-              <Input {...field} isDisabled={isPlatformManagedCredentials} />
-            </FormControl>
-          )}
-        />
-        <Controller
-          name="credentials.database"
-          control={control}
-          shouldUnregister
-          render={({ field, fieldState: { error } }) => (
-            <FormControl
-              className="flex-1"
-              errorText={error?.message}
-              isError={Boolean(error?.message)}
-              label="Database Name"
-            >
-              <Input {...field} isDisabled={isPlatformManagedCredentials} />
-            </FormControl>
-          )}
-        />
-        <Controller
-          name="credentials.port"
-          control={control}
-          shouldUnregister
-          render={({ field, fieldState: { error } }) => (
-            <FormControl
-              className="w-28"
-              errorText={error?.message}
-              isError={Boolean(error?.message)}
-              label="Port"
-            >
-              <Input type="number" {...field} isDisabled={isPlatformManagedCredentials} />
-            </FormControl>
-          )}
-        />
-      </div>
-      <div className="flex items-start gap-2">
-        <Controller
-          name="credentials.username"
-          control={control}
-          shouldUnregister
-          render={({ field, fieldState: { error } }) => (
-            <FormControl
-              errorText={error?.message}
-              isError={Boolean(error?.message)}
-              label="Username"
-              className="flex-1"
-            >
-              <Input {...field} isDisabled={isPlatformManagedCredentials} />
-            </FormControl>
-          )}
-        />
-        <Controller
-          name="credentials.password"
-          control={control}
-          shouldUnregister
-          render={({ field: { value, onChange }, fieldState: { error } }) => (
-            <FormControl
-              errorText={error?.message}
-              isError={Boolean(error?.message)}
-              label="Password"
-              className="flex-1"
-            >
-              <SecretInput
-                containerClassName="text-gray-400 w-full group-focus-within:!border-primary-400/50 border border-mineshaft-500 bg-mineshaft-900 px-2.5 py-1.5"
-                value={value}
-                onChange={(e) => onChange(e.target.value)}
-                isDisabled={isPlatformManagedCredentials}
-              />
-            </FormControl>
-          )}
-        />
-      </div>
-      <Controller
-        name="credentials.sslCertificate"
-        control={control}
-        shouldUnregister
-        render={({ field, fieldState: { error } }) => (
-          <FormControl
-            errorText={error?.message}
-            isError={Boolean(error?.message)}
-            label="SSL Certificate"
-            isOptional
+      <Tab.Group selectedIndex={selectedTabIndex} onChange={setSelectedTabIndex}>
+        <Tab.List className="-pb-1 mb-6 w-full border-b-2 border-mineshaft-600">
+          <Tab
+            className={({ selected }) =>
+              `w-30 -mb-[0.14rem] px-4 py-2 text-sm font-medium outline-none disabled:opacity-60 ${
+                selected ? "border-b-2 border-mineshaft-300 text-mineshaft-200" : "text-bunker-300"
+              }`
+            }
           >
-            <TextArea
-              className="!resize-none"
-              rows={1}
-              {...field}
-              isDisabled={isPlatformManagedCredentials}
+            Configuration
+          </Tab>
+          <Tab
+            className={({ selected }) =>
+              `w-30 -mb-[0.14rem] px-4 py-2 text-sm font-medium outline-none disabled:opacity-60 ${
+                selected ? "border-b-2 border-mineshaft-300 text-mineshaft-200" : "text-bunker-300"
+              }`
+            }
+          >
+            SSL ({sslEnabled ? "Enabled" : "Disabled"})
+          </Tab>
+        </Tab.List>
+        <Tab.Panels className="mb-4 rounded border border-mineshaft-600 bg-mineshaft-700/70 p-3 pb-0">
+          <Tab.Panel>
+            <div className="mt-[0.675rem] flex items-start gap-2">
+              <Controller
+                name="credentials.host"
+                control={control}
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    className="flex-1"
+                    errorText={error?.message}
+                    isError={Boolean(error?.message)}
+                    label="Host"
+                  >
+                    <Input {...field} isDisabled={isPlatformManagedCredentials} />
+                  </FormControl>
+                )}
+              />
+              <Controller
+                name="credentials.database"
+                control={control}
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    className="flex-1"
+                    errorText={error?.message}
+                    isError={Boolean(error?.message)}
+                    label="Database Name"
+                  >
+                    <Input {...field} isDisabled={isPlatformManagedCredentials} />
+                  </FormControl>
+                )}
+              />
+              <Controller
+                name="credentials.port"
+                control={control}
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    className="w-28"
+                    errorText={error?.message}
+                    isError={Boolean(error?.message)}
+                    label="Port"
+                  >
+                    <Input type="number" {...field} isDisabled={isPlatformManagedCredentials} />
+                  </FormControl>
+                )}
+              />
+            </div>
+            <div className="mb-[0.675rem] flex items-start gap-2">
+              <Controller
+                name="credentials.username"
+                control={control}
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    errorText={error?.message}
+                    isError={Boolean(error?.message)}
+                    label="Username"
+                    className="flex-1"
+                  >
+                    <Input {...field} isDisabled={isPlatformManagedCredentials} />
+                  </FormControl>
+                )}
+              />
+              <Controller
+                name="credentials.password"
+                control={control}
+                render={({ field: { value, onChange }, fieldState: { error } }) => (
+                  <FormControl
+                    errorText={error?.message}
+                    isError={Boolean(error?.message)}
+                    label="Password"
+                    className="flex-1"
+                  >
+                    <SecretInput
+                      containerClassName="text-gray-400 w-full group-focus-within:!border-primary-400/50 border border-mineshaft-500 bg-mineshaft-900 px-2.5 py-1.5"
+                      value={value}
+                      onChange={(e) => onChange(e.target.value)}
+                      isDisabled={isPlatformManagedCredentials}
+                    />
+                  </FormControl>
+                )}
+              />
+            </div>
+          </Tab.Panel>
+          <Tab.Panel>
+            <Controller
+              name="credentials.sslEnabled"
+              control={control}
+              render={({ field: { value, onChange }, fieldState: { error } }) => (
+                <FormControl isError={Boolean(error?.message)} errorText={error?.message}>
+                  <Switch
+                    className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
+                    id="platform-managed"
+                    thumbClassName="bg-mineshaft-800"
+                    isChecked={value}
+                    onCheckedChange={onChange}
+                    isDisabled={isPlatformManagedCredentials}
+                  >
+                    Enable SSL
+                  </Switch>
+                </FormControl>
+              )}
             />
-          </FormControl>
-        )}
-      />
+
+            <Controller
+              name="credentials.sslCertificate"
+              control={control}
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  errorText={error?.message}
+                  isError={Boolean(error?.message)}
+                  className={sslEnabled ? "" : "opacity-50"}
+                  label="SSL Certificate"
+                  isOptional
+                >
+                  <TextArea
+                    className="h-[3.5rem] !resize-none"
+                    {...field}
+                    isDisabled={isPlatformManagedCredentials || !sslEnabled}
+                  />
+                </FormControl>
+              )}
+            />
+            <Controller
+              name="credentials.sslRejectUnauthorized"
+              control={control}
+              render={({ field: { value, onChange }, fieldState: { error } }) => (
+                <FormControl
+                  className={sslEnabled ? "" : "opacity-50"}
+                  isError={Boolean(error?.message)}
+                  errorText={error?.message}
+                >
+                  <Switch
+                    className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
+                    id="platform-managed"
+                    thumbClassName="bg-mineshaft-800"
+                    isChecked={sslEnabled ? value : false}
+                    onCheckedChange={onChange}
+                    isDisabled={isPlatformManagedCredentials || !sslEnabled}
+                  >
+                    <p className="w-[9.5rem]">
+                      Reject Unauthorized
+                      <Tooltip
+                        className="max-w-md"
+                        content={
+                          <p>
+                            If enabled, Infisical will only connect to servers that have valid,
+                            trusted SSL certificates.
+                          </p>
+                        }
+                      >
+                        <FontAwesomeIcon icon={faQuestionCircle} size="sm" className="ml-1" />
+                      </Tooltip>
+                    </p>
+                  </Switch>
+                </FormControl>
+              )}
+            />
+          </Tab.Panel>
+        </Tab.Panels>
+      </Tab.Group>
       {!isPlatformManagedCredentials && (
         <Controller
           name="isPlatformManagedCredentials"

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

@@ -6,5 +6,11 @@ export const BaseSqlUsernameAndPasswordConnectionSchema = z.object({
   database: z.string().trim().min(1, "Database required").default("default"),
   username: z.string().trim().min(1, "Username required"),
   password: z.string().trim().min(1, "Password required"),
-  sslCertificate: z.string().trim().optional()
+  sslEnabled: z.boolean().default(true),
+  sslRejectUnauthorized: z.boolean().default(true),
+  sslCertificate: z
+    .string()
+    .trim()
+    .transform((value) => value || undefined)
+    .optional()
 });