fix(sanity): preserve form (as readOnly) when reconnecting

[bjoerge]

Description

Currently, if the connection drops while you're editing a document, the whole pane reloads and the react tree inside it will unmount/remount, loosing all its state. Since we're introducing more transient state in these components (comments, etc), we're running a bigger risk of losing people's stuff when this happens. Short disconnects happens quite often, so it can be pretty disruptive to the end-user. This PR makes sure that instead of taking over the pane when the listener disconnects (technically, is in a "reconnecting" state), we retain the form component instance, but set it as readonly to prevent the editor for making edits without being connected.

What to review

• I've changed a few places to use connectionState !== 'reconnecting' instead of connectionState === 'connected'.
• Is there anything I'm missing here?

Note: this is not a "perfect solution", and I noticed during testing that any open comments dialog gets closed when the document flips to read-only, which is still not great. However, this PR should make things a little bit less disruptive.

Testing

Manual testing is a bit tricky, because you will have to force a listener disconnect. However, I added a few lines to simulate the behavior during disconnect

Repro current behavior during disconnect

Open this deployment, which simulates connection drop 5 seconds after you stop editing a document (try making some edits to e.g. this document and wait for 5 seconds)

Test new behavior during disconnect

Open this deployment, which simulates connection drop 5 seconds after you stop editing, but also includes the changes in this PR (try making some edits to the same document on this deployment and wait for 5 seconds)

Notes for release

• Improved how the editor handles intermittent disconnects. Instead of replacing the current form with a loading screen, the form will now instead be set "read only"

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
performance-studio	✅ Ready (Inspect)	Visit Preview		Mar 1, 2024 5:04pm
test-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 1, 2024 5:04pm

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
studio-workshop	⬜️ Ignored (Inspect)	Visit Preview		Mar 1, 2024 5:04pm

[bjoerge]

• debug: add repro/simulation #5886
• fix(sanity): preserve form (as readOnly) when reconnecting #5884 👈
• next

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @bjoerge and the rest of your teammates on Graphite

[github-actions]

No changes to documentation

[github-actions]

Component Testing Report Updated Mar 1, 2024 5:06 PM (UTC)

File	Status	Duration	Passed	Skipped	Failed
comments/CommentInput.spec.tsx	✅ Passed (Inspect)	31s	15	0	0
formBuilder/ArrayInput.spec.tsx	✅ Passed (Inspect)	6s	3	0	0
formBuilder/inputs/PortableText/Annotations.spec.tsx	✅ Passed (Inspect)	12s	3	0	0
formBuilder/inputs/PortableText/copyPaste/CopyPaste.spec.tsx	✅ Passed (Inspect)	12s	4	2	0
formBuilder/inputs/PortableText/Decorators.spec.tsx	✅ Passed (Inspect)	12s	6	0	0
formBuilder/inputs/PortableText/FocusTracking.spec.tsx	✅ Passed (Inspect)	31s	15	0	0
formBuilder/inputs/PortableText/Input.spec.tsx	✅ Passed (Inspect)	1m 0s	15	0	0
formBuilder/inputs/PortableText/ObjectBlock.spec.tsx	✅ Passed (Inspect)	1m 0s	18	0	0
formBuilder/inputs/PortableText/RangeDecoration.spec.tsx	✅ Passed (Inspect)	11s	6	0	0
formBuilder/inputs/PortableText/Styles.spec.tsx	✅ Passed (Inspect)	13s	6	0	0
formBuilder/inputs/PortableText/Toolbar.spec.tsx	✅ Passed (Inspect)	19s	9	0	0

[sjelfull]

Thanks, LGTM!