feat: dashboard UI for environment variables management

[Flo4604]

What does this PR do?

This hooks up the environment variables UI up to trpc // the db.

Also because i found it annoying as hell to press the + each time to add a new env var there is an add more button which you can just press directly below the row. Enter on the latest value also adds a new row.

Copy pasting a .env file is also support.

Env vars are only decryptable if they are not marked as secret, otherwise you can decrypt them using either

• Reveal Button
• Editing the value

Please ignore the formatting fixes.

Type of change

• Bug fix (non-breaking change which fixes an issue)
• Chore (refactoring code, technical debt, workflow improvements)
• Enhancement (small improvements)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

How should this be tested?

Make sure you can

A. Create a new environment variable either as "secret" or as a normal env var.

B. Decrypt the values of normal env vars
C. NOT Decrypt the values of secret env vars.

D. Edit the value of a secret and normal env var and decrypt normal again and see the correct one.
E. Rename the key of a normal env var and see it change and not being duplicated in any way.

F. Successfully delete a normal env var.
G. Successfully delete a secret env var.

Checklist

Required

• Filled out the "How to test" section in this PR
• Read Contributing Guide
• Self-reviewed my own code
• Commented on my code in hard-to-understand areas
• Ran pnpm build
• Ran pnpm fmt
• Ran make fmt on /go directory
• Checked for warnings, there are none
• Removed all console.logs
• Merged the latest changes from main onto my branch with git pull origin main
• My changes don't cause any responsiveness issues

Appreciated

• If a UI change was made: Added a screen recording or screenshots to this PR
• Updated the Unkey Docs if changes were necessary

[changeset-bot]

⚠️ No Changeset found

Latest commit: cb8ff9b

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
dashboard	Error			Dec 9, 2025 4:15pm

1 Skipped Deployment

Project	Deployment	Preview	Comments	Updated (UTC)
engineering	Ignored	Preview		Dec 9, 2025 4:15pm

[coderabbitai]

Caution

Review failed

The pull request is closed.

📝 Walkthrough

Walkthrough

This pull request implements environment variable management with encryption support, replacing dummy data and mocked flows with real TRPC mutations. It introduces bulk import capability, write-only/recoverable type semantics, and secure value encryption via Vault for both create, update, decrypt, and delete operations.

Changes

Cohort / File(s)	Summary
Environment Variable Form Components apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/details/env-variables-section/add-env-vars.tsx, env-var-row.tsx, components/env-var-form.tsx, components/env-var-inputs.tsx	Updated form components to support real TRPC mutations for create/update/delete. Added bulk import via paste, reveal/decrypt flows for recoverable vars, and key input auto-formatting (uppercase, underscore replacement). Replaced mocked saves with actual mutations and toast feedback. Added envVarId prop requirements and new callbacks (onDelete, onUpdate).
Environment Variable Management apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/details/env-variables-section/index.tsx, hooks/use-env-var-manager.tsx	Replaced AddEnvVarRow with AddEnvVars component. Updated hook to fetch real env var data via tRPC list query instead of dummy data. Exposed environmentId, isLoading, error, and invalidate for cache management. Wired callbacks to invalidate cache after mutations.
Project Environments Rendering apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/page.tsx	Replaced hardcoded Production/Preview environment sections with dynamic rendering over fetched environments list, each with its slug as environment identifier.
Type System Updates apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/details/env-variables-section/types.ts	Changed enum from "env"/"secret" to "recoverable"/"writeonly" semantics. Added ENV_VAR_KEY_REGEX for enforcing uppercase keys. Removed decryptedValue field from schema. Changed Environment from enum to string type.
TRPC Environment Variable Endpoints apps/dashboard/lib/trpc/routers/deploy/env-vars/create.ts, decrypt.ts, delete.ts, list.ts, update.ts	Introduced five new TRPC mutations/queries: create (bulk add with encryption), decrypt (reveal secret value with permission check), delete (remove var), update (modify key/value/type with constraints), and list (fetch masked values per environment). All include Vault encryption, error handling, and workspace scoping.
TRPC Router Configuration apps/dashboard/lib/trpc/routers/index.ts, envs/list.ts (removed)	Replaced single list_dummy endpoint with new envVar sub-router containing list, create, update, decrypt, delete. Removed old dummy getEnvs procedure and sample VARIABLES data.
Configuration & Infrastructure biome.json, internal/id/src/generate.ts, apps/docs/docs.json	Expanded linting ignore patterns for generated proto files and docs. Added "evr" prefix to ID generation for environment variable IDs. Normalized docs.json pages fields to arrays.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant FE as Frontend<br/>(AddEnvVars)
    participant TRPC as TRPC<br/>(create)
    participant DB as Database
    participant Vault as Vault<br/>(Encryption)
    
    User->>FE: Paste .env content or fill form
    FE->>FE: Parse & validate entries<br/>(uppercase keys, uniqueness)
    User->>FE: Click Save
    FE->>TRPC: POST /create<br/>(envVarId, variables[])
    TRPC->>DB: Fetch environment
    TRPC->>Vault: Encrypt each value
    Vault-->>TRPC: Encrypted values
    TRPC->>DB: Insert encrypted variables
    DB-->>TRPC: Success
    TRPC-->>FE: Success response
    FE->>FE: Show toast feedback
    FE->>FE: Call onSuccess callback
    FE-->>User: Close form, invalidate cache

