Send Authorization header on Scratch project save

Author: abcampo-iry

src/scratch.jsx

@@ -63,6 +63,20 @@ const handleScratchGuiAlert = (alertType) => {
 const generateNonce = () =>
   `${Math.random().toString(36).slice(2)}-${Date.now().toString(36)}`;
 
+const buildQueryString = (params = {}) => {
+  const searchParams = new URLSearchParams(
+    Object.entries({
+      original_id: params.originalId,
+      is_copy: params.isCopy,
+      is_remix: params.isRemix,
+      title: params.title,
+    }).filter(([, value]) => value !== undefined),
+  );
+
+  const queryString = searchParams.toString();
+  return queryString ? `?${queryString}` : "";
+};
+
 if (!projectId) {
   console.error("project_id is required but not set");
 } else if (!apiUrl) {
@@ -80,6 +94,7 @@ if (!projectId) {
     requiresAuth: false,
     latestAccessToken: null,
   };
+  let scratchFetchApi = null;
 
   const getTimeoutMessage = (handshake) =>
     handshake.requiresAuth && !handshake.latestAccessToken
@@ -92,6 +107,36 @@ if (!projectId) {
     event.data?.type === "scratch-gui-set-token" &&
     event.data?.nonce === nonce;
 
+  const handleUpdateProjectData = async (currentProjectId, vmState, params) => {
+    if (!scratchFetchApi) {
+      throw new Error("Scratch fetch API not initialized");
+    }
+
+    const creatingProject =
+      currentProjectId === null || typeof currentProjectId === "undefined";
+    const queryString = buildQueryString(params);
+    const url = creatingProject
+      ? `${apiUrl}/api/scratch/projects/${queryString}`
+      : `${apiUrl}/api/scratch/projects/${currentProjectId}${queryString}`;
+
+    const response = await scratchFetchApi.scratchFetch(url, {
+      method: creatingProject ? "post" : "put",
+      body: vmState,
+      headers: {
+        "Content-Type": "application/json",
+      },
+      credentials: "include",
+    });
+
+    if (response.status !== 200) {
+      throw response.status;
+    }
+
+    const body = await response.json();
+    body.id = creatingProject ? body["content-name"] : currentProjectId;
+    return body;
+  };
+
   const mountGui = (accessToken) => {
     if (isMounted) return;
     isMounted = true;
@@ -108,10 +153,12 @@ if (!projectId) {
           assetHost={`${apiUrl}/api/scratch/assets`}
           basePath={`${process.env.ASSETS_URL}/scratch-gui/`}
           onStorageInit={(storage) => {
+            scratchFetchApi = storage.scratchFetch;
             if (accessToken) {
-              storage.scratchFetch.setMetadata("Authorization", accessToken);
+              scratchFetchApi.setMetadata("Authorization", accessToken);
             }
           }}
+          onUpdateProjectData={handleUpdateProjectData}
           onUpdateProjectId={handleUpdateProjectId}
           onShowCreatingRemixAlert={handleRemixingStarted}
           onShowRemixSuccessAlert={handleRemixingSucceeded}

src/scratch.test.js

@@ -5,17 +5,19 @@ jest.mock("./components/ScratchEditor/ScratchIntegrationHOC.jsx", () => ({
   default: (WrappedComponent) => WrappedComponent,
 }));
 jest.mock("@scratch/scratch-gui", () => {
-  const MockGui = () => null;
+  const MockGui = jest.fn(() => null);
   MockGui.setAppElement = jest.fn();
   return {
     __esModule: true,
     default: MockGui,
     AppStateHOC: (WrappedComponent) => WrappedComponent,
   };
 });
+
+const mockRenderRoot = jest.fn();
 jest.mock("react-dom/client", () => ({
   createRoot: jest.fn(() => ({
-    render: jest.fn(),
+    render: mockRenderRoot,
   })),
 }));
 
@@ -69,6 +71,7 @@ describe("scratch handshake retries", () => {
   beforeEach(() => {
     jest.useFakeTimers();
     jest.resetModules();
+    mockRenderRoot.mockReset();
     process.env = {
       ...originalEnv,
       ASSETS_URL: "https://assets.example.com",
@@ -124,6 +127,48 @@ describe("scratch handshake retries", () => {
     expectRetriesStopped(callsAfterHandshake);
   });
 
+  test("routes project saves through scratchFetch metadata after storage init", async () => {
+    loadScratchModule();
+
+    const nonce = getHandshakeNonce();
+    dispatchSetTokenMessage({ nonce, accessToken: "token-123" });
+
+    const renderedTree = mockRenderRoot.mock.calls[0][0];
+    const scratchGuiElement = renderedTree.props.children[1];
+    const scratchStorage = {
+      scratchFetch: {
+        setMetadata: jest.fn(),
+        scratchFetch: jest.fn().mockResolvedValue({
+          status: 200,
+          json: jest.fn().mockResolvedValue({ ok: true }),
+        }),
+      },
+    };
+
+    scratchGuiElement.props.onStorageInit(scratchStorage);
+    await scratchGuiElement.props.onUpdateProjectData(
+      "project-123",
+      '{"targets":[]}',
+      { title: "Saved from test" },
+    );
+
+    expect(scratchStorage.scratchFetch.setMetadata).toHaveBeenCalledWith(
+      "Authorization",
+      "token-123",
+    );
+    expect(scratchStorage.scratchFetch.scratchFetch).toHaveBeenCalledWith(
+      "https://api.example.com/api/scratch/projects/project-123?title=Saved+from+test",
+      {
+        method: "put",
+        body: '{"targets":[]}',
+        headers: {
+          "Content-Type": "application/json",
+        },
+        credentials: "include",
+      },
+    );
+  });
+
   test("keeps retrying when auth is required but token is missing", () => {
     loadScratchModule();