Mimic autosave in Scratch Editor (#1469)

This change adds autosave for Scratch projects and keeps the behaviour
close to the existing Python and HTML editors.

Python and HTML already autosave after a short delay when the user owns
a saved project. Scratch is different because project changes happen
inside the Scratch iframe, so we listen to Scratch VM change events and
pass those changes back to the main app.

Autosave only starts once the Scratch project has been saved or remixed
and has an identifier. New Scratch projects, and projects that need to
be remixed first, still show the manual Save button. After that first
save/remix, the manual Save button is hidden and the header shows the
autosave status instead.

The autosave delay is 2 seconds. If a save is already running, we do not
start another one immediately; we queue the next autosave until the
current save finishes.

Scratch save events now update the shared Redux editor save state:
saving, lastSavedTime, and lastSaveAutosave. This is the same state used
by the existing save status UI, so Scratch can reuse SaveStatus instead
of keeping a separate local save-status flow in the Scratch hook.

The Scratch save/remix tests have also been updated to cover the new
flow: first save/remix, identifier update, hiding the manual Save
button, and triggering autosave once the project is eligible.

As Teacher:


https://github.com/user-attachments/assets/ee9010bc-0ae8-4cb7-953e-eeaea70253ec

As Student (first time):


https://github.com/user-attachments/assets/60bb464b-6bb6-4fc9-9131-d9c84994496d

Author: abcampo-iry

cypress/e2e/spec-scratch.cy.js

@@ -97,7 +97,7 @@ describe("Scratch save integration", () => {
     cy.findByText("cool-scratch").click();
   });
 
-  it("remixes on the first save, keeps the iframe project loaded, and saves after the identifier update", () => {
+  it("remixes on the first save, keeps the iframe project loaded, and auto-saves after the identifier update", () => {
     getEditorShadow()
       .find("iframe[title='Scratch']")
       .its("0.contentDocument.body")
@@ -131,6 +131,14 @@ describe("Scratch save integration", () => {
           },
         }),
       );
+      win.dispatchEvent(
+        new win.MessageEvent("message", {
+          origin: win.location.origin,
+          data: {
+            type: "scratch-gui-remixing-succeeded",
+          },
+        }),
+      );
     });
 
     cy.get("#project-identifier").should("have.text", "student-remix");
@@ -146,11 +154,35 @@ describe("Scratch save integration", () => {
       postMessage.resetHistory();
     });
 
-    getEditorShadow().findByRole("button", { name: "Save" }).click();
+    getEditorShadow()
+      .find("button")
+      .should(($buttons) => {
+        const buttonText = [...$buttons].map((button) =>
+          button.textContent.trim(),
+        );
+        expect(buttonText).not.to.include("Save");
+      });
 
-    cy.get("@scratchPostMessage")
-      .its("firstCall.args.0")
-      .should("deep.include", { type: "scratch-gui-save" });
+    cy.window().then((win) => {
+      win.dispatchEvent(
+        new win.MessageEvent("message", {
+          origin: win.location.origin,
+          data: {
+            type: "scratch-gui-project-changed",
+          },
+        }),
+      );
+    });
+
+    cy.wait(2100);
+
+    cy.get("@scratchPostMessage").should((postMessage) => {
+      const saveMessage = postMessage
+        .getCalls()
+        .some((call) => call.args[0]?.type === "scratch-gui-save");
+
+      expect(saveMessage).to.eq(true);
+    });
   });
 });
 

src/components/ProjectBar/ScratchProjectBar.jsx

@@ -1,5 +1,5 @@
-import React from "react";
-import { useSelector } from "react-redux";
+import React, { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
 import { useTranslation } from "react-i18next";
 import DownloadIcon from "../../assets/icons/download.svg";
 import UploadIcon from "../../assets/icons/upload.svg";
@@ -8,26 +8,53 @@ import ProjectName from "../ProjectName/ProjectName";
 import DownloadButton from "../DownloadButton/DownloadButton";
 import UploadButton from "../UploadButton/UploadButton";
 import DesignSystemButton from "../DesignSystemButton/DesignSystemButton";
+import SaveStatus from "../SaveStatus/SaveStatus";
 
 import "../../assets/stylesheets/ProjectBar.scss";
+import { setScratchLastSavedTime } from "../../redux/EditorSlice";
 import { useScratchSave } from "../../hooks/useScratchSave";
 
+const getProjectLastSavedTime = (updatedAt) => {
+  const timestamp = Date.parse(updatedAt || "");
+  return Number.isNaN(timestamp) ? null : timestamp;
+};
+
 const ScratchProjectBar = ({ nameEditable = true }) => {
   const { t } = useTranslation();
+  const dispatch = useDispatch();
 
   const user = useSelector((state) => state.auth.user);
   const loading = useSelector((state) => state.editor.loading);
+  const project = useSelector((state) => state.editor.project);
   const readOnly = useSelector((state) => state.editor.readOnly);
-  const showScratchSaveButton = Boolean(user && !readOnly);
-  const {
-    isScratchSaving,
-    saveScratchProject,
-    scratchSaveLabelKey,
-    shouldRemixOnSave,
-  } = useScratchSave({
-    enabled: showScratchSaveButton,
+  const saving = useSelector((state) => state.editor.saving);
+  const lastSavedTime = useSelector((state) => state.editor.lastSavedTime);
+  const canSave = Boolean(user && !readOnly);
+  const { saveScratchProject, shouldRemixOnSave } = useScratchSave({
+    enabled: canSave,
   });
-  const scratchSaveLabel = t(scratchSaveLabelKey);
+
+  const projectIdentifier = project?.identifier;
+  const isScratchSaving = saving === "pending";
+  const isScratchSaveFailed = saving === "failed";
+  const isNewProject = !projectIdentifier;
+  const canAutoSave = Boolean(projectIdentifier && !shouldRemixOnSave);
+  const showSaveButton = canSave && (isNewProject || shouldRemixOnSave);
+  const showSaveStatus =
+    canSave && canAutoSave && Boolean(lastSavedTime) && !isScratchSaveFailed;
+  const projectLastSavedTime = getProjectLastSavedTime(project?.updated_at);
+
+  useEffect(() => {
+    if (!canSave || !canAutoSave || lastSavedTime || !projectLastSavedTime) {
+      return;
+    }
+
+    dispatch(
+      setScratchLastSavedTime({
+        lastSavedTime: projectLastSavedTime,
+      }),
+    );
+  }, [dispatch, canAutoSave, canSave, lastSavedTime, projectLastSavedTime]);
 
   if (loading !== "success") {
     return null;
@@ -55,19 +82,20 @@ const ScratchProjectBar = ({ nameEditable = true }) => {
             type="tertiary"
           />
         </div>
-        {showScratchSaveButton && (
+        {showSaveButton && (
           <div className="project-bar__btn-wrapper">
             <DesignSystemButton
               className="project-bar__btn btn--save btn--primary"
               onClick={() => saveScratchProject({ shouldRemixOnSave })}
-              text={scratchSaveLabel}
+              text={t("header.save")}
               textAlways
               icon={<SaveIcon />}
               type="primary"
               disabled={isScratchSaving}
             />
           </div>
         )}
+        {showSaveStatus && <SaveStatus />}
       </div>
     </div>
   );