Loading

sequenceDiagram
    participant User
    participant FE as Frontend<br/>(EnvVarRow)
    participant TRPC as TRPC
    participant DB as Database
    participant Vault as Vault
    
    User->>FE: Click decrypt/reveal button
    FE->>TRPC: POST /decrypt<br/>(envVarId)
    TRPC->>DB: Fetch var (type check)
    alt type === writeonly
        TRPC-->>FE: Error FORBIDDEN
    else type === recoverable
        TRPC->>Vault: Decrypt value
        Vault-->>TRPC: Plaintext
    end
    TRPC-->>FE: Decrypted value
    FE->>FE: Display plaintext
    FE-->>User: Value revealed

Loading

sequenceDiagram
    participant User
    participant FE as Frontend<br/>(EnvVarForm)
    participant TRPC as TRPC<br/>(update)
    participant DB as Database
    participant Vault as Vault
    
    User->>FE: Edit value/key/type
    User->>FE: Click Save
    FE->>TRPC: POST /update<br/>(envVarId, key?, value, type)
    TRPC->>DB: Fetch existing var
    alt type changed or key changed (writeonly)
        TRPC-->>FE: Error BAD_REQUEST
    else valid update
        TRPC->>Vault: Encrypt new value
        Vault-->>TRPC: Encrypted value
        TRPC->>DB: Update record
        DB-->>TRPC: Success
    end
    TRPC-->>FE: Success/error response
    FE->>FE: Toast feedback
    FE->>FE: Call onUpdate callback
    FE-->>User: Close edit, refresh display

Loading

sequenceDiagram
    participant User
    participant FE as Frontend<br/>(EnvVarRow)
    participant TRPC as TRPC<br/>(delete)
    participant DB as Database
    
    User->>FE: Click delete button
    FE->>FE: Show loading state
    FE->>TRPC: POST /delete<br/>(envVarId)
    TRPC->>DB: Delete by id & workspace
    alt rows affected === 0
        TRPC-->>FE: Error NOT_FOUND
    else success
        DB-->>TRPC: Success
    end
    TRPC-->>FE: Response
    FE->>FE: Toast feedback
    FE->>FE: Call onDelete callback
    FE-->>User: Row removed, cache invalidated

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Key areas requiring attention:

