+
) : null;
};
diff --git a/src/components/Editor/ErrorMessage/ErrorMessage.test.js b/src/components/Editor/ErrorMessage/ErrorMessage.test.js
index f9fe32a43..439b70155 100644
--- a/src/components/Editor/ErrorMessage/ErrorMessage.test.js
+++ b/src/components/Editor/ErrorMessage/ErrorMessage.test.js
@@ -33,7 +33,7 @@ describe("When error is set", () => {
test("Font size class is set correctly", () => {
const errorMessage = screen.queryByText("Oops").parentElement;
- expect(errorMessage).toHaveClass("error-message--myFontSize");
+ expect(errorMessage).toHaveClass("error-message__python--myFontSize");
});
test("Does not display friendly error elements", () => {
diff --git a/src/components/Editor/FriendlyErrorMessage/FriendlyErrorMessage.jsx b/src/components/Editor/FriendlyErrorMessage/FriendlyErrorMessage.jsx
new file mode 100644
index 000000000..3c074917b
--- /dev/null
+++ b/src/components/Editor/FriendlyErrorMessage/FriendlyErrorMessage.jsx
@@ -0,0 +1,23 @@
+import React from "react";
+import { useSelector } from "react-redux";
+import "../../../assets/stylesheets/FriendlyErrorMessage.scss";
+import DOMPurify from "dompurify";
+
+const FriendlyErrorMessage = () => {
+ const friendlyError = useSelector((state) => state.editor.friendlyError);
+
+ const friendlyErrorHtml = friendlyError?.html
+ ? DOMPurify.sanitize(friendlyError.html)
+ : null;
+
+ return friendlyErrorHtml ? (
+
+
+
+
+
+ ) : null;
+};
+
+export default FriendlyErrorMessage;
diff --git a/src/components/Editor/FriendlyErrorMessage/FriendlyErrorMessage.test.js b/src/components/Editor/FriendlyErrorMessage/FriendlyErrorMessage.test.js
new file mode 100644
index 000000000..745e82374
--- /dev/null
+++ b/src/components/Editor/FriendlyErrorMessage/FriendlyErrorMessage.test.js
@@ -0,0 +1,85 @@
+import configureStore from "redux-mock-store";
+import { Provider } from "react-redux";
+import { render, screen } from "@testing-library/react";
+import FriendlyErrorMessage from "./FriendlyErrorMessage";
+
+const middlewares = [];
+const mockStore = configureStore(middlewares);
+
+describe("When friendlyError is set", () => {
+ beforeEach(() => {
+ const initialState = {
+ editor: {
+ error: "An error occurred",
+ friendlyError: {
+ html: 'Friendly Error Title
This is a more user-friendly explanation of the error.
A variable created in another place might not be available here.
- Move the line that makes it to above where you use it.
- Or set it here just before you use it.
kettle = 0
Original error
An error occurred
Friendly Error Title
+