Update to fix CCP locale switching

[cocomarine]

Changes

Locale switching fix

• Before: caching wasn't working properly, hence the editor-standalone not behaving consistently and the CCP broken with locale switching (see https://www.figma.com/board/21lOTDiDkQ0cdUNF2fpnZh/Editor-behaviour-on-locale-change?node-id=0-1&p=f&t=osxIb33Az8NX4iqL-0)
• Added a locale match check before loading a cached project in useProject hook
  • This is a temporary fix as it effectively disables caching.
  • Both editor-standalone and projects-ui behave in the same way after this change.
• Commented out caching-related tests in useProject.test and added couple of new tests.

Initial load problem fix

• Before: when an editor page with locales other than en was first loaded in CCP, it rendered en page rather than the locale page (editor-standalone was fine)
• Updated to make sure initial attributes like locale are passed to React by reading them from the DOM in reactProps() of web-component.js
  • This is so that the first render uses the host's value even when attributeChangedCallback hasn't been run yet

[Copilot]

Pull request overview

This PR updates the project-loading hook to make localStorage cache usage dependent on the active i18n locale, aiming to prevent incorrect cached content from being loaded after CCP locale switching.

Changes:

• Adds a locale match check (cachedProject?._cachedLocale === i18n.language) before loading a cached project.
• Simplifies the cache eligibility logic into a single shouldUseCache condition.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[zetter-rpf]

This is a temporary fix as it effectively disabled caching.

For my understanding, do you mean this disables the project caching when you change locale? Or is it more than that?

[zetter-rpf]

Thanks for the fix, the approach looks good. Let me know when you have fixed the tests and I can re-review.

It would be good to have at least one new test for the updated behaviour of useProject

[cocomarine]

This is a temporary fix as it effectively disabled caching.

For my understanding, do you mean this disables the project caching when you change locale? Or is it more than that?

Yes, I tried to change as little as possible from the existing code for the effect of disabling caching.

[cocomarine]

The GitHub diff looks odd for this file; basically, I commented out caching-related tests and added these two tests:

describe("When not embedded", () => {
...
 // Tests for the temporarily disabled cache functionality
  test("does not use cache even with loadCache true and matching cache in localStorage", async () => {
    syncProject.mockImplementation(jest.fn((_) => loadProject));
    localStorage.setItem("hello-world-project", JSON.stringify(cachedProject));
    renderHook(
      () =>
        useProject({
          projectIdentifier: "hello-world-project",
          accessToken,
          loadCache: true,
          reactAppApiEndpoint,
        }),
      { wrapper },
    );
    expect(setProject).not.toHaveBeenCalledWith(cachedProject);
    expect(syncProject).toHaveBeenCalledWith("load");
  });

  test("does not use cache when cache locale does not match effectiveLocale and loads from server", async () => {
    syncProject.mockImplementation(jest.fn((_) => loadProject));
    const cachedWrongLocale = { ...cachedProject, locale: "en-GB" };
    localStorage.setItem(
      cachedWrongLocale.identifier,
      JSON.stringify(cachedWrongLocale),
    );
    renderHook(
      () =>
        useProject({
          projectIdentifier: cachedWrongLocale.identifier,
          loadCache: true,
          accessToken,
          reactAppApiEndpoint,
        }),
      { wrapper },
    );
    expect(setProject).not.toHaveBeenCalledWith(cachedWrongLocale);
    expect(syncProject).toHaveBeenCalledWith("load");
    await waitFor(() =>
      expect(loadProject).toHaveBeenCalledWith({
        identifier: cachedWrongLocale.identifier,
        locale: "ja-JP",
        accessToken,
        reactAppApiEndpoint,
      }),
    );
  });