Render blank screen if project is a scratch project (#1210)

Stop Scratch projects being displayed

Author: loiswells97

CHANGELOG.md

@@ -10,7 +10,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - Fake translation for stress testing (#1206)
 
+### Changed
+
+- Prevent the Scratch projects from being displayed (#1210)
+
 ### Fixed
+
 - Styling issue on sidebar on mobile (#1194)
 
 ## [0.30.0] - 2025-04-15

src/components/WebComponentProject/WebComponentProject.jsx

@@ -41,6 +41,7 @@ const WebComponentProject = ({
   const projectIdentifier = useSelector(
     (state) => state.editor.project.identifier,
   );
+  const isScratchProject = project.project_type === "scratch";
   const codeRunTriggered = useSelector(
     (state) => state.editor.codeRunTriggered,
   );
@@ -137,24 +138,28 @@ const WebComponentProject = ({
 
   return (
     <>
-      {!outputOnly &&
-        (isMobile ? (
-          <MobileProject
-            withSidebar={withSidebar}
-            sidebarOptions={sidebarOptions}
-          />
-        ) : (
-          <Project
-            nameEditable={nameEditable}
-            withProjectbar={withProjectbar}
-            withSidebar={withSidebar}
-            sidebarOptions={sidebarOptions}
-          />
-        ))}
-      {outputOnly && (
-        <div className="embedded-viewer" data-testid="output-only">
-          {loading === "success" && <Output outputPanels={outputPanels} />}
-        </div>
+      {!isScratchProject && (
+        <>
+          {!outputOnly &&
+            (isMobile ? (
+              <MobileProject
+                withSidebar={withSidebar}
+                sidebarOptions={sidebarOptions}
+              />
+            ) : (
+              <Project
+                nameEditable={nameEditable}
+                withProjectbar={withProjectbar}
+                withSidebar={withSidebar}
+                sidebarOptions={sidebarOptions}
+              />
+            ))}
+          {outputOnly && (
+            <div className="embedded-viewer" data-testid="output-only">
+              {loading === "success" && <Output outputPanels={outputPanels} />}
+            </div>
+          )}
+        </>
       )}
     </>
   );

src/components/WebComponentProject/WebComponentProject.test.js

@@ -21,6 +21,7 @@ jest.useFakeTimers();
 let store;
 
 const renderWebComponentProject = ({
+  projectType,
   instructions,
   permitOverride = true,
   loading,
@@ -33,6 +34,7 @@ const renderWebComponentProject = ({
   const initialState = {
     editor: {
       project: {
+        project_type: projectType,
         components: [
           { name: "main", extension: "py", content: "print('hello')" },
         ],
@@ -68,6 +70,10 @@ describe("When state set", () => {
     });
   });
 
+  test("Renders", () => {
+    expect(screen.queryAllByText("output.textOutput")[0]).toBeInTheDocument();
+  });
+
   test("Triggers codeChanged event", () => {
     act(() => {
       jest.runAllTimers();
@@ -114,6 +120,18 @@ describe("When state set", () => {
   });
 });
 
+describe("When project type is scratch", () => {
+  beforeEach(() => {
+    renderWebComponentProject({
+      projectType: "scratch",
+    });
+  });
+
+  test("Renders a blank screen", () => {
+    expect(screen.queryByText("output.textOutput")).not.toBeInTheDocument();
+  });
+});
+
 describe("When there are instructions", () => {
   beforeEach(() => {
     renderWebComponentProject({

src/web-component.js

@@ -113,7 +113,7 @@ class WebComponent extends HTMLElement {
 
   get editorCode() {
     const state = store.getState();
-    return state.editor.project.components[0].content;
+    return state.editor.project.components[0]?.content;
   }
 
   get menuItems() {