Immersive editor: warn users about undeployed changes before navigating away
- Dominant language
- JavaScript
- Stars
- 400
- Forks
- 89
- Avg merge
- 1d 20h
- Merged PRs (30d)
- 149
Description
## Problem
When users click the Home button in the immersive editor, navigation happens immediately with no confirmation. If the user has modified flows but not deployed them, those changes are lost.
Related: #6653, #6670
Slack thread: https://flowfuse.slack.com/archives/C031K13FLDD/p1770629072311919
## Current State
- The Home button is a plain `` — no navigation guards or confirmations
- There is no mechanism to detect or communicate Node-RED's dirty (undeployed) state
- The existing iframe `postMessage` protocol handles `load`, `navigate`, `logout`, `toggle-drawer`, and `drawer-state` — but nothing about deploy state
## Options
### 1. Always warn when leaving the editor
Show a confirmation dialog ("You may have undeployed changes") whenever the user clicks Home. Simple, no launcher changes needed, but may be annoying when there are no actual changes.
### 2. Query Node-RED dirty state via postMessage
Add a new message type (e.g. `get-deploy-state`) to the iframe protocol. On Home click, ask Node-RED if flows are dirty; only show a warning if they are. Requires changes in both FlowFuse frontend and the NR launcher/plugin.
### 3. Track deploy events from Node-RED
Have Node-RED push `dirty`/`deployed` events to the parent via postMessage. FlowFuse tracks the state and only warns when dirty. Also requires launcher changes, but avoids the request-response round trip.
## Affected Components
- `frontend/src/pages/instance/Editor/index.vue` (instance immersive editor)
- `frontend/src/pages/device/Editor/index.vue` (device immersive editor)
- `frontend/src/components/immersive-editor/HostedInstanceEditorWrapper.vue` (iframe messaging)
- Potentially `@flowfuse/nr-launcher` (for options 2 & 3)
Contributor guide
Assessment
This issue has not been assessed yet.