Revert error location changes, keep errors including pfem in output (#1499)

This is to revert some of the changes merged in with this
PR:#1487
### Changes
- Moved `ErrorMessage` back into output panel
- Reverted `MobileProject` tab behaviour
- Reverted associated tests
- Removed pfem from web-component html

Author: cocomarine

src/assets/stylesheets/ErrorMessage.scss

@@ -8,7 +8,6 @@
   padding: var(--space-1);
   overflow-y: auto;
   scrollbar-width: thin;
-  max-block-size: 30%;
 
   &__error {
     padding: 0;

src/components/Editor/EditorInput/EditorInput.jsx

@@ -15,7 +15,6 @@ import EditorPanel from "../EditorPanel/EditorPanel";
 import DraggableTab from "../DraggableTabs/DraggableTab";
 import DroppableTabList from "../DraggableTabs/DroppableTabList";
 import RunBar from "../../RunButton/RunBar";
-import ErrorMessage from "../ErrorMessage/ErrorMessage";
 
 import "../../../assets/stylesheets/EditorInput.scss";
 import RunnerControls from "../../RunButton/RunnerControls";
@@ -187,7 +186,6 @@ const EditorInput = () => {
                 />
               </TabPanel>
             ))}
-            <ErrorMessage />
             {isMobile ? null : <RunBar />}
           </Tabs>
         ))}

src/components/Editor/EditorInput/EditorInput.test.js

@@ -188,15 +188,3 @@ describe("When read only", () => {
     expect(screen.queryByText("editorPanel.viewOnly")).toBeInTheDocument();
   });
 });
-
-describe("When there is an error", () => {
-  beforeEach(() => {
-    renderEditorInput({
-      editor: { ...initialState.editor, error: "An error occurred" },
-    });
-  });
-
-  test("The error message is displayed", () => {
-    expect(screen.getByText("An error occurred")).toBeInTheDocument();
-  });
-});

src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx

