feat(frontend): T-219 TaskCreationWizard 3-step Radix Dialog + n shortcut (closes #87)#113
Merged
Merged
Conversation
…tcut (closes #87) 3-step modal wiring the Backlog "+ Add task" button and global `n` keydown to `invokeTasksCreate` -> `useTaskStore.upsertTask` with submit-token race guards, mid-flight close adoption, and per-step a11y live announcements. Wizard: title (autofocus, inline validation, maxLength 200) -> body (plain textarea, maxLength 65535) -> review (project/title/body summary) -> Create. ESC + backdrop + close button reset the form; Back is disabled during in-flight submit. Closing mid-flight reconciles a late backend-success via upsertTask + info toast (no orphan tasks). Global `n` listener guards INPUT/TEXTAREA/SELECT/contentEditable + modifier keys and bails when no project is selected. KanbanColumn gains an optional `onAddTask` prop only the Backlog phase consumes. i18n keys mirrored en/fr under `kanban.wizard.*`. 15 new vitest cases cover all 3 steps, validation, IPC success + rejection, ESC, no-project gate, background-success reconciliation, the `n` shortcut paths, and the Backlog-button wiring.
Qodo reviews are paused for this user.Troubleshooting steps vary by plan Learn more → On a Teams plan? Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center? |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (2)
📝 WalkthroughWalkthroughThis PR introduces a multi-step TaskCreationWizard component for creating Kanban tasks. The wizard is opened via keyboard shortcut (n key) or Backlog button, guides users through title/body/review steps with validation and error handling, and submits task creation via IPC with proper store updates and toast notifications. KanbanBoard and KanbanColumn are extended to support this flow, with comprehensive test coverage and i18n localization. ChangesKanban Task Creation Wizard
Sequence DiagramsequenceDiagram
participant User
participant KanbanBoard
participant TaskCreationWizard
participant invokeTasksCreate as IPC_invokeTasksCreate
participant useTaskStore
participant useToastStore
User->>KanbanBoard: press "n" or click Backlog "+ Add task"
KanbanBoard->>TaskCreationWizard: open dialog (open prop)
User->>TaskCreationWizard: enter title/body and click Create
TaskCreationWizard->>IPC_invokeTasksCreate: send create request
IPC_invokeTasksCreate-->>TaskCreationWizard: return result
TaskCreationWizard->>useTaskStore: upsert created task
TaskCreationWizard->>useToastStore: show toast (success/error/info)
TaskCreationWizard->>KanbanBoard: close dialog (on success)
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
Contributor
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/features/kanban/components/KanbanBoard.tsx`:
- Around line 32-39: The shortcut check in shouldOpenWizard currently compares
event.key (and SHORTCUT_KEY), which fails under Caps Lock or Shift; change the
primary key check to use the physical key via event.code === "KeyN" (keep the
existing modifier checks for ctrl/meta/alt and the editable-target guard
isEditableTarget(event.target)) and remove or deprecate the
event.key/SHORTCUT_KEY comparison so the n shortcut consistently triggers
regardless of case.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 6280fe74-8070-4c28-9c1a-dd495b0085eb
📒 Files selected for processing (9)
CHANGELOG.mdsrc/features/kanban/components/KanbanBoard.test.tsxsrc/features/kanban/components/KanbanBoard.tsxsrc/features/kanban/components/KanbanColumn.test.tsxsrc/features/kanban/components/KanbanColumn.tsxsrc/features/kanban/components/TaskCreationWizard.test.tsxsrc/features/kanban/components/TaskCreationWizard.tsxsrc/shared/i18n/locales/en.jsonsrc/shared/i18n/locales/fr.json
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 7508d2f361
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
…iew) CodeRabbit + Codex independently flagged `event.key !== "n"` as missing the Caps-Lock-on (`"N"`) and Shift-held (`"N"`) cases. Compare against `event.key.toLowerCase()` so the shortcut keeps firing. `toLowerCase()` preferred over `event.code === "KeyN"` to stay correct under non-QWERTY layouts (Dvorak / AZERTY users typing `n` still emit `event.key === "n"` regardless of physical position). Regression test pins the uppercase-N path; existing Ctrl+n no-op test stays green because the modifier check runs after the key check.
11 tasks
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
1 participant
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
TaskCreationWizard.tsx) for creating tasks, wired to the Backlog+ Add taskbutton and a globalnkeyboard shortcut.invokeTasksCreate->useTaskStore.upsertTask-> close, with submit-token race guards and background-success reconciliation so closing the dialog mid-flight no longer drops a backend-created task.Closes #87 (T-219).
Why
Sprint 2 §21 (T-219, story points 5) gates task creation UX. Backlog column shipped in T-216 with a non-wired
+ Add taskbutton andApp.tsxalready advertises thenshortcut hint — this PR closes both gaps and unblocks any subsequent task-editing work.Changes
New files
src/features/kanban/components/TaskCreationWizard.tsx— 3-step Radix Dialog: title (autoFocus, inline validation,maxLength=200), body (plain<textarea>,maxLength=65535, helper line notes CodeMirror lands in F-066/F-086), review summary with project name resolution.useTaskCreationFormhook owns form state + submission orchestration; module-levelstepAdvance/stepBack/finalizeSubmit/applySubmitSuccess/applySubmitFailure/reconcileBackgroundSuccesskeep the hook undermax-statements: 10.useFormSubmitRefsmemoizes the ref bundle souseResetFormOnClose'suseEffectdeps are actually stable. ThesubmitTokenRef+submittingRefpattern (T-215 precedent) keeps races safe; closing while in flight bumps the token, lateresult.oklands viareconcileBackgroundSuccess->upsertTask+infotoast.src/features/kanban/components/TaskCreationWizard.test.tsx— 12 cases: initial render + autofocus, empty/cleared title validation, full 3-step walk, Back/Next state preservation, submission payload +upsertTask+ close, empty-body ->nullmapping, IPC rejection -> error + error toast + dialog stays, ESC closes, no-project disables Create + shows hint, background success reconciliation via adeferTaskCreation()deferred-promise helper.Modified
src/features/kanban/components/KanbanBoard.tsx— lifts wizard state, attachesdocumentkeydownlistener (n, no modifiers, target not in INPUT/TEXTAREA/SELECT/contentEditable, project selected), passesonAddTaskonly to Backlog column, mounts<TaskCreationWizard>insideDndContext.src/features/kanban/components/KanbanColumn.tsx— optionalonAddTask?: () => voidprop wired to the existing Backlog+ Add taskbutton.src/features/kanban/components/KanbanBoard.test.tsx— +5 cases (n opens / n-in-input no-op / Ctrl+n no-op / no-project no-op / Backlog button opens). Wizarddescribeplaced AFTER snapshots so the dnd-kit global id counter doesn't drift the existing snapshot files.src/features/kanban/components/KanbanColumn.test.tsx— +1 case asserting the Backlog button callsonAddTask.src/shared/i18n/locales/{en,fr}.json—kanban.wizard.*keys mirrored byte-identical (title, description, step_label, step_title.{label,placeholder,error_empty,error_too_long}, step_body.{label,placeholder,helper}, step_review.{label,no_project,no_body,title_label,body_label,project_label}, button.{back,next,create,cancel}, error.create_failed, toast.{create_failed_title,background_created_title}).CHANGELOG.md—[Unreleased] / Addedentry with full implementation rationale and adversarial-review resolution log.A11y
<p aria-live=\"polite\" aria-atomic=\"true\" className=\"sr-only\">echoing the step label so screen readers announce step transitions (DialogDescription only fires on initial mount).role=\"alert\"on validation/error messages (wizard-title-error,wizard-review-error— disambiguated per adversarial review).aria-describedby+aria-invalidon the title input.aria-busy={submitting}on the form during in-flight IPC.Dialogprimitive.Test plan
pnpm exec vitest run272/272 pass (was 257 pre-T-219, +15 cases).pnpm exec oxlint . --max-warnings=0clean.pnpm exec tsc -bclean.pnpm exec oxfmt --check .clean.pnpm exec knipclean.n-> wizard opens; type a title + body -> Create -> card appears in Backlog.+ Add taskon Backlog -> wizard opens.nwhile typing in another<input>-> wizard does NOT open.Adversarial review resolutions
Multi-agent code review (security / logic / clean-code+a11y+perf) flagged 13 items; 10 resolved in this PR, 1 rejected (the
JSON.parse(\"null\")workaround is required —unicorn/no-nullis active via oxlint'sstyle: warncategory gated by CI--max-warnings=0), 2 deferred as subjective (function naming +SubmitArgscomposition vs inheritance). Full log inCHANGELOG.md.Out of scope
n; F-086 may revisit).Summary by CodeRabbit
New Features
Bug Fixes
Tests
Documentation