Remove unused LinkController

See #11736

CHANGELOG.txt

@@ -70,6 +70,7 @@ Changelog
  * Maintenance: Add support for for a `delay` value in `TagController` to debounce async autocomplete tag fetch requests (Aayushman Singh)
  * Maintenance: Add unit tests, Storybook stories & JSDoc items for the Stimulus `DrilldownController` (Srishti Jaiswal)
  * Maintenance: Enhance sidebar preview performance by eliminating duplicate asset loads on preview error (Sage Abdullah)
+ * Maintenance: Remove unused `LinkController` (`w-link`) (Sage Abdullah)
 
 
 6.3.2 (xx.xx.xxxx) - IN DEVELOPMENT

client/src/controllers/LinkController.test.js

@@ -1,429 +0,0 @@
-import { Application } from '@hotwired/stimulus';
-import { LinkController } from './LinkController';
-
-describe('LinkController', () => {
-  let app;
-  const oldWindowLocation = window.location;
-
-  const setWindowLocation = (url) => {
-    delete window.location;
-    window.location = new URL(url);
-  };
-
-  beforeEach(() => {
-    app = Application.start();
-    app.register('w-link', LinkController);
-  });
-
-  afterEach(() => {
-    app?.stop();
-    jest.clearAllMocks();
-    window.location = oldWindowLocation;
-  });
-
-  describe('basic behavior on connect', () => {
-    it('should reflect all params by default', async () => {
-      setWindowLocation(
-        'http://localhost:8000/admin/pages/?foo=bar&foo=baz&hello=&world=ok',
-      );
-      expect(window.location.href).toEqual(
-        'http://localhost:8000/admin/pages/?foo=bar&foo=baz&hello=&world=ok',
-      );
-
-      document.body.innerHTML = `
-        <a
-          id="link"
-          href="/admin/something/"
-          data-controller="w-link"
-        >
-          Reflective link
-        </a>
-      `;
-
-      // Trigger next browser render cycle
-      await Promise.resolve();
-
-      // All params are reflected as-is, including multi-value and empty params
-      // and the relative URL is resolved against the current URL
-      expect(document.getElementById('link').href).toEqual(
-        'http://localhost:8000/admin/something/?foo=bar&foo=baz&hello=&world=ok',
-      );
-      // The current URL is not changed
-      expect(window.location.href).toEqual(
-        'http://localhost:8000/admin/pages/?foo=bar&foo=baz&hello=&world=ok',
-      );
-    });
-
-    it('should only apply params in reflect-keys-value', async () => {
-      setWindowLocation(
-        'http://localhost:8000/admin/pages/?foo=bar&foo=baz&hello=&world=ok',
-      );
-      expect(window.location.href).toEqual(
-        'http://localhost:8000/admin/pages/?foo=bar&foo=baz&hello=&world=ok',
-      );
-
-      document.body.innerHTML = `
-        <a
-          id="link"
-          href="/admin/something/"
-          data-controller="w-link"
-          data-w-link-reflect-keys-value='["foo", "hello"]'
-        >
-          Selectively reflective link
-        </a>
-      `;
-
-      // Trigger next browser render cycle
-      await Promise.resolve();
-
-      // Only the specified params are reflected
-      expect(document.getElementById('link').href).toEqual(
-        'http://localhost:8000/admin/something/?foo=bar&foo=baz&hello=',
-      );
-      // The current URL is not changed
-      expect(window.location.href).toEqual(
-        'http://localhost:8000/admin/pages/?foo=bar&foo=baz&hello=&world=ok',
-      );
-    });
-
-    it('should preserve params in preserve-keys-value', async () => {
-      setWindowLocation(
-        'http://localhost:8000/admin/pages/?foo=bar&foo=baz&hello=&world=ok&a=z',
-      );
-      expect(window.location.href).toEqual(
-        'http://localhost:8000/admin/pages/?foo=bar&foo=baz&hello=&world=ok&a=z',
-      );
-
-      document.body.innerHTML = `
-        <a
-          id="link"
-          href="/admin/something/?export=xlsx&export=csv&foo=fii&number=1&a=b"
-          data-controller="w-link"
-          data-w-link-preserve-keys-value='["export", "foo"]'
-        >
-          Reflective link with preserve-keys-value
-        </a>
-      `;
-
-      // Trigger next browser render cycle
-      await Promise.resolve();
-
-      // behavior:
-      // - `export` param preserved (multi-value, not in new URL)
-      // - `foo` param preserved (single value, available in new URL)
-      // - `number` param not preserved (single value, not in new URL)
-      // - `hello` param reflected (empty value, only available in new URL)
-      // - `world` param reflected (single value, only available in new URL)
-      // - `a` param reflected (single value, available in both, taken from new URL)
-      expect(document.getElementById('link').href).toEqual(
-        'http://localhost:8000/admin/something/?hello=&world=ok&a=z&export=xlsx&export=csv&foo=fii',
-      );
-      // The current URL is not changed
-      expect(window.location.href).toEqual(
-        'http://localhost:8000/admin/pages/?foo=bar&foo=baz&hello=&world=ok&a=z',
-      );
-    });
-
-    it('should reflect only the keys in reflect-keys-value and keep keys in preserve-keys-value', async () => {
-      setWindowLocation(
-        'http://localhost:8000/admin/pages/?foo=bar&foo=baz&hello=&world=ok&a=z',
-      );
-      expect(window.location.href).toEqual(
-        'http://localhost:8000/admin/pages/?foo=bar&foo=baz&hello=&world=ok&a=z',
-      );
-
-      document.body.innerHTML = `
-        <a
-          id="link"
-          href="/admin/something/?export=xlsx&export=csv&foo=fii&number=1&a=b"
-          data-controller="w-link"
-          data-w-link-reflect-keys-value='["hello", "a"]'
-          data-w-link-preserve-keys-value='["export", "foo"]'
-        >
-          Reflective link with reflect-keys-value and preserve-keys-value
-        </a>
-      `;
-
-      // Trigger next browser render cycle
-      await Promise.resolve();
-
-      // behavior:
-      // - `export` param preserved (multi-value, not in new URL)
-      // - `foo` param preserved (single value, available in new URL)
-      // - `number` param not preserved (single value, not in new URL)
-      // - `hello` param reflected (empty value, only available in new URL)
-      // - `world` param not reflected (single value, only available in new URL)
-      // - `a` param reflected (single value, available in both, taken from new URL)
-      expect(document.getElementById('link').href).toEqual(
-        'http://localhost:8000/admin/something/?hello=&a=z&export=xlsx&export=csv&foo=fii',
-      );
-      // The current URL is not changed
-      expect(window.location.href).toEqual(
-        'http://localhost:8000/admin/pages/?foo=bar&foo=baz&hello=&world=ok&a=z',
-      );
-    });
-  });
-
-  describe('handling an event with requestUrl in the detail', () => {
-    it('should reflect all params by default', async () => {
-      expect(window.location.href).toEqual('http://localhost/');
-
-      document.body.innerHTML = `
-        <a
-          id="link"
-          href="/admin/something/"
-          data-controller="w-link"
-          data-action="w-swap:reflect@document->w-link#setParams"
-        >
-          Reflective link
-        </a>
-      `;
-
-      // Trigger next browser render cycle
-      await Promise.resolve();
-
-      document.dispatchEvent(
-        new CustomEvent('w-swap:reflect', {
-          detail: {
-            requestUrl:
-              'http://localhost:8000/admin/pages/?foo=bar&foo=baz&hello=&world=ok',
-          },
-        }),
-      );
-
-      // All params are reflected as-is, including multi-value and empty params
-      // and the relative URL is resolved against the current URL
-      expect(document.getElementById('link').href).toEqual(
-        'http://localhost/admin/something/?foo=bar&foo=baz&hello=&world=ok',
-      );
-    });
-
-    it('should only apply params in reflect-keys-value', async () => {
-      expect(window.location.href).toEqual('http://localhost/');
-
-      document.body.innerHTML = `
-        <a
-          id="link"
-          href="/admin/something/"
-          data-controller="w-link"
-          data-w-link-reflect-keys-value='["foo", "hello"]'
-          data-action="w-swap:reflect@document->w-link#setParams"
-        >
-          Selectively reflective link
-        </a>
-      `;
-
-      // Trigger next browser render cycle
-      await Promise.resolve();
-
-      document.dispatchEvent(
-        new CustomEvent('w-swap:reflect', {
-          detail: {
-            requestUrl:
-              'http://localhost:8000/admin/pages/?foo=bar&foo=baz&hello=&world=ok',
-          },
-        }),
-      );
-
-      // Only the specified params are reflected
-      expect(document.getElementById('link').href).toEqual(
-        'http://localhost/admin/something/?foo=bar&foo=baz&hello=',
-      );
-    });
-
-    it('should preserve params in preserve-keys-value', async () => {
-      expect(window.location.href).toEqual('http://localhost/');
-
-      document.body.innerHTML = `
-        <a
-          id="link"
-          href="/admin/something/?export=xlsx&export=csv&foo=fii&number=1&a=b"
-          data-controller="w-link"
-          data-w-link-preserve-keys-value='["export", "foo"]'
-          data-action="w-swap:reflect@document->w-link#setParams"
-        >
-          Reflective link with preserve-keys-value
-        </a>
-      `;
-
-      // Trigger next browser render cycle
-      await Promise.resolve();
-
-      document.dispatchEvent(
-        new CustomEvent('w-swap:reflect', {
-          detail: {
-            requestUrl:
-              'http://localhost:8000/admin/pages/?foo=bar&foo=baz&hello=&world=ok&a=z',
-          },
-        }),
-      );
-
-      // behavior:
-      // - `export` param preserved (multi-value, not in new URL)
-      // - `foo` param preserved (single value, available in new URL)
-      // - `number` param not preserved (single value, not in new URL)
-      // - `hello` param reflected (empty value, only available in new URL)
-      // - `world` param reflected (single value, only available in new URL)
-      // - `a` param reflected (single value, available in both, taken from new URL)
-      expect(document.getElementById('link').href).toEqual(
-        'http://localhost/admin/something/?hello=&world=ok&a=z&export=xlsx&export=csv&foo=fii',
-      );
-    });
-
-    it('should reflect only the keys in reflect-keys-value and keep keys in preserve-keys-value', async () => {
-      expect(window.location.href).toEqual('http://localhost/');
-
-      document.body.innerHTML = `
-        <a
-          id="link"
-          href="/admin/something/?export=xlsx&export=csv&foo=fii&number=1&a=b"
-          data-controller="w-link"
-          data-w-link-reflect-keys-value='["hello", "a"]'
-          data-w-link-preserve-keys-value='["export", "foo"]'
-          data-action="w-swap:reflect@document->w-link#setParams"
-        >
-          Reflective link with reflect-keys-value and preserve-keys-value
-        </a>
-      `;
-
-      // Trigger next browser render cycle
-      await Promise.resolve();
-
-      document.dispatchEvent(
-        new CustomEvent('w-swap:reflect', {
-          detail: {
-            requestUrl:
-              'http://localhost:8000/admin/pages/?foo=bar&foo=baz&hello=&world=ok&a=z',
-          },
-        }),
-      );
-
-      // behavior:
-      // - `export` param preserved (multi-value, not in new URL)
-      // - `foo` param preserved (single value, available in new URL)
-      // - `number` param not preserved (single value, not in new URL)
-      // - `hello` param reflected (empty value, only available in new URL)
-      // - `world` param not reflected (single value, only available in new URL)
-      // - `a` param reflected (single value, available in both, taken from new URL)
-      expect(document.getElementById('link').href).toEqual(
-        'http://localhost/admin/something/?hello=&a=z&export=xlsx&export=csv&foo=fii',
-      );
-    });
-  });
-
-  describe('handling an event without requestUrl in the detail', () => {
-    it('should not reflect any params', async () => {
-      expect(window.location.href).toEqual('http://localhost/');
-
-      document.body.innerHTML = `
-        <a
-          id="link"
-          href="/admin/something/"
-          data-controller="w-link"
-          data-action="custom:event@document->w-link#setParams"
-        >
-          Reflective link
-        </a>
-      `;
-
-      // Trigger next browser render cycle
-      await Promise.resolve();
-
-      document.dispatchEvent(
-        new CustomEvent('custom:event', {
-          detail: {
-            something: 'else',
-          },
-        }),
-      );
-
-      // Should not change the href
-      expect(document.getElementById('link').href).toEqual(
-        'http://localhost/admin/something/',
-      );
-    });
-  });
-
-  describe('using a custom attr-name-value for the link', () => {
-    it('should reflect the params from the current URL to the link in the specified attribute', async () => {
-      setWindowLocation(
-        'http://localhost:8000/admin/pages/?foo=bar&foo=baz&hello=&world=ok&a=z',
-      );
-      expect(window.location.href).toEqual(
-        'http://localhost:8000/admin/pages/?foo=bar&foo=baz&hello=&world=ok&a=z',
-      );
-
-      document.body.innerHTML = `
-        <button
-          id="button"
-          data-target-url="/admin/something/?export=xlsx&export=csv&foo=fii&number=1&a=b"
-          data-controller="w-link"
-          data-w-link-attr-name-value="data-target-url"
-          data-w-link-reflect-keys-value='["hello", "a"]'
-          data-w-link-preserve-keys-value='["export", "foo"]'
-        >
-          Reflective link with attr-name-value, reflect-keys-value, and preserve-keys-value
-        </button>
-      `;
-
-      // Trigger next browser render cycle
-      await Promise.resolve();
-
-      // behavior:
-      // - `export` param preserved (multi-value, not in new URL)
-      // - `foo` param preserved (single value, available in new URL)
-      // - `number` param not preserved (single value, not in new URL)
-      // - `hello` param reflected (empty value, only available in new URL)
-      // - `world` param not reflected (single value, only available in new URL)
-      // - `a` param reflected (single value, available in both, taken from new URL)
-      expect(document.getElementById('button').dataset.targetUrl).toEqual(
-        'http://localhost:8000/admin/something/?hello=&a=z&export=xlsx&export=csv&foo=fii',
-      );
-      // The current URL is not changed
-      expect(window.location.href).toEqual(
-        'http://localhost:8000/admin/pages/?foo=bar&foo=baz&hello=&world=ok&a=z',
-      );
-    });
-
-    it("should reflect the params from the event's requestUrl to the link in the specified attribute", async () => {
-      expect(window.location.href).toEqual('http://localhost/');
-
-      document.body.innerHTML = `
-        <button
-          id="button"
-          data-target-url="/admin/something/?export=xlsx&export=csv&foo=fii&number=1&a=b"
-          data-controller="w-link"
-          data-w-link-attr-name-value="data-target-url"
-          data-w-link-reflect-keys-value='["hello", "a"]'
-          data-w-link-preserve-keys-value='["export", "foo"]'
-          data-action="w-swap:reflect@document->w-link#setParams"
-        >
-          Reflective link with attr-name-value, reflect-keys-value, and preserve-keys-value
-        </button>
-      `;
-
-      // Trigger next browser render cycle
-      await Promise.resolve();
-
-      document.dispatchEvent(
-        new CustomEvent('w-swap:reflect', {
-          detail: {
-            requestUrl:
-              'http://localhost:8000/admin/pages/?foo=bar&foo=baz&hello=&world=ok&a=z',
-          },
-        }),
-      );
-
-      // behavior:
-      // - `export` param preserved (multi-value, not in new URL)
-      // - `foo` param preserved (single value, available in new URL)
-      // - `number` param not preserved (single value, not in new URL)
-      // - `hello` param reflected (empty value, only available in new URL)
-      // - `world` param not reflected (single value, only available in new URL)
-      // - `a` param reflected (single value, available in both, taken from new URL)
-      expect(document.getElementById('button').dataset.targetUrl).toEqual(
-        'http://localhost/admin/something/?hello=&a=z&export=xlsx&export=csv&foo=fii',
-      );
-    });
-  });
-});

