SPIKE: Fix console warnings when loading UI

src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx

@@ -366,8 +366,7 @@ const PyodideRunner = ({ active, outputPanels = ["text", "visual"] }) => {
   };
 
   if (!pyodideWorker && active) {
-    console.warn("PyodideWorker is not initialized");
-    return;
+    return null;
   }
 
   return (

src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx

@@ -558,7 +558,6 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
       ) : (
         <Tabs
           forceRenderTabPanel={true}
-          defaultIndex={showVisualOutput ? 0 : 1}
           selectedIndex={tabbedViewSelectedIndex}
           onSelect={setTabbedViewSelectedIndex}
         >

src/components/Menus/Sidebar/FilePanel/FilePanel.jsx

@@ -52,6 +52,7 @@ const FilePanel = ({ isMobile }) => {
     ? []
     : [
         <DesignSystemButton
+          key="new-file"
           text={t("filePanel.newFileButton")}
           textAways={true}
           icon={<PlusIcon />}

src/components/ScratchEditor/ScratchIntegrationHOC.jsx

@@ -43,6 +43,10 @@ const ScratchIntegrationHOC = function (WrappedComponent) {
         return;
       }
 
+      if (event.data?.type === "webpackOk") {
+        return;
+      }
+
       switch (event.data.type) {
         case "scratch-gui-download":
           this.handleDownload(event);
@@ -80,7 +84,16 @@ const ScratchIntegrationHOC = function (WrappedComponent) {
       this.props.onClickSave();
     }
     render() {
-      const { ...componentProps } = this.props;
+      const {
+        loadProject,
+        localesOnly,
+        onClickRemix,
+        onClickSave,
+        saveProjectSb3,
+        setStageSize,
+        ...componentProps
+      } = this.props;
+
       return <WrappedComponent {...componentProps} />;
     }
   }

src/containers/WebComponentLoader.jsx

@@ -32,6 +32,15 @@ import {
   projectOwnerLoadedEvent,
 } from "../events/WebComponentCustomEvents";
 
+const TOAST_CONTAINER_DEFAULTS = {
+  ...(ToastContainer.defaultProps || {}),
+};
+
+// react-toastify v8 uses defaultProps on a function component, which React
+// warns about in development. We pass the same defaults explicitly instead.
+// We should upgrade to version 10 in a different commit, this removes the warning
+ToastContainer.defaultProps = undefined;
+
 const WebComponentLoader = (props) => {
   const {
     assetsIdentifier,
@@ -222,6 +231,7 @@ const WebComponentLoader = (props) => {
           {internalStyles.toString()}
           <div id="wc" className={`--${cookies.theme || themeDefault}`}>
             <ToastContainer
+              {...TOAST_CONTAINER_DEFAULTS}
               enableMultiContainer
               containerId="top-center"
               position="top-center"

src/hooks/useProject.js

@@ -105,7 +105,13 @@ export const useProject = ({
         return;
       }
 
-      const data = defaultPythonProject;
+      const data = {
+        ...defaultPythonProject,
+        name: i18n.t("project.untitled", {
+          lng: effectiveLocale,
+          defaultValue: defaultPythonProject.name,
+        }),
+      };
       dispatch(setProject(data));
     }
   }, [

src/hooks/useProject.test.js

@@ -57,7 +57,12 @@ describe("When not embedded", () => {
 
   test("If no identifier uses default python project", () => {
     renderHook(() => useProject({}), { wrapper });
-    expect(setProject).toHaveBeenCalledWith(defaultPythonProject);
+    expect(setProject).toHaveBeenCalledWith(
+      expect.objectContaining({
+        ...defaultPythonProject,
+        name: "project.untitled",
+      }),
+    );
   });
 
   test("sets project to initialProject if provided", () => {

src/utils/defaultProjects.js

@@ -1,16 +1,16 @@
-import i18n from "./i18n";
+const UNTITLED_PROJECT_NAME = "Untitled project";
 
 export const defaultPythonProject = {
   project_type: "python",
-  name: i18n.t("project.untitled"),
+  name: UNTITLED_PROJECT_NAME,
   locale: null,
   components: [{ extension: "py", name: "main", content: "", default: true }],
   image_list: [],
 };
 
 export const defaultHtmlProject = {
   project_type: "html",
-  name: i18n.t("project.untitled"),
+  name: UNTITLED_PROJECT_NAME,
   components: [
     {
       extension: "html",

src/web-component.html

@@ -50,6 +50,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width" />
+    <link rel="icon" href="data:," />
     <title>Editor Web component</title>
   </head>
   <body>

src/web-component.js

@@ -11,6 +11,21 @@ import { stopCodeRun, stopDraw, triggerCodeRun } from "./redux/EditorSlice";
 import { BrowserRouter } from "react-router-dom";
 import { resetStore } from "./redux/RootSlice";
 
+const originalWarn = console.warn.bind(console);
+let hasShownDesignSystemIconWarning = false;
+const warningText = "DEPRECATED: icons as React elements will not be supported in future releases";
+// This should be addressed by applying the fix, in @raspberrypifoundation/design-system-react
+// This shows the warning once instead of N times
+console.warn = (...args) => {
+  if (args[0] === warningText) {
+    if (hasShownDesignSystemIconWarning) {
+      return;
+    }
+    hasShownDesignSystemIconWarning = true;
+  }
+  originalWarn(...args);
+};
+
 Sentry.init({
   dsn: process.env.REACT_APP_SENTRY_DSN,
   integrations: [new BrowserTracing()],