Error message UI#1485
Draft
maxelkins wants to merge 5 commits into
Draft
Conversation
maxelkins
temporarily deployed
to
previews/1485/merge
GitHub Actions
Inactive
Contributor
There was a problem hiding this comment.
Pull request overview
This PR relocates the Python error message UI from inside the runner panels (Skulpt/Pyodide) to the editor input pane (above the run bar), introduces a new FriendlyErrorMessage component (currently stubbed and feature-gated behind a hardcoded fem = false flag), and restyles ErrorMessage with the design-system typography mixin, a new red color scheme, and a cancel icon.
Changes:
- Move
<ErrorMessage />out ofSkulptRunner/PyodideRunnerand intoEditorInput; update related tests. - Add
FriendlyErrorMessagecomponent + stub API + SCSS, gated by a temporary boolean inErrorMessage. - Restyle
ErrorMessage(new colors, typography mixin, cancel icon, structural split into__python/__fem/__error).
Reviewed changes
Copilot reviewed 13 out of 14 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| src/web-component.html | Prettier-style reformatting; also comments out use_editor_styles attribute (looks unrelated/accidental). |
| src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx | Remove ErrorMessage rendering and isOutputOnly selector. |
| src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.test.js | Replace two error-display tests with single negative assertion. |
| src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx | Remove ErrorMessage rendering in both layouts. |
| src/components/Editor/EditorInput/EditorInput.jsx | Render <ErrorMessage /> inside the per-panel Tabs loop above RunBar. |
| src/components/Editor/EditorInput/EditorInput.test.js | Mock EditorPanel and add test for error placement relative to run bar. |
| src/components/Editor/ErrorMessage/ErrorMessage.jsx | Add cancel icon, restructure markup, gate FriendlyErrorMessage behind fem = false. |
| src/components/Editor/FriendlyErrorMessage/FriendlyErrorMessage.jsx | New component fetching a friendly error message via stubbed API. |
| src/components/Editor/FriendlyErrorMessage/friendlyErrorMessageApi.stub.js | New stub API returning a hardcoded friendly error message. |
| src/assets/stylesheets/ErrorMessage.scss | Switch to design-system tokens/typography mixin; add __python / __fem / __error styles. |
| src/assets/stylesheets/FriendlyErrorMessage.scss | New styles for friendly error message. |
| src/assets/stylesheets/InternalStyles.scss | Register new SCSS file; Prettier reformatting. |
| src/assets/stylesheets/EditorPanel.scss | Prettier reformatting only. |
| src/assets/icons/cancel_FILL.svg | New cancel/error icon asset. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| newWebComp.setAttribute("with_projectbar", "true"); | ||
| newWebComp.setAttribute("with_sidebar", "true"); | ||
| newWebComp.setAttribute("use_editor_styles", "true"); | ||
| // newWebComp.setAttribute("use_editor_styles", "true"); |
| <div className={`error-message error-message--${settings.fontSize}`}> | ||
| <pre ref={message} className="error-message__content"></pre> | ||
| <div className="error-message__python"> | ||
| <CancelFillIcon /> |
| /> | ||
| </TabPanel> | ||
| ))} | ||
| <ErrorMessage /> |
maxelkins
temporarily deployed
to
previews/1485/merge
GitHub Actions
Inactive
cocomarine
added a commit
that referenced
this pull request
Jun 4, 2026
Part of RaspberryPiFoundation/digital-editor-issues#1448 ### Changes - Added pfem package and required changes for it to run properly - Added dompurify package for sanitising HTML contents that are returned from pfem - Added `friendly_errors_enabled` attribute set to `false` by default and added to redux - The new redux state read by PythonRunner and passed as a prop to both PyodideRunner and SkulptRunner - Added pfem logic to both runners and stored the friendly error html in redux - Updated ErrorMessage component to display the friendly errors conditionally - For now, CSS used to restrict to displaying title and summary parts of friendly error html - pfem will be updated so that we can choose parts before storing in redux -⚠️ The error messages will be formatted in another PR: #1485 ### Behaviour - When the editor-wc in the host app has `friendly_errors_enabled` attribute not set or set to `false`, it shows the original error. <img width="450" alt="Screenshot 2026-05-28 at 14 59 03" src="https://github.com/user-attachments/assets/4bff14ca-40cd-4a3e-b76e-98a69a45301e" /> - When the editor-wc in the host has `friendly_errors_enabled` attribute set to `true`, it shows the original error followed by title and summary of the new friendly error. <img width="500" alt="Screenshot 2026-06-01 at 15 16 33" src="https://github.com/user-attachments/assets/68b55121-0051-4169-84db-4abb9df4ca74" /> ### Notes on using the pfem ESM in Jest - Tried adding it to `jest.transformIgnorePatterns` in package.json, but resulted in a cascade of errors from plotly - Just moved `three` to `jest.transformIgnorePatterns` from `scripts.test` - Added global jest mocks for pfem and plotly to `setupTests.js` - Also imported plotly to `PyodideRunner/VisualOutputPane.test.js` - <- with a CJS build of pfem, these changes may be unnecessary
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.
Summary
Moves ErrorMessage to input side of editor (TBC)Notes