feat: dashboard UI for environment variables management #4452

Flo4604 · 2025-12-02T13:40:51Z

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

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 · 2025-12-02T13:40:56Z

⚠️ 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 · 2025-12-02T13:40:56Z

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 · 2025-12-02T13:40:57Z

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

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

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

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

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

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

Flo4604 · 2025-12-02T13:41:07Z

Flo4604 · 2025-12-02T20:14:13Z

@coderabbitai review

coderabbitai · 2025-12-02T20:14:19Z

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

* feat: add environment variables db schema and queries * fix db query * feat: add SecretsConfig proto for encrypted env vars * [autofix.ci] apply automated fixes * feat: dashboard UI for environment variables management * fix comment and rename file * fix file export name * Remove unnecessary comments from add-env-vars * add toasts for environment variable operations * [autofix.ci] apply automated fixes * fix: add try/catch error handling to env var mutations * unfmt file * [autofix.ci] apply automated fixes --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: Andreas Thomas <[email protected]>

Flo4604 mentioned this pull request Dec 2, 2025

feat: add environment variables db schema and queries #4450

Merged

19 tasks

vercel bot deployed to Preview – engineering December 2, 2025 13:41 View deployment

vercel bot deployed to Preview – dashboard December 2, 2025 13:44 View deployment

vercel bot had a problem deploying to Preview – dashboard December 2, 2025 13:58 Failure

vercel bot deployed to Preview – dashboard December 2, 2025 14:09 View deployment

Flo4604 force-pushed the feat/env-vars-dashboard-ui branch from dff1739 to 326ba6e Compare December 2, 2025 14:13

vercel bot deployed to Preview – dashboard December 2, 2025 14:17 View deployment

Flo4604 force-pushed the feat/env-vars-dashboard-ui branch from 326ba6e to a049700 Compare December 2, 2025 14:42

vercel bot deployed to Preview – dashboard December 2, 2025 14:45 View deployment

Flo4604 marked this pull request as ready for review December 2, 2025 15:47

Flo4604 requested review from MichaelUnkey, chronark, mcstepp, ogzhanolguncu and perkinsjr as code owners December 2, 2025 15:47

vercel bot deployed to Preview – dashboard December 2, 2025 15:50 View deployment

Flo4604 force-pushed the feat/env-vars-dashboard-ui branch from 7a7836a to 44cc88f Compare December 2, 2025 15:53

vercel bot deployed to Preview – dashboard December 2, 2025 15:54 View deployment

vercel bot deployed to Preview – dashboard December 2, 2025 15:56 View deployment

Flo4604 force-pushed the feat/env-vars-dashboard-ui branch from 4a639b2 to f14619c Compare December 2, 2025 20:14

vercel bot deployed to Preview – engineering December 4, 2025 09:52 View deployment

vercel bot deployed to Preview – dashboard December 4, 2025 09:52 View deployment

Flo4604 and others added 13 commits December 4, 2025 18:36

feat: add environment variables db schema and queries

405ea48

fix db query

5b0249e

feat: add SecretsConfig proto for encrypted env vars

60f228c

[autofix.ci] apply automated fixes

ac29218

feat: dashboard UI for environment variables management

d89e495

fix comment and rename file

117e0d4

fix file export name

8cd90b5

Remove unnecessary comments from add-env-vars

34ddff9

add toasts for environment variable operations

4f6534d

[autofix.ci] apply automated fixes

64d9bd6

fix: add try/catch error handling to env var mutations

d00a162

unfmt file

d4c4f50

[autofix.ci] apply automated fixes

8d1c219

Flo4604 force-pushed the feat/env-vars-secrets-proto branch from 849b2de to ac29218 Compare December 4, 2025 17:36

Flo4604 force-pushed the feat/env-vars-dashboard-ui branch from 203e039 to 8d1c219 Compare December 4, 2025 17:36

vercel bot deployed to Preview – engineering December 4, 2025 17:37 View deployment

vercel bot deployed to Preview – dashboard December 4, 2025 17:40 View deployment

Flo4604 mentioned this pull request Dec 4, 2025

fix golint issues #4477

Merged

19 tasks

Base automatically changed from feat/env-vars-secrets-proto to main December 9, 2025 16:11

chronark requested a review from imeyer as a code owner December 9, 2025 16:11

Merge branch 'main' into feat/env-vars-dashboard-ui

cb8ff9b

chronark approved these changes Dec 9, 2025

View reviewed changes

chronark merged commit b358cbf into main Dec 9, 2025
19 of 23 checks passed

chronark deleted the feat/env-vars-dashboard-ui branch December 9, 2025 16:13

vercel bot had a problem deploying to Preview – dashboard December 9, 2025 16:15 Failure

coderabbitai bot mentioned this pull request Dec 9, 2025

feat: update identities list styling #4480

Merged

19 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: dashboard UI for environment variables management #4452

feat: dashboard UI for environment variables management #4452

Uh oh!

Flo4604 commented Dec 2, 2025 •

edited

Loading

Uh oh!

changeset-bot bot commented Dec 2, 2025 •

edited

Loading

Uh oh!

vercel bot commented Dec 2, 2025 •

edited

Loading

Uh oh!

coderabbitai bot commented Dec 2, 2025 •

edited

Loading

Review failed

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Uh oh!

Flo4604 commented Dec 2, 2025 •

edited

Loading

Uh oh!

Flo4604 commented Dec 2, 2025

Uh oh!

coderabbitai bot commented Dec 2, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

feat: dashboard UI for environment variables management #4452

feat: dashboard UI for environment variables management #4452

Uh oh!

Conversation

Flo4604 commented Dec 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What does this PR do?

Type of change

How should this be tested?

Checklist

Required

Appreciated

Uh oh!

changeset-bot bot commented Dec 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

vercel bot commented Dec 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot commented Dec 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review failed

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Uh oh!

Flo4604 commented Dec 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Flo4604 commented Dec 2, 2025

Uh oh!

coderabbitai bot commented Dec 2, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Flo4604 commented Dec 2, 2025 •

edited

Loading

changeset-bot bot commented Dec 2, 2025 •

edited

Loading

vercel bot commented Dec 2, 2025 •

edited

Loading

coderabbitai bot commented Dec 2, 2025 •

edited

Loading

Flo4604 commented Dec 2, 2025 •

edited

Loading