Skip to content

Commit 10d6f01

Browse files
0ski0ski
authored
feat(vercel): Vercel SDK fixes and correct env vars behavior for staging envs (#3149)
1 parent 24b92d3 commit 10d6f01

File tree

7 files changed

+593
-134
lines changed

7 files changed

+593
-134
lines changed

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

Lines changed: 60 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -34,31 +34,31 @@ export function BuildSettingsFields({
3434
<>
3535
{/* Pull env vars before build */}
3636
<div>
37-
<div className="mb-2 flex items-center justify-between">
38-
<div>
37+
<div className="mb-2">
38+
<div className="flex items-center justify-between">
3939
<Label>Pull env vars before build</Label>
40-
<Hint>
41-
Select which environments should pull environment variables from Vercel before each
42-
build.{" "}
43-
{envVarsConfigLink && (
44-
<>
45-
<TextLink to={envVarsConfigLink}>Configure which variables to pull</TextLink>.
46-
</>
47-
)}
48-
</Hint>
40+
{availableEnvSlugs.length > 1 && (
41+
<Switch
42+
variant="small"
43+
checked={
44+
availableEnvSlugs.length > 0 &&
45+
availableEnvSlugs.every((s) => pullEnvVarsBeforeBuild.includes(s))
46+
}
47+
onCheckedChange={(checked) => {
48+
onPullEnvVarsChange(checked ? [...availableEnvSlugs] : []);
49+
}}
50+
/>
51+
)}
4952
</div>
50-
{availableEnvSlugs.length > 1 && (
51-
<Switch
52-
variant="small"
53-
checked={
54-
availableEnvSlugs.length > 0 &&
55-
availableEnvSlugs.every((s) => pullEnvVarsBeforeBuild.includes(s))
56-
}
57-
onCheckedChange={(checked) => {
58-
onPullEnvVarsChange(checked ? [...availableEnvSlugs] : []);
59-
}}
60-
/>
61-
)}
53+
<Hint className="pr-6">
54+
Select which environments should pull environment variables from Vercel before each
55+
build.{" "}
56+
{envVarsConfigLink && (
57+
<>
58+
<TextLink to={envVarsConfigLink}>Configure which variables to pull</TextLink>.
59+
</>
60+
)}
61+
</Hint>
6262
</div>
6363
<div className="flex flex-col gap-2 rounded border bg-charcoal-800 p-3">
6464
{availableEnvSlugs.map((slug) => {
@@ -90,34 +90,34 @@ export function BuildSettingsFields({
9090

9191
{/* Discover new env vars */}
9292
<div>
93-
<div className="mb-2 flex items-center justify-between">
94-
<div>
93+
<div className="mb-2">
94+
<div className="flex items-center justify-between">
9595
<Label>Discover new env vars</Label>
96-
<Hint>
97-
Select which environments should automatically discover and create new environment
98-
variables from Vercel during builds.
99-
</Hint>
96+
{availableEnvSlugs.length > 1 && (
97+
<Switch
98+
variant="small"
99+
checked={
100+
availableEnvSlugs.length > 0 &&
101+
availableEnvSlugs.every(
102+
(s) => discoverEnvVars.includes(s) || !pullEnvVarsBeforeBuild.includes(s)
103+
) &&
104+
availableEnvSlugs.some((s) => discoverEnvVars.includes(s))
105+
}
106+
disabled={!availableEnvSlugs.some((s) => pullEnvVarsBeforeBuild.includes(s))}
107+
onCheckedChange={(checked) => {
108+
onDiscoverEnvVarsChange(
109+
checked
110+
? availableEnvSlugs.filter((s) => pullEnvVarsBeforeBuild.includes(s))
111+
: []
112+
);
113+
}}
114+
/>
115+
)}
100116
</div>
101-
{availableEnvSlugs.length > 1 && (
102-
<Switch
103-
variant="small"
104-
checked={
105-
availableEnvSlugs.length > 0 &&
106-
availableEnvSlugs.every(
107-
(s) => discoverEnvVars.includes(s) || !pullEnvVarsBeforeBuild.includes(s)
108-
) &&
109-
availableEnvSlugs.some((s) => discoverEnvVars.includes(s))
110-
}
111-
disabled={!availableEnvSlugs.some((s) => pullEnvVarsBeforeBuild.includes(s))}
112-
onCheckedChange={(checked) => {
113-
onDiscoverEnvVarsChange(
114-
checked
115-
? availableEnvSlugs.filter((s) => pullEnvVarsBeforeBuild.includes(s))
116-
: []
117-
);
118-
}}
119-
/>
120-
)}
117+
<Hint className="pr-6">
118+
Select which environments should automatically discover and create new environment
119+
variables from Vercel during builds.
120+
</Hint>
121121
</div>
122122
<div className="flex flex-col gap-2 rounded border bg-charcoal-800 p-3">
123123
{availableEnvSlugs.map((slug) => {
@@ -155,13 +155,7 @@ export function BuildSettingsFields({
155155
{/* Atomic deployments */}
156156
<div>
157157
<div className="flex items-center justify-between">
158-
<div>
159-
<Label>Atomic deployments</Label>
160-
<Hint>
161-
When enabled, production deployments wait for Vercel deployment to complete before
162-
promoting the Trigger.dev deployment.
163-
</Hint>
164-
</div>
158+
<Label>Atomic deployments</Label>
165159
<Switch
166160
variant="small"
167161
checked={atomicBuilds.includes("prod")}
@@ -170,6 +164,16 @@ export function BuildSettingsFields({
170164
}}
171165
/>
172166
</div>
167+
<Hint className="pr-6">
168+
When enabled, production deployments wait for Vercel deployment to complete before
169+
promoting the Trigger.dev deployment. This will disable the "Auto-assign Custom
170+
Production Domains" option in your Vercel project settings to perform staged
171+
deployments.{" "}
172+
<TextLink href="https://trigger.dev/docs/vercel-integration#atomic-deployments" target="_blank">
173+
Learn more
174+
</TextLink>
175+
.
176+
</Hint>
173177
</div>
174178
</>
175179
);

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

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -679,7 +679,7 @@ export function VercelOnboardingModal({
679679
onClose();
680680
}
681681
}}>
682-
<DialogContent className="max-w-lg">
682+
<DialogContent className="max-w-lg" onInteractOutside={(e) => e.preventDefault()}>
683683
<DialogHeader>
684684
<div className="flex items-center gap-2">
685685
<VercelLogo className="size-5" />
@@ -800,6 +800,20 @@ export function VercelOnboardingModal({
800800
))}
801801
</Select>
802802

803+
<Callout variant="info">
804+
<p className="text-xs">
805+
If you skip this step, the{" "}
806+
<code className="rounded bg-charcoal-700 px-1 py-0.5 text-text-bright">TRIGGER_SECRET_KEY</code>{" "}
807+
will not be installed for the staging environment in Vercel. You can configure this later in
808+
project settings.
809+
</p>
810+
</Callout>
811+
812+
<Paragraph className="text-xs text-text-dimmed">
813+
Make sure the staging branch in your Vercel project's Git settings matches the staging branch
814+
configured in your GitHub integration.
815+
</Paragraph>
816+
803817
<div className="flex items-center justify-between gap-2">
804818
<Button
805819
variant="tertiary/medium"

0 commit comments

Comments
 (0)