Merge branch 'offline' of github.com:RaspberryPiFoundation/editor-ui into offline

Author: grega

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);
+    });
   });
 });
 

package.json

@@ -27,7 +27,7 @@
     "@szhsin/react-menu": "^3.2.0",
     "apollo-link-sentry": "^3.2.3",
     "assert": "^2.1.0",
-    "axios": "^1.15.0",
+    "axios": "^1.15.2",
     "classnames": "^2.3.2",
     "codemirror": "^6.0.1",
     "container-query-polyfill": "^1.0.2",

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>
   );