From d0647f328861ed6cb5b8527ce1c01c6e5b32a98b Mon Sep 17 00:00:00 2001
From: Alex Morega <alex.morega@torchbox.com>
Date: Wed, 19 Jun 2024 15:18:12 +0300
Subject: [PATCH] Add a deactivate() method to ProgressController

---
 CHANGELOG.txt                                 |  1 +
 .../controllers/ProgressController.test.js    | 35 ++++++++++++++++++-
 client/src/controllers/ProgressController.ts  | 12 +++++--
 docs/releases/6.2.md                          |  1 +
 4 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.txt b/CHANGELOG.txt
index 88c4cab1c4fe..d08efc7ca872 100644
--- a/CHANGELOG.txt
+++ b/CHANGELOG.txt
@@ -16,6 +16,7 @@ Changelog
  * Adopt more compact representation for StreamField definitions in migrations (Matt Westcott)
  * Implement a new design for locale labels in listings (Albina Starykova)
  * Add alt text validation rule in the accessibility checker (Albina Starykova)
+ * Add a `deactivate()` method to `ProgressController` (Alex Morega)
  * Fix: Make `WAGTAILIMAGES_CHOOSER_PAGE_SIZE` setting functional again (Rohit Sharma)
  * Fix: Enable `richtext` template tag to convert lazy translation values (Benjamin Bach)
  * Fix: Ensure permission labels on group permissions page are translated where available (Matt Westcott)
diff --git a/client/src/controllers/ProgressController.test.js b/client/src/controllers/ProgressController.test.js
index 1ffa89673165..02ca429e79d3 100644
--- a/client/src/controllers/ProgressController.test.js
+++ b/client/src/controllers/ProgressController.test.js
@@ -6,6 +6,7 @@ jest.useFakeTimers({ legacyFakeTimers: true });
 describe('ProgressController', () => {
   // form submit is not implemented in jsdom
   const mockSubmit = jest.fn((e) => e.preventDefault());
+  let application;
 
   beforeEach(() => {
     document.body.innerHTML = `
@@ -25,7 +26,8 @@ describe('ProgressController', () => {
 
     document.getElementById('form').addEventListener('submit', mockSubmit);
 
-    Application.start().register('w-progress', ProgressController);
+    application = Application.start();
+    application.register('w-progress', ProgressController);
   });
 
   afterEach(() => {
@@ -94,4 +96,35 @@ describe('ProgressController', () => {
     expect(button.getAttribute('disabled')).toBeNull();
     expect(button.classList.contains('button-longrunning-active')).toBe(false);
   });
+
+  it('should return to the original state when deactivate is called', async () => {
+    const button = document.querySelector('.button-longrunning');
+    const label = document.querySelector('#em-el');
+    const controller = application.getControllerForElementAndIdentifier(
+      button,
+      'w-progress',
+    );
+
+    const setTimeoutSpy = jest.spyOn(global, 'setTimeout');
+
+    button.click();
+    jest.advanceTimersByTime(10);
+    await new Promise(queueMicrotask);
+
+    expect(label.textContent).toBe('Loading');
+    expect(button.getAttribute('disabled')).toEqual('');
+    expect(button.classList.contains('button-longrunning-active')).toBe(true);
+    expect(setTimeout).toHaveBeenLastCalledWith(expect.any(Function), 30_000);
+
+    controller.deactivate();
+    await new Promise(queueMicrotask);
+    expect(label.textContent).toBe('Sign in');
+    expect(button.getAttribute('disabled')).toBeNull();
+    expect(button.classList.contains('button-longrunning-active')).toBe(false);
+
+    // Should clear the timeout
+    expect(clearTimeout).toHaveBeenLastCalledWith(
+      setTimeoutSpy.mock.results.at(-1).value,
+    );
+  });
 });
diff --git a/client/src/controllers/ProgressController.ts b/client/src/controllers/ProgressController.ts
index 4769bc942974..6165432e83ee 100644
--- a/client/src/controllers/ProgressController.ts
+++ b/client/src/controllers/ProgressController.ts
@@ -72,6 +72,14 @@ export class ProgressController extends Controller<HTMLButtonElement> {
     });
   }
 
+  deactivate() {
+    this.loadingValue = false;
+
+    if (this.timer) {
+      clearTimeout(this.timer);
+    }
+  }
+
   loadingValueChanged(isLoading: boolean) {
     const activeClass = this.hasActiveClass
       ? this.activeClass
@@ -103,8 +111,6 @@ export class ProgressController extends Controller<HTMLButtonElement> {
   }
 
   disconnect(): void {
-    if (this.timer) {
-      clearTimeout(this.timer);
-    }
+    this.deactivate();
   }
 }
diff --git a/docs/releases/6.2.md b/docs/releases/6.2.md
index a1e7cbe81352..a78f10e376ce 100644
--- a/docs/releases/6.2.md
+++ b/docs/releases/6.2.md
@@ -30,6 +30,7 @@ This feature was implemented by Albina Starykova, with support from the Wagtail
  * Remove reduced opacity for draft page title in listings (Inju Michorius)
  * Adopt more compact representation for StreamField definitions in migrations (Matt Westcott)
  * Implement a new design for locale labels in listings (Albina Starykova)
+ * Add a `deactivate()` method to `ProgressController` (Alex Morega)
 
 
 ### Bug fixes