Skip to content

Commit cccb4e2

Browse files
0ski0ski
committed
feat(vercel): add Vercel onboarding modal component
Introduce a new VercelOnboardingModal component to streamline the onboarding process for Vercel integration. This modal manages project selection, environment variable synchronization, and build settings configuration. It enhances user experience by providing a structured flow for onboarding, including handling custom environments and GitHub integration. Additionally, refactor related logic in the Vercel integration service and update schemas to support the new onboarding features.
1 parent 861687a commit cccb4e2

File tree

8 files changed

+1187
-1666
lines changed

8 files changed

+1187
-1666
lines changed

‎apps/webapp/app/components/integrations/VercelOnboardingModal.tsx‎

Lines changed: 1054 additions & 0 deletions
Large diffs are not rendered by default.

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

Lines changed: 59 additions & 266 deletions
Large diffs are not rendered by default.

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

Lines changed: 2 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,6 @@ export class VercelSettingsPresenter extends BasePresenter {
149149
})
150150
).map((repo) => repo !== null);
151151

152-
// Check if staging environment exists
153152
const checkStagingEnvironment = () =>
154153
fromPromise(
155154
(this._replica as PrismaClient).runtimeEnvironment.findFirst({
@@ -167,7 +166,6 @@ export class VercelSettingsPresenter extends BasePresenter {
167166
})
168167
).map((env) => env !== null);
169168

170-
// Check if preview environment exists
171169
const checkPreviewEnvironment = () =>
172170
fromPromise(
173171
(this._replica as PrismaClient).runtimeEnvironment.findFirst({
@@ -185,7 +183,6 @@ export class VercelSettingsPresenter extends BasePresenter {
185183
})
186184
).map((env) => env !== null);
187185

188-
// Get Vercel project integration
189186
const getVercelProjectIntegration = () =>
190187
fromPromise(
191188
(this._replica as PrismaClient).organizationProjectIntegration.findFirst({
@@ -325,7 +322,6 @@ export class VercelSettingsPresenter extends BasePresenter {
325322
vercelEnvironmentId?: string
326323
): Promise<VercelOnboardingData | null> {
327324
try {
328-
// Fetch GitHub app installations and connected repo in parallel with Vercel data
329325
const [gitHubInstallations, connectedGitHubRepo] = await Promise.all([
330326
(this._replica as PrismaClient).githubAppInstallation.findMany({
331327
where: {
@@ -417,7 +413,6 @@ export class VercelSettingsPresenter extends BasePresenter {
417413
const client = await VercelIntegrationRepository.getVercelClient(orgIntegration);
418414
const teamId = await VercelIntegrationRepository.getTeamIdFromIntegration(orgIntegration);
419415

420-
// Get the project integration to find the Vercel project ID (if selected)
421416
const projectIntegration = await (this._replica as PrismaClient).organizationProjectIntegration.findFirst({
422417
where: {
423418
projectId,
@@ -429,7 +424,6 @@ export class VercelSettingsPresenter extends BasePresenter {
429424
},
430425
});
431426

432-
// Always fetch available projects for selection
433427
const availableProjectsResult = await VercelIntegrationRepository.getVercelProjects(client, teamId);
434428

435429
if (!availableProjectsResult.success) {
@@ -445,7 +439,6 @@ export class VercelSettingsPresenter extends BasePresenter {
445439
};
446440
}
447441

448-
// If no project integration exists, return early with just available projects
449442
if (!projectIntegration) {
450443
return {
451444
customEnvironments: [],
@@ -458,7 +451,6 @@ export class VercelSettingsPresenter extends BasePresenter {
458451
};
459452
}
460453

461-
// Fetch custom environments, project env vars, and shared env vars in parallel
462454
const [customEnvironmentsResult, projectEnvVarsResult, sharedEnvVarsResult] = await Promise.all([
463455
VercelIntegrationRepository.getVercelCustomEnvironments(
464456
client,
@@ -479,8 +471,7 @@ export class VercelSettingsPresenter extends BasePresenter {
479471
)
480472
: Promise.resolve({ success: true as const, data: [] }),
481473
]);
482-
// Check if any of the API calls failed due to auth issues
483-
const authInvalid =
474+
const authInvalid =
484475
(!customEnvironmentsResult.success && customEnvironmentsResult.authInvalid) ||
485476
(!projectEnvVarsResult.success && projectEnvVarsResult.authInvalid) ||
486477
(!sharedEnvVarsResult.success && sharedEnvVarsResult.authInvalid);
@@ -498,20 +489,17 @@ export class VercelSettingsPresenter extends BasePresenter {
498489
};
499490
}
500491

501-
// Extract data from successful results
502492
const customEnvironments = customEnvironmentsResult.success ? customEnvironmentsResult.data : [];
503493
const projectEnvVars = projectEnvVarsResult.success ? projectEnvVarsResult.data : [];
504494
const sharedEnvVars = sharedEnvVarsResult.success ? sharedEnvVarsResult.data : [];
505495

506-
// Merge project and shared env vars (project vars take precedence)
507-
// Also filter out TRIGGER_SECRET_KEY as it's managed by Trigger.dev
496+
// Filter out TRIGGER_SECRET_KEY (managed by Trigger.dev) and merge project + shared env vars
508497
const projectEnvVarKeys = new Set(projectEnvVars.map((v) => v.key));
509498
const mergedEnvVars: VercelEnvironmentVariable[] = [
510499
...projectEnvVars
511500
.filter((v) => v.key !== "TRIGGER_SECRET_KEY")
512501
.map((v) => {
513502
const envVar = { ...v };
514-
// Check if this env var is used in the selected custom environment
515503
if (vercelEnvironmentId && (v as any).customEnvironmentIds?.includes(vercelEnvironmentId)) {
516504
envVar.target = [...v.target, 'staging'];
517505
}
@@ -528,21 +516,17 @@ export class VercelSettingsPresenter extends BasePresenter {
528516
target: v.target,
529517
isShared: true,
530518
};
531-
// Check if this shared env var is used in the selected custom environment
532519
if (vercelEnvironmentId && (v as any).customEnvironmentIds?.includes(vercelEnvironmentId)) {
533520
envVar.target = [...v.target, 'staging'];
534521
}
535522
return envVar;
536523
}),
537524
];
538525

539-
// Sort environment variables alphabetically
540526
const sortedEnvVars = [...mergedEnvVars].sort((a, b) =>
541527
a.key.localeCompare(b.key)
542528
);
543529

544-
// Get existing environment variables in Trigger.dev
545-
// Fetch environments with their slugs and archived status to filter properly
546530
const projectEnvs = await (this._replica as PrismaClient).runtimeEnvironment.findMany({
547531
where: {
548532
projectId,

0 commit comments

Comments
 (0)