Skip to content

fix(secrets): display plain text labels in scope dropdown trigger#2296

Merged
malinskibeniamin merged 6 commits intomasterfrom
fix/ux-964-scope-dropdown
Mar 13, 2026
Merged

fix(secrets): display plain text labels in scope dropdown trigger#2296
malinskibeniamin merged 6 commits intomasterfrom
fix/ux-964-scope-dropdown

Conversation

@malinskibeniamin
Copy link
Contributor

@malinskibeniamin malinskibeniamin commented Mar 12, 2026

Summary

  • Changed SCOPE_OPTIONS to use plain string label values instead of JSX with icons
  • Icons are now rendered only in dropdown items (as children), not in the trigger tags
  • Fixes horizontal scrollbar and raw enum number display in the MultiSelect trigger

Test plan

  • Open Secrets Store → Create Secret → verify scope dropdown shows text labels like "AI Gateway" in trigger tags
  • Verify dropdown items still show icons alongside text
  • Open Secrets Store → Edit Secret → verify same behavior
  • Verify no horizontal scrollbar in the trigger area

Fixes UX-964

🤖 Generated with Claude Code

@malinskibeniamin malinskibeniamin added frontend ui/ux bug Something isn't working labels Mar 12, 2026
@malinskibeniamin malinskibeniamin self-assigned this Mar 12, 2026
malinskibeniamin and others added 3 commits March 12, 2026 17:50
Replace useStore(useApiStore, ...) with useApiStoreHook(...) in license
notification components. Passing a hook as a value argument to another
hook violates React Compiler rules. useApiStoreHook is an existing
wrapper that encapsulates the same call pattern.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The MultiSelect trigger was rendering JSX labels with icons, causing
overflow and readability issues. Split SCOPE_OPTIONS into string labels
for the trigger and JSX children with icons for the dropdown items.

Fixes UX-964

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@malinskibeniamin malinskibeniamin force-pushed the fix/ux-964-scope-dropdown branch from f38ba4b to dcd1de0 Compare March 12, 2026 16:59
malinskibeniamin and others added 3 commits March 12, 2026 22:30
Verify that MultiSelect trigger displays plain text labels like
"AI Gateway" instead of raw enum numbers.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace overflow-x-scroll with overflow-x-hidden on MultiSelectValue
to prevent horizontal scrollbar in the trigger area.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The MultiSelect trigger displayed raw numeric enum values instead of
labels when the form had pre-selected values (e.g. secrets create page).
The itemCache is a non-reactive ref that only gets populated after
MultiSelectItem mounts via useEffect — too late for the first render.

Add an optional `items` prop to MultiSelect that seeds the cache at
initialization, ensuring labels are available from the first render.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@malinskibeniamin malinskibeniamin merged commit 64a620d into master Mar 13, 2026
14 checks passed
@malinskibeniamin malinskibeniamin deleted the fix/ux-964-scope-dropdown branch March 13, 2026 09:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working frontend ui/ux

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants