[72373]: Edited offline status banner and add header indicator#22206
[72373]: Edited offline status banner and add header indicator#22206ihordubas99 wants to merge 1 commit intodevfrom
Conversation
There was a problem hiding this comment.
As discussed- we'll need to:
- Rebase off #22125
- Retrieve updated designs that cater for true offline support: we cannot fetch the connection templates server side when network is offline. Proposal was to cache the connection templates server side.
| .flash-warn, | ||
| .flash-success | ||
| position: fixed | ||
| top: 10% | ||
| z-index: 999 | ||
| left: 50% | ||
| transform: translateX(-50%) | ||
| width: 90% | ||
| max-width: 934px | ||
| align-items: center | ||
| border-radius: 6px | ||
|
|
||
| .Banner-visual | ||
| align-self: center | ||
|
|
||
| #connection-error-retry-button | ||
| border-radius: 6px | ||
| background-color: #F6F8FA | ||
| border: 1px solid #D0D7DE | ||
| font-size: 14px | ||
| font-weight: 600 |
There was a problem hiding this comment.
Generally when we introduce new patterns, we prefer that design team & UX team are aligned- ideally the changes also go into https://github.com/opf/primer_view_components so that they're easily reusable.
|
|
||
| def render_success_flash_message_via_turbo_stream(**) | ||
| render_flash_message_via_turbo_stream(**, scheme: :success) | ||
| render_flash_message_via_turbo_stream(**, scheme: :success, icon: :"check") |
There was a problem hiding this comment.
icon: :check within documents controller:
render_success_flas_message_via_turbo_stream(message:, icon: :check)| end | ||
|
|
||
| def render_warning_flash_message_via_turbo_stream(**) | ||
| render_flash_message_via_turbo_stream(**, scheme: :warning, icon: :"cloud-offline") |
There was a problem hiding this comment.
ditto: we should not enforce the icon: :"cloud-offline" within this shared helper
| OpenProjectStimulusApplication.preregister('check-all', CheckAllController); | ||
| OpenProjectStimulusApplication.preregister('checkable', CheckableController); | ||
| OpenProjectStimulusApplication.preregister('truncation', TruncationController); | ||
| OpenProjectStimulusApplication.preregister('documents--connection-status', ConnectionStatusController); |
There was a problem hiding this comment.
dynamic stimulus controllers should not be pre-registered. They are lazy-loaded. See https://www.openproject.org/docs/development/concepts/stimulus/
| // Dispatch a custom DOM event to notify the Stimulus connection-status controller | ||
| // about the current connection state. This bridges React (BlockNote editor) and | ||
| // Stimulus, allowing the header indicator to show/hide without direct coupling. | ||
| useEffect(() => { | ||
| document.dispatchEvent(new CustomEvent('documents:connection-status-changed', { | ||
| detail:{ offline:connectionError } | ||
| })); | ||
| }, [connectionError]); |
There was a problem hiding this comment.
I'm not sure we need a new event based mechanism as we already introduced https://github.com/opf/openproject/blob/dev/frontend/src/react/helpers/connection-template-fetcher.ts that should react to connectionError state already- and conventionally we want to encapsulate effects within the useCollaboration hook.
| const { offline } = (event as CustomEvent<{ offline:boolean }>).detail; | ||
| this.indicatorTarget.style.display = offline ? '' : 'none'; | ||
| }; | ||
| } No newline at end of file |
There was a problem hiding this comment.
ditto: not sure we need a new stimulus controller. See https://github.com/opf/openproject/blob/dev/frontend/src/react/helpers/connection-template-fetcher.ts that
2 participants
Ticket
https://community.openproject.org/projects/communicator-stream/work_packages/72373/activity
What are you trying to accomplish?
Add user-facing feedback for connection state in the collaborative document editor.
When the editor loses connection to the Hocuspocus server, users now see:
What approach did you choose and why?
The offline/online state is already tracked in the React
useCollaborationhook viaconnectionError. To communicate this state to the Stimulus-based page header without tight coupling, a custom DOM eventdocuments:connection-status-changedis dispatched fromOpBlockNoteContainerwhenever the connection state changes.A new Stimulus controller
documents--connection-statuslistens for this event and toggles the visibility of theLiveConnectionStatusComponentin the header.The flash banners are rendered server-side via existing turbo stream infrastructure (
render_warning_flash_message_via_turbo_stream/render_success_flash_message_via_turbo_stream), extended to support an optional action button.Merge checklist