client/src/controllers/LinkController.ts

@@ -1,85 +0,0 @@
-import { Controller } from '@hotwired/stimulus';
-
-/**
- * Adds the ability for the controlled element to reflect the URL's query parameters
- * from an event or the current URL into the window.location so that dynamic updates
- * to listings can be available on refreshing or other internal links.
- *
- * @example - Reflecting the URL's query parameters
- * <a href="/?q=1" data-controller="w-link" data-w-link-reflect-keys-value="['q']"></a>
- */
-export class LinkController extends Controller<HTMLElement> {
-  static values = {
-    attrName: { default: 'href', type: String },
-    preserveKeys: { default: [], type: Array },
-    reflectKeys: { default: ['__all__'], type: Array },
-  };
-
-  /** Attribute on the controlled element containing the URL string. */
-  declare attrNameValue: string;
-  /** URL param keys that will be kept in the current location's URL. */
-  declare preserveKeysValue: string[];
-  /** URL param keys to be added to the location URL from the source URL. */
-  declare reflectKeysValue: string[];
-
-  get url() {
-    return new URL(
-      this.element.getAttribute(this.attrNameValue) || '',
-      window.location.href,
-    );
-  }
-
-  connect() {
-    this.setParams();
-  }
-
-  get reflectAll() {
-    return this.reflectKeysValue.includes('__all__');
-  }
-
-  setParamsFromURL(url: URL) {
-    // New params to build the new URL
-    const newParams = new URLSearchParams();
-    const reflectAll = this.reflectAll;
-
-    const sourceParams = url.searchParams;
-    sourceParams.forEach((value, key) => {
-      // Skip the key if
-      if (
-        // it's a Wagtail internal param, or
-        key.startsWith('_w_') ||
-        // we want to preserve it from the current URL, or
-        this.preserveKeysValue.includes(key) ||
-        // we don't want to reflect it to the new URL
-        (!reflectAll && !this.reflectKeysValue.includes(key))
-      ) {
-        return;
-      }
-      newParams.append(key, value);
-    });
-
-    // Add the ones we want to preserve from the current URL to the new params
-    const currentUrl = this.url;
-    currentUrl.searchParams.forEach((value, key) => {
-      if (this.preserveKeysValue.includes(key)) {
-        newParams.append(key, value);
-      }
-    });
-
-    currentUrl.search = newParams.toString();
-    this.element.setAttribute(this.attrNameValue, currentUrl.toString());
-  }
-
-  setParams(event?: CustomEvent<{ requestUrl?: string }>) {
-    if (!event) {
-      this.setParamsFromURL(new URL(window.location.href));
-      return;
-    }
-
-    if (!event.detail?.requestUrl) return;
-
-    this.setParamsFromURL(
-      new URL(event.detail.requestUrl, window.location.href),
-    );
-  }
-}

