RFC: Enhanced Variables Management UI - Grouping, Hide Values, Copy, Colors

[nguyenngothuong]

First check

• I added a descriptive title to this issue.
• I used the GitHub search to find a similar request and didn't find it.
• I searched the Prefect documentation for this feature.

Prefect Version

3.x (ui-v2)

Summary

I've built an enhanced Variables Management UI with several improvements for better usability, security, and organization. I'd like to contribute these features to Prefect and am seeking feedback before submitting PRs.

Problem Statement

When managing 50+ variables across multiple projects/environments, the current Variables UI has some limitations:

1. No quick copy: Must open edit dialog to copy values
2. Security concern: Values always visible (problematic during screen sharing)
3. Flat list only: Hard to navigate many variables without grouping
4. No visual distinction: All tags look the same, hard to scan quickly
5. No documentation: Can't add notes/descriptions to explain what variables are for

Proposed Enhancements

1. Copy Value to Clipboard

• One-click copy button in row actions
• Formats JSON values nicely
• Toast notification on success

2. Hide/Show Sensitive Values Toggle

• Values hidden by default (security best practice)
• Toggle button in toolbar to reveal when needed
• Displays •••••••••••• when hidden

3. Group by Project/Tag

• Dropdown to select grouping mode: None / By Project / By Tag
• Collapsible group headers with variable counts
• "Collapse all" / "Expand all" controls
• Project extracted from variable name prefix (e.g., marketing_config → project: marketing)

4. Color-coded Tags & Projects

• Consistent colors based on hash of name
• Same tag/project always gets same color
• Improves visual scanning and recognition

5. Notes/Description Display

• Shows notes under variable name (if present)
• Stored as _note field in value (workaround until proper description field exists)

Screenshots

Flat list view with hidden values, color-coded tags & projects, notes, and action buttons:

Grouped by Project (expanded) - showing collapsible groups with counts:

Grouped by Project (collapsed) - clean overview of all project groups:

Implementation Approach

I'm happy to contribute these as separate PRs:

Feature	Complexity	Backend Change?
Copy to clipboard	Low	No
Hide/show toggle	Low	No
Group by project	Medium	No
Color-coded tags	Low	No
Notes display	Low	No (uses _note workaround)

Related Issues

• Better text editing while editing Variable values #15359 - Better text editing while editing Variable values (my JSON editor improvements could help here too)

Questions for Maintainers

1. Are these features aligned with Prefect's roadmap for Variables UI?
2. Should I submit as one large PR or multiple small PRs?
3. For the "notes" feature - would you prefer a proper description field in the Variable schema instead of the _note workaround?
4. Any concerns about the project extraction convention (prefix-based)?

Demo

I have a working implementation deployed locally. Happy to provide a live demo or video walkthrough if helpful.

Looking forward to your feedback!