fix(slice-machine): reconcile state from filesystem when possible (#1100,DT-1705)

[lihbr]

Context

See the Loom video below for a full walkthrough, should help understanding what's being made here.

Slice Machine UI has a "layered" kind of state for custom types and slices, from fresher and often-changing to more static and less-often-changing ones:

1. "Browser state": in Slice Machine UI when we use the custom type or slice builder, this state lives in the browser's memory.
2. "Filesystem state": in the user's project, this state is version-controlled with git.
3. "Prismic state": on Prismic's server, this state is updated through the custom type API.

The issue this PR addresses is that while we prefer changes to be made on in the UI (updating state 1. first), sometimes changes have to happen on the filesystem (updating state 2.). This is often the case with richtext labels for example (#1100) because those cannot (yet) be configured through the UI.

When this happens this leads to some confusion in the UI because state 2. (filesystem) goes ahead of state 1. (browser). The UI having no mechanism to resolve that kind of conflicts it leads to a surprising UX for users, sometime having them lose part of their work.

This PR (partially) fixes: #1100, DT-1705

The Solution

This PR improves the experience of users encountering the above scenario by allowing the UI the reconcile states 1. and 2. when state 2. (filesystem) goes ahead of state 1. (browser) and state 1. (browser) was left untouched before state 2. (filesystem) went ahead when working on custom types and slices.

flowchart TD;
    A(["State 2. (filesystem) changes"]);
    B{"Was state 1. (browser) touched?"};
    C["Update state 1. (browser)\nusing state 2. (filesystem)"];
    D["Do nothing, both states were\n updated and we don't have a\nconflict resolution mechanism.\nState 1. (browser) will overwrite\nstate 2. (filesystem) on save."];
    A --> B;
    B -- No --> C;
    B -- Yes --> D;

Loading

As stated by the above chart, this is not perfect as if both states were touched, state 1. (browser) will overwrite state 2. (filesystem). I don't think we want to develop a smart conflict resolution algorithm to improve that further, we'd rather want to invest more in the UI to make it more capable and reduce the need to update models from the file system.

---

I implemented the above in the useServerState hook which is the central point of the application where SWR is used and causing the initial issue (#1100). I'm not really sure there's a better workaround to update the Redux store properly here.

Checklist before requesting a review

• I hereby declare my code ready for review.
• If it is a critical feature, I have added tests.
• The CI is successful.
• If there could backward compatibility issues, it has been discussed and planned.

[OPT] Preview

https://www.loom.com/share/aa0371e2cb184660bf7cde958481fc10?sid=baa3677e-b0be-4d4f-9da5-ef47be462053

[linear]

DT-1705 (BUG) Rich text labels are erased upon Save

#1100

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
slice-machine	✅ Ready (Inspect)	Visit Preview	Oct 24, 2023 8:38am

[bapmrl]

Excellent work Lucie 😊