fix(web): show correct validation error in quick add toast (Issue #9329)

[geeked-anshuk666]

Description

When submitting a work item/issue using the inline quick-add input with an invalid title (e.g., exceeding 255 characters), the error toast displays a generic fallback message: "Some error occurred. Please try again." instead of the actual validation error returned by the Django backend.

Root cause: Django returns field-specific validation errors as a nested dictionary (e.g., {"name": ["Ensure this field has no more than 255 characters."]}). The quick-add error handler was directly reading error values as single strings or string arrays, failing to parse dictionary values and falling back to the generic message.

Fix: Updated the validation error helper in apps/web/core/components/issues/issue-layouts/quick-add/root.tsx to check if the error is a dictionary. If it is, it parses the keys using Object.keys() and extracts the first error message dynamically, displaying it in the toast.

Type of Change

• Bug fix (non-breaking change which fixes an issue)
• Feature (non-breaking change which adds functionality)
• Improvement (change that would cause existing functionality to not work as expected)
• Code refactoring
• Performance improvements
• Documentation update

Screenshots and Media (if applicable)

Before:
An error toast popped up saying: "Some error occurred. Please try again."

After:

Detailed validation error message showing "Ensure this field has no more than 255 characters." in the toast notification instead of the generic error fallback.

Test Scenarios

1. Navigate to the list or board layout of a project.
2. Click + New work item under any group to open the inline quick-add input.
3. Paste a long title (>255 characters) and press Enter to submit.
4. Before: The toast output showed: "Some error occurred. Please try again."
5. After: The toast output now correctly displays: "Ensure this field has no more than 255 characters."

References

Fixes #9329

Summary by CodeRabbit

• Bug Fixes
  • Improved the error handling for quick-add issue submissions to display more meaningful, user-facing validation details.
  • The app now extracts a message from different error shapes (plain text, nested lists, or structured objects) instead of relying on a single message field.
  • If no specific message can be determined, it continues to fall back to the standard generic error message.

[CLAassistant]

All committers have signed the CLA.

[coderabbitai]

Important

Review skipped

No new commits to review since the last review.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 4b766a66-e52b-4564-96d9-8fa50f0e297b

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

📝 Walkthrough

Walkthrough

QuickAddIssueRoot now derives toast error text from string, array, and object-shaped error payloads before falling back to the translated generic message.

Changes

Quick add error handling

Layer / File(s)	Summary
Toast error message extraction logic apps/web/core/components/issues/issue-layouts/quick-add/root.tsx	The submit-toast error callback now recursively extracts a user-facing message from strings, arrays, or objects, preferring message when present and otherwise using the first key’s value before the generic fallback.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Suggested reviewers: sriramveeraghanta, Rahulcheryala

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly matches the PR's main fix: surfacing the correct quick-add validation error for issue #9329.
Description check	✅ Passed	The PR description includes the required sections and clearly explains the bug, fix, screenshots, tests, and reference.
Linked Issues check	✅ Passed	The change extracts nested backend validation messages from quick-add errors, matching the linked issue's expected behavior.
Out of Scope Changes check	✅ Passed	The patch stays focused on the quick-add error handler and doesn't introduce unrelated changes.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

apps/web/core/components/issues/issue-layouts/quick-add/root.tsx (1)

129-140: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Consider extracting this error-parsing logic into a shared utility.

The PR objective calls for matching the sidebar/modal creation flow's error behavior. If that flow already has similar (or more complete) error-parsing logic, duplicating an ad-hoc version here risks future divergence. A shared helper (e.g., getFirstValidationError(err)) would also avoid the any cast at Line 133, aligning better with the strict-typing guideline for .ts/.tsx files.

As per coding guidelines, "TypeScript strict mode enabled; all files must be typed."

🤖 Prompt for 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.

In `@apps/web/core/components/issues/issue-layouts/quick-add/root.tsx` around
lines 129 - 140, The quick-add error message parser in root.tsx duplicates
validation-error handling and relies on an any cast. Extract this logic into a
shared typed helper (for example, getFirstValidationError(err)) and reuse it
here and in the sidebar/modal creation flow so both paths stay consistent. Keep
the helper strictly typed for .ts/.tsx files, and have the message callback fall
back to err.message or the translated default when no validation message is
found.

Source: Coding guidelines

🤖 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 `@apps/web/core/components/issues/issue-layouts/quick-add/root.tsx`:
- Around line 129-140: The error formatter in the quick-add root message handler
only extracts messages from array-shaped payloads, so string or nested
first-error values still collapse to the generic fallback. Update the message
callback in the quick-add flow to handle additional payload shapes, including
direct string values and nested objects with a usable first message, while
keeping the existing array handling in place. Use the existing message callback
in root.tsx and the t("common.error.message") fallback as the reference points.

---

Nitpick comments:
In `@apps/web/core/components/issues/issue-layouts/quick-add/root.tsx`:
- Around line 129-140: The quick-add error message parser in root.tsx duplicates
validation-error handling and relies on an any cast. Extract this logic into a
shared typed helper (for example, getFirstValidationError(err)) and reuse it
here and in the sidebar/modal creation flow so both paths stay consistent. Keep
the helper strictly typed for .ts/.tsx files, and have the message callback fall
back to err.message or the translated default when no validation message is
found.

🪄 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: defaults

Review profile: CHILL

Plan: Pro

Run ID: 1debcfba-8df7-4e18-b2fd-17ae65079197

📥 Commits

Reviewing files that changed from the base of the PR and between 7fbf14a and b27c691.

📒 Files selected for processing (1)

• apps/web/core/components/issues/issue-layouts/quick-add/root.tsx

[geeked-anshuk666]

@coderabbitai review

[coderabbitai]

✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.