Trigger Scratch remix on first save of educator projects

[abcampo-iry]

Closes: https://github.com/RaspberryPiFoundation/digital-editor-issues/issues/1238

Summary

This updates the Scratch flow so the first save of a saved Scratch project that the current user does not own sends a Scratch remix instead of a normal save.

It also keeps the save button in the Scratch saving state through remix events, updates the parent project identifier when Scratch reports the remixed id, and avoids reloading the Scratch iframe by keeping the iframe bound to its original project id.

What changed

• Track Scratch remix start, success, and failure in the shared save-state hook.
• Store the original Scratch iframe project id separately from the parent project id.
• Update the parent project id from scratch-gui-project-id-updated.
• Use the updated parent id to make remix happen only on the first save.
• Keep the iframe src pinned to the original Scratch project id so the iframe does not reload after remix.
• Extract Scratch save helpers so the generic save button and Scratch project bar share the same save/remix.

Behaviour

• Pressing save for the first time when viewing an educator project should trigger a scratch remix
• The save button should be in it's 'saving' state until the remix is completed.
• The page or Scratch iframe shouldn't reload (this could be split out if complex)

remix-flow.mov

[Copilot]

Pull request overview

Updates the Scratch editor save flow so that when a user saves a Scratch project they don’t own, the first save triggers a Scratch “remix” instead of a normal save, while keeping the UI save state consistent and preventing the Scratch iframe from reloading after the remix identifier is issued.

Changes:

• Adds remix-aware save state handling (start/success/failure) and a shared Scratch save/remix pathway used by both the generic Save button and the Scratch project bar.
• Tracks the original Scratch iframe project identifier separately from the parent project identifier, and updates the parent identifier when Scratch reports a new remixed id.
• Subscribes to Scratch GUI “project id updated” messages and pins the iframe project_id to the original identifier to avoid iframe reloads.

Reviewed changes

Copilot reviewed 17 out of 17 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/utils/scratchIframe.js	Adds remix decision helper and message subscription; updates postMessage target origin handling.
src/utils/scratchIframe.test.js	Adds tests for new scratch iframe helpers and identifier update subscription.
src/scratch.jsx	Emits remix-failed event for Scratch GUI “creatingError” alerts.
src/redux/reducers/loadProjectReducers.js	Initializes and sets scratchIframeProjectIdentifier during project load lifecycle.
src/redux/reducers/loadProjectReducers.test.js	Updates reducer expectations for new scratch iframe identifier state.
src/redux/EditorSlice.js	Stores original Scratch iframe identifier on project set; adds action to update only parent identifier.
src/redux/EditorSlice.test.js	Tests scratch iframe identifier initialization and parent-id-only updates.
src/hooks/useScratchSaveState.js	Extends save-state lifecycle to include remix events; supports remix command.
src/hooks/useScratchSaveState.test.js	Updates tests for remix command behavior and remix lifecycle.
src/hooks/useScratchSave.js	New hook encapsulating Scratch save/remix eligibility + save state wiring.
src/components/WebComponentProject/WebComponentProject.integration.test.js	Ensures identifier-changed event fires when remix updates the parent identifier.
src/components/SaveButton/SaveButton.jsx	Routes Scratch projects through shared Scratch save/remix hook; disables during Scratch saving/remixing.
src/components/SaveButton/SaveButton.test.js	Adds coverage that first Scratch save triggers remix via postMessage instead of triggerSave.
src/components/ProjectBar/ScratchProjectBar.jsx	Uses shared Scratch save/remix hook and passes remix intent on click.
src/components/ProjectBar/ScratchProjectBar.test.js	Adds coverage for remix-on-first-save and remix “saving” UI state.
src/components/Editor/Project/ScratchContainer.jsx	Subscribes to Scratch id updates and pins iframe to original identifier while updating parent identifier.
src/components/Editor/Project/ScratchContainer.test.js	Tests parent identifier updates without changing iframe project_id.

Comments suppressed due to low confidence (1)

src/components/Editor/Project/ScratchContainer.jsx:38

• iframeSrcUrl is built by string-concatenating process.env.ASSETS_URL. If ASSETS_URL is configured with a trailing slash, this produces a double-slash path; if it's ever configured as a path (e.g. "/") it can produce a protocol-relative URL like //scratch.html pointing at the wrong host. Building this with the URL constructor (and ensuring the base is an absolute URL) avoids malformed iframe URLs and keeps the iframe origin aligned with the postMessage origin checks.

  const iframeSrcUrl = `${
    process.env.ASSETS_URL
  }/scratch.html?${queryParams.toString()}`;

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

postMessage targetOrigin must be an origin (scheme+host+port) or "*". Using process.env.ASSETS_URL directly can be invalid if it contains a path or trailing slash (or is set to something like "/" via CRA publicUrl), which will throw at runtime and/or fail origin checks. Consider normalizing via new URL(process.env.ASSETS_URL, window.location.href).origin (with a safe fallback) and reusing the same normalization anywhere you compare event.origin to the allowed origin (e.g. useScratchSaveState).

[Copilot]

Pull request overview

Copilot reviewed 19 out of 19 changed files in this pull request and generated 1 comment.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[abcampo-iry]

I think I was trying to add the functionality to save button but this button doesn't really exist in the scratch flow, I was going through some rabbithole.

After that is simplified and this covers the paths I was looking for.

[zetter-rpf]

Do you think this should have a browser based cypress test?

[zetter-rpf]

This looks great to me, just that question about if we should have e2e test coverage.

Since this is a larger change it would be good for someone else to take a look - could you have a look @DNR500 since you have worked in this area too.

[DNR500]

Looks like dealing with the rendering of the iFrame was a bit tricky - well done on sorting that out.

There is a minor nit pick on there but otherwise good work!

[DNR500]

NIT: minor point but I think we pass out shouldRemixOnSave from the useScratchSave only to pass it back in. I don't think that shouldRemixOnSave is used anywhere else?

Maybe it could be just used in useScratchSave something like..

const {
  saveScratchProject: triggerScratchSaveOrRemixCommand,
  scratchSaveLabelKey,
  isScratchSaving,
} = useScratchSaveState({ enabled: enableScratchSaveState });

const saveScratchProject = () =>
  triggerScratchSaveOrRemixCommand({ shouldRemixOnSave });

and usage here 'onClick={() => saveScratchProject()} '

[abcampo-iry]

Thank you @DNR500, I do prefer the explicitness in the callback.
I think it obscure a little bit less the function.

When you are looking at the code it makes you think (or at least it does to me) that the button has more than one behaviour if passed there.