feature: Alert users when form has unsaved changes

app/components/avo/views/resource_edit_component.html.erb

@@ -17,6 +17,7 @@
     html: {
       novalidate: true
     },
+    data: { controller: "form-exit-prompt", form_exit_prompt_target: "form" },
     multipart: true do |form| %>
     <%= render Avo::ReferrerParamsComponent.new back_path: back_path %>
     <%= content_tag :div, class: "space-y-12" do %>

app/javascript/js/controllers.js

@@ -14,6 +14,7 @@ import DateFieldController from './controllers/fields/date_field_controller'
 import DateTimeFilterController from './controllers/date_time_filter_controller'
 import EasyMdeController from './controllers/fields/easy_mde_controller'
 import FilterController from './controllers/filter_controller'
+import FormExitPromptController from './controllers/form_exit_prompt_controller'
 import HiddenInputController from './controllers/hidden_input_controller'
 import InputAutofocusController from './controllers/input_autofocus_controller'
 import ItemSelectAllController from './controllers/item_select_all_controller'
@@ -56,6 +57,7 @@ application.register('copy-to-clipboard', CopyToClipboardController)
 application.register('dashboard-card', DashboardCardController)
 application.register('date-time-filter', DateTimeFilterController)
 application.register('filter', FilterController)
+application.register('form-exit-prompt', FormExitPromptController)
 application.register('panel-refresh', PanelRefreshController)
 application.register('hidden-input', HiddenInputController)
 application.register('input-autofocus', InputAutofocusController)

app/javascript/js/controllers/form_exit_prompt_controller.js

@@ -0,0 +1,58 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['form']
+
+  connect() {
+    this.isDirty = false
+
+    // for select tags
+    this.formTarget.addEventListener('change', this.trackChanges.bind(this))
+    // for all other input fields
+    this.formTarget.addEventListener('input', this.trackChanges.bind(this))
+
+    // in most cases this event will be triggered because Turbo prevents full page reload on navigation
+    window.addEventListener(
+      'turbo:before-visit',
+      this.preventTurboNavigation.bind(this),
+    )
+    window.addEventListener('beforeunload', this.preventFullPageNavigation.bind(this))
+  }
+
+  disconnect() {
+    window.removeEventListener(
+      'turbo:before-visit',
+      this.preventTurboNavigation.bind(this),
+    )
+    window.removeEventListener(
+      'beforeunload',
+      this.preventFullPageNavigation.bind(this),
+    )
+  }
+
+  trackChanges() {
+    this.isDirty = true
+  }
+
+  preventTurboNavigation(event) {
+    if (this.isDirty) {
+      const message = 'Are you sure you want to navigate away from the page? You will lose all your changes.'
+
+      if (window.confirm(message)) {
+        this.isDirty = false
+      } else {
+        event.preventDefault()
+      }
+    }
+  }
+
+  preventFullPageNavigation(event) {
+    if (this.isDirty) {
+      event.preventDefault()
+
+      // for legacy browsers support
+      // see: https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
+      event.returnValue = 'Are you sure you want to navigate away from the page? You will lose all your changes.'
+    }
+  }
+}