Send Authorization header on Scratch project save

Author: abcampo-iry

src/scratch.jsx

@@ -6,6 +6,7 @@ import { compose } from "redux";
 import GUI, { AppStateHOC } from "@scratch/scratch-gui";
 import ScratchIntegrationHOC from "./components/ScratchEditor/ScratchIntegrationHOC.jsx";
 import dedupeScratchWarnings from "./utils/dedupeScratchWarnings.js";
+import scratchProjectSave from "./utils/scratchProjectSave.js";
 
 import ScratchStyles from "./assets/stylesheets/Scratch.scss";
 
@@ -80,6 +81,7 @@ if (!projectId) {
     requiresAuth: false,
     latestAccessToken: null,
   };
+  let scratchFetchApi = null;
 
   const getTimeoutMessage = (handshake) =>
     handshake.requiresAuth && !handshake.latestAccessToken
@@ -92,6 +94,16 @@ if (!projectId) {
     event.data?.type === "scratch-gui-set-token" &&
     event.data?.nonce === nonce;
 
+  const handleUpdateProjectData = async (currentProjectId, vmState, params) => {
+    return scratchProjectSave({
+      scratchFetchApi,
+      apiUrl,
+      currentProjectId,
+      vmState,
+      params,
+    });
+  };
+
   const mountGui = (accessToken) => {
     if (isMounted) return;
     isMounted = true;
@@ -108,10 +120,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

@@ -4,6 +4,11 @@ jest.mock("./components/ScratchEditor/ScratchIntegrationHOC.jsx", () => ({
   __esModule: true,
   default: (WrappedComponent) => WrappedComponent,
 }));
+const mockScratchProjectSave = jest.fn();
+jest.mock("./utils/scratchProjectSave.js", () => ({
+  __esModule: true,
+  default: (params) => mockScratchProjectSave(params),
+}));
 jest.mock("@scratch/scratch-gui", () => {
   const MockGui = () => null;
   MockGui.setAppElement = jest.fn();
@@ -13,9 +18,11 @@ jest.mock("@scratch/scratch-gui", () => {
     AppStateHOC: (WrappedComponent) => WrappedComponent,
   };
 });
+
+const mockRenderRoot = jest.fn();
 jest.mock("react-dom/client", () => ({
   createRoot: jest.fn(() => ({
-    render: jest.fn(),
+    render: mockRenderRoot,
   })),
 }));
 
@@ -69,6 +76,8 @@ describe("scratch handshake retries", () => {
   beforeEach(() => {
     jest.useFakeTimers();
     jest.resetModules();
+    mockRenderRoot.mockClear();
+    mockScratchProjectSave.mockClear();
     process.env = {
       ...originalEnv,
       ASSETS_URL: "https://assets.example.com",
@@ -124,6 +133,42 @@ 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(),
+      },
+    };
+
+    scratchGuiElement.props.onStorageInit(scratchStorage);
+    await scratchGuiElement.props.onUpdateProjectData(
+      "project-123",
+      '{"targets":[]}',
+      { title: "Saved from test" },
+    );
+
+    expect(scratchStorage.scratchFetch.setMetadata).toHaveBeenCalledWith(
+      "Authorization",
+      "token-123",
+    );
+    expect(mockScratchProjectSave).toHaveBeenCalledWith(
+      expect.objectContaining({
+        scratchFetchApi: scratchStorage.scratchFetch,
+        apiUrl: "https://api.example.com",
+        currentProjectId: "project-123",
+        vmState: '{"targets":[]}',
+        params: { title: "Saved from test" },
+      }),
+    );
+  });
+
   test("keeps retrying when auth is required but token is missing", () => {
     loadScratchModule();
 

src/utils/scratchProjectSave.js

@@ -0,0 +1,72 @@
+const buildScratchProjectSaveRequest = ({
+  apiUrl,
+  currentProjectId,
+  params = {},
+}) => {
+  const creatingProject =
+    currentProjectId === null || typeof currentProjectId === "undefined";
+  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();
+  const baseUrl = creatingProject
+    ? `${apiUrl}/api/scratch/projects/`
+    : `${apiUrl}/api/scratch/projects/${currentProjectId}`;
+
+  return {
+    creatingProject,
+    method: creatingProject ? "post" : "put",
+    url: queryString ? `${baseUrl}?${queryString}` : baseUrl,
+  };
+};
+
+const normalizeScratchProjectSaveResponse = async ({
+  response,
+  creatingProject,
+  currentProjectId,
+}) => {
+  if (response.status !== 200) {
+    throw response.status;
+  }
+
+  const body = await response.json();
+  return {
+    ...body,
+    id: creatingProject ? body["content-name"] : currentProjectId,
+  };
+};
+
+const scratchProjectSave = async ({
+  scratchFetchApi,
+  apiUrl,
+  currentProjectId,
+  vmState,
+  params,
+}) => {
+  const { creatingProject, method, url } = buildScratchProjectSaveRequest({
+    apiUrl,
+    currentProjectId,
+    params,
+  });
+  const response = await scratchFetchApi.scratchFetch(url, {
+    method,
+    body: vmState,
+    headers: {
+      "Content-Type": "application/json",
+    },
+    credentials: "include",
+  });
+
+  return normalizeScratchProjectSaveResponse({
+    response,
+    creatingProject,
+    currentProjectId,
+  });
+};
+
+export default scratchProjectSave;

src/utils/scratchProjectSave.test.js

@@ -0,0 +1,91 @@
+import scratchProjectSave from "./scratchProjectSave";
+
+describe("scratchProjectSave", () => {
+  const buildScratchFetchApi = () => ({
+    scratchFetch: jest.fn(),
+  });
+
+  test("updates an existing project through scratchFetch", async () => {
+    const scratchFetchApi = buildScratchFetchApi();
+    scratchFetchApi.scratchFetch.mockResolvedValue({
+      status: 200,
+      json: jest.fn().mockResolvedValue({ ok: true }),
+    });
+
+    const response = await scratchProjectSave({
+      scratchFetchApi,
+      apiUrl: "https://api.example.com",
+      currentProjectId: "project-123",
+      vmState: '{"targets":[]}',
+      params: { title: "Saved from test" },
+    });
+
+    expect(scratchFetchApi.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",
+      },
+    );
+    expect(response).toEqual({ ok: true, id: "project-123" });
+  });
+
+  test("creates a project and returns the created id", async () => {
+    const scratchFetchApi = buildScratchFetchApi();
+    scratchFetchApi.scratchFetch.mockResolvedValue({
+      status: 200,
+      json: jest
+        .fn()
+        .mockResolvedValue({ "content-name": "created-project-id" }),
+    });
+
+    const response = await scratchProjectSave({
+      scratchFetchApi,
+      apiUrl: "https://api.example.com",
+      currentProjectId: undefined,
+      vmState: '{"targets":[]}',
+      params: {
+        originalId: "source-project",
+        isRemix: 1,
+        title: "Created from test",
+      },
+    });
+
+    expect(scratchFetchApi.scratchFetch).toHaveBeenCalledWith(
+      "https://api.example.com/api/scratch/projects/?original_id=source-project&is_remix=1&title=Created+from+test",
+      {
+        method: "post",
+        body: '{"targets":[]}',
+        headers: {
+          "Content-Type": "application/json",
+        },
+        credentials: "include",
+      },
+    );
+    expect(response).toEqual({
+      "content-name": "created-project-id",
+      id: "created-project-id",
+    });
+  });
+
+  test("rejects with the response status when the save fails", async () => {
+    const scratchFetchApi = buildScratchFetchApi();
+    scratchFetchApi.scratchFetch.mockResolvedValue({
+      status: 401,
+      json: jest.fn(),
+    });
+
+    await expect(
+      scratchProjectSave({
+        scratchFetchApi,
+        apiUrl: "https://api.example.com",
+        currentProjectId: "project-123",
+        vmState: '{"targets":[]}',
+      }),
+    ).rejects.toBe(401);
+  });
+});