• Encryption/decryption flow: Verify Vault integration and keyring usage are correct across create, update, and decrypt endpoints (apps/dashboard/lib/trpc/routers/deploy/env-vars/create.ts, update.ts, decrypt.ts)
• Type system changes: Ensure all references to old "env"/"secret" types are updated; validate "recoverable"/"writeonly" semantics are applied consistently in type checking and UI rendering
• Bulk import logic: Review parsing and validation of .env content, duplicate detection within the import batch, and error handling in AddEnvVars
• State management in EnvVarRow: Complex reveal/edit/decrypt state transitions with multiple loading states (isLoading, isLoadingForEdit, isDeleting) need careful review
• Cache invalidation: Verify that invalidate is called at the right points and that the hook properly refetches data after mutations
• Permission checks: Confirm decrypt prevents writeonly vars and update prevents key/type changes as intended
• tRPC endpoint integration: Ensure all five new endpoints are wired correctly in the router and accessible from frontend components

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/env-vars-dashboard-ui

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 8f019c4 and cb8ff9b.

⛔ Files ignored due to path filters (12)

• apps/dashboard/gen/proto/cache/v1/invalidation_pb.ts is excluded by !**/gen/**
• apps/dashboard/gen/proto/ctrl/v1/acme_pb.ts is excluded by !**/gen/**
• apps/dashboard/gen/proto/ctrl/v1/build_pb.ts is excluded by !**/gen/**
• apps/dashboard/gen/proto/ctrl/v1/deployment_pb.ts is excluded by !**/gen/**
• apps/dashboard/gen/proto/ctrl/v1/environment_pb.ts is excluded by !**/gen/**
• apps/dashboard/gen/proto/ctrl/v1/openapi_pb.ts is excluded by !**/gen/**
• apps/dashboard/gen/proto/ctrl/v1/project_pb.ts is excluded by !**/gen/**
• apps/dashboard/gen/proto/ctrl/v1/service_pb.ts is excluded by !**/gen/**
• apps/dashboard/gen/proto/krane/v1/deployment_pb.ts is excluded by !**/gen/**
• apps/dashboard/gen/proto/krane/v1/gateway_pb.ts is excluded by !**/gen/**
• apps/dashboard/gen/proto/vault/v1/object_pb.ts is excluded by !**/gen/**
• apps/dashboard/gen/proto/vault/v1/service_pb.ts is excluded by !**/gen/**

📒 Files selected for processing (19)

• apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/details/env-variables-section/add-env-var-row.tsx (0 hunks)
• apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/details/env-variables-section/add-env-vars.tsx (1 hunks)
• apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/details/env-variables-section/components/env-var-form.tsx (3 hunks)
• apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/details/env-variables-section/components/env-var-inputs.tsx (2 hunks)
• apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/details/env-variables-section/env-var-row.tsx (3 hunks)
• apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/details/env-variables-section/hooks/use-env-var-manager.tsx (1 hunks)
• apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/details/env-variables-section/index.tsx (4 hunks)
• apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/details/env-variables-section/types.ts (2 hunks)
• apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/page.tsx (2 hunks)
• apps/dashboard/lib/trpc/routers/deploy/env-vars/create.ts (1 hunks)
• apps/dashboard/lib/trpc/routers/deploy/env-vars/decrypt.ts (1 hunks)
• apps/dashboard/lib/trpc/routers/deploy/env-vars/delete.ts (1 hunks)
• apps/dashboard/lib/trpc/routers/deploy/env-vars/list.ts (1 hunks)
• apps/dashboard/lib/trpc/routers/deploy/env-vars/update.ts (1 hunks)
• apps/dashboard/lib/trpc/routers/deploy/envs/list.ts (0 hunks)
• apps/dashboard/lib/trpc/routers/index.ts (2 hunks)
• apps/docs/docs.json (9 hunks)
• biome.json (3 hunks)
• internal/id/src/generate.ts (1 hunks)

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Flo4604]

• fix golint issues #4477
• feat: better env var injection #4468
• remove gw from k8s manifest, add agent fix ctrl vault for certs #4463
• feat: add customer-workload service account for pod isolation #4455
• feat: inject env vars into pod spec via Krane #4454
• feat: decrypt env vars in CTRL workflow before passing to Krane #4453
• feat: dashboard UI for environment variables management #4452 👈 (View in Graphite)
• feat: add SecretsConfig proto for encrypted env vars #4451
• feat: add environment variables db schema and queries #4450
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[Flo4604]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.