From dd876dfd8dd6fb8726dbb214ef7ac4b424973cdb Mon Sep 17 00:00:00 2001
From: Gaetan Craig-Riou <gaetan.riou@gmail.com>
Date: Wed, 1 Feb 2023 09:24:38 +1100
Subject: [PATCH] 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.
---
 .../controllers/unsaved_changes_controller.js | 29 ++++++++++++++++++-
 .../unsaved_changes_controller_test.js        | 26 +++++++++++++----
 2 files changed, 48 insertions(+), 7 deletions(-)

diff --git a/app/webpacker/controllers/unsaved_changes_controller.js b/app/webpacker/controllers/unsaved_changes_controller.js
index fca6da9f45..c458921065 100644
--- a/app/webpacker/controllers/unsaved_changes_controller.js
+++ b/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']");
+  }
 }
diff --git a/spec/javascripts/stimulus/unsaved_changes_controller_test.js b/spec/javascripts/stimulus/unsaved_changes_controller_test.js
index 6b5ca0c707..b5748066c9 100644
--- a/spec/javascripts/stimulus/unsaved_changes_controller_test.js
+++ b/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)
     })
   })