client/src/controllers/index.ts

@@ -14,7 +14,6 @@ import { DrilldownController } from './DrilldownController';
 import { DropdownController } from './DropdownController';
 import { InitController } from './InitController';
 import { KeyboardController } from './KeyboardController';
-import { LinkController } from './LinkController';
 import { OrderableController } from './OrderableController';
 import { PreviewController } from './PreviewController';
 import { ProgressController } from './ProgressController';
@@ -51,7 +50,6 @@ export const coreControllerDefinitions: Definition[] = [
   { controllerConstructor: DropdownController, identifier: 'w-dropdown' },
   { controllerConstructor: InitController, identifier: 'w-init' },
   { controllerConstructor: KeyboardController, identifier: 'w-kbd' },
-  { controllerConstructor: LinkController, identifier: 'w-link' },
   { controllerConstructor: OrderableController, identifier: 'w-orderable' },
   { controllerConstructor: PreviewController, identifier: 'w-preview' },
   { controllerConstructor: ProgressController, identifier: 'w-progress' },

docs/releases/6.4.md

@@ -89,6 +89,7 @@ depth: 1
  * Add support for for a `delay` value in `TagController` to debounce async autocomplete tag fetch requests (Aayushman Singh)
  * Add unit tests, Storybook stories & JSDoc items for the Stimulus `DrilldownController` (Srishti Jaiswal)
  * Enhance sidebar preview performance by eliminating duplicate asset loads on preview error (Sage Abdullah)
+ * Remove unused `LinkController` (`w-link`) (Sage Abdullah)
 
 
 ## Upgrade considerations - changes affecting all projects