Merge remote-tracking branch 'origin/main' into feat/camunda-app-connection-and-secret-sync

2026-10-15 12:38:36 +00:00 · 2025-04-11 21:53:56 +08:00
parent 53ca8d7161 1ce155e2fd
commit 46b08dccd1
152 changed files with 4896 additions and 670 deletions
@@ -33,14 +33,12 @@ import { IdentityPanel } from "@app/pages/admin/OverviewPage/components/Identity
 import { AuthPanel } from "./components/AuthPanel";
 import { EncryptionPanel } from "./components/EncryptionPanel";
 import { IntegrationPanel } from "./components/IntegrationPanel";
-import { RateLimitPanel } from "./components/RateLimitPanel";
 import { UserPanel } from "./components/UserPanel";

 enum TabSections {
  Settings = "settings",
  Encryption = "encryption",
  Auth = "auth",
-  RateLimit = "rate-limit",
  Integrations = "integrations",
  Users = "users",
  Identities = "identities",
@@ -163,7 +161,6 @@ export const OverviewPage = () => {
                    <Tab value={TabSections.Settings}>General</Tab>
                    <Tab value={TabSections.Encryption}>Encryption</Tab>
                    <Tab value={TabSections.Auth}>Authentication</Tab>
-                    <Tab value={TabSections.RateLimit}>Rate Limit</Tab>
                    <Tab value={TabSections.Integrations}>Integrations</Tab>
                    <Tab value={TabSections.Users}>User Identities</Tab>
                    <Tab value={TabSections.Identities}>Machine Identities</Tab>
@@ -262,7 +259,6 @@ export const OverviewPage = () => {
                              <SelectClear
                                selectValue={defaultAuthOrgId}
                                onClear={() => {
-                                  console.log("clearing");
                                  onChange("");
                                }}
                              >
@@ -403,9 +399,6 @@ export const OverviewPage = () => {
                <TabPanel value={TabSections.Auth}>
                  <AuthPanel />
                </TabPanel>
-                <TabPanel value={TabSections.RateLimit}>
-                  <RateLimitPanel />
-                </TabPanel>
                <TabPanel value={TabSections.Integrations}>
                  <IntegrationPanel />
                </TabPanel>
@@ -1,240 +0,0 @@
-import { Controller, useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { z } from "zod";
-
-import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
-import { createNotification } from "@app/components/notifications";
-import { Button, ContentLoader, FormControl, Input } from "@app/components/v2";
-import { useSubscription } from "@app/context";
-import { usePopUp } from "@app/hooks";
-import { useGetRateLimit, useUpdateRateLimit } from "@app/hooks/api";
-
-const formSchema = z.object({
-  readRateLimit: z.number(),
-  writeRateLimit: z.number(),
-  secretsRateLimit: z.number(),
-  authRateLimit: z.number(),
-  inviteUserRateLimit: z.number(),
-  mfaRateLimit: z.number(),
-  publicEndpointLimit: z.number()
-});
-
-type TRateLimitForm = z.infer<typeof formSchema>;
-
-export const RateLimitPanel = () => {
-  const { data: rateLimit, isPending } = useGetRateLimit();
-  const { subscription } = useSubscription();
-  const { mutateAsync: updateRateLimit } = useUpdateRateLimit();
-  const { handlePopUpToggle, handlePopUpOpen, popUp } = usePopUp(["upgradePlan"] as const);
-
-  const {
-    control,
-    handleSubmit,
-    formState: { isSubmitting, isDirty }
-  } = useForm<TRateLimitForm>({
-    resolver: zodResolver(formSchema),
-    values: {
-      // eslint-disable-next-line
-      readRateLimit: rateLimit?.readRateLimit ?? 600,
-      writeRateLimit: rateLimit?.writeRateLimit ?? 200,
-      secretsRateLimit: rateLimit?.secretsRateLimit ?? 60,
-      authRateLimit: rateLimit?.authRateLimit ?? 60,
-      inviteUserRateLimit: rateLimit?.inviteUserRateLimit ?? 30,
-      mfaRateLimit: rateLimit?.mfaRateLimit ?? 20,
-      publicEndpointLimit: rateLimit?.publicEndpointLimit ?? 30
-    }
-  });
-
-  const onRateLimitFormSubmit = async (formData: TRateLimitForm) => {
-    try {
-      if (subscription && !subscription.customRateLimits) {
-        handlePopUpOpen("upgradePlan");
-        return;
-      }
-
-      const {
-        readRateLimit,
-        writeRateLimit,
-        secretsRateLimit,
-        authRateLimit,
-        inviteUserRateLimit,
-        mfaRateLimit,
-        publicEndpointLimit
-      } = formData;
-
-      await updateRateLimit({
-        readRateLimit,
-        writeRateLimit,
-        secretsRateLimit,
-        authRateLimit,
-        inviteUserRateLimit,
-        mfaRateLimit,
-        publicEndpointLimit
-      });
-      createNotification({
-        text: "Rate limits have been successfully updated. Please allow at least 10 minutes for the changes to take effect.",
-        type: "success"
-      });
-    } catch (e) {
-      console.error(e);
-      createNotification({
-        type: "error",
-        text: "Failed to update rate limiting setting."
-      });
-    }
-  };
-
-  return isPending ? (
-    <ContentLoader />
-  ) : (
-    <form
-      className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
-      onSubmit={handleSubmit(onRateLimitFormSubmit)}
-    >
-      <div className="mb-8 flex flex-col justify-start">
-        <div className="mb-4 text-xl font-semibold text-mineshaft-100">Configure rate limits</div>
-        <Controller
-          control={control}
-          name="readRateLimit"
-          defaultValue={300}
-          render={({ field, fieldState: { error } }) => (
-            <FormControl
-              label="Global read requests per minute"
-              className="w-72"
-              isError={Boolean(error)}
-              errorText={error?.message}
-            >
-              <Input
-                {...field}
-                value={field.value}
-                onChange={(e) => field.onChange(Number(e.target.value))}
-              />
-            </FormControl>
-          )}
-        />
-        <Controller
-          control={control}
-          defaultValue={300}
-          name="writeRateLimit"
-          render={({ field, fieldState: { error } }) => (
-            <FormControl
-              label="Global write requests per minute"
-              className="w-72"
-              isError={Boolean(error)}
-              errorText={error?.message}
-            >
-              <Input
-                {...field}
-                value={field.value || ""}
-                onChange={(e) => field.onChange(Number(e.target.value))}
-              />
-            </FormControl>
-          )}
-        />
-        <Controller
-          control={control}
-          defaultValue={300}
-          name="secretsRateLimit"
-          render={({ field, fieldState: { error } }) => (
-            <FormControl
-              label="Secret requests per minute"
-              className="w-72"
-              isError={Boolean(error)}
-              errorText={error?.message}
-            >
-              <Input
-                {...field}
-                value={field.value || ""}
-                onChange={(e) => field.onChange(Number(e.target.value))}
-              />
-            </FormControl>
-          )}
-        />
-        <Controller
-          control={control}
-          defaultValue={300}
-          name="authRateLimit"
-          render={({ field, fieldState: { error } }) => (
-            <FormControl
-              label="Auth requests per minute"
-              className="w-72"
-              isError={Boolean(error)}
-              errorText={error?.message}
-            >
-              <Input
-                {...field}
-                value={field.value || ""}
-                onChange={(e) => field.onChange(Number(e.target.value))}
-              />
-            </FormControl>
-          )}
-        />
-        <Controller
-          control={control}
-          defaultValue={300}
-          name="inviteUserRateLimit"
-          render={({ field, fieldState: { error } }) => (
-            <FormControl
-              label="User invitation requests per minute"
-              className="w-72"
-              isError={Boolean(error)}
-              errorText={error?.message}
-            >
-              <Input
-                {...field}
-                value={field.value || ""}
-                onChange={(e) => field.onChange(Number(e.target.value))}
-              />
-            </FormControl>
-          )}
-        />
-        <Controller
-          control={control}
-          defaultValue={300}
-          name="mfaRateLimit"
-          render={({ field, fieldState: { error } }) => (
-            <FormControl
-              label="Multi factor auth requests per minute"
-              className="w-72"
-              isError={Boolean(error)}
-              errorText={error?.message}
-            >
-              <Input
-                {...field}
-                value={field.value || ""}
-                onChange={(e) => field.onChange(Number(e.target.value))}
-              />
-            </FormControl>
-          )}
-        />
-        <Controller
-          control={control}
-          defaultValue={300}
-          name="publicEndpointLimit"
-          render={({ field, fieldState: { error } }) => (
-            <FormControl
-              label="Secret sharing requests per minute"
-              className="w-72"
-              isError={Boolean(error)}
-              errorText={error?.message}
-            >
-              <Input
-                {...field}
-                value={field.value || ""}
-                onChange={(e) => field.onChange(Number(e.target.value))}
-              />
-            </FormControl>
-          )}
-        />
-      </div>
-      <Button type="submit" isLoading={isSubmitting} isDisabled={isSubmitting || !isDirty}>
-        Save
-      </Button>
-      <UpgradePlanModal
-        isOpen={popUp.upgradePlan.isOpen}
-        onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
-        text="You can configure custom rate limits if you switch to Infisical's Enterprise plan."
-      />
-    </form>
-  );
-};
@@ -1,7 +1,10 @@
+import { useState } from "react";
+import { Controller, useForm } from "react-hook-form";
 import {
  faArrowDown,
  faArrowUp,
  faEllipsis,
+  faFilter,
  faMagnifyingGlass,
  faServer
 } from "@fortawesome/free-solid-svg-icons";
@@ -12,14 +15,19 @@ import { twMerge } from "tailwind-merge";
 import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import {
+  Button,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
  EmptyState,
+  FormControl,
  IconButton,
  Input,
  Pagination,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
  Select,
  SelectItem,
  Spinner,
@@ -30,11 +38,12 @@ import {
  Td,
  Th,
  THead,
+  Tooltip,
  Tr
 } from "@app/components/v2";
 import { OrgPermissionIdentityActions, OrgPermissionSubjects, useOrganization } from "@app/context";
 import { usePagination, useResetPageHelper } from "@app/hooks";
-import { useGetIdentityMembershipOrgs, useGetOrgRoles, useUpdateIdentity } from "@app/hooks/api";
+import { useGetOrgRoles, useSearchIdentities, useUpdateIdentity } from "@app/hooks/api";
 import { OrderByDirection } from "@app/hooks/api/generic/types";
 import { OrgIdentityOrderBy } from "@app/hooks/api/organization/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
@@ -68,22 +77,22 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
    page,
    setPerPage
  } = usePagination<OrgIdentityOrderBy>(OrgIdentityOrderBy.Name);
+  const [filteredRoles, setFilteredRoles] = useState<string[]>([]);

  const organizationId = currentOrg?.id || "";

  const { mutateAsync: updateMutateAsync } = useUpdateIdentity();

-  const { data, isPending, isFetching } = useGetIdentityMembershipOrgs(
-    {
-      organizationId,
-      offset,
-      limit,
-      orderDirection,
-      orderBy,
-      search: debouncedSearch
-    },
-    { placeholderData: (prevData) => prevData }
-  );
+  const { data, isPending, isFetching } = useSearchIdentities({
+    offset,
+    limit,
+    orderDirection,
+    orderBy,
+    search: {
+      name: debouncedSearch ? { $contains: debouncedSearch } : undefined,
+      role: filteredRoles?.length ? { $in: filteredRoles } : undefined
+    }
+  });

  const { totalCount = 0 } = data ?? {};
  useResetPageHelper({
@@ -91,6 +100,7 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
    offset,
    setPage
  });
+  const filterForm = useForm<{ roles: string }>();

  const { data: roles } = useGetOrgRoles(organizationId);

@@ -132,13 +142,78 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {

  return (
    <div>
-      <Input
-        containerClassName="mb-4"
-        value={search}
-        onChange={(e) => setSearch(e.target.value)}
-        leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
-        placeholder="Search identities by name..."
-      />
+      <div className="mb-4 flex items-center space-x-2">
+        <Input
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+          placeholder="Search identities by name..."
+        />
+        <div>
+          <Popover>
+            <PopoverTrigger>
+              <IconButton
+                ariaLabel="filter"
+                variant="outline_bg"
+                className={filteredRoles?.length ? "border-primary" : ""}
+              >
+                <Tooltip content="Advance Filter">
+                  <FontAwesomeIcon icon={faFilter} />
+                </Tooltip>
+              </IconButton>
+            </PopoverTrigger>
+            <PopoverContent className="w-auto border border-mineshaft-600 bg-mineshaft-800 p-2 drop-shadow-2xl">
+              <div className="mb-4 border-b border-b-gray-700 pb-2 text-sm text-mineshaft-300">
+                Advance Filter
+              </div>
+              <form
+                onSubmit={filterForm.handleSubmit((el) => {
+                  setFilteredRoles(el.roles?.split(",")?.filter(Boolean) || []);
+                })}
+              >
+                <Controller
+                  control={filterForm.control}
+                  name="roles"
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="Roles"
+                      helperText="Eg: admin,viewer"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <Input {...field} />
+                    </FormControl>
+                  )}
+                />
+                <div className="flex items-center space-x-2">
+                  <Button
+                    type="submit"
+                    size="xs"
+                    colorSchema="primary"
+                    variant="outline_bg"
+                    className="mt-4"
+                  >
+                    Apply Filter
+                  </Button>
+                  {Boolean(filteredRoles.length) && (
+                    <Button
+                      size="xs"
+                      variant="link"
+                      className="ml-4 mt-4"
+                      onClick={() => {
+                        filterForm.reset({ roles: "" });
+                        setFilteredRoles([]);
+                      }}
+                    >
+                      Clear
+                    </Button>
+                  )}
+                </div>
+              </form>
+            </PopoverContent>
+          </Popover>
+        </div>
+      </div>
      <TableContainer>
        <Table>
          <THead>
@@ -190,7 +265,7 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
          <TBody>
            {isPending && <TableSkeleton columns={3} innerKey="org-identities" />}
            {!isPending &&
-              data?.identityMemberships.map(({ identity: { id, name }, role, customRole }) => {
+              data?.identities?.map(({ identity: { id, name }, role, customRole }) => {
                return (
                  <Tr
                    className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
@@ -307,10 +382,10 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
            onChangePerPage={(newPerPage) => setPerPage(newPerPage)}
          />
        )}
-        {!isPending && data && data?.identityMemberships.length === 0 && (
+        {!isPending && data && data?.identities.length === 0 && (
          <EmptyState
            title={
-              debouncedSearch.trim().length > 0
+              debouncedSearch.trim().length > 0 || filteredRoles?.length > 0
                ? "No identities match search filter"
                : "No identities have been created in this organization"
            }
@@ -258,7 +258,7 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Pro
              </Th>
              <Th className="w-1/3">
                <div className="flex items-center">
-                  Email
+                  Username
                  <IconButton
                    variant="plain"
                    className={`ml-2 ${orderBy === OrgMembersOrderBy.Email ? "" : "opacity-30"}`}
@@ -478,7 +478,7 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Pro
                                      onClick={(e) => {
                                        e.stopPropagation();

-                                        if (currentOrg?.scimEnabled) {
+                                        if (currentOrg?.scimEnabled && isActive) {
                                          createNotification({
                                            text: "You cannot manage users from Infisical when org-level auth is enforced for your organization",
                                            type: "error"
@@ -19,6 +19,7 @@ import { GitHubConnectionForm } from "./GitHubConnectionForm";
 import { HumanitecConnectionForm } from "./HumanitecConnectionForm";
 import { MsSqlConnectionForm } from "./MsSqlConnectionForm";
 import { PostgresConnectionForm } from "./PostgresConnectionForm";
+import { VercelConnectionForm } from "./VercelConnectionForm";

 type FormProps = {
  onComplete: (appConnection: TAppConnection) => void;
@@ -71,6 +72,8 @@ const CreateForm = ({ app, onComplete }: CreateFormProps) => {
      return <DatabricksConnectionForm onSubmit={onSubmit} />;
    case AppConnection.Humanitec:
      return <HumanitecConnectionForm onSubmit={onSubmit} />;
+    case AppConnection.Vercel:
+      return <VercelConnectionForm onSubmit={onSubmit} />;
    case AppConnection.Postgres:
      return <PostgresConnectionForm onSubmit={onSubmit} />;
    case AppConnection.MsSql:
@@ -127,6 +130,8 @@ const UpdateForm = ({ appConnection, onComplete }: UpdateFormProps) => {
      return <DatabricksConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
    case AppConnection.Humanitec:
      return <HumanitecConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
+    case AppConnection.Vercel:
+      return <VercelConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
    case AppConnection.Postgres:
      return <PostgresConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
    case AppConnection.MsSql:
@@ -0,0 +1,135 @@
+import { Controller, FormProvider, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import {
+  Button,
+  FormControl,
+  ModalClose,
+  SecretInput,
+  Select,
+  SelectItem
+} from "@app/components/v2";
+import { APP_CONNECTION_MAP, getAppConnectionMethodDetails } from "@app/helpers/appConnections";
+import { AppConnection } from "@app/hooks/api/appConnections/enums";
+import {
+  TVercelConnection,
+  VercelConnectionMethod
+} from "@app/hooks/api/appConnections/types/vercel-connection";
+
+import {
+  genericAppConnectionFieldsSchema,
+  GenericAppConnectionsFields
+} from "./GenericAppConnectionFields";
+
+type Props = {
+  appConnection?: TVercelConnection;
+  onSubmit: (formData: FormData) => void;
+};
+
+const rootSchema = genericAppConnectionFieldsSchema.extend({
+  app: z.literal(AppConnection.Vercel)
+});
+
+const formSchema = z.discriminatedUnion("method", [
+  rootSchema.extend({
+    method: z.literal(VercelConnectionMethod.ApiToken),
+    credentials: z.object({
+      apiToken: z.string().trim().min(1, "Service API Token required")
+    })
+  })
+]);
+
+type FormData = z.infer<typeof formSchema>;
+
+export const VercelConnectionForm = ({ appConnection, onSubmit }: Props) => {
+  const isUpdate = Boolean(appConnection);
+
+  const form = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues: appConnection ?? {
+      app: AppConnection.Vercel,
+      method: VercelConnectionMethod.ApiToken
+    }
+  });
+
+  const {
+    handleSubmit,
+    control,
+    formState: { isSubmitting, isDirty }
+  } = form;
+
+  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.Vercel].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(VercelConnectionMethod).map((method) => {
+                  return (
+                    <SelectItem value={method} key={method}>
+                      {getAppConnectionMethodDetails(method).name}{" "}
+                    </SelectItem>
+                  );
+                })}
+              </Select>
+            </FormControl>
+          )}
+        />
+        <Controller
+          name="credentials.apiToken"
+          control={control}
+          shouldUnregister
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl
+              errorText={error?.message}
+              isError={Boolean(error?.message)}
+              label="API Token"
+            >
+              <SecretInput
+                containerClassName="text-gray-400 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 className="mt-8 flex items-center">
+          <Button
+            className="mr-4"
+            size="sm"
+            type="submit"
+            colorSchema="secondary"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting || !isDirty}
+          >
+            {isUpdate ? "Update Credentials" : "Connect to Vercel"}
+          </Button>
+          <ModalClose asChild>
+            <Button colorSchema="secondary" variant="plain">
+              Cancel
+            </Button>
+          </ModalClose>
+        </div>
+      </form>
+    </FormProvider>
+  );
+};
@@ -115,8 +115,29 @@ export const AddMemberModal = ({ popUp, handlePopUpToggle }: Props) => {
        });
      } else {
        const inviteeEmails = selectedMembers
-          .map((member) => member?.user.username as string)
-          .filter(Boolean);
+          .map((member) => {
+            if (!member) return null;
+
+            if (member.user.email) {
+              return member.user.email;
+            }
+
+            if (member.user.username) {
+              return member.user.username;
+            }
+
+            return null;
+          })
+          .filter(Boolean) as string[];
+
+        if (inviteeEmails.length !== selectedMembers.length) {
+          createNotification({
+            text: "Failed to add users to project. One or more users were invalid.",
+            type: "error"
+          });
+          return;
+        }
+
        if (inviteeEmails.length || newInvitees.length) {
          await addMembersToProject({
            inviteeEmails: [...inviteeEmails, ...newInvitees],
@@ -86,7 +86,20 @@ const Page = () => {
            title={identityMembershipDetails?.identity?.name}
            description={`Identity joined on ${identityMembershipDetails?.createdAt && formatRelative(new Date(identityMembershipDetails?.createdAt || ""), new Date())}`}
          >
-            <div>
+            <div className="flex items-center gap-2">
+              <Button
+                variant="outline_bg"
+                size="xs"
+                onClick={() => {
+                  navigator.clipboard.writeText(identityMembershipDetails.id);
+                  createNotification({
+                    text: "Membership ID copied to clipboard",
+                    type: "success"
+                  });
+                }}
+              >
+                Copy Membership ID
+              </Button>
              <ProjectPermissionCan
                I={ProjectPermissionActions.Delete}
                a={subject(ProjectPermissionSub.Identity, {
@@ -9,6 +9,7 @@ import { DatabricksSyncDestinationCol } from "./DatabricksSyncDestinationCol";
 import { GcpSyncDestinationCol } from "./GcpSyncDestinationCol";
 import { GitHubSyncDestinationCol } from "./GitHubSyncDestinationCol";
 import { HumanitecSyncDestinationCol } from "./HumanitecSyncDestinationCol";
+import { VercelSyncDestinationCol } from "./VercelSyncDestinationCol";

 type Props = {
  secretSync: TSecretSync;
@@ -34,6 +35,8 @@ export const SecretSyncDestinationCol = ({ secretSync }: Props) => {
      return <HumanitecSyncDestinationCol secretSync={secretSync} />;
    case SecretSync.Camunda:
      return <CamundaDestinationSyncCol secretSync={secretSync} />;
+    case SecretSync.Vercel:
+      return <VercelSyncDestinationCol secretSync={secretSync} />;
    default:
      throw new Error(
        `Unhandled Secret Sync Destination Col: ${(secretSync as TSecretSync).destination}`
@@ -0,0 +1,14 @@
+import { TVercelSync } from "@app/hooks/api/secretSyncs/types/vercel-sync";
+
+import { getSecretSyncDestinationColValues } from "../helpers";
+import { SecretSyncTableCell } from "../SecretSyncTableCell";
+
+type Props = {
+  secretSync: TVercelSync;
+};
+
+export const VercelSyncDestinationCol = ({ secretSync }: Props) => {
+  const { primaryText, secondaryText } = getSecretSyncDestinationColValues(secretSync);
+
+  return <SecretSyncTableCell primaryText={primaryText} secondaryText={secondaryText} />;
+};
@@ -77,6 +77,10 @@ export const getSecretSyncDestinationColValues = (secretSync: TSecretSync) => {
      primaryText = destinationConfig.clusterUUID;
      secondaryText = "Cluster";
      break;
+    case SecretSync.Vercel:
+      primaryText = destinationConfig.appName || destinationConfig.app;
+      secondaryText = destinationConfig.env;
+      break;
    default:
      throw new Error(`Unhandled Destination Col Values ${destination}`);
  }
@@ -19,6 +19,7 @@ import { AzureKeyVaultSyncDestinationSection } from "./AzureKeyVaultSyncDestinat
 import { CamundaSyncDestinationSection } from "./CamundaSyncDestinationSection";
 import { GcpSyncDestinationSection } from "./GcpSyncDestinationSection";
 import { HumanitecSyncDestinationSection } from "./HumanitecSyncDestinationSection";
+import { VercelSyncDestinationSection } from "./VercelSyncDestinationSection";

 type Props = {
  secretSync: TSecretSync;
@@ -61,6 +62,9 @@ export const SecretSyncDestinationSection = ({ secretSync, onEditDestination }:
    case SecretSync.Camunda:
      DestinationComponents = <CamundaSyncDestinationSection secretSync={secretSync} />;
      break;
+    case SecretSync.Vercel:
+      DestinationComponents = <VercelSyncDestinationSection secretSync={secretSync} />;
+      break;
    default:
      throw new Error(`Unhandled Destination Section components: ${destination}`);
  }
@@ -0,0 +1,36 @@
+import { ReactNode } from "react";
+
+import { GenericFieldLabel } from "@app/components/secret-syncs";
+import { TVercelSync, VercelEnvironmentType } from "@app/hooks/api/secretSyncs/types/vercel-sync";
+
+type Props = {
+  secretSync: TVercelSync;
+};
+
+export const VercelSyncDestinationSection = ({ secretSync }: Props) => {
+  const { destinationConfig } = secretSync;
+
+  let Components: ReactNode;
+  if (destinationConfig.env === VercelEnvironmentType.Preview && destinationConfig.branch) {
+    Components = (
+      <>
+        <GenericFieldLabel label="Vercel App">
+          {destinationConfig.appName || destinationConfig.app}
+        </GenericFieldLabel>
+        <GenericFieldLabel label="Environment">{destinationConfig.env}</GenericFieldLabel>
+        <GenericFieldLabel label="Preview Branch">{destinationConfig.branch}</GenericFieldLabel>
+      </>
+    );
+  } else {
+    Components = (
+      <>
+        <GenericFieldLabel label="Vercel App">
+          {destinationConfig.appName || destinationConfig.app}
+        </GenericFieldLabel>
+        <GenericFieldLabel label="Environment">{destinationConfig.env}</GenericFieldLabel>
+      </>
+    );
+  }
+
+  return Components;
+};
@@ -49,6 +49,7 @@ export const SecretSyncOptionsSection = ({ secretSync, onEditOptions }: Props) =
    case SecretSync.Databricks:
    case SecretSync.Humanitec:
    case SecretSync.Camunda:
+    case SecretSync.Vercel:
      AdditionalSyncOptionsComponent = null;
      break;
    default: