Fix 5 UI issues: column visibility, avatar, description MD, label dedup, breadcrumbs#32
Conversation
… labels, breadcrumbs - Add Columns dropdown in board toolbar to toggle column visibility - Replace "?" avatar for unassigned issues with a subtle user outline icon - Replace plain description textarea with MarkdownRenderer view / RichTextEditor edit toggle - Deduplicate labels by id in both BoardPage and IssuePage - Add parent issue breadcrumb navigation in IssuePage header Co-authored-by: Cursor <cursoragent@cursor.com>
|
Warning Rate limit exceeded
You’ve run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (11)
✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request enhances the issue tracking interface by introducing a rich text editor for descriptions, breadcrumb navigation for parent issues, and a column visibility toggle on the board. It also replaces the default avatar placeholder with an SVG icon and implements label deduplication. Feedback suggests optimizing performance by wrapping the label deduplication logic in useMemo on the issue page, as well as addressing hardcoded strings and style duplication to improve maintainability and internationalization support.
| const allLabels = Array.from( | ||
| new Map((data?.issueLabels.nodes ?? []).map(l => [l.id, l])).values() | ||
| ); |
There was a problem hiding this comment.
The label deduplication logic is executed on every render. To improve performance and maintain consistency with the implementation in BoardPage.tsx, this should be wrapped in useMemo.
| const allLabels = Array.from( | |
| new Map((data?.issueLabels.nodes ?? []).map(l => [l.id, l])).values() | |
| ); | |
| const allLabels = useMemo(() => Array.from( | |
| new Map((data?.issueLabels.nodes ?? []).map(l => [l.id, l])).values() | |
| ), [data?.issueLabels.nodes]); |
| <button | ||
| type="button" | ||
| style={{ | ||
| height: 26, padding: '0 12px', fontSize: 12, fontWeight: 500, | ||
| borderRadius: 'var(--r-2)', border: '1px solid transparent', cursor: 'pointer', | ||
| background: 'var(--accent)', color: 'var(--accent-fg)', | ||
| }} | ||
| disabled={isSavingState} | ||
| onClick={() => { | ||
| setIsEditingDescription(false); | ||
| void commitDescription().catch(() => undefined); | ||
| }} | ||
| >Save</button> | ||
| <button | ||
| type="button" | ||
| style={{ | ||
| height: 26, padding: '0 12px', fontSize: 12, fontWeight: 500, | ||
| borderRadius: 'var(--r-2)', border: '1px solid var(--border)', cursor: 'pointer', | ||
| background: 'transparent', color: 'var(--fg-muted)', | ||
| }} | ||
| onClick={() => { | ||
| setDescription(issueSnapshot?.description ?? ''); | ||
| setIsEditingDescription(false); | ||
| }} | ||
| >Cancel</button> | ||
| </div> |
There was a problem hiding this comment.
There is significant duplication of inline styles for the "Save" and "Cancel" buttons. Additionally, these strings (and others in the description section like "Edit" and "Add a description…") are hardcoded. Consider extracting the shared styles into a constant or a reusable component, and moving the strings to a localization system to support internationalization.
| <details style={{ position: 'relative', fontSize: 11 }}> | ||
| <summary style={{ cursor: 'pointer', padding: '2px 8px', borderRadius: 'var(--r-1)', color: 'var(--fg-muted)' }}>Columns</summary> | ||
| <fieldset style={{ position: 'absolute', top: '100%', right: 0, zIndex: 10, background: 'var(--bg-raised)', border: '1px solid var(--border)', borderRadius: 'var(--r-2)', padding: 8, display: 'flex', flexDirection: 'column', gap: 4, minWidth: 160 }}> | ||
| {(selectedTeam?.states.nodes ?? []).map((state) => ( | ||
| <label key={state.id} style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11, cursor: 'pointer' }}> | ||
| <input type="checkbox" checked={!collapsedColumns[state.id]} onChange={() => toggleColumnCollapse(state.id)} aria-label={`Toggle ${state.name} column`} /> | ||
| {state.name} | ||
| </label> | ||
| ))} | ||
| </fieldset> | ||
| </details> |
There was a problem hiding this comment.
The new "Columns" dropdown uses hardcoded strings for the label and aria-labels. To support internationalization, these should be replaced with translation keys from the project's locale system.
… from Columns dropdown) Co-authored-by: Cursor <cursoragent@cursor.com>
…mode Co-authored-by: Cursor <cursoragent@cursor.com>
…sueDetailDrawer, fix all tests Co-authored-by: Cursor <cursoragent@cursor.com>
… fill → Save) Co-authored-by: Cursor <cursoragent@cursor.com>
1 participant
Summary
Test plan
Made with Cursor