@@ -61,7 +61,6 @@ const PyodideRunner = ({
   const userId = user?.profile?.user;
   const isSplitView = useSelector((s) => s.editor.isSplitView);
   const isEmbedded = useSelector((s) => s.editor.isEmbedded);
-  const isOutputOnly = useSelector((s) => s.editor.isOutputOnly);
   const reactAppApiEndpoint = useSelector((s) => s.editor.reactAppApiEndpoint);
   const codeRunTriggered = useSelector((s) => s.editor.codeRunTriggered);
   const codeRunStopped = useSelector((s) => s.editor.codeRunStopped);
@@ -472,7 +471,7 @@ const PyodideRunner = ({
                     <RunnerControls skinny />
                   )}
                 </div>
-                {isOutputOnly && <ErrorMessage />}
+                <ErrorMessage />
                 <TabPanel key={0}>
                   <pre
                     className={`pythonrunner-console pythonrunner-console--${settings.fontSize}`}
@@ -504,7 +503,7 @@ const PyodideRunner = ({
             {!isEmbedded && hasVisual && <OutputViewToggle />}
             {!isEmbedded && isMobile && <RunnerControls skinny />}
           </div>
-          {isOutputOnly && <ErrorMessage />}
+          <ErrorMessage />
           {hasVisual && (
             <TabPanel key={0}>
               <VisualOutputPane visuals={visuals} setVisuals={setVisuals} />

src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.test.js

@@ -21,7 +21,6 @@ import {
   openFile,
   setFocussedFileIndex,
   setFriendlyError,
-  setIsOutputOnly,
 } from "../../../../../redux/EditorSlice.js";
 import store from "../../../../../app/store";
 
@@ -440,31 +439,6 @@ describe("When an error is received", () => {
     });
   });
 
-  describe("When output-only is enabled", () => {
-    beforeEach(() => {
-      act(() => {
-        store.dispatch(setIsOutputOnly(true));
-      });
-
-      const worker = PyodideWorker.getLastInstance();
-      worker.postMessageFromWorker({
-        method: "handleError",
-        line: 2,
-        file: "main.py",
-        type: "SyntaxError",
-        info: "something's wrong",
-      });
-    });
-
-    test("it displays the error message", () => {
-      expect(
-        screen.queryByText(
-          "SyntaxError: something's wrong on line 2 of main.py",
-        ),
-      ).toBeInTheDocument();
-    });
-  });
-
   describe("When friendly errors are enabled", () => {
     let loadCopydeckFor;
     let registerAdapter;

src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx

@@ -23,6 +23,7 @@ import {
   cpythonAdapter,
   friendlyExplain,
 } from "@raspberrypifoundation/python-friendly-error-messages";
+import ErrorMessage from "../../../ErrorMessage/ErrorMessage";
 import ApiCallHandler from "../../../../../utils/apiCallHandler";
 import store from "../../../../../redux/stores/WebComponentStore";
 import VisualOutputPane from "../VisualOutputPane";
@@ -89,6 +90,7 @@ const SkulptRunner = ({
   const user = useSelector((state) => state.auth.user);
   const isSplitView = useSelector((state) => state.editor.isSplitView);
   const isEmbedded = useSelector((state) => state.editor.isEmbedded);
+  const isOutputOnly = useSelector((state) => state.editor.isOutputOnly);
   const codeRunTriggered = useSelector(
     (state) => state.editor.codeRunTriggered,
   );
@@ -638,6 +640,7 @@ const SkulptRunner = ({
                     <RunnerControls skinny />
                   )}
                 </div>
+                <ErrorMessage />
                 <TabPanel key={0}>
                   <pre
                     className={`pythonrunner-console pythonrunner-console--${settings.fontSize}`}
@@ -674,6 +677,7 @@ const SkulptRunner = ({
             {!isEmbedded && showVisualOutput && <OutputViewToggle />}
             {!isEmbedded && isMobile && <RunnerControls skinny />}
           </div>
+          {!isOutputOnly && <ErrorMessage />}
           <TabPanel key={0}>
             <VisualOutputPane ref={visualOutputPaneRef} />
           </TabPanel>

src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.test.js

@@ -346,6 +346,61 @@ describe("When an error originates in the sense_hat shim", () => {
   });
 });
 
+describe("When an error has occurred", () => {
+  let mockStore;
+  let store;
+  let initialState;
+
+  beforeEach(() => {
+    const middlewares = [];
+    mockStore = configureStore(middlewares);
+    initialState = {
+      editor: {
+        project: {
+          components: [
+            {
+              name: "main",
+              extension: "py",
+              content: "boom!",
+            },
+          ],
+          image_list: [],
+        },
+        error: "SyntaxError: bad token T_OP on line 1 of main.py",
+      },
+      auth: {
+        user,
+      },
+    };
+  });
+
+  test("Displays error message", () => {
+    store = mockStore(initialState);
+    render(
+      <Provider store={store}>
+        <SkulptRunner active={true} />
+      </Provider>,
+    );
+
+    expect(
+      screen.getByText("SyntaxError: bad token T_OP on line 1 of main.py"),
+    ).toBeVisible();
+  });
+
+  test("Does not display error message when isOutputOnly state is true", () => {
+    initialState.editor.isOutputOnly = true;
+    store = mockStore(initialState);
+    render(
+      <Provider store={store}>
+        <SkulptRunner active={true} />
+      </Provider>,
+    );
+    expect(
+      screen.queryByText("SyntaxError: bad token T_OP on line 1 of main.py"),
+    ).not.toBeInTheDocument();
+  });
+});
+
 describe("When there is an import error and the site is cross-origin isolated", () => {
   let store;
   beforeEach(() => {

src/components/Mobile/MobileProject/MobileProject.jsx

@@ -25,7 +25,6 @@ const MobileProject = ({
   const codeRunTriggered = useSelector(
     (state) => state.editor.codeRunTriggered,
   );
-  const error = useSelector((state) => state.editor.error);
   const includesInstructions = sidebarOptions.includes("instructions");
 
   const [selectedTab, setSelectedTab] = useState(1);
@@ -42,12 +41,6 @@ const MobileProject = ({
     }
   }, [codeRunTriggered, sidebarShowing, withSidebar]);
 
-  useEffect(() => {
-    if (!codeRunTriggered && error && projectType === "python") {
-      setSelectedTab(withSidebar ? 1 : 0);
-    }
-  }, [error, codeRunTriggered, projectType, withSidebar]);
-
   return (
     <div
       className="proj-container proj-editor-container proj-container--mobile"

src/components/Mobile/MobileProject/MobileProject.test.js

@@ -200,46 +200,3 @@ describe("When withSidebar is false", () => {
     expect(screen.queryByTitle("sidebar.expand")).not.toBeInTheDocument();
   });
 });
-
-describe("When there is an error after code has been run", () => {
-  beforeEach(() => {
-    const initialState = {
-      editor: {
-        project: {
-          project_type: "python",
-          components: [
-            {
-              name: "main",
-              extension: "py",
-              content: "print('hello')",
-            },
-          ],
-          image_list: [],
-          user_id: user.profile.user,
-        },
-        codeRunTriggered: false,
-        openFiles: [["main.py"]],
-        focussedFileIndices: [0],
-        error: "An error occurred",
-      },
-      auth: {
-        user: user,
-      },
-    };
-    const store = mockStore(initialState);
-    render(
-      <Provider store={store}>
-        <MobileProject withSidebar={true} sidebarOptions={["settings"]} />
-      </Provider>,
-    );
-  });
-
-  test("The input tab is selected", () => {
-    const inputTab = screen.getByText("mobile.code").parentElement;
-    expect(inputTab).toHaveClass("react-tabs__tab--selected");
-  });
-
-  test("The error message is displayed", () => {
-    expect(screen.getByText("An error occurred")).toBeInTheDocument();
-  });
-});

src/web-component.html

@@ -96,7 +96,6 @@
 
         newWebComp.setAttribute("with_projectbar", "true");
         newWebComp.setAttribute("with_sidebar", "true");
-        newWebComp.setAttribute("friendly_errors_enabled", "true");
         newWebComp.setAttribute(
           "sidebar_options",
           JSON.stringify([