Allow DismissibleController to patch non-boolean values via params

client/src/controllers/DismissibleController.test.js

@@ -33,6 +33,10 @@ describe('DismissibleController', () => {
     application.register('w-dismissible', DismissibleController);
   });
 
+  afterEach(() => {
+    global.fetch.mockClear();
+  });
+
   it("should add a 'dismissed' class and attribute when the dismiss button is clicked", () => {
     const button = document.querySelector('button');
     const mainContent = document.querySelector('#main-content');
@@ -68,6 +72,53 @@ describe('DismissibleController', () => {
       mode: 'same-origin',
     });
   });
+
+  it('should toggle the client-side state without calling the server if the ID is missing', async () => {
+    const button = document.querySelector('button');
+    const mainContent = document.querySelector('#main-content');
+    mainContent.removeAttribute('data-w-dismissible-id-value');
+    await Promise.resolve();
+
+    expect(mainContent.classList).toHaveLength(0);
+    expect(
+      mainContent.getAttribute('data-w-dismissible-dismissed-value'),
+    ).toBeFalsy();
+    expect(mainContent.classList).not.toContain('w-dismissible--dismissed');
+    expect(global.fetch).not.toHaveBeenCalled();
+
+    button.click();
+
+    expect(mainContent.classList).toContain('w-dismissible--dismissed');
+    expect(mainContent.getAttribute('data-w-dismissible-dismissed-value')).toBe(
+      'true',
+    );
+    expect(global.fetch).not.toHaveBeenCalled();
+  });
+
+  it('should allow customizing the update value via params', async () => {
+    expect.assertions(1);
+
+    const mainContent = document.querySelector('#main-content');
+    mainContent.setAttribute(
+      'data-w-dismissible-id-value',
+      'last_upgrade_check',
+    );
+    const button = document.querySelector('button');
+    button.setAttribute('data-w-dismissible-value-param', '6.3.1');
+    await Promise.resolve();
+
+    button.click();
+
+    await expect(global.fetch).toHaveBeenCalledWith('/admin/dismissibles/', {
+      method: 'PATCH',
+      headers: {
+        'Content-Type': 'application/json',
+        'x-xsrf-token': 'potato',
+      },
+      body: JSON.stringify({ last_upgrade_check: '6.3.1' }),
+      mode: 'same-origin',
+    });
+  });
 });
 
 describe('updateDismissibles', () => {

client/src/controllers/DismissibleController.ts

@@ -15,7 +15,7 @@ import { WAGTAIL_CONFIG } from '../config/wagtailConfig';
  * updateDismissibles(data, wagtailConfig);
  */
 export const updateDismissibles = (
-  data: Record<string, boolean>,
+  data: Record<string, boolean | string>,
 ): Promise<Response> =>
   fetch(WAGTAIL_CONFIG.ADMIN_URLS?.DISMISSIBLES, {
     method: 'PATCH',
@@ -59,10 +59,24 @@ export class DismissibleController extends Controller<HTMLElement> {
    * appropriate class and data attribute optimistically. Each dismissible
    * defines how it uses (or not) these indicators.
    */
-  toggle(): void {
-    if (!this.idValue) return;
+  toggle(event?: Event & { params?: { value?: boolean | string } }): void {
     this.element.classList.add(this.dismissedClass);
     this.dismissedValue = true;
-    updateDismissibles({ [this.idValue]: true });
+    this.patch(event);
+  }
+
+  /**
+   * Send a PATCH request to the server to update the dismissible state for the
+   * given ID and update value.
+   *
+   * @param event - The event that triggered the patch, with optional params.
+   * The param can technically be any value, but we currently only use booleans
+   * and strings.
+   */
+  patch(event?: Event & { params?: { value?: boolean | string } }): void {
+    if (!this.idValue) return;
+    updateDismissibles({
+      [this.idValue]: event?.params?.value ?? this.dismissedValue,
+    });
   }
 }