Configure project and asset APIs for Scratch#1347
Open
zetter-rpf wants to merge 7 commits intomainfrom
Open
Conversation
zetter-rpf
temporarily deployed
to
previews/1347/merge
GitHub Actions
Inactive
Before it call the third argument 'headers' when they are not headers, but a config object that may have a headers key.
This is to allow us to drop a cookie that can be used to authorize requests made by Scratch. Using withCredentials allows cookies to be set in the request response.
I made set up my projects locally to be served from *.rpfdev.com and this was a small thing that caused me some confusing by sending me back to the wrong host.
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.
This moves the assets around to where they are expected.
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
zetter-rpf
force-pushed
the
scratch-request-spike
branch
from
e68584f to
b0d2d0a
Compare
zetter-rpf
temporarily deployed
to
previews/1347/merge
GitHub Actions
Inactive
zetter-rpf
changed the title
1 task
Contributor
There was a problem hiding this comment.
Pull request overview
This PR implements Scratch project integration by adding support for configurable API endpoints and query parameter-based project loading. The changes enable the Scratch editor to load projects and assets from a configurable API endpoint passed via URL parameters, moving away from hardcoded project IDs.
Changes:
- Added
scratch_api_endpointweb component attribute and Redux state management for Scratch-specific API configuration - Modified Scratch iframe loading to use URL query parameters (
project_idandapi_url) instead of hardcoded values - Refactored API call handler to use Axios config objects instead of separate header parameters, adding
withCredentialssupport for project reads - Added Scratch-specific save button in ProjectBar with postMessage-based save triggering
Reviewed changes
Copilot reviewed 15 out of 17 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| webpack.config.js | Changed CORS header logic from exact match to prefix match for scratch.html to support query parameters |
| src/web-component.js | Added scratch_api_endpoint to the list of supported web component attributes |
| src/web-component.html | Updated sample project link from "blank-scratch" to "cool-scratch" and added scratch_api_endpoint attribute initialization |
| src/utils/apiCallHandler.test.js | Updated readProject tests to include withCredentials: true in expected API calls |
| src/utils/apiCallHandler.js | Refactored to use Axios config objects, simplified headers function to return headers directly, added withCredentials support for readProject |
| src/scratch.jsx | Changed from hardcoded project ID to URL search params for project_id and api_url |
| src/redux/EditorSlice.js | Added setScratchApiEndpoint reducer and exported action for managing Scratch API endpoint state |
| src/projects/cool-scratch.json | Updated project identifier and name from "blank-scratch" to "cool-scratch" |
| src/containers/WebComponentLoader.test.js | Added test coverage for scratch_api_endpoint prop handling with default and custom values |
| src/containers/WebComponentLoader.jsx | Added scratchApiEndpoint prop with default value and useEffect to dispatch it to Redux state |
| src/components/ProjectBar/ProjectBar.jsx | Added Scratch-specific save button that uses postMessage to trigger save in iframe |
| src/components/Editor/Project/ScratchContainer.test.js | Added new test file for ScratchContainer component to verify iframe src construction |
| src/components/Editor/Project/ScratchContainer.jsx | Modified to build iframe src URL with query parameters from Redux state (project_id and api_url) |
| public/index.html | Changed web component test page link from absolute to relative URL |
| public/api/scratch/projects/cool-scratch.json | Added sample Scratch project JSON with basic sprite and variable configuration |
| public/api/scratch/assets/internalapi/asset/8a9dadf4eea61892ec6908b1c99e4961.svg/get | Added SVG asset (teapot sprite) for sample Scratch project |
| cypress/e2e/spec-scratch.cy.js | Updated Cypress test to load "cool-scratch" instead of "blank-scratch" |
Comments suppressed due to low confidence (1)
src/projects/cool-scratch.json:2
- The identifier includes the ".json" extension ("cool-scratch.json"), but other project files in the same directory (e.g., cool-python.json) use identifiers without the file extension (e.g., "cool-python"). This inconsistency could cause issues if the identifier is used to construct file paths or URLs. Consider removing the ".json" extension to maintain consistency with other project files.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
These are required for scratch to work and should always be set.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes: https://github.com/RaspberryPiFoundation/digital-editor-issues/issues/1136
Uses APIs introduced in: RaspberryPiFoundation/editor-api#695
This uses our new APIs for loading and updating projects as well as loading and creating and assets. See commits for more.
I've also kept it so the web component test page loads assets from the web component project and doesn't depend on the API.