feat(webapp): Vercel integration #2994

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft

0ski wants to merge 34 commits into main from oskar/feat-vercel-integration

+7,650 −120

.changeset/vercel-integration.md

-Original file line number
+Diff line change
@@ -0,0 +1,5 @@
+    ---
+    "@trigger.dev/core": patch
+    ---
+    Add Vercel integration support to API schemas: `commitSHA` and `integrationDeployments` on deployment responses, and `source` field for environment variable imports.

.vscode/settings.json

-Original file line number
+Diff line change
@@ Expand Up / @@ -7,5 +7,6 @@ @@
         "packages/cli-v3/e2e": true
       },
       "vitest.disableWorkspaceWarning": true,
-      "typescript.experimental.useTsgo": false
+      "typescript.experimental.useTsgo": true,
+      "chat.agent.maxRequests": 10000
     }

apps/webapp/app/components/GitHubLoginButton.tsx

-Original file line number
+Diff line change
@@ Expand Up @@
           baseProfile="tiny"
           id="Layer_1"
           xmlns="http://www.w3.org/2000/svg"
-          x="0px"
-          y="0px"
           viewBox="0 0 2350 2314.8"
           xmlSpace="preserve"
           fill="currentColor"
@@ Expand Down @@

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

-Original file line number
+Diff line change
@@ -0,0 +1,180 @@
+    import { Switch } from "~/components/primitives/Switch";
+    import { Label } from "~/components/primitives/Label";
+    import { Hint } from "~/components/primitives/Hint";
+    import { TextLink } from "~/components/primitives/TextLink";
+    import {
+      EnvironmentIcon,
+      environmentFullTitle,
+      environmentTextClassName,
+    } from "~/components/environments/EnvironmentLabel";
+    import type { EnvSlug } from "~/v3/vercel/vercelProjectIntegrationSchema";
+    type BuildSettingsFieldsProps = {
+      availableEnvSlugs: EnvSlug[];
+      pullEnvVarsBeforeBuild: EnvSlug[];
+      onPullEnvVarsChange: (slugs: EnvSlug[]) => void;
+      discoverEnvVars: EnvSlug[];
+      onDiscoverEnvVarsChange: (slugs: EnvSlug[]) => void;
+      atomicBuilds: EnvSlug[];
+      onAtomicBuildsChange: (slugs: EnvSlug[]) => void;
+      envVarsConfigLink?: string;
+    };
+    function slugToEnvType(slug: EnvSlug) {
+      return slug === "prod" ? "PRODUCTION" : slug === "stg" ? "STAGING" : "PREVIEW";
+    }
+    export function BuildSettingsFields({
+      availableEnvSlugs,
+      pullEnvVarsBeforeBuild,
+      onPullEnvVarsChange,
+      discoverEnvVars,
+      onDiscoverEnvVarsChange,
+      atomicBuilds,
+      onAtomicBuildsChange,
+      envVarsConfigLink,
+    }: BuildSettingsFieldsProps) {
+      return (
+        <>
+          {/* Pull env vars before build */}
+          <div>
+            <div className="mb-2 flex items-center justify-between">
+              <div>
+                <Label>Pull env vars before build</Label>
+                <Hint>
+                  Select which environments should pull environment variables from Vercel before each
+                  build.{" "}
+                  {envVarsConfigLink && (
+                    <>
+                      <TextLink to={envVarsConfigLink}>Configure which variables to pull</TextLink>.
+                    </>
+                  )}
+                </Hint>
+              </div>
+              {availableEnvSlugs.length > 1 && (
+                <Switch
+                  variant="small"
+                  checked={
+                    availableEnvSlugs.length > 0 &&
+                    availableEnvSlugs.every((s) => pullEnvVarsBeforeBuild.includes(s))
+                  }
+                  onCheckedChange={(checked) => {
+                    onPullEnvVarsChange(checked ? [...availableEnvSlugs] : []);
+                  }}
+                />
+              )}
+            </div>
+            <div className="flex flex-col gap-2 rounded border bg-charcoal-800 p-3">
+              {availableEnvSlugs.map((slug) => {
+                const envType = slugToEnvType(slug);
+                return (
+                  <div key={slug} className="flex items-center justify-between">
+                    <div className="flex items-center gap-1.5">
+                      <EnvironmentIcon environment={{ type: envType }} className="size-4" />
+                      <span className={`text-sm ${environmentTextClassName({ type: envType })}`}>
+                        {environmentFullTitle({ type: envType })}
+                      </span>
+                    </div>
+                    <Switch
+                      variant="small"
+                      checked={pullEnvVarsBeforeBuild.includes(slug)}
+                      onCheckedChange={(checked) => {
+                        onPullEnvVarsChange(
+                          checked
+                            ? [...pullEnvVarsBeforeBuild, slug]
+                            : pullEnvVarsBeforeBuild.filter((s) => s !== slug)
+                        );
+                      }}
+                    />
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+          {/* Discover new env vars */}
+          <div>
+            <div className="mb-2 flex items-center justify-between">
+              <div>
+                <Label>Discover new env vars</Label>
+                <Hint>
+                  Select which environments should automatically discover and create new environment
+                  variables from Vercel during builds.
+                </Hint>
+              </div>
+              {availableEnvSlugs.length > 1 && (
+                <Switch
+                  variant="small"
+                  checked={
+                    availableEnvSlugs.length > 0 &&
+                    availableEnvSlugs.every(
+                      (s) => discoverEnvVars.includes(s) || !pullEnvVarsBeforeBuild.includes(s)
+                    ) &&
+                    availableEnvSlugs.some((s) => discoverEnvVars.includes(s))
+                  }
+                  disabled={!availableEnvSlugs.some((s) => pullEnvVarsBeforeBuild.includes(s))}
+                  onCheckedChange={(checked) => {
+                    onDiscoverEnvVarsChange(
+                      checked
+                        ? availableEnvSlugs.filter((s) => pullEnvVarsBeforeBuild.includes(s))
+                        : []
+                    );
+                  }}
+                />
+              )}
+            </div>
+            <div className="flex flex-col gap-2 rounded border bg-charcoal-800 p-3">
+              {availableEnvSlugs.map((slug) => {
+                const envType = slugToEnvType(slug);
+                const isPullDisabled = !pullEnvVarsBeforeBuild.includes(slug);
+                return (
+                  <div
+                    key={slug}
+                    className={`flex items-center justify-between ${isPullDisabled ? "opacity-50" : ""}`}
+                  >
+                    <div className="flex items-center gap-1.5">
+                      <EnvironmentIcon environment={{ type: envType }} className="size-4" />
+                      <span className={`text-sm ${environmentTextClassName({ type: envType })}`}>
+                        {environmentFullTitle({ type: envType })}
+                      </span>
+                    </div>
+                    <Switch
+                      variant="small"
+                      checked={discoverEnvVars.includes(slug)}
+                      disabled={isPullDisabled}
+                      onCheckedChange={(checked) => {
+                        onDiscoverEnvVarsChange(
+                          checked
+                            ? [...discoverEnvVars, slug]
+                            : discoverEnvVars.filter((s) => s !== slug)
+                        );
+                      }}
+                    />
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+          {/* Atomic deployments */}
+          <div>
+            <div className="flex items-center justify-between">
+              <div>
+                <Label>Atomic deployments</Label>
+                <Hint>
+                  When enabled, production deployments wait for Vercel deployment to complete before
+                  promoting the Trigger.dev deployment.
+                </Hint>
+              </div>
+              <Switch
+                variant="small"
+                checked={atomicBuilds.includes("prod")}
+                onCheckedChange={(checked) => {
+                  onAtomicBuildsChange(checked ? ["prod"] : []);
+                }}
+              />
+            </div>
+          </div>
+        </>
+      );
+    }

apps/webapp/app/components/integrations/VercelLogo.tsx

-Original file line number
+Diff line change
@@ -0,0 +1,12 @@
+    export function VercelLogo({ className }: { className?: string }) {
+      return (
+        <svg
+          viewBox="0 0 76 65"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          className={className}
+        >
+          <path d="M37.5274 0L75.0548 65H0L37.5274 0Z" fill="currentColor" />
+        </svg>
+      );
+    }

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(webapp): Vercel integration #2994

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!

feat(webapp): Vercel integration #2994

Are you sure you want to change the base?

feat(webapp): Vercel integration #2994

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!