diff --git a/assets/js/app.js b/assets/js/app.js index 33a4f7657d..cba3989669 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -25,7 +25,7 @@ import { Socket } from 'phoenix'; import { LiveSocket } from 'phoenix_live_view'; import topbar from '../vendor/topbar'; -import { AssocListChange, Copy, Flash, SubmitViaCtrlS, Tooltip } from './hooks'; +import { AssocListChange, Copy, Flash, SubmitViaCtrlS, Tooltip, UnsavedChanges } from './hooks'; import JobEditor from './job-editor'; import JobEditorResizer from './job-editor-resizer/mount'; import TabSelector from './tab-selector'; @@ -41,6 +41,7 @@ let Hooks = { AssocListChange, Copy, SubmitViaCtrlS, + UnsavedChanges, }; // Sets the checkbox to indeterminate state if the element has the diff --git a/assets/js/hooks/index.ts b/assets/js/hooks/index.ts index 47b6300462..37baa9ab16 100644 --- a/assets/js/hooks/index.ts +++ b/assets/js/hooks/index.ts @@ -79,3 +79,20 @@ export const Copy = { }); }, } as PhoenixHook<{}, { to: string }>; + +export const UnsavedChanges = { + mounted() { + this.handleEvent('changes_detected', () => { + window.addEventListener('beforeunload', this.preventNav); + }); + + this.handleEvent('changes_saved', () => { + window.removeEventListener('beforeunload', this.preventNav); + }); + }, + + preventNav(e) { + e.preventDefault(); + e.returnValue = 'You have unsaved changes! Are you sure you want to leave?'; + }, +}; diff --git a/lib/lightning_web/live/workflow_live/edit.ex b/lib/lightning_web/live/workflow_live/edit.ex index 452159dbcf..6e624b0c98 100644 --- a/lib/lightning_web/live/workflow_live/edit.ex +++ b/lib/lightning_web/live/workflow_live/edit.ex @@ -62,7 +62,11 @@ defmodule LightningWeb.WorkflowLive.Edit do -