[8451] Studio UI doesn’t correctly display API responses when Git global configs are unset

[jvega190]

craftercms/craftercms#8451

Summary by CodeRabbit

• Bug Fixes
  • Unified and improved error handling across content type, file, and folder workflows.
  • Error dialogs now show structured, clearer messages extracted from responses instead of raw text.
  • Save and create flows render consistent, user-friendly error UI for failed operations.

[coderabbitai]

Walkthrough

Replace raw error handling with structured Ajax error payload extraction and display in three UI components by importing extractErrorPayload and typing errors as AjaxError.

Changes

Cohort / File(s)	Summary
EditTypeView Error Display ui/app/src/components/ContentTypeManagement/components/EditTypeView.tsx	Import extractErrorPayload, Typography, and AjaxError. Update save-flow error callback to accept AjaxError and render a Box/Tyography-based UI showing extractErrorPayload(error).message instead of a plain string alert.
CreateFileDialog Error Handling ui/app/src/components/CreateFileDialog/CreateFileDialogContainer.tsx	Use AjaxError in onError handlers and dispatch extracted payload via extractErrorPayload(error) instead of passing raw error.
CreateFolderDialog Error Handling ui/app/src/components/CreateFolderDialog/CreateFolderContainer.tsx	Replace direct response-based error usage with extractErrorPayload(error) and type onError parameter as AjaxError for both occurrences.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related issues

• Studio UI doesn’t correctly display API responses when Git global configs are unset craftercms#8451: Implements consistent extraction and rendering of Ajax error payloads for dialog components, matching the issue's objective.

Possibly related PRs

• [8438] Publish On Demand dialog does not display API 4xx error responses #4773: Applies the same code-level change—replacing response.response with extractErrorPayload and using AjaxError—making it closely related.

Suggested reviewers

• rart
• russdanner

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The PR description only contains a GitHub issue link without any substantive details about the changes, objectives, or rationale required by the template.	Expand the description to include a summary of what's in the PR, the problem being solved, and how the changes address the issue, as specified in the template.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title '[8451] Studio UI doesn't correctly display API responses when Git global configs are unset' directly relates to the main objective: improving error handling and API response display in the UI.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

No actionable comments were generated in the recent review. 🎉

---

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 and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@ui/app/src/components/ContentTypeManagement/components/EditTypeView.tsx`:
- Around line 477-491: The error callback in EditTypeView (the error(error)
handler) should type the parameter as AjaxError and safely render a fallback
message: import AjaxError from 'rxjs/ajax', change the signature to accept
(error: AjaxError), call extractErrorPayload(error) and use its .message with a
fallback (e.g. extractErrorPayload(error).message ?? 'Unexpected error' or a
localized default) before passing to Typography so it never renders undefined.

🧹 Nitpick comments (1)

ui/app/src/components/ContentTypeManagement/components/EditTypeView.tsx (1)

782-784: Inconsistent error handling within the same file.

This existing handler at Line 782 still uses the old response.response pattern, while the new save handler (Line 477) uses extractErrorPayload. Consider updating this handler as well for consistency.

Suggested fix

-		error: ({ response }) => {
-			dispatch(pushErrorDialog({ props: { error: response.response } }));
+		error: (error: AjaxError) => {
+			dispatch(pushErrorDialog({ props: { error: extractErrorPayload(error) } }));
 		}

[jvega190]

@rart I updated to use the new extractErrorPayload util. Though there are many usages where we can still apply it. Should I create a new ticket to update the usages?