feat: vercel custom environment support

[rohan-chaturvedi]

🔍 Overview

Extends the Vercel secret sync integration to support Custom Environments. Fixes #651

🖼️ Screenshots or Demo

💚 Did You...

• Ensure linting passes (code style checks)?
  - [ ] Update dependencies and lockfiles (if required)
  - [ ] Update migrations (if required)
• Regenerate graphql schema and types (if required)
• Verify the app builds locally?
• Manually test the changes on different browsers/devices?

---

Note

Adds end-to-end support for Vercel custom environments, updating backend sync logic and frontend/UI to select and manage specific environments.

• Backend (Vercel sync):
  • Introduces VercelEnvironmentType and replaces VercelProjectType.environment with environments (includes standard and custom envs).
  • Adds get_project_custom_environments and integrates into list_vercel_projects to return full env details (id, name, slug, type).
  • Refines env var filtering in get_existing_env_vars to match variables that exclusively target a specific environment (supports customEnvironmentIds).
  • Enhances sync_vercel_secrets:
    • Validates target environment (supports all and custom slugs).
    • For all, syncs to each environment separately.
    • Creates vars correctly for standard (target) vs custom (customEnvironmentIds) envs; handles update/delete per env.
  • Adds logging and error handling improvements; extracts delete_env_var helper.
• GraphQL/Types:
  • Updates schema and generated types: add VercelEnvironmentType; VercelProjectType.environments replaces environment.
  • Updates GetVercelProjects query to return environments { id name slug type }.
• Frontend/UI:
  • CreateVercelSync: replaces fixed env radio with environment picker from project environments; sends environment as env slug.
  • ManageSyncDialog: shows environment.name instead of envType.
  • Minor styling tweaks in dropdowns.

^{Written by Cursor Bugbot for commit e772e54. This will update automatically on new commits. Configure here.}

[Copilot]

Pull Request Overview

This PR extends the Vercel secret sync integration to support custom environments, moving from a simple string-based environment list to a structured environment object with proper metadata.

• Replaced hardcoded environment strings with dynamic environment objects containing ID, name, and slug
• Added support for Vercel custom environments through new API endpoints
• Updated GraphQL schema and queries to handle structured environment data

Reviewed Changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
frontend/graphql/queries/syncing/vercel/getProject.gql	Updated GraphQL query to fetch structured environment objects instead of string array
frontend/components/syncing/Vercel/CreateVercelSync.tsx	Modified UI component to handle environment objects and use proper environment selection
frontend/apollo/schema.graphql	Added new VercelEnvironmentType schema definition
frontend/apollo/graphql.ts	Updated TypeScript types to match new schema
frontend/apollo/gql.ts	Updated generated GraphQL documents
backend/api/utils/syncing/vercel/main.py	Added custom environment support with new API endpoints and proper environment resolution

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[nimish-ks]

@cursor review

[nimish-ks]

@rohan-chaturvedi

• Made a small change to pre-select the first available Vercel Team from API response to save a click and render the Vercel Project dropdown. Most users will only have a single Vercel team that the token is scoped for, so this will save a click and render the Projects dropdown which will make the UI look less lopsided.

Notes:

• I see that you have removed the 'All' option from the list of radio (option) button for Vercel Target Environment. I suggest you add it back as we already supported this feature and there is no reason to remove it, given our design decision - If a user select 'All' Target environments, Phase would individually create a standalone environment variable in each of the target environment without setting 'All environments'. This was a smart move that avoided the problem of environment variables being out of reach from Phase, once they would be tagged as 'All Environments'.

Example:

Phase: FOO=BAR -> Vercel Target Environment: All

Secrets in Vercel:

• Development: FOO=BAR

• Preview: FOO=BAR

• Staging: FOO=BAR

• Custom-env: FOO=BAR

• Production: FOO=BAR

• Currently, if someone already has a syncing that is set to 'All' Target Environments, it will continue to work for those without custom environments. Meaning, secrets to default environments will continue being synced.

I suggest we make the following changes

• If a user has custom environment, and while setting up a new sync they select 'All' sync secrets to the default + custom environments. One potential pitfall to be aware of - it is my observation that Vercel will overwrite / replace the staging default environment with the user created custom environment. If this is true, while trying to sync to 'All' environments using a hardcoded default (Development, Preview, Staging, Production) and or Custom environment (Via ID) may not work and return error.
• Switch from the radio / options button UI to a dropdown box for Target Environment select with a placeholder that prompt the user to select a Vercel Project if they haven't already, once selected update the drop to include default and or custom environments. The target environment must be a required field, the user must make a selection before being allowed to create a sync. Currently, even though the radio buttons are marked as required, there is no default selection made when the radio button is clicked, so the user can essentially create a sync (which obviously fails) with no Target Environment.

Fucking ramshackle design decision from the triangle company 🤷🏻

[rohan-chaturvedi]

Agreed, I'll make these changes

[Copilot]

Pull Request Overview

Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.

Comments suppressed due to low confidence (1)

frontend/components/syncing/Vercel/CreateVercelSync.tsx:1

• Remove large block of commented-out code that has been replaced by the Combobox implementation.

import GetVercelProjects from '@/graphql/queries/syncing/vercel/getProject.gql'

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[nimish-ks]

@cursor review

[nimish-ks]

@cursor review

[Copilot]

Pull Request Overview

Copilot reviewed 7 out of 7 changed files in this pull request and generated 1 comment.

Comments suppressed due to low confidence (1)

frontend/components/syncing/Vercel/CreateVercelSync.tsx:1

• Remove commented-out code instead of leaving it in the codebase. This reduces code clutter and maintainability issues.

import GetVercelProjects from '@/graphql/queries/syncing/vercel/getProject.gql'

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[nimish-ks]

@cursor review