[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]

Warning

Rate limit exceeded

@jvega190 has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 1 minutes and 52 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: fbd11b30-8a09-4ef5-94cc-56247d633bae

📥 Commits

Reviewing files that changed from the base of the PR and between 9a4358b and 099ce39.

📒 Files selected for processing (1)

• ui/app/src/components/ContentTypeManagement/components/EditTypeView.tsx

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 unit tests (beta)

• Create PR with unit tests

📝 Coding Plan

• Generate coding plan for human review comments

---

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) } }));
 		}