feat(vercel): enhance staging environment handling and add preview support

Refactor the Vercel integration to change the structure of the
`vercelStagingEnvironment` to an object containing `environmentId` and
`displayName`. Update related logic to utilize the new structure,
ensuring that the environment ID is correctly referenced in various
parts of the application.Additionally, introduce support for a preview
environment by adding `hasPreviewEnvironment` and `customEnvironments`
to the Vercel settings presenter. Update the UI components and routes to
accommodate these changes, allowing for better management of Vercel
environments in the application.

Author: 0ski

apps/webapp/app/models/vercelIntegration.server.ts

@@ -904,7 +904,7 @@ export class VercelIntegrationRepository {
     projectId: string;
     vercelProjectId: string;
     teamId: string | null;
-    vercelStagingEnvironment?: string | null;
+    vercelStagingEnvironment?: { environmentId: string; displayName: string } | null;
     orgIntegration: OrganizationIntegration & { tokenReference: SecretReference };
   }): Promise<{ success: boolean; errors: string[] }> {
     const errors: string[] = [];
@@ -952,7 +952,7 @@ export class VercelIntegrationRepository {
               });
               continue;
             }
-            vercelTarget = [params.vercelStagingEnvironment];
+            vercelTarget = [params.vercelStagingEnvironment.environmentId];
             break;
           case "PREVIEW":
             vercelTarget = ["preview"];
@@ -1073,7 +1073,7 @@ export class VercelIntegrationRepository {
             });
             return { success: true };
           }
-          vercelTarget = [vercelStagingEnvironment];
+          vercelTarget = [vercelStagingEnvironment.environmentId];
           break;
         case "PREVIEW":
           vercelTarget = ["preview"];
@@ -1120,7 +1120,7 @@ export class VercelIntegrationRepository {
     projectId: string;
     vercelProjectId: string;
     teamId: string | null;
-    vercelStagingEnvironment?: string | null;
+    vercelStagingEnvironment?: { environmentId: string; displayName: string } | null;
     syncEnvVarsMapping: SyncEnvVarsMapping;
     orgIntegration: OrganizationIntegration & { tokenReference: SecretReference };
   }): Promise<{ success: boolean; errors: string[]; syncedCount: number }> {
@@ -1172,7 +1172,7 @@ export class VercelIntegrationRepository {
             if (params.vercelStagingEnvironment) {
               envMapping.push({
                 triggerEnvType: "STAGING",
-                vercelTarget: params.vercelStagingEnvironment,
+                vercelTarget: params.vercelStagingEnvironment.environmentId,
                 runtimeEnvironmentId: env.id,
               });
             }

apps/webapp/app/presenters/v3/VercelSettingsPresenter.server.ts

@@ -33,6 +33,8 @@ export type VercelSettingsResult = {
   };
   isGitHubConnected: boolean;
   hasStagingEnvironment: boolean;
+  hasPreviewEnvironment: boolean;
+  customEnvironments: VercelCustomEnvironment[];
 };
 
 export type VercelAvailableProject = {
@@ -81,6 +83,8 @@ export class VercelSettingsPresenter extends BasePresenter {
           connectedProject: undefined,
           isGitHubConnected: false,
           hasStagingEnvironment: false,
+          hasPreviewEnvironment: false,
+          customEnvironments: [],
         } as VercelSettingsResult);
       }
 
@@ -107,6 +111,8 @@ export class VercelSettingsPresenter extends BasePresenter {
             connectedProject: undefined,
             isGitHubConnected: false,
             hasStagingEnvironment: false,
+            hasPreviewEnvironment: false,
+            customEnvironments: [],
           } as VercelSettingsResult);
         }
       }
@@ -159,6 +165,24 @@ export class VercelSettingsPresenter extends BasePresenter {
           })
         ).map((env) => env !== null);
 
+      // Check if preview environment exists
+      const checkPreviewEnvironment = () =>
+        fromPromise(
+          (this._replica as PrismaClient).runtimeEnvironment.findFirst({
+            select: {
+              id: true,
+            },
+            where: {
+              projectId,
+              type: "PREVIEW",
+            },
+          }),
+          (error) => ({
+            type: "other" as const,
+            cause: error,
+          })
+        ).map((env) => env !== null);
+
       // Get Vercel project integration
       const getVercelProjectIntegration = () =>
         fromPromise(
@@ -207,15 +231,39 @@ export class VercelSettingsPresenter extends BasePresenter {
           checkOrgIntegration(),
           checkGitHubConnection(),
           checkStagingEnvironment(),
+          checkPreviewEnvironment(),
           getVercelProjectIntegration(),
-        ]).map(([hasOrgIntegration, isGitHubConnected, hasStagingEnvironment, connectedProject]) => ({
-          enabled: true,
-          hasOrgIntegration,
-          authInvalid: false,
-          connectedProject,
-          isGitHubConnected,
-          hasStagingEnvironment,
-        })).mapErr((error) => {
+        ]).andThen(([hasOrgIntegration, isGitHubConnected, hasStagingEnvironment, hasPreviewEnvironment, connectedProject]) => {
+          const fetchCustomEnvs = async (): Promise<VercelCustomEnvironment[]> => {
+            if (!connectedProject || !orgIntegration) return [];
+            try {
+              const client = await VercelIntegrationRepository.getVercelClient(orgIntegration);
+              const teamId = await VercelIntegrationRepository.getTeamIdFromIntegration(orgIntegration);
+              const result = await VercelIntegrationRepository.getVercelCustomEnvironments(
+                client,
+                connectedProject.vercelProjectId,
+                teamId
+              );
+              return result.success ? result.data : [];
+            } catch {
+              return [];
+            }
+          };
+
+          return fromPromise(
+            fetchCustomEnvs(),
+            (error) => ({ type: "other" as const, cause: error })
+          ).map((customEnvironments) => ({
+            enabled: true,
+            hasOrgIntegration,
+            authInvalid: false,
+            connectedProject,
+            isGitHubConnected,
+            hasStagingEnvironment,
+            hasPreviewEnvironment,
+            customEnvironments,
+          } as VercelSettingsResult));
+        }).mapErr((error) => {
           // Log the error and return a safe fallback
           console.error("Error in VercelSettingsPresenter.call:", error);
           return error;
@@ -230,6 +278,8 @@ export class VercelSettingsPresenter extends BasePresenter {
           connectedProject: undefined,
           isGitHubConnected: false,
           hasStagingEnvironment: false,
+          hasPreviewEnvironment: false,
+          customEnvironments: [],
         } as VercelSettingsResult);
       }
     } catch (error) {
@@ -242,6 +292,8 @@ export class VercelSettingsPresenter extends BasePresenter {
         connectedProject: undefined,
         isGitHubConnected: false,
         hasStagingEnvironment: false,
+        hasPreviewEnvironment: false,
+        customEnvironments: [],
       } as VercelSettingsResult);
     }
   }

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings/route.tsx

@@ -621,6 +621,7 @@ export default function Page() {
           projectSlug={project.slug}
           environmentSlug={environment.slug}
           hasStagingEnvironment={vercelFetcher.data?.hasStagingEnvironment ?? false}
+          hasPreviewEnvironment={vercelFetcher.data?.hasPreviewEnvironment ?? false}
           hasOrgIntegration={vercelFetcher.data?.hasOrgIntegration ?? false}
           nextUrl={nextUrl ?? undefined}
           onDataReload={(vercelEnvironmentId) => {