fix(vercel): Fix vercel settings page

.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">