Order cycle form, disable the save and save and back button on page load

Buttons will be enabled once the form has been interacted with.
Update unsavedChanges stimulus controller to handle this. It should
still be generic enought that it can be reused.

app/webpacker/controllers/unsaved_changes_controller.js

@@ -16,8 +16,19 @@ import { Controller } from "stimulus";
 // You can also combine the two actions
 //
 export default class extends Controller {
+  connect() {
+    // disable submit button when first loading the page
+    if (!this.isFormChanged()) {
+      this.disableButtons();
+    }
+  }
+
   formIsChanged(event) {
-    this.setChanged("true");
+    // We only do something if the form hasn't already been changed
+    if (!this.isFormChanged()) {
+      this.setChanged("true");
+      this.enableButtons();
+    }
   }
 
   leavingPage(event) {
@@ -51,4 +62,20 @@ export default class extends Controller {
   isFormChanged() {
     return this.data.get("changed") == "true";
   }
+
+  enableButtons() {
+    this.submitButtons().forEach((button) => {
+      button.disabled = false;
+    });
+  }
+
+  disableButtons() {
+    this.submitButtons().forEach((button) => {
+      button.disabled = true;
+    });
+  }
+
+  submitButtons() {
+    return this.element.querySelectorAll("input[type='submit']");
+  }
 }

spec/javascripts/stimulus/unsaved_changes_controller_test.js

@@ -14,23 +14,37 @@ describe("UnsavedChangesController", () => {
   beforeEach(() => {
     document.body.innerHTML = `
       <form id="test-form" data-controller="unsaved-changes" data-action="beforeunload@window->unsaved-changes#leavingPage turbolinks:before-visit@window->unsaved-changes#leavingPage" data-unsaved-changes-changed="false">
-        <input
-          id="test-checkbox"
-          type="checkbox"
-          data-action="change->unsaved-changes#formIsChanged">
+        <input id="test-checkbox" type="checkbox" data-action="change->unsaved-changes#formIsChanged"/>
+        <input id="test-submit" type="submit"/>
       </form>
     `
   })
 
+  describe("#connect", () => {
+    it("disables any submit button", () => {
+      const submit = document.getElementById("test-submit")
+
+      expect(submit.disabled).toBe(true)
+    })  
+  })
+
   describe("#formIsChanged", () => {
     it("changed is set to true", () => {
-      const form = document.getElementById("test-form")
       const checkbox = document.getElementById("test-checkbox")
+      const form = document.getElementById("test-form")
 
       checkbox.click()
 
-      expect(form.dataset.unsavedChangesChanged).toBe('true')
+      expect(form.dataset.unsavedChangesChanged).toBe("true")
+    })
 
+    it("enables any submit button", () => {
+      const checkbox = document.getElementById("test-checkbox")
+      const submit = document.getElementById("test-submit")
+
+      checkbox.click()
+
+      expect(submit.disabled).toBe(false)
     })
   })