Merge branch 'main' into ENG-3723

2026-10-21 01:16:49 +00:00 · 2025-09-27 01:58:44 -04:00
parent 4b1664c30f 83755d0bba
commit 1c83189978
162 changed files with 7033 additions and 424 deletions
@@ -47,6 +47,7 @@ import { TerraformCloudConnectionForm } from "./TerraformCloudConnectionForm";
 import { VercelConnectionForm } from "./VercelConnectionForm";
 import { WindmillConnectionForm } from "./WindmillConnectionForm";
 import { ZabbixConnectionForm } from "./ZabbixConnectionForm";
+import { RedisConnectionForm } from "./RedisConnectionForm";

 type FormProps = {
  onComplete: (appConnection: TAppConnection) => void;
@@ -142,7 +143,7 @@ const CreateForm = ({ app, onComplete, projectId }: CreateFormProps) => {
    case AppConnection.OnePass:
      return <OnePassConnectionForm onSubmit={onSubmit} />;
    case AppConnection.Heroku:
-      return <HerokuConnectionForm onSubmit={onSubmit} />;
+      return <HerokuConnectionForm onSubmit={onSubmit} projectId={projectId} />;
    case AppConnection.Render:
      return <RenderConnectionForm onSubmit={onSubmit} />;
    case AppConnection.Flyio:
@@ -167,6 +168,8 @@ const CreateForm = ({ app, onComplete, projectId }: CreateFormProps) => {
      return <NetlifyConnectionForm onSubmit={onSubmit} />;
    case AppConnection.Okta:
      return <OktaConnectionForm onSubmit={onSubmit} />;
+    case AppConnection.Redis:
+      return <RedisConnectionForm onSubmit={onSubmit} />;
    default:
      throw new Error(`Unhandled App ${app}`);
  }
@@ -285,7 +288,13 @@ const UpdateForm = ({ appConnection, onComplete }: UpdateFormProps) => {
    case AppConnection.OnePass:
      return <OnePassConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
    case AppConnection.Heroku:
-      return <HerokuConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
+      return (
+        <HerokuConnectionForm
+          onSubmit={onSubmit}
+          appConnection={appConnection}
+          projectId={appConnection.projectId}
+        />
+      );
    case AppConnection.Render:
      return <RenderConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
    case AppConnection.Flyio:
@@ -314,6 +323,8 @@ const UpdateForm = ({ appConnection, onComplete }: UpdateFormProps) => {
      return <DigitalOceanConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
    case AppConnection.Okta:
      return <OktaConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
+    case AppConnection.Redis:
+      return <RedisConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
    default:
      throw new Error(`Unhandled App ${(appConnection as TAppConnection).app}`);
  }
@@ -39,7 +39,7 @@ import {
 } from "@app/hooks/api/appConnections";
 import { AppConnection } from "@app/hooks/api/appConnections/enums";

-import { GithubFormData } from "../../../OauthCallbackPage/OauthCallbackPage.types";
+import { GitHubFormData } from "../../../OauthCallbackPage/OauthCallbackPage.types";
 import {
  genericAppConnectionFieldsSchema,
  GenericAppConnectionsFields
@@ -118,7 +118,7 @@ export const GitHubConnectionForm = ({ appConnection, projectId }: Props) => {
        connectionId: appConnection?.id,
        projectId,
        returnUrl
-      } as GithubFormData)
+      } as GitHubFormData)
    );

    const githubHost =
@@ -19,7 +19,7 @@ import {
 } from "@app/hooks/api/appConnections";
 import { AppConnection } from "@app/hooks/api/appConnections/enums";

