Add a deactivate() method to ProgressController

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)

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

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) {
+    this.deactivate();
-      clearTimeout(this.timer);
-    }
   }
 }

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