Skip to content

feat(tasks): align Task edit UI's AC editor with Task Draft#299

Merged
ChenNima merged 1 commit into
developfrom
feat/align-task-edit-ui-with-draft
Jun 8, 2026
Merged

feat(tasks): align Task edit UI's AC editor with Task Draft#299
ChenNima merged 1 commit into
developfrom
feat/align-task-edit-ui-with-draft

Conversation

@ChenNima

@ChenNima ChenNima commented Jun 7, 2026

Copy link
Copy Markdown
Contributor

Summary

The real Task edit form rendered acceptance criteria as a legacy Markdown <Textarea>, while the Task Draft panel used a structured-rows editor (one row per item with a required toggle). Every other editable field on the form was already aligned with the draft panel — only the AC editor had drifted.

This PR closes that gap:

  • Extracts the structured AC editor into a shared controlled component so the draft panel and the real-task panel render identical UI by construction (they can no longer drift).
  • Persists real-task AC edits through the existing replaceAcceptanceCriteria service via a small extension to updateTaskFieldsAction — no new service, REST endpoint, or schema change.
  • Uses client-side change detection so editing a non-AC field (title, description, priority, storyPoints) does not trigger the destructive replace — existing dev/admin verification marks survive.
  • Empty-clear guard: if a user wipes all criteria, the form blocks Save with the existing required-AC i18n message rather than letting the server throw.

OpenSpec change align-task-edit-ui-with-draft is included and archived in this PR.

Changed files

File Change
src/components/acceptance-criteria-editor.tsx New. Shared controlled AcceptanceCriteriaEditor + AcceptanceCriteriaItemDraft type + acCriteriaChanged(original, edited) change-detection helper.
src/components/__tests__/acceptance-criteria-editor.test.ts New. 12 unit tests for acCriteriaChanged: identical, whitespace-only, length, description text, required flip, mid-list flip, reorder, add/remove, empty↔populated.
src/app/(dashboard)/projects/[uuid]/proposals/[proposalUuid]/task-draft-detail-panel.tsx Replaces ~60 lines of inline AC editor JSX with <AcceptanceCriteriaEditor>. Behavior preserved (empty-row filtering on save remains in handleSave).
src/app/(dashboard)/projects/[uuid]/tasks/task-detail-panel.tsx Removes legacy <Textarea> + editAcceptanceCriteria string state. Adds editCriteriaItems seeded from task.acceptanceCriteriaItems, mounts the shared editor, and conditionally spreads acceptanceCriteriaItems into updateTaskFieldsAction only when acCriteriaChanged is true. Empty-set guard short-circuits with the i18n required-AC message.
src/app/(dashboard)/projects/[uuid]/tasks/[taskUuid]/actions.ts Extends UpdateTaskFieldsInput with optional acceptanceCriteriaItems. After updateTask(...), when the field is provided (!== undefined) routes it to replaceAcceptanceCriteria. Auth/scoping/error-handling preserved; required-AC error surfaced verbatim.
messages/en.json, messages/zh.json Adds acceptanceCriteria.atLeastOneRequired for the empty-clear inline error in both locales.
openspec/changes/archive/2026-06-07-align-task-edit-ui-with-draft/ OpenSpec change archive (proposal/design/spec/tasks).
openspec/specs/task-edit-ui/spec.md New long-term spec for the task-edit-ui capability, emitted by openspec archive.

Test plan

  • npx tsc --noEmit → exit 0
  • pnpm test -- src/components/__tests__/acceptance-criteria-editor.test.ts → 12/12 pass
  • npx eslint on the touched files → exit 0 (warnings only, all pre-existing)
  • Manual: open a task with passed-AC and edit the title — verify Save preserves the green AC marks
  • Manual: open a task and add/edit/remove a criterion — verify Save replaces the set and resets verification marks
  • Manual: open a task, delete every criterion in the editor, click Save — verify the inline "at least one acceptance criterion required" message appears and no server call is made
  • Manual: confirm the draft panel's AC editor still works identically

Out of scope / follow-ups

  • docs/design.pen update for the new Task panel AC editor — Pencil MCP bridge to VS Code was unreachable during this work; will be picked up in a small follow-up once Pencil connectivity is restored.
  • Removing the legacy task.acceptanceCriteria Markdown column — left in the model since it requires a migration; noted as future cleanup.

🤖 Generated with Claude Code

…k Draft

The real Task edit form rendered acceptance criteria as a single legacy
Markdown textarea, while the Task Draft panel used a structured-rows
editor (one row per item with required toggle). The two surfaces had
drifted apart even though every other editable field was already
aligned.

Extract the structured AC editor into a shared, controlled component
so both panels render the same UI by construction. Persist real-task
edits through the existing replaceAcceptanceCriteria service via a
small extension to updateTaskFieldsAction. Use client-side change
detection so verification marks survive non-AC edits — the destructive
replace runs only when the criteria set actually changed.

OpenSpec: align-task-edit-ui-with-draft (archived).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@github-actions

github-actions Bot commented Jun 7, 2026

Copy link
Copy Markdown

Coverage Report

Status Category Percentage Covered / Total
🔵 Lines 97.41% (🎯 95%) 2449 / 2514
🔵 Statements 96.36% (🎯 95%) 2676 / 2777
🔵 Functions 96.03% (🎯 93%) 508 / 529
🔵 Branches 89.37% (🎯 85%) 1641 / 1836
File CoverageNo changed files found.
Generated in workflow #709 for commit 2a0fc06 by the Vitest Coverage Report Action

@ChenNima ChenNima merged commit 686f385 into develop Jun 8, 2026
1 check passed
@ChenNima ChenNima deleted the feat/align-task-edit-ui-with-draft branch June 8, 2026 09:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant