Fix feedback panel in scratch e2e tests (#1497)

issue:
[1489](RaspberryPiFoundation/digital-editor-issues#1489)


## Summary

Upgrade editor-ui to React 19 (matching editor-standalone) and bump
related dependencies so the Scratch classroom flow works again after
standalone’s React 19 upgrade.

## Why the Scratch e2e test was failing

The test failed at the final step: **teacher opens a student’s Scratch
remix** from Student work. The Scratch iframe never loaded because
**`editor-wc` crashed** with:

`Objects are not valid as a React child`

That only happens on this step because it is the first time
**`isViewingStudentWork`** is true, which registers the **feedback
sidebar plugin**.

## Feedback plugin + sidebar: the underlying issue

Classroom (`editor-standalone`) passes a sidebar plugin into the web
component (`editor-ui`) via `setSidebarPlugins`. That plugin includes
**React elements and components created by standalone’s React**
(`FeedbackIcon`, `panel()`, `buttons()`), which `Sidebar` then renders
inside **editor-ui’s React tree**.

Standalone and editor-ui are **separate bundles with separate React
instances**. Passing elements across that boundary is unsupported.

This was **latent for years** but broke when standalone moved to **React
19** (June 9, PR #932) while editor-ui stayed on React 18 — React 19
elements are rejected by React 18’s reconciler.

**Why it’s brittle:** even with both on React 19, this remains fragile.
Two bundled React copies can appear to work for simple JSX but can still
break (hooks, context, portaled UI). A robust long-term fix would avoid
passing React elements across the web component boundary (e.g. mount
callbacks / string icon names only).

## Fix

Bump **editor-ui to React 19.2.7** to align with **editor-standalone**.
Verified locally: teacher → student Scratch remix flow works again.

## Other dependency bumps

| Package | Change | Why |
|---------|--------|-----|
| **react / react-dom** | 18 → **19.2.7** | Match standalone; fixes
cross-version plugin crash |
| **react-toastify** | 8 → **11.1.0** | v8 uses removed `react-dom`
`render()` API; v11 supports React 18/19. Updated toast positions and
icon usage in `Notifications.js`; removed v8
`ToastContainer.defaultProps` workaround |
| **@react-three/fiber** | 8 → **9.6.1** | R3F v8 pairs with React 18
only; v9 required for React 19 (Astro Pi 3D simulator) |
| **@react-three/drei** | 9 → **10.0.0** | Companion to R3F v9 (helpers
used by Astro Pi `Simulator` / `FlightCase`) |
| **@react-three/test-renderer** | 8 → **9.0.0** | Test support for R3F
v9 |

## Scratch React 18 vendor aliases

```json
"scratchReactVendor": "npm:react@18.3.1",
"scratchReactDomVendor": "npm:react-dom@18.3.1"
```

The main app uses **React 19**, but the **Scratch iframe**
(`scratch.html`) loads **`scratch-gui` via `<script>` tags** and expects
**React 18 UMD** globals (`vendor/react.production.min.js`). React 19
**no longer ships UMD builds**, so we cannot copy from the main `react`
dependency. These aliases install React 18 solely so webpack can copy
UMD files into `build/vendor/` for the Scratch iframe.

Author: DNR500

.env.example

@@ -6,6 +6,6 @@ ASSETS_URL='http://localhost:3011'
 HTML_RENDERER_URL='http://localhost:3011'
 REACT_APP_GOOGLE_TAG_MANAGER_ID=''
 REACT_APP_API_ENDPOINT='http://localhost:3009'
-REACT_APP_ALLOWED_IFRAME_ORIGINS='http://localhost:3011,http://localhost:3012,http://classroom.localhost:3012'
+REACT_APP_ALLOWED_IFRAME_ORIGINS='http://localhost:3011,http://localhost:3012,http://classroom.localhost:3013'
 
 

cypress/e2e/spec-wc-resize.cy.js

@@ -0,0 +1,86 @@
+import {
+  dragEditorResizeHandle,
+  dragSidebarResizeHandle,
+  getEditorResizeHandle,
+  getProjEditorContainer,
+  getSidebarPanel,
+  loadPythonStarterProject,
+} from "../helpers/editor.js";
+
+const origin = "http://localhost:3011/web-component.html";
+
+beforeEach(() => {
+  cy.intercept("*", (req) => {
+    req.headers.Origin = origin;
+    req.continue();
+  });
+});
+
+const visitAndLoadPythonProject = () => {
+  cy.visit(origin);
+  loadPythonStarterProject();
+  getProjEditorContainer().should("exist");
+};
+
+describe("layout resize", () => {
+  it("resizes editor/output split on desktop", () => {
+    cy.viewport(1280, 800);
+    visitAndLoadPythonProject();
+
+    getEditorResizeHandle("verticalHandle").should("exist");
+
+    let initialWidth;
+    getProjEditorContainer().then(($el) => {
+      initialWidth = $el[0].getBoundingClientRect().width;
+    });
+
+    dragEditorResizeHandle("verticalHandle", { deltaX: -100 });
+
+    getProjEditorContainer().should(($el) => {
+      const nextWidth = $el[0].getBoundingClientRect().width;
+      expect(nextWidth).to.be.lessThan(initialWidth);
+    });
+  });
+
+  it("resizes editor/output split on stacked layout", () => {
+    // 700px is deliberately between two layout breakpoints:
+    // - Wider than 600px: still uses the desktop editor (with resize handles).
+    // - Narrower than 720px in the project area: editor sits above output, with a
+    //   horizontal drag bar between them (not side-by-side).
+    cy.viewport(700, 900);
+    visitAndLoadPythonProject();
+
+    getEditorResizeHandle("horizontalHandle").should("exist");
+
+    let initialHeight;
+    getProjEditorContainer().then(($el) => {
+      initialHeight = $el[0].getBoundingClientRect().height;
+    });
+
+    dragEditorResizeHandle("horizontalHandle", { deltaY: 80 });
+
+    getProjEditorContainer().should(($el) => {
+      const nextHeight = $el[0].getBoundingClientRect().height;
+      expect(nextHeight).not.to.equal(initialHeight);
+    });
+  });
+
+  it("resizes sidebar file panel on desktop", () => {
+    cy.viewport(1280, 800);
+    visitAndLoadPythonProject();
+
+    getSidebarPanel().should("be.visible");
+
+    let initialWidth;
+    getSidebarPanel().then(($el) => {
+      initialWidth = $el[0].getBoundingClientRect().width;
+    });
+
+    dragSidebarResizeHandle({ deltaX: 80 });
+
+    getSidebarPanel().should(($el) => {
+      const nextWidth = $el[0].getBoundingClientRect().width;
+      expect(nextWidth).to.be.greaterThan(initialWidth);
+    });
+  });
+});

cypress/helpers/editor.js

@@ -2,7 +2,8 @@
 
 export const getEditorShadow = () => cy.get("editor-wc").shadow();
 
-const getSidebarPanel = () => getEditorShadow().findByTestId("sidebar__panel");
+export const getSidebarPanel = () =>
+  getEditorShadow().findByTestId("sidebar__panel");
 
 // Buttons / controls
 
@@ -77,6 +78,52 @@ export const getSettingsPanel = () => getEditorShadow().find(".settings-panel");
 export const getTextSizeSetting = () =>
   getEditorShadow().find(".settings-panel__text-size");
 
+export const getProjEditorContainer = () =>
+  getEditorShadow().findByTestId("proj-editor-container");
+
+export const getEditorResizeHandle = (handleTestId) =>
+  getProjEditorContainer().findByTestId(handleTestId).parent("div");
+
+export const getSidebarResizeHandle = () =>
+  getSidebarPanel().findByTestId("verticalHandle").parent("div");
+
+const dragHandle = ($handle, { deltaX = 0, deltaY = 0 }) => {
+  cy.wrap($handle)
+    .realMouseDown({
+      button: "left",
+      position: "center",
+      scrollBehavior: false,
+    })
+    .realMouseMove(deltaX, deltaY, {
+      position: "center",
+      scrollBehavior: false,
+    })
+    .realMouseUp({ position: "center", scrollBehavior: false });
+};
+
+export const dragEditorResizeHandle = (
+  handleTestId,
+  { deltaX = 0, deltaY = 0 } = {},
+) => {
+  getEditorResizeHandle(handleTestId).then(($handle) => {
+    dragHandle($handle, { deltaX, deltaY });
+  });
+};
+
+export const dragSidebarResizeHandle = ({ deltaX = 80 } = {}) => {
+  getSidebarResizeHandle().then(($handle) => {
+    dragHandle($handle, { deltaX, deltaY: 0 });
+  });
+};
+
+export const openFilePanel = () =>
+  getEditorShadow().find("[title='Project files']").click();
+
+export const loadPythonStarterProject = () => {
+  cy.findByText("blank-python-starter").click();
+  getEditorShadow().findByRole("button", { name: /run/i }).should("be.visible");
+};
+
 // Test output
 
 export const getResults = () => cy.get("#results");

cypress/support/e2e.js

@@ -1 +1,2 @@
 import "@testing-library/cypress/add-commands";
+import "cypress-real-events";

package.json

@@ -16,8 +16,8 @@
     "@juggle/resize-observer": "^3.3.1",
     "@raspberrypifoundation/design-system-react": "^2.7.0",
     "@raspberrypifoundation/python-friendly-error-messages": "0.7.0",
-    "@react-three/drei": "9.114.3",
-    "@react-three/fiber": "^8.0.13",
+    "@react-three/drei": "^10.0.0",
+    "@react-three/fiber": "^9.6.1",
     "@reduxjs/toolkit": "^1.6.2",
     "@replit/codemirror-indentation-markers": "^6.1.0",
     "@sentry/react": "7.16.0",
@@ -50,24 +50,26 @@
     "prismjs": "^1.29.0",
     "prop-types": "^15.8.1",
     "raw-loader": "^4.0.2",
-    "re-resizable": "6.9.9",
-    "react": "^18.1.0",
+    "re-resizable": "6.11.2",
+    "react": "^19.2.7",
     "react-app-polyfill": "^2.0.0",
     "react-confirm-alert": "^2.8.0",
     "react-container-query": "^0.13.0",
     "react-cookie": "^4.1.1",
-    "react-dom": "^18.1.0",
+    "react-dom": "^19.2.7",
     "react-i18next": "^12.0.0",
     "react-modal": "^3.14.4",
     "react-redux": "^8.1.3",
     "react-responsive": "^9.0.2",
     "react-router-dom": "^6.7.0",
     "react-tabs": "^3.2.3",
     "react-timer-hook": "^3.0.5",
-    "react-toastify": "^8.1.0",
+    "react-toastify": "^11.1.0",
     "react-toggle": "^4.1.3",
     "redux": "^4.2.1",
     "redux-oidc": "^4.0.0-beta1",
+    "scratchReactDomVendor": "npm:react-dom@18.3.1",
+    "scratchReactVendor": "npm:react@18.3.1",
     "skulpt": "^1.2.0",
     "stream-browserify": "^3.0.0",
     "three": "0.169.0",
@@ -97,7 +99,7 @@
     ]
   },
   "devDependencies": {
-    "@react-three/test-renderer": "8.2.1",
+    "@react-three/test-renderer": "^9.0.0",
     "@svgr/webpack": "5.5.0",
     "@testing-library/cypress": "^10.1.0",
     "@testing-library/jest-dom": "^5.16.5",
@@ -114,6 +116,7 @@
     "copy-webpack-plugin": "12.0.2",
     "css-loader": "4.3.0",
     "cypress": "14.5.4",
+    "cypress-real-events": "^1.15.0",
     "dotenv": "8.2.0",
     "dotenv-expand": "5.1.0",
     "dotenv-webpack": "8.1.0",

src/containers/WebComponentLoader.jsx

@@ -39,17 +39,6 @@ import {
 const CODE_EDITOR_FEEDBACK_URL =
   "https://form.raspberrypi.org/f/code-editor-feedback";
 
-const TOAST_CONTAINER_DEFAULTS = {
-  ...(ToastContainer.defaultProps || {}),
-};
-
-// react-toastify v8 uses defaultProps on a function component, which React
-// warns about in development. We pass the same defaults explicitly instead.
-// We should upgrade to version 10 in a different commit, this removes the warning
-if (process.env.NODE_ENV === "development") {
-  ToastContainer.defaultProps = undefined;
-}
-
 const WebComponentLoader = (props) => {
   const {
     assetsIdentifier,
@@ -247,7 +236,6 @@ const WebComponentLoader = (props) => {
             }`}
           >
             <ToastContainer
-              {...TOAST_CONTAINER_DEFAULTS}
               enableMultiContainer
               containerId="top-center"
               position="top-center"

src/utils/Notifications.js

@@ -18,7 +18,7 @@ const CloseButton = ({ closeToast }) => {
 };
 
 const bottomCenterSettings = {
-  position: toast.POSITION.BOTTOM_CENTER,
+  position: "bottom-center",
   autoClose: 3000,
   className: "toast--bottom-center__message",
   closeButton: false,
@@ -27,7 +27,7 @@ const bottomCenterSettings = {
 };
 
 const topCenterSettings = {
-  position: toast.POSITION.TOP_CENTER,
+  position: "top-center",
   autoClose: 6000,
   className: "toast--top-center__message",
   closeButton: CloseButton,
@@ -39,28 +39,28 @@ export const showSavePrompt = () => {
   toast(i18n.t("notifications.savePrompt"), {
     ...topCenterSettings,
     className: `${topCenterSettings.className} toast--info`,
-    icon: InfoIcon,
+    icon: <InfoIcon />,
   });
 };
 
 export const showLoginPrompt = () => {
   toast(i18n.t("notifications.loginPrompt"), {
     ...topCenterSettings,
     className: `${topCenterSettings.className} toast--info`,
-    icon: InfoIcon,
+    icon: <InfoIcon />,
   });
 };
 
 export const showSavedMessage = () => {
   toast(i18n.t("notifications.projectSaved"), {
     ...bottomCenterSettings,
-    icon: TickIcon,
+    icon: <TickIcon />,
   });
 };
 
 export const showRenamedMessage = () => {
   toast(i18n.t("notifications.projectRenamed"), {
     ...bottomCenterSettings,
-    icon: TickIcon,
+    icon: <TickIcon />,
   });
 };

webpack.config.js

@@ -303,11 +303,11 @@ const scratchConfig = {
         { from: `${scratchStaticDir}/assets`, to: "vendor/static/assets" },
         { from: scratchChunkDir, to: "chunks" },
         {
-          from: "node_modules/react/umd/react.production.min.js",
+          from: "node_modules/scratchReactVendor/umd/react.production.min.js",
           to: "vendor/react.production.min.js",
         },
         {
-          from: "node_modules/react-dom/umd/react-dom.production.min.js",
+          from: "node_modules/scratchReactDomVendor/umd/react-dom.production.min.js",
           to: "vendor/react-dom.production.min.js",
         },
         {