Repository navigation
feat: per-group label pulldowns and named label chips - #1
Conversation
Work item creation now renders one dropdown per label group (a top-level label that has children), plus a final "Labels" dropdown for ungrouped labels. Each dropdown owns only its own label ids, so a selection in one group never clobbers another. Labels created from inside a group dropdown are created as children of that group. Displays that previously collapsed to "N Labels" now render the actual label chips (name + colour dot) with a "+N" overflow chip; the full list stays in the tooltip. - select/base.tsx: add `placeholder` and `flat` props, extract LabelOption - select/dropdown.tsx: build group/ungrouped scopes, fetch labels on mount - ui/labels-list.tsx, issues/label.tsx, issue-layouts/properties/labels.tsx, space properties/labels.tsx: render names instead of a count Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01T68HuqHfZwiS1BuA4injJN
|
React Doctor found 5 new issues in 2 files · 5 warnings · score 91 / 100 (Great) · 3 fixed · vs 5 warnings
Reviewed by React Doctor for commit |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| }: LabelSummaryProps) { | ||
| const { t } = useTranslation(); | ||
| // labels the work item actually has, in project order | ||
| const selectedLabels = projectLabels?.filter((l) => value.includes(l?.id)) ?? []; |
There was a problem hiding this comment.
React Doctor · react-doctor/js-set-map-lookups (warning)
This scales poorly because array.includes() inside a loop scans the whole list every time. Use a Set for constant-time lookups.
Fix → Use a Set or Map when you check for the same items over and over. Array.includes/find scans the whole list each time
| // A "group" is a label that has children. Its children are the selectable options. | ||
| // Everything else with no parent is a plain, ungrouped label. | ||
| const labels = (projectLabelIds ?? []).map((id) => getLabelById(id)).filter((l): l is IIssueLabel => !!l); | ||
| const groups = labels |
There was a problem hiding this comment.
React Doctor · react-doctor/js-combine-iterations (warning)
This loops over your list twice because .filter().map() makes two passes, so do it in one pass with .reduce() or a for...of loop
Fix → Combine .map().filter() style chains into one pass with .reduce() or a for...of loop, so you only loop over the list once
| .filter((l) => !l.parent && labels.some((child) => child.parent === l.id)) | ||
| .map((group) => ({ | ||
| group, | ||
| childIds: labels.filter((child) => child.parent === group.id).map((child) => child.id), |
There was a problem hiding this comment.
React Doctor · react-doctor/js-combine-iterations (warning)
This loops over your list twice because .filter().map() makes two passes, so do it in one pass with .reduce() or a for...of loop
Fix → Combine .map().filter() style chains into one pass with .reduce() or a for...of loop, so you only loop over the list once
| childIds: labels.filter((child) => child.parent === group.id).map((child) => child.id), | ||
| })); | ||
| const groupIds = new Set(groups.map((g) => g.group.id)); | ||
| const ungroupedLabelIds = labels.filter((l) => !l.parent && !groupIds.has(l.id)).map((l) => l.id); |
There was a problem hiding this comment.
React Doctor · react-doctor/js-combine-iterations (warning)
This loops over your list twice because .filter().map() makes two passes, so do it in one pass with .reduce() or a for...of loop
Fix → Combine .map().filter() style chains into one pass with .reduce() or a for...of loop, so you only loop over the list once
1 participant
Description
Two changes to how labels are picked and shown.
1. One pulldown per label group when creating a work item
Plane already models a "label group" as a top-level label that has children (
parentpoints at the group). Previously the work item form had a single Labels dropdown that listed every label with group headers inside it.Now
IssueLabelSelectrenders:Implementation notes:
onChangestrips just those ids from the value and appends the new ones, so a selection in one group can never clobber another group's picks (or a label that isn't in the project list).WorkItemLabelSelectBasegained aflatprop (render options as one plain list, no group headers) and aplaceholderprop (button text when empty). The option JSX was extracted into aLabelOptioncomponent so both modes share it.parentto that group.2. Displays show label names, not "N Labels"
Several places collapsed to a
2 Labels/3 Labelspill once there were more labels thanmaxRender. They now render the actual label chips (colour dot + name, truncated) followed by a+Noverflow chip. The full comma-separated list is still in the tooltip.Files:
ui/labels-list.tsx,issues/label.tsx,webissue-layouts/properties/labels.tsx,spaceissue-layouts/properties/labels.tsx.Also added two file-level
oxlint-disablecomments inselect/base.tsxfor pre-existingjsx_a11ywarnings on the Combobox wrapper and the "add label"<p onClick>— these already existed in the file and the pre-commit hook runs with--deny-warnings.Type of Change
Screenshots and Media (if applicable)
Test Scenarios
Verified:
tsc --noEmitandoxlint --deny-warningspass on all touched files. Not yet exercised in a running app — the scenarios below still need a manual pass.+Nchip rather than "4 Labels"; hover to confirm the tooltip lists all of them.References
No linked work item.
🤖 Generated with Claude Code
https://claude.ai/code/session_01T68HuqHfZwiS1BuA4injJN