feat(vercel): PR feedback changes

0ski · 0ski · commit 4537caccd79d · 2026-02-03T19:51:06.000+01:00
diff --git a/apps/webapp/app/components/integrations/VercelOnboardingModal.tsx b/apps/webapp/app/components/integrations/VercelOnboardingModal.tsx
@@ -320,7 +320,6 @@ export function VercelOnboardingModal({
     if (state === "project-selection" && fetcher.data && "success" in fetcher.data && fetcher.data.success && fetcher.state === "idle") {
       setState("loading-env-mapping");
       if (onDataReload) {
-        console.log("Vercel onboarding: Reloading data after successful project selection to get updated project info and env vars");
         onDataReload();
       }
     } else if (fetcher.data && "error" in fetcher.data && typeof fetcher.data.error === "string") {
diff --git a/apps/webapp/app/models/vercelIntegration.server.ts b/apps/webapp/app/models/vercelIntegration.server.ts
@@ -1,6 +1,5 @@
 import { Vercel } from "@vercel/sdk";
 import {
-  IntegrationService,
   Organization,
   OrganizationIntegration,
   SecretReference,
@@ -34,7 +33,7 @@ function extractEnvs(response: unknown): unknown[] {
 }
 
 function isVercelSecretType(type: string): boolean {
-  return type === "secret" || type === "sensitive";
+  return type === "secret" || type === "sensitive" || type === "encrypted";
 }
 
 function vercelApiError(message: string, context: Record<string, unknown>, error: unknown): VercelAPIResult<never> {
diff --git a/apps/webapp/app/presenters/v3/BranchesPresenter.server.ts b/apps/webapp/app/presenters/v3/BranchesPresenter.server.ts
@@ -42,7 +42,7 @@ export type GitMetaLinks = {
   /** The git provider, e.g., `github` */
   provider?: string;
 
-  source?: "trigger_github_app" | "github_actions" | "local" | "trigger_vercel_app";
+  source?: "trigger_github_app" | "github_actions" | "local";
   ghUsername?: string;
   ghUserAvatarUrl?: string;
 };
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings/route.tsx
@@ -50,6 +50,7 @@ import {
   VercelOnboardingModal,
   vercelResourcePath,
 } from "../resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.vercel";
+import type { loader as vercelLoader } from "../resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.vercel";
 import { OrgIntegrationRepository } from "~/models/orgIntegration.server";
 import { useTypedFetcher } from "remix-typedjson";
 
@@ -312,7 +313,7 @@ export default function Page() {
   const hasQueryParam = searchParams.get("vercelOnboarding") === "true";
   const nextUrl = searchParams.get("next");
   const [isModalOpen, setIsModalOpen] = useState(false);
-  const vercelFetcher = useTypedFetcher<any>();
+  const vercelFetcher = useTypedFetcher<typeof vercelLoader>();
 
   // Helper to open modal and ensure query param is present
   const openVercelOnboarding = useCallback(() => {
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.integrations.vercel.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.integrations.vercel.tsx
@@ -3,7 +3,7 @@ import type {
   LoaderFunctionArgs,
 } from "@remix-run/node";
 import { json, redirect } from "@remix-run/node";
-import { Form, useActionData, useLoaderData, useNavigation } from "@remix-run/react";
+import { Form, useActionData, useNavigation } from "@remix-run/react";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { z } from "zod";
 import { DialogClose } from "@radix-ui/react-dialog";
@@ -20,7 +20,7 @@ import { FormButtons } from "~/components/primitives/FormButtons";
 import { Header1 } from "~/components/primitives/Headers";
 import { PageBody, PageContainer } from "~/components/layout/AppLayout";
 import { Paragraph } from "~/components/primitives/Paragraph";
-import { Table, TableBlankRow, TableBody, TableCell, TableHeader, TableHeaderCell, TableRow } from "~/components/primitives/Table";
+import { Table, TableBody, TableCell, TableHeader, TableHeaderCell, TableRow } from "~/components/primitives/Table";
 import { VercelIntegrationRepository } from "~/models/vercelIntegration.server";
 import { $transaction, prisma } from "~/db.server";
 import { requireOrganization } from "~/services/org.server";
@@ -123,6 +123,11 @@ export const action = async ({ request, params }: ActionFunctionArgs) => {
   const { organizationSlug } = OrganizationParamsSchema.parse(params);
   const { organization, userId } = await requireOrganization(request, organizationSlug);
 
+  const formData = await request.formData();
+  const result = ActionSchema.safeParse({ intent: formData.get("intent") });
+  if (!result.success) {
+    return json({ error: "Invalid action" }, { status: 400 });
+  }
 
   // Find Vercel integration
   const vercelIntegration = await prisma.organizationIntegration.findFirst({
@@ -347,11 +352,6 @@ export default function VercelIntegrationPage() {
                     </TableCell>
                   </TableRow>
                 ))}
-                {connectedProjects.length === 0 && (
-                  <TableBlankRow colSpan={4}>
-                    <Paragraph>No connected projects found.</Paragraph>
-                  </TableBlankRow>
-                )}
               </TableBody>
             </Table>
           )}
diff --git a/apps/webapp/app/routes/api.v1.orgs.$organizationSlug.projects.$projectParam.vercel.projects.ts b/apps/webapp/app/routes/api.v1.orgs.$organizationSlug.projects.$projectParam.vercel.projects.ts
@@ -4,10 +4,8 @@ import { z } from "zod";
 import { prisma } from "~/db.server";
 import { apiCors } from "~/utils/apiCors";
 import { logger } from "~/services/logger.server";
+import { authenticateApiRequestWithPersonalAccessToken } from "~/services/personalAccessToken.server";
 import { VercelIntegrationService } from "~/services/vercelIntegration.server";
-import {
-  VercelProjectIntegrationDataSchema,
-} from "~/v3/vercel/vercelProjectIntegrationSchema";
 
 const ParamsSchema = z.object({
   organizationSlug: z.string(),
@@ -30,6 +28,15 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
     return apiCors(request, json({}));
   }
 
+  const authenticationResult = await authenticateApiRequestWithPersonalAccessToken(request);
+
+  if (!authenticationResult) {
+    return apiCors(
+      request,
+      json({ error: "Invalid or Missing Access Token" }, { status: 401 })
+    );
+  }
+
   const parsedParams = ParamsSchema.safeParse(params);
   if (!parsedParams.success) {
     return apiCors(
@@ -41,12 +48,17 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
   const { organizationSlug, projectParam } = parsedParams.data;
 
   try {
-    // Find the project
+    // Find the project, verifying org membership
     const project = await prisma.project.findFirst({
       where: {
         slug: projectParam,
         organization: {
           slug: organizationSlug,
+          members: {
+            some: {
+              userId: authenticationResult.userId,
+            },
+          },
         },
         deletedAt: null,
       },
diff --git a/apps/webapp/app/routes/auth.github.callback.tsx b/apps/webapp/app/routes/auth.github.callback.tsx
@@ -5,8 +5,7 @@ import { getSession, redirectWithErrorMessage } from "~/models/message.server";
 import { authenticator } from "~/services/auth.server";
 import { setLastAuthMethodHeader } from "~/services/lastAuthMethod.server";
 import { commitSession } from "~/services/sessionStorage.server";
-import { getReferralSource, clearReferralSourceCookie } from "~/services/referralSource.server";
-import { telemetry } from "~/services/telemetry.server";
+import { trackAndClearReferralSource } from "~/services/referralSource.server";
 import { redirectCookie } from "./auth.github";
 import { sanitizeRedirectPath } from "~/utils";
 
@@ -56,25 +55,7 @@ export let loader: LoaderFunction = async ({ request }) => {
   headers.append("Set-Cookie", await commitSession(session));
   headers.append("Set-Cookie", await setLastAuthMethodHeader("github"));
 
-  const referralSource = await getReferralSource(request);
-  if (referralSource) {
-    const user = await prisma.user.findUnique({
-      where: { id: auth.userId },
-    });
-    if (user) {
-      const userAge = Date.now() - user.createdAt.getTime();
-      const isNewUser = userAge < 30 * 1000;
-      
-      if (isNewUser) {
-        telemetry.user.identify({
-          user,
-          isNewUser: true,
-          referralSource,
-        });
-      }
-    }
-    headers.append("Set-Cookie", await clearReferralSourceCookie());
-  }
+  await trackAndClearReferralSource(request, auth.userId, headers);
 
   return redirect(redirectTo, { headers });
 };
diff --git a/apps/webapp/app/routes/auth.google.callback.tsx b/apps/webapp/app/routes/auth.google.callback.tsx
@@ -5,8 +5,7 @@ import { getSession, redirectWithErrorMessage } from "~/models/message.server";
 import { authenticator } from "~/services/auth.server";
 import { setLastAuthMethodHeader } from "~/services/lastAuthMethod.server";
 import { commitSession } from "~/services/sessionStorage.server";
-import { getReferralSource, clearReferralSourceCookie } from "~/services/referralSource.server";
-import { telemetry } from "~/services/telemetry.server";
+import { trackAndClearReferralSource } from "~/services/referralSource.server";
 import { redirectCookie } from "./auth.google";
 import { sanitizeRedirectPath } from "~/utils";
 
@@ -56,25 +55,7 @@ export let loader: LoaderFunction = async ({ request }) => {
   headers.append("Set-Cookie", await commitSession(session));
   headers.append("Set-Cookie", await setLastAuthMethodHeader("google"));
 
-  const referralSource = await getReferralSource(request);
-  if (referralSource) {
-    const user = await prisma.user.findUnique({
-      where: { id: auth.userId },
-    });
-    if (user) {
-      const userAge = Date.now() - user.createdAt.getTime();
-      const isNewUser = userAge < 30 * 1000;
-      
-      if (isNewUser) {
-        telemetry.user.identify({
-          user,
-          isNewUser: true,
-          referralSource,
-        });
-      }
-    }
-    headers.append("Set-Cookie", await clearReferralSourceCookie());
-  }
+  await trackAndClearReferralSource(request, auth.userId, headers);
 
   return redirect(redirectTo, { headers });
 };
diff --git a/apps/webapp/app/routes/login.mfa/route.tsx b/apps/webapp/app/routes/login.mfa/route.tsx
@@ -26,9 +26,7 @@ import { MultiFactorAuthenticationService } from "~/services/mfa/multiFactorAuth
 import { redirectWithErrorMessage, redirectBackWithErrorMessage } from "~/models/message.server";
 import { ServiceValidationError } from "~/v3/services/baseService.server";
 import { checkMfaRateLimit, MfaRateLimitError } from "~/services/mfa/mfaRateLimiter.server";
-import { getReferralSource, clearReferralSourceCookie } from "~/services/referralSource.server";
-import { telemetry } from "~/services/telemetry.server";
-import { prisma } from "~/db.server";
+import { trackAndClearReferralSource } from "~/services/referralSource.server";
 
 export const meta: MetaFunction = ({ matches }) => {
   const parentMeta = matches
@@ -165,29 +163,9 @@ async function completeLogin(request: Request, session: Session, userId: string)
 
   const headers = new Headers();
   headers.append("Set-Cookie", await sessionStorage.commitSession(authSession));
+  headers.append("Set-Cookie", await commitSession(session));
 
-  // Read referral source cookie and set in PostHog if present (only for new users), then clear it
-  const referralSource = await getReferralSource(request);
-  if (referralSource) {
-    const user = await prisma.user.findUnique({
-      where: { id: userId },
-    });
-    if (user) {
-      // Only set referralSource for new users (created within the last 30 seconds)
-      const userAge = Date.now() - user.createdAt.getTime();
-      const isNewUser = userAge < 30 * 1000; // 30 seconds
-      
-      if (isNewUser) {
-        telemetry.user.identify({
-          user,
-          isNewUser: true,
-          referralSource,
-        });
-      }
-    }
-    // Clear the cookie after using it (regardless of whether we set it)
-    headers.append("Set-Cookie", await clearReferralSourceCookie());
-  }
+  await trackAndClearReferralSource(request, userId, headers);
 
   return redirect(redirectTo, { headers });
 }
diff --git a/apps/webapp/app/routes/magic.tsx b/apps/webapp/app/routes/magic.tsx
@@ -6,8 +6,7 @@ import { authenticator } from "~/services/auth.server";
 import { setLastAuthMethodHeader } from "~/services/lastAuthMethod.server";
 import { getRedirectTo } from "~/services/redirectTo.server";
 import { commitSession, getSession } from "~/services/sessionStorage.server";
-import { getReferralSource, clearReferralSourceCookie } from "~/services/referralSource.server";
-import { telemetry } from "~/services/telemetry.server";
+import { trackAndClearReferralSource } from "~/services/referralSource.server";
 
 export async function loader({ request }: LoaderFunctionArgs) {
   const redirectTo = await getRedirectTo(request);
@@ -55,28 +54,7 @@ export async function loader({ request }: LoaderFunctionArgs) {
   headers.append("Set-Cookie", await commitSession(session));
   headers.append("Set-Cookie", await setLastAuthMethodHeader("email"));
 
-  // Read referral source cookie and set in PostHog if present (only for new users), then clear it
-  const referralSource = await getReferralSource(request);
-  if (referralSource) {
-    const user = await prisma.user.findUnique({
-      where: { id: auth.userId },
-    });
-    if (user) {
-      // Only set referralSource for new users (created within the last 30 seconds)
-      const userAge = Date.now() - user.createdAt.getTime();
-      const isNewUser = userAge < 30 * 1000; // 30 seconds
-      
-      if (isNewUser) {
-        telemetry.user.identify({
-          user,
-          isNewUser: true,
-          referralSource,
-        });
-      }
-    }
-    // Clear the cookie after using it (regardless of whether we set it)
-    headers.append("Set-Cookie", await clearReferralSourceCookie());
-  }
+  await trackAndClearReferralSource(request, auth.userId, headers);
 
   return redirect(redirectTo ?? "/", { headers });
 }
diff --git a/apps/webapp/app/routes/resources.environments.$environmentId.regenerate-api-key.tsx b/apps/webapp/app/routes/resources.environments.$environmentId.regenerate-api-key.tsx
@@ -25,8 +25,7 @@ export async function action({ request, params }: ActionFunctionArgs) {
     const updatedEnvironment = await regenerateApiKey({ userId, environmentId });
 
     // Sync the regenerated API key to Vercel if integration exists
-    // This is done asynchronously and won't block the response
-    syncApiKeyToVercelInBackground(
+    await syncApiKeyToVercelInBackground(
       updatedEnvironment.projectId,
       updatedEnvironment.type as "PRODUCTION" | "STAGING" | "PREVIEW" | "DEVELOPMENT",
       updatedEnvironment.apiKey
@@ -49,8 +48,7 @@ export async function action({ request, params }: ActionFunctionArgs) {
 }
 
 /**
- * Sync the API key to Vercel in the background.
- * This runs asynchronously and doesn't block the main response.
+ * Sync the API key to Vercel.
  * Errors are logged but won't fail the API key regeneration.
  */
 async function syncApiKeyToVercelInBackground(
@@ -64,17 +62,9 @@ async function syncApiKeyToVercelInBackground(
       environmentType,
       apiKey,
     });
-
-    if (!result.success) {
-      logger.warn("Failed to sync regenerated API key to Vercel", {
-        projectId,
-        environmentType,
-        error: result.error,
-      });
-    }
   } catch (error) {
     // Log but don't throw - we don't want to fail the main operation
-    logger.error("Error syncing regenerated API key to Vercel", {
+    logger.warn("Error syncing regenerated API key to Vercel", {
       projectId,
       environmentType,
       error,
diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.vercel.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.vercel.tsx
@@ -769,7 +769,7 @@ function ConnectedVercelProjectForm({
                 onAtomicBuildsChange={(slugs) =>
                   setConfigValues((prev) => ({ ...prev, atomicBuilds: slugs }))
                 }
-                envVarsConfigLink={`/orgs/${organizationSlug}/projects/${projectSlug}/environment-variables`}
+                envVarsConfigLink={`/orgs/${organizationSlug}/projects/${projectSlug}/env/${environmentSlug}/environment-variables`}
               />
 
               {/* Warning: autoAssignCustomDomains must be disabled for atomic deployments */}
diff --git a/apps/webapp/app/routes/vercel.callback.ts b/apps/webapp/app/routes/vercel.callback.ts
@@ -2,7 +2,7 @@ import type { LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { redirect } from "@remix-run/server-runtime";
 import { z } from "zod";
 import { logger } from "~/services/logger.server";
-import { getUserId, requireUserId } from "~/services/session.server";
+import { getUserId } from "~/services/session.server";
 import { setReferralSourceCookie } from "~/services/referralSource.server";
 import { requestUrl } from "~/utils/requestUrl.server";
 
@@ -12,7 +12,7 @@ const VercelCallbackSchema = z
     state: z.string().optional(),
     error: z.string().optional(),
     error_description: z.string().optional(),
-    configurationId: z.string(),
+    configurationId: z.string().optional(),
     next: z.string().optional()
   })
   .passthrough();
@@ -56,7 +56,8 @@ export async function loader({ request }: LoaderFunctionArgs) {
 
   // Route with state: dashboard-invoked flow
   if (state) {
-    const params = new URLSearchParams({ state, configurationId, code, origin: "dashboard" });
+    const params = new URLSearchParams({ state, code, origin: "dashboard" });
+    if (configurationId) params.set("configurationId", configurationId);
     if (nextUrl) params.set("next", nextUrl);
     return redirect(`/vercel/connect?${params.toString()}`);
   }
diff --git a/apps/webapp/app/routes/vercel.onboarding.tsx b/apps/webapp/app/routes/vercel.onboarding.tsx
@@ -1,6 +1,6 @@
 import type { ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { json, redirect } from "@remix-run/server-runtime";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Form, useNavigation } from "@remix-run/react";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { z } from "zod";
@@ -267,6 +267,13 @@ export default function VercelOnboardingPage() {
   const isSubmitting = navigation.state === "submitting";
   const [isInstalling, setIsInstalling] = useState(false);
 
+  // Reset isInstalling when navigation returns to idle (e.g. on error)
+  useEffect(() => {
+    if (navigation.state === "idle" && isInstalling) {
+      setIsInstalling(false);
+    }
+  }, [navigation.state, isInstalling]);
+
   if (data.step === "error") {
     return (
       <AppContainer className="bg-charcoal-900">
diff --git a/apps/webapp/app/services/referralSource.server.ts b/apps/webapp/app/services/referralSource.server.ts
diff --git a/apps/webapp/app/services/vercelIntegration.server.ts b/apps/webapp/app/services/vercelIntegration.server.ts
diff --git a/apps/webapp/app/v3/environmentVariables/environmentVariablesRepository.server.ts b/apps/webapp/app/v3/environmentVariables/environmentVariablesRepository.server.ts

Original file line number	Diff line number	Diff line change
`@@ -320,7 +320,6 @@ export function VercelOnboardingModal({`
`320`	`320`	`if (state === "project-selection" && fetcher.data && "success" in fetcher.data && fetcher.data.success && fetcher.state === "idle") {`
`321`	`321`	`setState("loading-env-mapping");`
`322`	`322`	`if (onDataReload) {`
`323`		`- console.log("Vercel onboarding: Reloading data after successful project selection to get updated project info and env vars");`
`324`	`323`	`onDataReload();`
`325`	`324`	`}`
`326`	`325`	`} else if (fetcher.data && "error" in fetcher.data && typeof fetcher.data.error === "string") {`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,5 @@`
`1`	`1`	`import { Vercel } from "@vercel/sdk";`
`2`	`2`	`import {`
`3`		`- IntegrationService,`
`4`	`3`	`Organization,`
`5`	`4`	`OrganizationIntegration,`
`6`	`5`	`SecretReference,`
`@@ -34,7 +33,7 @@ function extractEnvs(response: unknown): unknown[] {`
`34`	`33`	`}`
`35`	`34`
`36`	`35`	`function isVercelSecretType(type: string): boolean {`
`37`		`- return type === "secret" \|\| type === "sensitive";`
	`36`	`+ return type === "secret" \|\| type === "sensitive" \|\| type === "encrypted";`
`38`	`37`	`}`
`39`	`38`
`40`	`39`	`function vercelApiError(message: string, context: Record<string, unknown>, error: unknown): VercelAPIResult<never> {`