feat(work-items): replace direction toggle with sentence builder dependency UX#137
Merged
Conversation
…ndency UX Replace the segmented direction toggle + type dropdown with a natural-language "sentence builder" approach: [Picker] must [finish▾] before [Picker] can [start▾]. New components: - DependencySentenceBuilder/dependencyVerbs.ts — verb↔DependencyType mapping + THIS_ITEM_ID sentinel - DependencySentenceBuilder.tsx — sentence builder UI with two WorkItemPickers + verb selects - DependencySentenceDisplay.tsx — groups existing deps by type/direction into readable sentences - DependencySentenceBuilder/index.ts — barrel export WorkItemPicker extended with: - specialOptions prop — renders "This item" at top of dropdown with italic styling - showItemsOnFocus prop — opens dropdown with initial results on focus without typing WorkItemDetailPage/WorkItemCreatePage refactored to use sentence builder. WorkItemDetailPage.test.tsx updated for new dependency display (3 trivial label fixes). All 1072 tests pass. Lint and format clean. TypeScript strict mode clean. Co-Authored-By: Claude frontend-developer (Sonnet 4.5) <noreply@anthropic.com>
Co-Authored-By: Claude frontend-developer (Sonnet 4.5) <noreply@anthropic.com>
…ents Add 70 new tests covering the sentence-builder dependency UX redesign: - dependencyVerbs.test.ts: 13 unit tests for verbsToDependencyType and dependencyTypeToVerbs including all 4 combinations and round-trip verification - DependencySentenceDisplay.test.tsx: 21 component tests covering empty state, all 4 dependency type group headers, predecessor/successor grouping, delete callbacks, mixed display, and custom thisItemLabel - DependencySentenceBuilder.test.tsx: 17 integration tests for the interactive form — default state, verb selects, onAdd callback, form reset, "This item" mutual exclusion, disabled state - WorkItemPicker.test.tsx: 13 component tests for new specialOptions and showItemsOnFocus props, plus backward compatibility, divider rendering, excludeIds filtering, and error handling - WorkItemDetailPage.test.tsx: extended with 4 new dependency section tests verifying sentence builder is rendered and old direction toggle is absent - WorkItemCreatePage.test.tsx: extended with 3 new dependency section tests including pending dependency sentence format verification Total test count: 1142 (up from 1072) Co-Authored-By: Claude qa-integration-tester (Sonnet 4.5) <noreply@anthropic.com>
Contributor
|
🎉 This PR is included in version 1.8.0-beta.27 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
Contributor
|
🎉 This PR is included in version 1.8.0 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
DependencySentenceBuilderandDependencySentenceDisplayas a new reusable component family underclient/src/components/DependencySentenceBuilder/WorkItemPickerwithspecialOptions(e.g. "This item" with italic styling) andshowItemsOnFocusprops — fully backward compatibleWorkItemDetailPageandWorkItemCreatePageto use the new sentence builder; removes all direction toggle and type dropdown codeTHIS_ITEM_IDsentinel allows the create-page builder to represent the not-yet-created item before submission, then replaces it with the real ID when making API callsChanges
New files
client/src/components/DependencySentenceBuilder/dependencyVerbs.ts— pure verb↔DependencyType mapping utilities +THIS_ITEM_IDsentinelclient/src/components/DependencySentenceBuilder/DependencySentenceBuilder.tsx+.module.css— interactive sentence builder UIclient/src/components/DependencySentenceBuilder/DependencySentenceDisplay.tsx+.module.css— groups existing dependencies into readable sentence groupsclient/src/components/DependencySentenceBuilder/index.ts— barrel exportModified files
client/src/components/WorkItemPicker/WorkItemPicker.tsx— addsspecialOptions+showItemsOnFocusprops;selectedTitleSpecialitalic styling for sentinel displayclient/src/components/WorkItemPicker/WorkItemPicker.module.css—.specialOption,.optionsDivider,.selectedTitleSpecialstylesclient/src/pages/WorkItemDetailPage/WorkItemDetailPage.tsx— dependency section replaced; delete confirmation modal for single dependency;handleAddDependencytakes{ predecessorId, successorId, dependencyType }client/src/pages/WorkItemDetailPage/WorkItemDetailPage.module.css— old direction toggle and dependency select styles removed;.addDependencySectionaddedclient/src/pages/WorkItemDetailPage/WorkItemDetailPage.test.tsx— 3 trivial label fixes (title selector, empty state text, group header text) caused by new UIclient/src/pages/WorkItemCreatePage/WorkItemCreatePage.tsx— PendingDependency interface updated; pending chips show natural-language sentencesclient/src/pages/WorkItemCreatePage/WorkItemCreatePage.module.css— removed old toggle/type/chip styles; added.chipSentenceTest plan
npm test -- --maxWorkers=2)npm run lint— 0 errorsnpm run format:check— all cleannpm run typecheck— all workspaces clean🤖 Generated with Claude Code