Implementation/72687 new connection error restore banner v2#22591
Merged
akabiru merged 6 commits intorefinements/72665-collaboration-improvementsfrom Mar 31, 2026
Conversation
As this is already a dynamically loaded controller, there is no need to pre-register it. Ref: docs/development/concepts/stimulus/README.md
…or connection status Replace inline style.display manipulation with the semantic hidden HTML attribute for better accessibility. Consolidate repetitive show/hide logic into a single activateState method driven by a ConnectionState type union, and align Stimulus target names (live/offline/recovered) between controller and template.
…ver-side template Replace the empty shadow DOM error container with a server-rendered ConnectionErrorNoticeComponent that is hidden by default and revealed via a Stimulus controller when the collaboration connection fails. This approach caches the fully-localized Primer Banner in the DOM at page load, avoiding the need to fetch templates from the server during network failures. The header info line continues to show brief "Currently offline" / "Connection reestablished" status independently. - Simplify ConnectionErrorNoticeComponent to always show the server-unavailable message (all offline is blocking without IDB) - Add EditorConnectionController to toggle error/editor visibility - Remove shadow DOM error container and FlashController from block-note-element - Delete unused connection-template-fetcher.ts - Remove unused translation keys
akabiru
force-pushed
the
implementation/72687-new-connection-error-restore-banner-v2
branch
from
1961f20 to
ac52634
Compare
akabiru
force-pushed
the
implementation/72687-new-connection-error-restore-banner-v2
branch
from
ac52634 to
68c140b
Compare
akabiru
merged commit 1e09c24
into
refinements/72665-collaboration-improvements
12 checks passed
akabiru
deleted the
implementation/72687-new-connection-error-restore-banner-v2
branch
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Ticket
https://community.openproject.org/projects/communicator-stream/work_packages/72687
What are you trying to accomplish?
Replace server-rendered connection error/recovery flash banners with a
lightweight inline status indicator in the document page header.
Previously, when the collaboration WebSocket disconnected or reconnected,
the app made HTTP requests to Rails endpoints (
render_connection_error,render_connection_recovery) to fetch and inject server-rendered HTMLinto an
errorContaineroutside the React tree.Now the connection state is handled entirely on the frontend — a small
ConnectionStatusComponentin the info line shows "Currently offline"or "Connection reestablished" by toggling visibility via a Stimulus
controller that listens to custom DOM events dispatched by
OpBlockNoteContainerScreenshots
What approach did you choose and why?
Chosen approach: pure frontend state management via custom DOM events + Stimulus
OpBlockNoteContainerdispatchesdocuments:connection-erroranddocuments:connection-recoveryevents onwindowbased on theofflineModestate fromuseCollaboration.ConnectionStatusController(Stimulus) listens for these events and toggles
style.displayon theappropriate elements.
The "normal" state elements (LiveUsers + LiveSavedAt) are found via
querySelectorAll('[data-normal]')rather than Stimulus targets, becauseLiveUsersComponentrenders as a<turbo-frame>that gets replaced onTurbo updates — which would cause Stimulus to lose track of cached targets.
Merge checklist