[Element Editor] Render element validation errors as a list without the error. prefix#3910
Open
mw-keoz wants to merge 3 commits into
Open
[Element Editor] Render element validation errors as a list without the error. prefix#3910mw-keoz wants to merge 3 commits into
mw-keoz wants to merge 3 commits into
Conversation
|
All contributors have signed the CLA ✍️ ✅ |
Contributor
There was a problem hiding this comment.
Pull request overview
Fixes element-validation messages by bypassing translation and formatting newline-separated violations as a list.
Changes:
- Adds validation-error formatting.
- Handles element-validation errors separately in
ApiErrorViewUI. - Adds formatter unit tests.
Review assessment:
- Root cause addressed at
api-error-view-ui.tsx:30-35. - Shared
ApiErrorViewUIcall path is covered without API changes. - Formatter tests cover splitting, but not the translation-bypass integration.
format-validation-error.ts:23-27interpolates unescaped text into HTML; changes required.- No documentation or changelog update is included.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
api-error-view-ui.tsx |
Renders element-validation messages directly. |
format-validation-error.ts |
Formats violations as text or a list. |
format-validation-error.test.ts |
Tests formatter behavior. |
…he error. prefix
On a failed element save the backend returns errorKey=error_element_validation_failed
with 'message' holding the human-readable, server-combined violation text (one per
line). The error view treated errorKey as an i18n key and rendered
t(`error.${errorKey}`), so the free-text message showed with a literal 'error.'
prefix collapsed onto a single line. Detect this case and render the message
directly via SanitizeHtml (DOMPurify keeps ul/li): a single violation as a plain
line, multiple as an unordered list. Adds a unit-tested formatValidationErrorHtml
helper.
The violation message was interpolated into the HTML string unescaped. Because SanitizeHtml (DOMPurify) keeps its default allowlist (headings, links, images, list items, …), HTML-like text in a message would render as markup instead of being shown literally, and an injected </li><li> could forge extra list items. HTML-escape each violation (both the single-line and list paths) so the ul/li wrapper is the only markup; add regression tests with HTML-like input.
…matter Extract the <li> items into a variable so the <ul> template no longer nests a template literal (SonarCloud typescript:S4624). No behavior change.
mw-keoz
force-pushed
the
fix/element-validation-error-list-2026x
branch
from
July 21, 2026 08:29
a7a176e to
967f0a9
Compare
|
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
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.
What
Render element-validation errors as a bulleted list of the server-provided violation messages, instead of one
error.-prefixed line.Why
When saving an element fails validation, the backend (
studio-backend-bundle) returns HTTP 422 witherrorKey = error_element_validation_failedandmessageholding the human-readable, server-combined violation text (one violation per line).ApiErrorViewUItreatserrorContent.errorKeyas an i18n key and renderst(error.${errorKey}). Because the value is free text (not a translation key), i18next returns the raw string with a literalerror.prefix, collapsed onto a single line. Users see e.g.:This affects every element whose validator fails, not just custom classes.
Fix
Detect the
ELEMENT_VALIDATION_FAILEDcase and render the message directly through the existingSanitizeHtml(DOMPurify keepsul/li), bypassingt(): a single violation renders as a plain line, multiple as an unordered list. A small unit-tested helper (formatValidationErrorHtml) does the split/format.api-error-view-ui.tsx— add theELEMENT_VALIDATION_FAILEDbranch (falls through to the existing behavior for every other error).utils/format-validation-error.ts(+.test.ts) — new helper, POCL header included.No change to any other error path.
Testing
npx jest format-validation-error— single line, multi-line →<ul>, blank-line/whitespace trimming, empty input →''.error.prefix; a single violation shows as one line.SanitizeHtml/DOMPurify, so onlyul/liand inline text survive (no new XSS surface).