Addressing copilot comment

Copilot spotted that ?browserPreview=true made the cache locale bypass apply too broadly.

This change scopes that bypass to embedded browser previews by passing the existing embedded
prop into useProject. Non-embedded routes with ?browserPreview=true now still require the
cached locale to match, while embedded preview tabs can still load unsaved localized changes.

Added tests for both cases.

Author: abcampo-iry

src/containers/WebComponentLoader.jsx

@@ -160,6 +160,7 @@ const WebComponentLoader = (props) => {
     remixLoadFailed,
     initialProject,
     locale,
+    embedded,
   });
 
   useProjectPersistence({

src/containers/WebComponentLoader.test.js

@@ -262,9 +262,28 @@ describe("When no user is in state", () => {
         loadCache: true,
         remixLoadFailed: false,
         reactAppApiEndpoint: "http://localhost:3009",
+        embedded: false,
       });
     });
 
+    test("Passes embedded prop to useProject hook", () => {
+      render(
+        <Provider store={store}>
+          <CookiesProvider cookies={cookies}>
+            <WebComponentLoader
+              code={code}
+              identifier={identifier}
+              embedded={true}
+            />
+          </CookiesProvider>
+        </Provider>,
+      );
+
+      expect(useProject).toHaveBeenLastCalledWith(
+        expect.objectContaining({ embedded: true }),
+      );
+    });
+
     test("Calls useProjectPersistence hook with correct attributes", () => {
       expect(useProjectPersistence).toHaveBeenCalledWith({
         project: {
@@ -409,6 +428,7 @@ describe("When no user is in state", () => {
         loadCache: true,
         remixLoadFailed: false,
         reactAppApiEndpoint: "http://localhost:3009",
+        embedded: false,
       });
     });
   });
@@ -536,6 +556,7 @@ describe("When user is in state", () => {
           loadCache: true,
           remixLoadFailed: false,
           reactAppApiEndpoint: "http://localhost:3009",
+          embedded: false,
         });
       });
 
@@ -568,6 +589,7 @@ describe("When user is in state", () => {
             loadCache: true,
             remixLoadFailed: false,
             reactAppApiEndpoint: "http://localhost:3009",
+            embedded: false,
           });
         });
       });
@@ -650,6 +672,7 @@ describe("When user is in state", () => {
           loadCache: true,
           remixLoadFailed: true,
           reactAppApiEndpoint: "http://localhost:3009",
+          embedded: false,
         });
       });
 
@@ -813,6 +836,7 @@ describe("when a Scratch remix updates the project identifier", () => {
         loadCache: true,
         remixLoadFailed: false,
         reactAppApiEndpoint: "http://localhost:3009",
+        embedded: false,
       });
     });
   });

src/hooks/useProject.js

@@ -16,6 +16,7 @@ export const useProject = ({
   loadCache = true,
   remixLoadFailed = false,
   locale = null,
+  embedded = false,
 }) => {
   const loading = useSelector((state) => state.editor.loading);
   const isEmbedded = useSelector((state) => state.editor.isEmbedded);
@@ -24,7 +25,7 @@ export const useProject = ({
     new URLSearchParams(window.location.search).get("browserPreview") ===
     "true";
   const shouldLoadBrowserPreviewCache =
-    isBrowserPreview || browserPreviewFromQuery;
+    isBrowserPreview || (embedded && browserPreviewFromQuery);
   const project = useSelector((state) => state.editor.project);
   const loadDispatched = useRef(false);
 

src/hooks/useProject.test.js

@@ -140,6 +140,31 @@ describe("When not embedded", () => {
     );
   });
 
+  test("If cached project does not match locale and browserPreview query is used outside embedded viewer, does not use cached project", () => {
+    syncProject.mockImplementation(jest.fn((_) => jest.fn()));
+    window.history.pushState(
+      {},
+      "",
+      "/en-US/projects/hello-world-project?browserPreview=true&page=index.html",
+    );
+    localStorage.setItem(
+      cachedProject.identifier,
+      JSON.stringify(cachedProject),
+    );
+    renderHook(
+      () =>
+        useProject({
+          projectIdentifier: cachedProject.identifier,
+          locale: "en-US",
+          accessToken,
+          reactAppApiEndpoint,
+        }),
+      { wrapper },
+    );
+    expect(syncProject).toHaveBeenCalledWith("load");
+    expect(setProject).not.toHaveBeenCalledWith(cachedProject);
+  });
+
   test("If cached project does not match identifier and locale, loads correct uncached project", async () => {
     syncProject.mockImplementationOnce(jest.fn((_) => loadProject));
     localStorage.setItem("project", JSON.stringify(cachedProject));
@@ -559,6 +584,7 @@ describe("When not embedded", () => {
 
   afterEach(() => {
     localStorage.clear();
+    window.history.pushState({}, "", "/");
   });
 });
 
@@ -581,7 +607,11 @@ describe("When embedded", () => {
       identifier: "blank-html-starter",
       locale: "en",
     };
-    window.history.pushState({}, "", "/?browserPreview=true&page=index.html");
+    window.history.pushState(
+      {},
+      "",
+      "/en-US/embed/viewer/blank-html-starter?browserPreview=true&page=index.html",
+    );
     localStorage.setItem(
       browserPreviewCachedProject.identifier,
       JSON.stringify(browserPreviewCachedProject),
@@ -591,6 +621,7 @@ describe("When embedded", () => {
         useProject({
           projectIdentifier: browserPreviewCachedProject.identifier,
           locale: "en-US",
+          embedded: true,
           accessToken,
           reactAppApiEndpoint,
         }),