Revised fix for cross-tab issues (#623)

* Revert "Import a JSON project like a hex file (#622)"

This reverts commit f001f97.

* Revised fix for cross-tab issues

The previous fix still had issues when creating a new project in a second tab
and switching between them.

I initially fixed this by taking the same approach for new project (via
MakeCode) but it's slow and you see the old project render. The loading states
that we'd need don't seen proportionate.

So I've gone with:
- updating MakeCode only as needed
- ensuring import from .org has a header id by setting one explicitly
- carefully tracking when we expect to get new content from MakeCode in
  editorChange

Fixes #618

Author: microbit-matt-hillsdon

src/hooks/project-hooks.tsx

@@ -28,10 +28,7 @@ import {
   PostImportDialogState,
   SaveStep,
 } from "../model";
-import {
-  renameProject,
-  untitledProjectName as untitled,
-} from "../project-name";
+import { untitledProjectName as untitled } from "../project-name";
 import { useStore } from "../store";
 import {
   createCodePageUrl,
@@ -59,10 +56,6 @@ interface ProjectContext {
   project: MakeCodeProject;
   projectEdited: boolean;
   resetProject: () => void;
-  importProject: (
-    project: MakeCodeProject,
-    projectNameOverride: string
-  ) => void;
   loadFile: (file: File, type: LoadType) => void;
   /**
    * Called to request a save.
@@ -137,7 +130,8 @@ export const ProjectProvider = ({
   const openEditorTimedOutDialog = useStore(
     (s) => () => s.setIsEditorTimedOutDialogOpen(true)
   );
-  const expectChangedHeader = useStore((s) => s.setChangedHeaderExpected);
+  const setEditorLoadingFile = useStore((s) => s.setEditorLoadingFile);
+  const setEditorImportingState = useStore((s) => s.setEditorImportingState);
   const projectFlushedToEditor = useStore((s) => s.projectFlushedToEditor);
   const checkIfProjectNeedsFlush = useStore((s) => s.checkIfProjectNeedsFlush);
   const getCurrentProject = useStore((s) => s.getCurrentProject);
@@ -225,8 +219,8 @@ export const ProjectProvider = ({
             logging.log("[MakeCode] Importing project");
             await editorReadyPromise.promise;
             const project = getCurrentProject();
-            expectChangedHeader();
             try {
+              setEditorImportingState();
               await driverRef.current.importProject({ project });
               logging.log("[MakeCode] Project import succeeded");
               projectFlushedToEditor();
@@ -267,7 +261,7 @@ export const ProjectProvider = ({
       logging,
       editorReadyPromise.promise,
       getCurrentProject,
-      expectChangedHeader,
+      setEditorImportingState,
       projectFlushedToEditor,
       langChangeFlushedToEditor,
       checkIfEditorStartUpTimedOut,
@@ -339,6 +333,7 @@ export const ProjectProvider = ({
             return;
           }
           // This triggers the code in editorChanged to update actions etc.
+          setEditorLoadingFile();
           driverRef.current!.importFile({
             filename: file.name,
             parts: [hex],
@@ -353,42 +348,13 @@ export const ProjectProvider = ({
     [
       checkIfEditorStartUpTimedOut,
       driverRef,
-      editorReadyPromise,
+      editorReadyPromise.promise,
       loadDataset,
       logging,
       navigate,
       openEditorTimedOutDialog,
       setPostImportDialogState,
-    ]
-  );
-
-  const importProject = useCallback(
-    async (
-      project: MakeCodeProject,
-      projectNameOverride: string
-    ): Promise<void> => {
-      const hasTimedOut = await checkIfEditorStartUpTimedOut(
-        editorReadyPromise.promise
-      );
-      if (hasTimedOut) {
-        openEditorTimedOutDialog();
-        return;
-      }
-      try {
-        // This triggers the code in editorChanged to update actions etc.
-        await driverRef.current!.importProject({
-          project: renameProject(project, projectNameOverride),
-        });
-      } catch (e) {
-        setPostImportDialogState(PostImportDialogState.Error);
-      }
-    },
-    [
-      checkIfEditorStartUpTimedOut,
-      driverRef,
-      editorReadyPromise.promise,
-      openEditorTimedOutDialog,
-      setPostImportDialogState,
+      setEditorLoadingFile,
     ]
   );
 
@@ -493,7 +459,6 @@ export const ProjectProvider = ({
   const value = useMemo(
     () => ({
       loadFile,
-      importProject,
       openEditor,
       browserNavigationToEditor,
       project,
@@ -512,7 +477,6 @@ export const ProjectProvider = ({
     }),
     [
       loadFile,
-      importProject,
       openEditor,
       browserNavigationToEditor,
       project,

src/pages/ImportPage.tsx

@@ -75,21 +75,21 @@ const ImportPage = () => {
     });
   }, [activitiesBaseUrl, defaultProjectName, intl, logging, params]);
 
-  const { importProject } = useProject();
+  const loadProject = useStore((s) => s.loadProject);
   const newSession = useStore((s) => s.newSession);
   const timestamp = useStore((s) => s.timestamp);
 
   const handleStartSession = useCallback(() => {
     if (project) {
-      importProject(project, name);
+      loadProject(project, name);
       navigate(createDataSamplesPageUrl());
     } else {
       // If no resource fetched, start as new empty session
       // with provided project name
       newSession(name);
       navigate(createDataSamplesPageUrl());
     }
-  }, [importProject, name, navigate, newSession, project]);
+  }, [loadProject, name, navigate, newSession, project]);
 
   const { saveHex } = useProject();
   const handleSave = useCallback(() => {

src/pages/OpenSharedProjectPage.tsx

@@ -68,21 +68,21 @@ const contentStackProps: Partial<StackProps> = {
 const OpenSharedProjectPage = () => {
   const logging = useLogging();
   const navigate = useNavigate();
-  const { importProject } = useProject();
+  const loadProject = useStore((s) => s.loadProject);
   const [name, setName] = useState("");
   const { sharedState, header, dataset, projectText } =
     useProjectPreload(setName);
   const { shortId } = useParams();
 
   const handleOpenProject = useCallback(() => {
     if (!header || !projectText) return;
-    importProject({ header: { ...header, name }, text: projectText }, name);
+    loadProject({ header: { ...header, name }, text: projectText }, name);
     logging.event({
       type: "import-shared-project-complete",
       detail: { shortId },
     });
     navigate(createDataSamplesPageUrl());
-  }, [importProject, header, projectText, name, navigate, logging, shortId]);
+  }, [loadProject, header, projectText, name, navigate, logging, shortId]);
 
   if (sharedState === SharedState.Failed) {
     return <ErrorPreloading />;

src/project-name.ts

@@ -1,6 +1,3 @@
-import { MakeCodeProject } from "@microbit/makecode-embed";
-import { filenames } from "./makecode/utils";
-
 /**
  * (c) 2024, Micro:bit Educational Foundation and contributors
  *
@@ -10,26 +7,3 @@ export const untitledProjectName = "Untitled";
 export const validateProjectName = (name: string): boolean => {
   return name.trim().length > 0;
 };
-
-export const renameProject = (
-  project: MakeCodeProject,
-  name: string
-): MakeCodeProject => {
-  const pxtString = project.text?.[filenames.pxtJson];
-  const pxt = JSON.parse(pxtString ?? "{}") as Record<string, unknown>;
-
-  return {
-    ...project,
-    header: {
-      ...project.header!,
-      name,
-    },
-    text: {
-      ...project.text,
-      [filenames.pxtJson]: JSON.stringify({
-        ...pxt,
-        name,
-      }),
-    },
-  };
-};