feat(work-items): redesign dependency management UX with direction toggle#131
Merged
Conversation
…ggle
Redesign the dependency management UI on both WorkItemDetailPage and
WorkItemCreatePage to make it clearer whether you are adding a dependency
that this item depends on vs. one it blocks.
WorkItemDetailPage:
- Rename "Predecessors (Blocking This)" → "Depends On"
- Rename "Successors (Blocked By This)" → "Blocks"
- Add segmented direction toggle ("This item depends on" / "This item blocks")
with aria-pressed and role="group" for accessibility
- Add delete (×) button to successor items (previously read-only)
- Update deletingDependency state to typed object with direction-aware
confirmation modal text
- Add dependency type description help text below the type dropdown
- Exclude both predecessors and successors from WorkItemPicker's excludeIds
- Handle 409 conflicts with specific error message
WorkItemCreatePage:
- Add full Dependencies section with direction toggle, WorkItemPicker,
type dropdown with help text, and "Add to list" button
- Pending dependency chips show direction pill (blue "depends on" /
red "blocks"), title, type label, and remove button
- Dependencies created sequentially after work item is saved; partial
failures navigate to detail page with a depError query param
- No backend changes required; direction is handled by swapping
predecessor/successor IDs in the API calls
WorkItemPicker:
- Add optional onSelectItem prop that fires with { id, title } alongside
the existing onChange(id) callback (non-breaking addition)
Fixes trivial test breaks caused by label renames (QA-owned test files
updated inline per project convention for label-change breakages).
Co-Authored-By: Claude frontend-developer (Sonnet 4.5) <noreply@anthropic.com>
Contributor
|
🎉 This PR is included in version 1.8.0-beta.23 🎉 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
onSelectItemprop that returns{ id, title }alongside the existingonChange(id)— non-breaking additionNo backend changes. Direction is handled by swapping predecessor/successor IDs in existing API calls (
createDependency(successorId, { predecessorId })for "depends on" andcreateDependency(pickedItemId, { predecessorId: currentItemId })for "blocks").Changed Files
client/src/components/WorkItemPicker/WorkItemPicker.tsx— optionalonSelectItempropclient/src/pages/WorkItemDetailPage/WorkItemDetailPage.tsx— full redesignclient/src/pages/WorkItemDetailPage/WorkItemDetailPage.module.css— direction toggle + help text stylesclient/src/pages/WorkItemDetailPage/WorkItemDetailPage.test.tsx— trivial label text fixesclient/src/pages/WorkItemCreatePage/WorkItemCreatePage.tsx— new Dependencies sectionclient/src/pages/WorkItemCreatePage/WorkItemCreatePage.module.css— new styles for chips, toggle, pillsclient/src/pages/WorkItemCreatePage/WorkItemCreatePage.test.tsx— added missing mocks for new importsTest plan
npm test -- --testPathPatterns="client/src")npm run lintpasses (0 errors)npm run format:checkpassesnpm run typecheckpasses🤖 Generated with Claude Code