feat(webapp): Vercel integration

.changeset/vercel-integration.md

@@ -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

@@ -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

@@ -32,8 +32,6 @@ export function OctoKitty({ className }: { className?: string }) {
       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"

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

@@ -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

@@ -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>
+  );
+}