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/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,
         }),