fix(vercel): Fix vercel settings page (#3424)

Author: 0ski

.server-changes/vercel-settings-fix-and-onboarding-improvements.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: fix
+---
+
+Fix Vercel integration settings page (remove redundant section toggles) and improve the Vercel onboarding flow so the modal closes after connecting a GitHub repo and the marketplace `next` URL is preserved across the GitHub app install redirect.

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

@@ -23,6 +23,8 @@ type BuildSettingsFieldsProps = {
   disabledEnvSlugs?: Partial<Record<EnvSlug, string>>;
   autoPromote?: boolean;
   onAutoPromoteChange?: (value: boolean) => void;
+  /** Hide the section-level master toggles for "Pull env vars" and "Discover new env vars". */
+  hideSectionToggles?: boolean;
 };
 
 export function BuildSettingsFields({
@@ -37,6 +39,7 @@ export function BuildSettingsFields({
   disabledEnvSlugs,
   autoPromote,
   onAutoPromoteChange,
+  hideSectionToggles,
 }: BuildSettingsFieldsProps) {
   const isSlugDisabled = (slug: EnvSlug) => !!disabledEnvSlugs?.[slug];
   const enabledSlugs = availableEnvSlugs.filter((s) => !isSlugDisabled(s));
@@ -48,7 +51,7 @@ export function BuildSettingsFields({
         <div className="mb-2">
           <div className="flex items-center justify-between">
             <Label>Pull env vars before build</Label>
-            {availableEnvSlugs.length > 1 && (
+            {!hideSectionToggles && availableEnvSlugs.length > 1 && (
               <Switch
                 variant="small"
                 checked={
@@ -116,7 +119,7 @@ export function BuildSettingsFields({
         <div className="mb-2">
           <div className="flex items-center justify-between">
             <Label>Discover new env vars</Label>
-            {availableEnvSlugs.length > 1 && (
+            {!hideSectionToggles && availableEnvSlugs.length > 1 && (
               <Switch
                 variant="small"
                 checked={

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

@@ -600,6 +600,20 @@ export function VercelOnboardingModal({
     }
   }, [completeOnboardingFetcher.data, completeOnboardingFetcher.state, state]);
 
+  useEffect(() => {
+    if (state === "github-connection" && isGitHubConnectedForOnboarding) {
+      trackOnboarding("vercel onboarding github completed");
+      if (fromMarketplaceContext && nextUrl) {
+        const validUrl = safeRedirectUrl(nextUrl);
+        if (validUrl) {
+          window.location.href = validUrl;
+          return;
+        }
+      }
+      setState("completed");
+    }
+  }, [state, isGitHubConnectedForOnboarding, fromMarketplaceContext, nextUrl, trackOnboarding]);
+
   useEffect(() => {
     if (state === "completed" && !hasTrackedCompletionRef.current) {
       hasTrackedCompletionRef.current = true;
@@ -1114,6 +1128,7 @@ export function VercelOnboardingModal({
                   redirectParams.set("next", nextUrl);
                 }
                 const redirectUrlWithContext = `${baseSettingsPath}?${redirectParams.toString()}`;
+                const nextDirectRedirect = nextUrl ? safeRedirectUrl(nextUrl) : null;
 
                 return gitHubAppInstallations.length === 0 ? (
                   <div className="flex flex-col gap-3">
@@ -1137,7 +1152,10 @@ export function VercelOnboardingModal({
                         organizationSlug={organizationSlug}
                         projectSlug={projectSlug}
                         environmentSlug={environmentSlug}
-                        redirectUrl={redirectUrlWithContext}
+                        redirectUrl={
+                          nextDirectRedirect ??
+                          (fromMarketplaceContext ? redirectUrlWithContext : baseSettingsPath)
+                        }
                         preventDismiss={fromMarketplaceContext}
                       />
                       <span className="flex items-center gap-1 text-xs text-text-dimmed">

apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.github.tsx

@@ -865,8 +865,14 @@ export function GitHubSettingsPanel({
   const fetcher = useTypedFetcher<typeof loader>();
   const location = useLocation();
 
-  // Use provided redirectUrl or fall back to current path (without search params)
-  const effectiveRedirectUrl = location.pathname;
+  // Preserve current search params (e.g. origin=marketplace, next=...) but strip
+  // openGithubRepoModal so the modal doesn't re-open in a loop after the action redirect.
+  const effectiveRedirectUrl = (() => {
+    const params = new URLSearchParams(location.search);
+    params.delete("openGithubRepoModal");
+    const search = params.toString();
+    return search ? `${location.pathname}?${search}` : location.pathname;
+  })();
   useEffect(() => {
     fetcher.load(gitHubResourcePath(organizationSlug, projectSlug, environmentSlug));
   }, [organizationSlug, projectSlug, environmentSlug]);

apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.vercel.tsx

@@ -819,6 +819,7 @@ function ConnectedVercelProjectForm({
                 onAutoPromoteChange={(value) =>
                   setConfigValues((prev) => ({ ...prev, autoPromote: value }))
                 }
+                hideSectionToggles
               />
 
               {/* Warning: autoAssignCustomDomains must be disabled for atomic deployments */}
@@ -904,12 +905,6 @@ function VercelSettingsPanel({
     }
   }, [organizationSlug, projectSlug, environmentSlug, data?.authInvalid, hasError, data, hasFetched]);
 
-  useEffect(() => {
-    if (hasFetched && fetcher.state === "idle" && fetcher.data === undefined && !hasError) {
-      setHasError(true);
-    }
-  }, [fetcher.state, fetcher.data, hasError, hasFetched]);
-
   if (hasError) {
     return (
       <div className="rounded-sm border border-rose-500/40 bg-rose-500/10 p-4">