Add in a button to save scratch projects

This is a quick way to add it so we can that the save urls are configured correctly in different environment, we've written a separate issue to implement a save button

Author: zetter-rpf

src/components/ProjectBar/ProjectBar.jsx

@@ -21,6 +21,16 @@ const ProjectBar = ({ nameEditable = true }) => {
   const projectOwner = isOwner(user, project);
   const readOnly = useSelector((state) => state.editor.readOnly);
 
+  const saveScratchProject = () => {
+    const webComponent = document.querySelector("editor-wc");
+    webComponent.shadowRoot
+      .querySelector("iframe[title='Scratch']")
+      .contentWindow.postMessage(
+        { type: "scratch-gui-save" },
+        process.env.ASSETS_URL,
+      );
+  };
+
   return (
     loading === "success" && (
       <div className="project-bar">
@@ -43,6 +53,14 @@ const ProjectBar = ({ nameEditable = true }) => {
               <SaveButton className="project-bar__btn btn--save" />
             </div>
           )}
+          {project.project_type === "code_editor_scratch" && (
+            <button
+              className="project-bar__btn btn--save"
+              onClick={saveScratchProject}
+            >
+              Save
+            </button>
+          )}
           {lastSavedTime && user && !readOnly && (
             <SaveStatus saving={saving} lastSavedTime={lastSavedTime} />
           )}