-import { GithubRadarFormData } from "../../../OauthCallbackPage/OauthCallbackPage.types";
+import { GitHubRadarFormData } from "../../../OauthCallbackPage/OauthCallbackPage.types";
 import {
  genericAppConnectionFieldsSchema,
  GenericAppConnectionsFields
@@ -76,7 +76,7 @@ export const GitHubRadarConnectionForm = ({ appConnection, projectId }: Props) =
        connectionId: appConnection?.id,
        projectId,
        returnUrl
-      } as GithubRadarFormData)
+      } as GitHubRadarFormData)
    );

    switch (formData.method) {
@@ -15,7 +15,11 @@ import {
  Select,
  SelectItem
 } from "@app/components/v2";
-import { APP_CONNECTION_MAP, getAppConnectionMethodDetails } from "@app/helpers/appConnections";
+import {
+  APP_CONNECTION_MAP,
+  getAppConnectionMethodDetails,
+  useGetAppConnectionOauthReturnUrl
+} from "@app/helpers/appConnections";
 import { isInfisicalCloud } from "@app/helpers/platform";
 import { useGetAppConnectionOption } from "@app/hooks/api/appConnections";
 import { AppConnection } from "@app/hooks/api/appConnections/enums";
@@ -32,6 +36,7 @@ import {
 type Props = {
  appConnection?: THerokuConnection;
  onSubmit: (formData: FormData) => Promise<void>;
+  projectId: string | undefined | null;
 };

 const formSchema = z.discriminatedUnion("method", [
@@ -53,10 +58,12 @@ const formSchema = z.discriminatedUnion("method", [

 type FormData = z.infer<typeof formSchema>;

-export const HerokuConnectionForm = ({ appConnection, onSubmit: formSubmit }: Props) => {
+export const HerokuConnectionForm = ({ appConnection, onSubmit: formSubmit, projectId }: Props) => {
  const isUpdate = Boolean(appConnection);
  const [isRedirecting, setIsRedirecting] = useState(false);

+  const returnUrl = useGetAppConnectionOauthReturnUrl();
+
  const {
    option: { oauthClientId },
    isLoading
@@ -110,7 +117,8 @@ export const HerokuConnectionForm = ({ appConnection, onSubmit: formSubmit }: Pr
            JSON.stringify({
              ...formData,
              connectionId: appConnection?.id,
-              isUpdate
+              returnUrl,
+              projectId
            })
          );

@@ -0,0 +1,316 @@
+import { useState } from "react";
+import { Controller, FormProvider, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { Tab } from "@headlessui/react";
+import {
+  Button,
+  FormControl,
+  Input,
+  ModalClose,
+  SecretInput,
+  Select,
+  SelectItem,
+  Switch,
+  TextArea,
+  Tooltip
+} from "@app/components/v2";
+import { APP_CONNECTION_MAP, getAppConnectionMethodDetails } from "@app/helpers/appConnections";
+import { RedisConnectionMethod, TRedisConnection } from "@app/hooks/api/appConnections";
+import { AppConnection } from "@app/hooks/api/appConnections/enums";
+
+import {
+  genericAppConnectionFieldsSchema,
+  GenericAppConnectionsFields
+} from "./GenericAppConnectionFields";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faQuestionCircle } from "@fortawesome/free-solid-svg-icons";
+
+type Props = {
+  appConnection?: TRedisConnection;
+  onSubmit: (formData: FormData) => Promise<void>;
+};
+
+const rootSchema = genericAppConnectionFieldsSchema.extend({
+  app: z.literal(AppConnection.Redis)
+});
+
+const formSchema = z.discriminatedUnion("method", [
+  rootSchema.extend({
+    method: z.literal(RedisConnectionMethod.UsernameAndPassword),
+    credentials: z.object({
+      host: z.string().trim().min(1, "Host required"),
+      port: z.coerce.number().default(6379),
+      username: z.string().trim().min(1, "Username required"),
+      password: z.string().trim().optional(),
+      sslEnabled: z.boolean().default(false),
+      sslRejectUnauthorized: z.boolean().default(true),
+      sslCertificate: z
+        .string()
+        .trim()
+        .transform((value) => value || undefined)
+        .optional()
+    })
+  })
+]);
+
+type FormData = z.infer<typeof formSchema>;
+
+export const RedisConnectionForm = ({ appConnection, onSubmit }: Props) => {
+  const isUpdate = Boolean(appConnection);
+  const [selectedTabIndex, setSelectedTabIndex] = useState(0);
+
+  const form = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues: appConnection ?? {
+      app: AppConnection.Redis,
+      method: RedisConnectionMethod.UsernameAndPassword,
+      credentials: {
+        host: "",
+        port: 6379,
+        username: "",
+        password: "",
+        sslEnabled: false,
+        sslRejectUnauthorized: true,
+        sslCertificate: undefined
+      }
+    }
+  });
+
+  const {
+    handleSubmit,
+    watch,
+    control,
+    formState: { isSubmitting, isDirty }
+  } = form;
+
+  const sslEnabled = watch("credentials.sslEnabled");
+
+  return (
+    <FormProvider {...form}>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        {!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.Redis].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(RedisConnectionMethod).map((method) => {
+                  return (
+                    <SelectItem value={method} key={method}>
+                      {getAppConnectionMethodDetails(method).name}{" "}
+                    </SelectItem>
+                  );
+                })}
+              </Select>
+            </FormControl>
+          )}
+        />
+
+        <>
+          <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"
+                  }`
+                }
+              >
+                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} />
+                      </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} />
+                      </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} />
+                      </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)}
+                        />
+                      </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="ssl-enabled"
+                        thumbClassName="bg-mineshaft-800"
+                        isChecked={value}
+                        onCheckedChange={onChange}
+                      >
+                        Enable SSL
+                      </Switch>
+                    </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={!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="ssl-reject-unauthorized"
+                        thumbClassName="bg-mineshaft-800"
+                        isChecked={sslEnabled ? value : false}
+                        onCheckedChange={onChange}
+                        isDisabled={!sslEnabled}
+                      >
+                        <p className="w-[9.5rem]">
+                          Reject Unauthorized
+                          <Tooltip
+                            className="max-w-md"
+                            content={
+                              <p>
+                                If enabled, Infisical will only connect to the server if it has a
+                                valid, trusted SSL certificate.
+                              </p>
+                            }
+                          >
+                            <FontAwesomeIcon icon={faQuestionCircle} size="sm" className="ml-1" />
+                          </Tooltip>
+                        </p>
+                      </Switch>
+                    </FormControl>
+                  )}
+                />
+              </Tab.Panel>
+            </Tab.Panels>
+          </Tab.Group>
+        </>
+
+        <div className="mt-6 flex items-center">
+          <Button
+            className="mr-4"
+            size="sm"
+            type="submit"
+            colorSchema="secondary"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting || !isDirty}
+          >
+            {isUpdate ? "Update Credentials" : "Connect to Database"}
+          </Button>
+          <ModalClose asChild>
+            <Button colorSchema="secondary" variant="plain">
+              Cancel
+            </Button>
+          </ModalClose>
+        </div>
+      </form>
+    </FormProvider>
+  );
+};
@@ -12,6 +12,7 @@ import {
  AzureKeyVaultConnectionMethod,
  GitHubConnectionMethod,
  GitLabConnectionMethod,
+  HerokuConnectionMethod,
  TAppConnection,
  useCreateAppConnection,
  useUpdateAppConnection
@@ -28,7 +29,8 @@ const formDataStorageFieldMap: Partial<Record<AppConnection, string>> = {
  [AppConnection.AzureKeyVault]: "azureKeyVaultConnectionFormData",
  [AppConnection.AzureAppConfiguration]: "azureAppConfigurationConnectionFormData",
  [AppConnection.AzureClientSecrets]: "azureClientSecretsConnectionFormData",
-  [AppConnection.AzureDevOps]: "azureDevOpsConnectionFormData"
+  [AppConnection.AzureDevOps]: "azureDevOpsConnectionFormData",
+  [AppConnection.Heroku]: "herokuConnectionFormData"
 };

 export const OAuthCallbackPage = () => {
@@ -83,7 +85,7 @@ export const OAuthCallbackPage = () => {
    }
  };

-  const handleGitlab = useCallback(async () => {
+  const handleGitLab = useCallback(async () => {
    const formData = getFormData(AppConnection.GitLab);
    if (formData === null) return null;

@@ -375,7 +377,7 @@ export const OAuthCallbackPage = () => {
    };
  }, []);

-  const handleGithub = useCallback(async () => {
+  const handleGitHub = useCallback(async () => {
    const formData = getFormData(AppConnection.GitHub);
    if (formData === null) return null;

@@ -463,7 +465,7 @@ export const OAuthCallbackPage = () => {
    };
  }, []);

-  const handleGithubRadar = useCallback(async () => {
+  const handleGitHubRadar = useCallback(async () => {
    const formData = getFormData(AppConnection.GitHubRadar);
    if (formData === null) return null;

@@ -520,6 +522,61 @@ export const OAuthCallbackPage = () => {
    };
  }, []);

+  const handleHeroku = useCallback(async () => {
+    const formData = getFormData(AppConnection.Heroku);
+    if (formData === null) return null;
+
+    clearState(AppConnection.Heroku);
+
+    const { connectionId, name, description, returnUrl, projectId } = formData;
+
+    let connection: TAppConnection;
+
+    try {
+      if (connectionId) {
+        connection = await updateAppConnection.mutateAsync({
+          app: AppConnection.Heroku,
+          connectionId,
+          credentials: {
+            code: code as string
+          }
+        });
+      } else {
+        connection = await createAppConnection.mutateAsync({
+          app: AppConnection.Heroku,
+          name,
+          description,
+          method: HerokuConnectionMethod.OAuth,
+          projectId,
+          credentials: {
+            code: code as string
+          }
+        });
+      }
+    } catch (e: any) {
+      createNotification({
+        title: `Failed to ${connectionId ? "update" : "add"} Heroku Connection`,
+        text: e.message,
+        type: "error"
+      });
+      navigate({
+        to: returnUrl,
+        params: {
+          projectId
+        }
+      });
+      return null;
+    }
+
+    return {
+      connectionId,
+      returnUrl,
+      appConnectionName: formData.app,
+      projectId,
+      connection
+    };
+  }, []);
+
  // Ensure that the localstorage is ready for use, to avoid the form data being malformed
  useEffect(() => {
    if (!isReady) {
@@ -540,11 +597,11 @@ export const OAuthCallbackPage = () => {
      } | null = null;

      if (appConnection === AppConnection.GitHub) {
-        data = await handleGithub();
+        data = await handleGitHub();
      } else if (appConnection === AppConnection.GitHubRadar) {
-        data = await handleGithubRadar();
+        data = await handleGitHubRadar();
      } else if (appConnection === AppConnection.GitLab) {
-        data = await handleGitlab();
+        data = await handleGitLab();
      } else if (appConnection === AppConnection.AzureKeyVault) {
        data = await handleAzureKeyVault();
      } else if (appConnection === AppConnection.AzureAppConfiguration) {
@@ -553,6 +610,8 @@ export const OAuthCallbackPage = () => {
        data = await handleAzureClientSecrets();
      } else if (appConnection === AppConnection.AzureDevOps) {
        data = await handleAzureDevOps();
+      } else if (appConnection === AppConnection.Heroku) {
+        data = await handleHeroku();
      }

      if (data) {
@@ -6,7 +6,8 @@ import {
  TAzureKeyVaultConnection,
  TGitHubConnection,
  TGitHubRadarConnection,
-  TGitLabConnection
+  TGitLabConnection,
+  THerokuConnection
 } from "@app/hooks/api/appConnections";
 import { AppConnection } from "@app/hooks/api/appConnections/enums";

@@ -17,10 +18,10 @@ type BaseFormData = {
  projectId: string;
 };

-export type GithubFormData = BaseFormData &
+export type GitHubFormData = BaseFormData &
  Pick<TGitHubConnection, "name" | "method" | "description" | "gatewayId" | "credentials">;

-export type GithubRadarFormData = BaseFormData &
+export type GitHubRadarFormData = BaseFormData &
  Pick<TGitHubRadarConnection, "name" | "method" | "description">;

 export type GitLabFormData = BaseFormData &
@@ -51,9 +52,12 @@ export type AzureDevOpsFormData = BaseFormData &
  Pick<TAzureDevOpsConnection, "name" | "method" | "description"> &
  (Pick<OAuthCredentials, "tenantId" | "orgName"> | Pick<AccessTokenCredentials, "orgName">);

+export type HerokuFormData = BaseFormData &
+  Pick<THerokuConnection, "name" | "method" | "description">;
+
 export type FormDataMap = {
-  [AppConnection.GitHub]: GithubFormData & { app: AppConnection.GitHub };
-  [AppConnection.GitHubRadar]: GithubRadarFormData & { app: AppConnection.GitHubRadar };
+  [AppConnection.GitHub]: GitHubFormData & { app: AppConnection.GitHub };
+  [AppConnection.GitHubRadar]: GitHubRadarFormData & { app: AppConnection.GitHubRadar };
  [AppConnection.GitLab]: GitLabFormData & { app: AppConnection.GitLab };
  [AppConnection.AzureKeyVault]: AzureKeyVaultFormData & { app: AppConnection.AzureKeyVault };
  [AppConnection.AzureAppConfiguration]: AzureAppConfigurationFormData & {
@@ -65,4 +69,7 @@ export type FormDataMap = {
  [AppConnection.AzureDevOps]: AzureDevOpsFormData & {
    app: AppConnection.AzureDevOps;
  };
+  [AppConnection.Heroku]: HerokuFormData & {
+    app: AppConnection.Heroku;
+  };
 };