-
[OPIK-3669] [FE] Fix annotation button labels based on item completion status (#4606)
frostbyte_neo 发布于
2026-01-14 16:00:23 +00:00 -
[OPIK-3669] [FE] Fix annotation button labels based on item completion status
-
Revision 2: Fix button label logic and add comprehensive tests
- Fix button label to check for cached unsaved changes before showing Submit & complete
- Add hasCachedUnsavedChanges to SMEFlowContext to track items with unsaved changes
- Add comprehensive unit tests (13 test cases) covering all button label scenarios
- Address PR comment: Add regression tests to prevent future button label bugs
- Revision 3: Simplify button label logic and improve clarity
- Remove unnecessary hasCachedUnsavedChanges check (redundant with unprocessedItems.length)
- Use both isLastUnprocessedItem and unprocessedItems.length === 1 for clarity and safety
- Add comprehensive comments explaining when current item is/isn't in unprocessedItems
- Update tests to reflect simplified logic (15 tests passing)
Key insight: Items with cached unsaved changes are still counted as unprocessed,
so unprocessedItems.length naturally accounts for them without needing a separate check.- Revision 4: Remove redundant isLastUnprocessedItem check
The check was redundant because:
- If unprocessedItems.length === 1 and we're viewing an unprocessed item
- Then that item MUST be the last (and only) unprocessed item
- So isLastUnprocessedItem would automatically be true
This simplifies the logic while maintaining correctness.
- Revision 5: Remove unused isLastUnprocessedItem
Removed isLastUnprocessedItem because:
- It only checks position in the unprocessed list, not the total count
- We need to know if there's only 1 unprocessed item (for Submit & complete)
- unprocessedItems.length === 1 is the correct check for this purpose
- isLastUnprocessedItem was not used anywhere else in the codebase
This simplifies the code and removes a potentially confusing variable.
- Revision 6: Update completed item UI per Figma design
- Remove 'Item completed' state - always show 'Update & next' or 'Update & complete'
- Change counter from 'X of Y' to 'X/Y' showing processed/total count
- Add check icon to counter when viewing a completed item
- Make counter green (special-button) when viewing a completed item
- Add check icon to button when viewing completed item with no changes
- Update tests to reflect new UI (16 tests passing)
- Revision 7: Fix button width expansion issue
- Add min-w-[200px] to submit button to prevent width changes when text changes
- Update test to check for text-[var(--special-button)] instead of text-success
- All 16 tests passing
- Revision 8: Use cn utility for className composition
- Import cn from @/lib/utils
- Replace template literal with cn() for better className management
- All 16 tests passing
- Revision 9: Fix button layout to prevent hotkey shift
- Change from w-[200px] justify-between to min-w-[200px]
- Add flex-1 text-left to button label span to keep text left-aligned
- Restore ml-2 on HotkeyDisplay for proper spacing
- Prevents hotkey from moving when text changes between Submit/Update
- Update tests to find button element via closest()
- All 16 tests passing
- Revision 10: Reduce button width from 200px to 180px
- Change min-w-[200px] to w-[180px] for more compact button
- Still prevents hotkey shift when text changes
- All 16 tests passing
- Revision 11: Change button labels from & to + per Figma design
- Update all button labels to use + instead of &:
- Submit & next → Submit + next
- Submit & complete → Submit + complete
- Update & next → Update + next
- Update & complete → Update + complete
- Update all 16 tests to match new labels
- All tests passing
- Revision 12: Add shrink-0 to HotkeyDisplay to prevent width changes
- Add shrink-0 class to HotkeyDisplay to maintain fixed width
- Prevents hotkey component from shrinking when button text changes
- Ensures consistent hotkey display width regardless of label length
- All 16 tests passing
- Revision 13: Use justify-between for proper button layout
- Change button layout to use justify-between
- Text stays on the left edge, hotkey stays on the right edge
- Remove span wrapper and flex-1/shrink-0 classes
- Fixed width w-[180px] ensures consistent button size
- Hotkey position no longer shifts when text changes
- All 16 tests passing
- Revision 14: Use consistent gap instead of justify-between
- Remove fixed width and justify-between from button
- Use ml-2 (8px) for consistent gap between text and hotkey
- Button naturally resizes based on content
- Gap between text and hotkey is always consistent (8px)
- Matches Figma design with 8px gap
- All 16 tests passing
- Revision 15: Show current item number instead of processed count
- Change counter from processedCount/totalCount to (currentIndex+1)/totalCount
- Shows which item user is currently viewing (e.g., '2/3' for second item)
- Remove unused processedCount from component destructuring
- Update tests to reflect new counter format
- All 16 tests passing
- Revision 16: Use queueItems.length instead of totalCount
- Remove totalCount from context destructuring
- Use queueItems.length directly (DRY - totalCount was just queueItems.length)
- Clearer intent and reduces context surface area
- All 16 tests passing
- Revision 17: Change counter format from '1/3' to '1 of 3'
- Revert to original 'X of Y' format for counter display
- Update tests to match new format
- All 16 tests passing
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
下载附件
-