feat(integrations/vercel): custom environments support

frontend/src/hooks/api/integrationAuth/index.tsx

@@ -16,5 +16,6 @@ export {
   useGetIntegrationAuthTeamCityBuildConfigs,
   useGetIntegrationAuthTeams,
   useGetIntegrationAuthVercelBranches,
+  useGetIntegrationAuthVercelCustomEnvironments,
   useSaveIntegrationAccessToken
 } from "./queries";

frontend/src/hooks/api/integrationAuth/queries.tsx

@@ -21,7 +21,8 @@ import {
   Team,
   TeamCityBuildConfig,
   TGetIntegrationAuthOctopusDeployScopeValuesDTO,
-  TOctopusDeployVariableSetScopeValues
+  TOctopusDeployVariableSetScopeValues,
+  VercelEnvironment
 } from "./types";
 
 const integrationAuthKeys = {
@@ -132,7 +133,9 @@ const integrationAuthKeys = {
   }: TGetIntegrationAuthOctopusDeployScopeValuesDTO) =>
     [{ integrationAuthId }, "getIntegrationAuthOctopusDeployScopeValues", params] as const,
   getIntegrationAuthCircleCIOrganizations: (integrationAuthId: string) =>
-    [{ integrationAuthId }, "getIntegrationAuthCircleCIOrganizations"] as const
+    [{ integrationAuthId }, "getIntegrationAuthCircleCIOrganizations"] as const,
+  getIntegrationAuthVercelCustomEnv: (integrationAuthId: string, teamId: string) =>
+    [{ integrationAuthId, teamId }, "integrationAuthVercelCustomEnv"] as const
 };
 
 const fetchIntegrationAuthById = async (integrationAuthId: string) => {
@@ -362,6 +365,29 @@ const fetchIntegrationAuthQoveryScopes = async ({
   return undefined;
 };
 
+const fetchIntegrationAuthVercelCustomEnvironments = async ({
+  integrationAuthId,
+  teamId
+}: {
+  integrationAuthId: string;
+  teamId: string;
+}) => {
+  const {
+    data: { environments }
+  } = await apiRequest.get<{
+    environments: {
+      appId: string;
+      customEnvironments: VercelEnvironment[];
+    }[];
+  }>(`/api/v1/integration-auth/${integrationAuthId}/vercel/custom-environments`, {
+    params: {
+      teamId
+    }
+  });
+
+  return environments;
+};
+
 const fetchIntegrationAuthHerokuPipelines = async ({
   integrationAuthId
 }: {
@@ -730,6 +756,24 @@ export const useGetIntegrationAuthQoveryScopes = ({
   });
 };
 
+export const useGetIntegrationAuthVercelCustomEnvironments = ({
+  integrationAuthId,
+  teamId
+}: {
+  integrationAuthId: string;
+  teamId: string;
+}) => {
+  return useQuery({
+    queryKey: integrationAuthKeys.getIntegrationAuthVercelCustomEnv(integrationAuthId, teamId),
+    queryFn: () =>
+      fetchIntegrationAuthVercelCustomEnvironments({
+        integrationAuthId,
+        teamId
+      }),
+    enabled: Boolean(teamId && integrationAuthId)
+  });
+};
+
 export const useGetIntegrationAuthHerokuPipelines = ({
   integrationAuthId
 }: {

frontend/src/hooks/api/integrationAuth/types.ts

@@ -43,6 +43,11 @@ export type Environment = {
   environmentId: string;
 };
 
+export type VercelEnvironment = {
+  id: string;
+  slug: string;
+};
+
 export type ChecklyGroup = {
   name: string;
   groupId: number;

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,31 @@ export const VercelConfigurePage = () => {
     }
   };
 
+  const selectedVercelEnvironments = useMemo(() => {
+    // Structure looks like:
+    // {appId: string, environments: [{id: string, name: string}]}[]
+
+    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]);
+
+  console.log("selectedVercelEnvironments", selectedVercelEnvironments);
+
   return integrationAuth &&
     selectedSourceEnvironment &&
     integrationAuthApps &&
@@ -210,7 +241,14 @@ export const VercelConfigurePage = () => {
         >
           <Select
             value={targetAppId}
-            onValueChange={(val) => setTargetAppId(val)}
+            onValueChange={(val) => {
+              setTargetAppId(val);
+
+              // Reset the target environment if it's not a default environment
+              if (vercelEnvironments.every((env) => env.slug !== targetEnvironment)) {
+                setTargetEnvironment(vercelEnvironments[0].slug);
+              }
+            }}
             className="w-full border border-mineshaft-500"
             isDisabled={integrationAuthApps.length === 0}
           >
@@ -236,7 +274,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}`}