Warn before closing a form with unsaved changes

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

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?';
+  },
+};

lib/lightning_web/live/workflow_live/edit.ex

@@ -62,7 +62,11 @@ defmodule LightningWeb.WorkflowLive.Edit do
           </.with_changes_indicator>
         </LayoutComponents.header>
       </:header>
-      <div class="relative h-full flex" id={"workflow-edit-#{@workflow.id}"}>
+      <div
+        class="relative h-full flex"
+        id={"workflow-edit-#{@workflow.id}"}
+        phx-hook="UnsavedChanges"
+      >
         <div
           phx-hook="WorkflowEditor"
           class="grow"
@@ -422,6 +426,7 @@ defmodule LightningWeb.WorkflowLive.Edit do
   end
 
   def handle_event("validate", %{"workflow" => params}, socket) do
+    send(self(), :changes_detected)
     {:noreply, handle_new_params(socket, params)}
   end
 
@@ -450,6 +455,8 @@ defmodule LightningWeb.WorkflowLive.Edit do
         Lightning.Repo.insert_or_update(socket.assigns.changeset)
         |> case do
           {:ok, workflow} ->
+            send(self(), :changes_saved)
+
             socket
             |> assign_workflow(workflow)
             |> push_patch(to: build_next_path(socket, workflow), replace: true)
@@ -501,6 +508,14 @@ defmodule LightningWeb.WorkflowLive.Edit do
     {:noreply, socket |> assign(follow_run_id: attempt_run.run_id)}
   end
 
+  def handle_info(:changes_detected, socket) do
+    {:noreply, push_event(socket, "changes_detected", %{})}
+  end
+
+  def handle_info(:changes_saved, socket) do
+    {:noreply, push_event(socket, "changes_saved", %{})}
+  end
+
   defp has_child_edges?(workflow_changeset, job_id) do
     workflow_changeset
     |> Ecto.Changeset.get_assoc(:edges, :struct)