Set up scratch to use the new API routes

As part of this I've passed the project id and api url as params into the iframe.

I've used a seperate param to the existing api endpoint so it can be configured independently. This is useful for testing scratch locally in the editor UI without a dependency on the api project.

Author: zetter-rpf

src/components/Editor/Project/ScratchContainer.jsx

@@ -1,9 +1,25 @@
 import React from "react";
+import { useSelector } from "react-redux";
 
 export default function ScratchContainer() {
+  const projectIdentifier = useSelector(
+    (state) => state.editor.project.identifier,
+  );
+  const scratchApiEndpoint = useSelector(
+    (state) => state.editor.scratchApiEndpoint,
+  );
+
+  const queryParams = new URLSearchParams();
+  queryParams.set("project_id", projectIdentifier);
+  queryParams.set("api_url", scratchApiEndpoint);
+
+  const iframeSrcUrl = `${
+    process.env.ASSETS_URL
+  }/scratch.html?${queryParams.toString()}`;
+
   return (
     <iframe
-      src={`${process.env.ASSETS_URL}/scratch.html`}
+      src={iframeSrcUrl}
       title={"Scratch"}
       style={{
         width: "100%",

src/components/Editor/Project/ScratchContainer.test.js

@@ -0,0 +1,33 @@
+import configureStore from "redux-mock-store";
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import { Provider } from "react-redux";
+import ScratchContainer from "./ScratchContainer";
+
+describe("ScratchContainer", () => {
+  test("renders iframe with src built from project_id and api_url", () => {
+    const mockStore = configureStore([]);
+    const store = mockStore({
+      editor: {
+        project: {
+          identifier: "project-123",
+        },
+        scratchApiEndpoint: "https://api.example.com/v1",
+      },
+    });
+
+    render(
+      <Provider store={store}>
+        <ScratchContainer />
+      </Provider>,
+    );
+
+    const iframe = screen.getByTitle("Scratch");
+    expect(iframe).toBeInTheDocument();
+
+    const url = new URL(iframe.getAttribute("src"));
+    expect(url.pathname).toBe("/scratch.html");
+    expect(url.searchParams.get("project_id")).toBe("project-123");
+    expect(url.searchParams.get("api_url")).toBe("https://api.example.com/v1");
+  });
+});

src/containers/WebComponentLoader.jsx

@@ -5,6 +5,7 @@ import {
   setSenseHatAlwaysEnabled,
   setLoadRemixDisabled,
   setReactAppApiEndpoint,
+  setScratchApiEndpoint,
   setReadOnly,
 } from "../redux/EditorSlice";
 import WebComponentProject from "../components/WebComponentProject/WebComponentProject";
@@ -50,6 +51,7 @@ const WebComponentLoader = (props) => {
     sidebarPlugins = [],
     projectNameEditable = false,
     reactAppApiEndpoint = process.env.REACT_APP_API_ENDPOINT,
+    scratchApiEndpoint = process.env.REACT_APP_API_ENDPOINT,
     readOnly = false,
     senseHatAlwaysEnabled = false,
     showSavePrompt = false,
@@ -164,6 +166,10 @@ const WebComponentLoader = (props) => {
     dispatch(setReactAppApiEndpoint(reactAppApiEndpoint));
   }, [reactAppApiEndpoint, dispatch]);
 
+  useEffect(() => {
+    dispatch(setScratchApiEndpoint(scratchApiEndpoint));
+  }, [scratchApiEndpoint, dispatch]);
+
   useEffect(() => {
     dispatch(setSenseHatAlwaysEnabled(senseHatAlwaysEnabled));
   }, [senseHatAlwaysEnabled, dispatch]);

src/containers/WebComponentLoader.test.js

@@ -8,6 +8,7 @@ import {
   setReadOnly,
   setSenseHatAlwaysEnabled,
   setReactAppApiEndpoint,
+  setScratchApiEndpoint,
 } from "../redux/EditorSlice";
 import { setInstructions } from "../redux/InstructionsSlice";
 import { setUser } from "../redux/WebComponentAuthSlice";
@@ -24,7 +25,7 @@ jest.mock("../hooks/useProjectPersistence", () => ({
   useProjectPersistence: jest.fn(),
 }));
 
-const mockedChangeLanguage = jest.fn(() => new Promise(() => {}));
+const mockedChangeLanguage = jest.fn(() => new Promise(() => { }));
 
 jest.mock("react-i18next", () => ({
   useTranslation: () => {
@@ -108,6 +109,45 @@ describe("When initially rendered", () => {
     expect(mockedChangeLanguage).toHaveBeenCalledWith("es-LA");
   });
 
+  describe("scratch API endpoint", () => {
+    describe("when scratch API endpoint isn't set", () => {
+      beforeEach(() => {
+        render(
+          <Provider store={store}>
+            <WebComponentLoader />
+          </Provider>,
+        );
+      });
+
+      test("it defaults to env", () => {
+        expect(store.getActions()).toEqual(
+          expect.arrayContaining([
+            setScratchApiEndpoint("http://localhost:3009"),
+          ]),
+        );
+      });
+    });
+
+    describe("when scratch API endpoint is set", () => {
+      beforeEach(() => {
+        render(
+          <Provider store={store}>
+            <WebComponentLoader
+              scratchApiEndpoint="http://local.dev"
+              theme="light"
+            />
+          </Provider>,
+        );
+      });
+
+      test("it uses the specified prop", () => {
+        expect(store.getActions()).toEqual(
+          expect.arrayContaining([setScratchApiEndpoint("http://local.dev")]),
+        );
+      });
+    });
+  });
+
   describe("react app API endpoint", () => {
     describe("when react app API endpoint isn't set", () => {
       beforeEach(() => {

src/redux/EditorSlice.js

@@ -238,6 +238,9 @@ export const EditorSlice = createSlice({
     setReactAppApiEndpoint: (state, action) => {
       state.reactAppApiEndpoint = action.payload;
     },
+    setScratchApiEndpoint: (state, action) => {
+      state.scratchApiEndpoint = action.payload;
+    },
     triggerDraw: (state) => {
       state.drawTriggered = true;
     },
@@ -442,6 +445,7 @@ export const {
   setSenseHatEnabled,
   setLoadRemixDisabled,
   setReactAppApiEndpoint,
+  setScratchApiEndpoint,
   stopCodeRun,
   stopDraw,
   triggerCodeRun,

src/scratch.jsx

@@ -18,8 +18,9 @@ if (process.env.NODE_ENV === "production" && typeof window === "object") {
   window.onbeforeunload = () => true;
 }
 
-const defaultProjectId = "cool-id.json";
-const projectId = appTarget.dataset.projectId || defaultProjectId;
+const searchParams = new URLSearchParams(window.location.search);
+const projectId = searchParams.get("project_id");
+const apiUrl = searchParams.get("api_url");
 
 const defaultLocale = "en";
 const locale = appTarget.dataset.locale || defaultLocale;
@@ -55,8 +56,8 @@ root.render(
       projectId={projectId}
       locale={locale}
       menuBarHidden={true}
-      projectHost={`${process.env.ASSETS_URL}/api/projects`}
-      assetHost={`${process.env.ASSETS_URL}/api/assets`}
+      projectHost={`${apiUrl}/api/scratch/projects`}
+      assetHost={`${apiUrl}/api/scratch/assets`}
       basePath={`${process.env.ASSETS_URL}/scratch-gui/`}
       onUpdateProjectId={handleUpdateProjectId}
       onShowCreatingRemixAlert={handleRemixingStarted}

src/web-component.js

@@ -65,6 +65,7 @@ class WebComponent extends HTMLElement {
       "output_split_view",
       "project_name_editable",
       "react_app_api_endpoint",
+      "scratch_api_endpoint",
       "read_only",
       "sense_hat_always_enabled",
       "show_save_prompt",

webpack.config.js

@@ -151,8 +151,8 @@ module.exports = {
             "/pyodide/shims/_internal_sense_hat.js",
             "/pyodide/shims/pygal.js",
             "/PyodideWorker.js",
-            "/scratch.html",
-          ].includes(req.url)
+          ].includes(req.url) ||
+          req.url.startsWith("/scratch.html")
         ) {
           res.setHeader("Cross-Origin-Resource-Policy", "cross-origin");
         }