Merge pull request #3049 from Infisical/daniel/vercel-custom-envs

feat(integrations/vercel): custom environments support

frontend/src/pages/secret-manager/integrations/VercelConfigurePage/VercelConfigurePage.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { Helmet } from "react-helmet";
 import {
   faArrowUpRightFromSquare,
@@ -25,7 +25,8 @@ import { useCreateIntegration } from "@app/hooks/api";
 import {
   useGetIntegrationAuthApps,
   useGetIntegrationAuthById,
-  useGetIntegrationAuthVercelBranches
+  useGetIntegrationAuthVercelBranches,
+  useGetIntegrationAuthVercelCustomEnvironments
 } from "@app/hooks/api/integrationAuth";
 import { IntegrationSyncBehavior } from "@app/hooks/api/integrations/types";
 
@@ -75,6 +76,11 @@ export const VercelConfigurePage = () => {
       teamId: integrationAuth?.teamId as string
     });
 
+  const { data: customEnvironments } = useGetIntegrationAuthVercelCustomEnvironments({
+    teamId: integrationAuth?.teamId as string,
+    integrationAuthId: integrationAuthId as string
+  });
+
   const { data: branches } = useGetIntegrationAuthVercelBranches({
     integrationAuthId: integrationAuthId as string,
     appId: targetAppId
@@ -135,6 +141,26 @@ export const VercelConfigurePage = () => {
     }
   };
 
+  const selectedVercelEnvironments = useMemo(() => {
+    let selectedEnvironments = vercelEnvironments;
+
+    const environments = customEnvironments?.find(
+      (e) => e.appId === targetAppId
+    )?.customEnvironments;
+
+    if (environments && environments.length > 0) {
+      selectedEnvironments = [
+        ...selectedEnvironments,
+        ...environments.map((env) => ({
+          name: env.slug,
+          slug: env.id
+        }))
+      ];
+    }
+
+    return selectedEnvironments;
+  }, [targetAppId, customEnvironments]);
+
   return integrationAuth &&
     selectedSourceEnvironment &&
     integrationAuthApps &&
@@ -210,7 +236,13 @@ export const VercelConfigurePage = () => {
         >
           <Select
             value={targetAppId}
-            onValueChange={(val) => setTargetAppId(val)}
+            onValueChange={(val) => {
+              if (vercelEnvironments.every((env) => env.slug !== targetEnvironment)) {
+                setTargetEnvironment(vercelEnvironments[0].slug);
+              }
+
+              setTargetAppId(val);
+            }}
             className="w-full border border-mineshaft-500"
             isDisabled={integrationAuthApps.length === 0}
           >
@@ -236,7 +268,7 @@ export const VercelConfigurePage = () => {
             onValueChange={(val) => setTargetEnvironment(val)}
             className="w-full border border-mineshaft-500"
           >
-            {vercelEnvironments.map((vercelEnvironment) => (
+            {selectedVercelEnvironments.map((vercelEnvironment) => (
               <SelectItem
                 value={vercelEnvironment.slug}
                 key={`target-environment-${vercelEnvironment.slug}`}