Only retrieve cached projects for the current locale

[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.
• Updated existing caching-related tests in useProject.test

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

[zetter-rpf]

Thanks for looking at the the tests!

Commented out code like this can be confusing- it's often not clear why they are commented and what someone should do when they come back to it.

Also some of them look like they are also testing cases that are no longer covered? (it's harder to see because of the diff).

Could the old tests be adapted to work with locales so they pass? And if there are tests that are now redundant or covered by your new cases, could we just remove them? They will be in the git history if we want to change back to this behaviour later.

Let me know if it would be helpful to look at this together today or this week - I do I find testing hooks can be complicated so happy to help.

[cocomarine]

Thanks for the feedback, Chris.
Instead of commenting out, I skipped those tests that are no longer passing.

[zetter-rpf]

Me and @cocomarine talked through this - I think it's skipped tests can be just like commented out tests and be less to future people looking at the code as they don't explain why they are commented or when they will be fixed

It would be better to use the tests to document and test the current behaviour of the system, which might mean reviewing each test to update or delete it.

[zetter-rpf]

I've talked this through with @cocomarine - I'd like another day to just understand the consequences for code editor and if we'll need to do additional work to support this. I'll try to get back to you tomorrow.

[zetter-rpf]

I've talked this through with @cocomarine - I'd like another day to just understand the consequences for code editor and if we'll need to do additional work to support this. I'll try to get back to you tomorrow.

I spent some time understanding how caching and locales work in the editor. I found:

• When projects are saved the cache isn't written to. This means this will only affect unsaved projects (which is more likely when logged out).
• Some of the blank starter projects set up in development only exist for the 'en' locale, but in production they have variants for our supported locales.
• Most projects will have a locale set as we default it to 'en', but not all projects are localised versions available.

The consequences of this change is that:

• If a user changes their locale on an unsaved project they will lose their work
• if a user has a locale and the project has no version in that locale, caching won't work and they will lose their work if they refresh/close the page.

This will affect project site more than editor, so fine to approve once the tests are updated

[zetter-rpf]

Thanks for updating the tests!